Frontend developer challenge

[fabiojpegoraro]

Developed a frontend application using NextJs, React, Redux Toolkit, featuring e2e tests with Cypress.

[campofernando]

Hey @fabiojpegoraro! 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.

[Arvo-palma]

Authentication & Authorization
[X] As a user, I want to authenticate using the pre-configured email and password:
[X] Implement fake JWT token generation.
[X] Store token in localStorage.
[X] Include token in API requests headers.
[X] As a user, I want to only access protected routes if I am authenticated.
[X] As a user, I want to logout of the system.
Implemented ✅ . Login, redirection, and logout work as requested with standard error messages and little styling.

[-] As a user, I want to be redirected based on my role:

• Admin -> Admin Dashboard
• Reader -> Events List
  Implemented with Issues ➖ . Logging in as reader or admin redirects to the same event list.

[Arvo-palma]

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.
3. As an admin, I want to delete events.
4. As an admin, I want to view events.
   Implemented ✅ . All requested functions have been implemented, but there is no confirmation before performing irreversible actions such as canceling an edit or deleting an event. There is no error message for failed requests in events list page.

[Arvo-palma]

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

Implemented ✅ . All requested functions were implemented without defects or visualization improvements. There is no error message for failed requests in events list page.

[Arvo-palma]

Technical Requirements

1. Use TypeScript.
2. Use React.
3. Use Next.js.
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.
7. [-] Ensure responsive design for all screen sizes.
8. Ensure correct business logic and behavior with automated unit tests.
   Implemented with Issues ➖. Visual bugs in responsiveness, most styling done inline (without creating styled components).

[Arvo-palma]

Bonus

1. Add e2e tests with Cypress.
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.

[Arvo-palma]

Evaluation

1. Anyone should be able to follow the instructions and run the application.
2. Front-end code is successfully integrated with a fake REST API.
3. Stories were implemented according to the functional requirements.
4. Problem-solving skills and ability to handle ambiguity.
5. Code quality, readability, and maintainability.
6. Code is well-organized and documented.
7. [-] Application layout is responsive. (minor issue)

It's not a project with a pleasing design or impressive features, but it performs what was asked of it, both in terms of functions and technical requirements.