Lucas borges

[LucasLuisBorges]

This PR contains my implementation of the frontend challenge.

It was developed using Next.js and Material UI. I also created a mock API using JSON Server.

[campofernando]

Hello @LucasLuisBorges! Thanks for your submission. Just letting you know that we got your pull request and are in the process of reviewing it. We will soon provide you with our considerations.

[campofernando]

Hey @LucasLuisBorges, thanks for your delivery! Below you'll find our feedback and considerations.

Functional Requirements and User Stories

Authentication & Authorization

1. As a user, I want to authenticate using the pre-configured email and password:
   • Implement fake JWT token generation.
   • Store token in localStorage.
   • Include token in API requests headers.
2. As a user, I want to only access protected routes if I am authenticated.
3. As a user, I want to logout of the system.
4. As a user, I want to be redirected based on my role:
   • Admin -> Admin Dashboard
   • Reader -> Events List

Admin Features (Role: admin)

1. As an admin, I want to create new events with the following information:
   • Event name (required)
   • Date and time (required, must be future date)
   • Location (required)
   • Description (required, min 50 characters)
   • Category (required, select from: Conference, Workshop, Webinar, Networking, Other)
2. As an admin, I want to edit existing event details.
   There was a bug in the implementation that prevented the edition, since the form was loaded empty
3. As an admin, I want to delete events.
4. As an admin, I want to view events.

Reader Features (Role: reader)

1. As a reader, I want to view events.
2. As a reader, I want to view past events separately from upcoming events.
3. As a reader, I want to search and filter events.
4. As a reader, I want to sort events by:
   • Date
   • Name

Technical Requirements

1. Use TypeScript.
2. Use React.
3. Use Next.js Check out to get started.
4. Implement state management using Redux Toolkit.
5. Create a mock REST API using json-server.
6. Use Material UI 6 for styling with custom theme configuration.
   Material 7 was used instead
7. Ensure responsive design for all screen sizes.
   There is no evidence of thorough mobile testing. Login page uses Container maxWidth="sm" which is basic responsive.
8. Ensure correct business logic and behavior with automated unit tests.
   23 tests exist, but coverage is shallow. The tests mostly check static rendering and reducer state — they do not test business logic flows like login→redirect, CRUD operations, search/filter behavior, or role-based access.

Bonus

1. Add e2e tests with Cypress. Check out to get started.

2. Implement role-based route protection using HOCs or middleware.

3. Deploy your application to a cloud provider and provide a link for the running app.

4. Add Storybook documentation for UI components.

5. Anyone should be able to follow the instructions and run the application.

6. Front-end code is successfully integrated with a fake REST API.

7. Stories were implemented according to the functional requirements.

8. Problem-solving skills and ability to handle ambiguity.

9. Code quality, readability, and maintainability.
   The code shows no awareness of maintainability, testability, or architectural patterns. The commit history further confirms no iterative development process.

10. Code is well-organized and documented.

11. Application layout is responsive.

Final assesment

All functional requirements were delivered — authentication, CRUD operations, role-based access, search, filtering, and sorting work correctly. However, we identified the following issues:

Material UI 7 was used instead of the required MUI 6
Test coverage is shallow — only reducers and basic rendering are tested, with no business logic or integration tests
Code duplication across multiple files (categories array, role-redirect logic, error handling boilerplate)
Test data was not cleaned before submission (db.json contains garbage entries)
Single monolithic commit with no iterative development history
Overall: The application is functional but shows gaps in code quality, testing depth, and attention to detail.

Our recruitment team will contact you soon with a final decision.

Best regards.