Implementação solução do desafio frontend

[KauanGodois]

Inicialmente desenvolvi localmente e depois conectei ao fork para manter o histórico organizado.

[amaralc]

Challenge 2: Event Management System - Evaluation

Authentication and User Roles

Pre-configured Users

The system should have two pre-configured users in the json-server database:

1. Admin User — Email: admin@events.com / Password: admin123 / Role: admin
2. Reader User — Email: reader@events.com / Password: reader123 / Role: reader

Both users are correctly configured in db.json 👍

---

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.

   Fake JWT is generated via base64 encoding in src/utils/auth.ts. Token stored in localStorage via authSlice reducer. Axios interceptor in src/services/api.ts attaches Bearer token to all requests. 👍

   Login sends credentials as query params (api.get('/users', { params: { email, password } })) in src/app/login/page.tsx:35-37, which exposes the password in the URL. While this is a mock API, using POST would be more appropriate. 👎

2. As a user, I want to only access protected routes if I am authenticated.

   Implemented via withAuth HOC in src/hocs/withAuth.tsx. Redirects unauthenticated users to /login. Handles hydration correctly for SSR. 👍

3. As a user, I want to logout of the system.

   LogoutButton component in src/components/global/LogoutButton.tsx dispatches logout() action (clears Redux state + localStorage) and redirects to /login. 👍

4. As a user, I want to be redirected based on my role:

   • Admin -> Admin Dashboard
   • Reader -> Events List

   Role-based redirect in src/app/login/page.tsx:59-63: admin goes to /admin/dashboard, reader goes to /events. 👍

---

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)

   All form fields and validations are present in src/components/admin/EventForm.tsx. Future date validation at line 42, min 50 chars at line 52. 👍

   The categories use Portuguese translations (Conferência, Workshop, Seminário, Networking, Outro) instead of the exact English terms from the spec. Notably "Webinar" was translated to "Seminário" (Seminar), which is a different concept. 👎

   The seed data in db.json contains an event with description "Teste description" (17 chars), which would fail the form's own 50-char minimum validation — inconsistent seed data. 👎

2. As an admin, I want to edit existing event details.

   Edit opens the same EventForm dialog pre-filled with existing data via useEventDialog hook. 👍

3. As an admin, I want to delete events.

   Delete with window.confirm confirmation dialog in src/hooks/useEventActions.ts:61. 👍

4. As an admin, I want to view events.

   Events displayed in EventsTable component with name, date, location, category chip, and truncated description. 👍

   No loading state for initial data fetch (only for CRUD actions). The eventsSlice has no rejected case handler — API errors during fetch are silently ignored. 👎

---

Reader Features (Role: reader)

1. As a reader, I want to view events.

   Events displayed as cards via EventCard component in the events page. 👍

2. As a reader, I want to view past events separately from upcoming events.

   useEventFilter hook splits events into upcoming and past arrays. Rendered in separate EventSection components with distinct titles and styling. 👍

   The now date is memoized with an empty dependency array in src/hooks/useEventFilter.ts:15, so it freezes on first render and won't update if the user keeps the page open. Minor issue. 👎

3. As a reader, I want to search and filter events.

   Search by name implemented via EventFilter component. Filters across both upcoming and past sections. 👍

   Only name-based search is available — no category or location filter. The requirement says "search and filter", which could imply additional filter dimensions. 👎

4. As a reader, I want to sort events by:

   • Date
   • Name

   Sort toggle buttons in EventFilter component. Sorting via localeCompare (name) and date comparison in useEventFilter. 👍

---

Technical Requirements

1. Use TypeScript.

   All files are .ts/.tsx. Types are defined in src/types/Event.ts and src/types/User.ts. 👍

2. Use React.

   React 19.2.3. 👍

3. Use Next.js.

   Next.js 16.1.2 with App Router. 👍

4. Implement state management using Redux Toolkit.

   Store configured in src/store/index.ts with authSlice and eventsSlice. Uses createAsyncThunk for async operations. 👍

5. Create a mock REST API using json-server.

   db.json with npm run api script on port 3001. 👍

6. Use Material UI 6 for styling with custom theme configuration.

   Package.json shows @mui/material: ^7.3.7 — MUI 7 is used instead of MUI 6 as the spec requires. 👎

   Custom theme in src/app/theme.ts configures the Manrope font. The theme customization is minimal (only typography/font) — no custom palette, component overrides, or design tokens. 👎

7. Ensure responsive design for all screen sizes.

   Responsive patterns used: direction={{ xs: 'column', sm: 'row' }}, Grid size={{ xs: 12, sm: 6, md: 3 }}, responsive padding p: { xs: 2, md: 4 }. Login page has maxWidth: 420. 👍

8. Ensure correct business logic and behavior with automated unit tests.

   No unit tests found. No .test.* or .spec.* files exist. No Jest configuration. jest and @testing-library/react are listed as devDependencies but never used. 👎

---

Bonus

1. Add e2e tests with Cypress.

   Two test files: cypress/e2e/login.cy.ts (2 tests) and cypress/e2e/events.cy.ts (3 tests). Covers login success/failure, event creation, listing, and search. 👍

   Coverage is basic — no tests for edit, delete, logout, role-based access denial, or sort functionality. 👎

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

   withAuth HOC in src/hocs/withAuth.tsx with optional requiredRole parameter. Admin dashboard uses withAuth(AdminDashboard, 'admin'), events page uses withAuth(EventsPage, 'reader'). 👍

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

   Not implemented.

4. Add Storybook documentation for UI components.

   Not implemented.

---

Evaluation Criteria

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

   Comprehensive README.md with step-by-step instructions, troubleshooting section, and available commands table. 👍

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

   Axios client configured with json-server base URL, CRUD operations via Redux async thunks. 👍

3. Stories were implemented according to the functional requirements.

   Most user stories are implemented. Key gaps: categories don't match spec (Webinar vs Seminário), MUI version mismatch, no unit tests. 👎

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

   Added extras beyond spec: event statistics dashboard, metric cards with hover animations, character counter for description field. 👍

5. Code quality, readability, and maintainability.

   Good separation of concerns with custom hooks (useEventActions, useEventDialog, useEventFilter), utility functions, typed interfaces. 👍

   AuthInitializer in src/app/providers.tsx:11-25 has a hydration check that renders the same content in both branches — the isHydrated state is effectively a no-op. 👎

   catch (err: any) used in multiple places instead of proper error typing. 👎

6. Code is well-organized and documented.

   Clear folder structure (components, hooks, store, services, types, utils). README documents the project structure thoroughly. 👍

7. Application layout is responsive.

   MUI responsive breakpoints used throughout. 👍