1. Context
• Company: Argent Bank, an online neobank.
• Team: Sébastien (front-end), project manager (Mila), CTO (Avery), backend already available (Swagger provided).
• Phase 1 deliverables: responsive React app, authentication, profile page, username update, Redux for global state, green-friendly integration and reusable components.
• Starting point: static HTML/CSS for Home, Sign-in, Profile.
2. Need
• Turn static mockups into a dynamic and secure React application.
• Integrate the new authentication system with the existing API.
• Deliver a smooth, accessible, and high-performance experience from the first release.
3. Client / Users
• Argent Bank end users who need access to their dashboard.
• Product team (Mila) for tracking and prioritization via GitHub Issues.
• CTO (Avery) to ensure technical and security standards are met.
4. Goals
4.1 Functional
• Browse the home page.
• Sign in (with error handling).
• Sign out.
• Access the Profile page only after authentication.
• Display profile information; allow editing the username.
4.2 Technical
• Manage global state with Redux.
• Follow green coding and reusability best practices.
• Cover critical flows with tests.
5. Constraints / Challenges
• Time: tight deadline.
• Technical:
- Existing API (Swagger contract must be respected).
- Token security (no refresh if not supported; avoid risky storage).
- Protected routing and robust error handling (401/403).
• Design:
- Pixel-accurate styling based on provided assets; reusable components.
- Accessibility (keyboard navigation, ARIA, focus management).
• Green code:
- Optimized images (weight/dimensions).
- Lightweight bundle, code splitting, minimal dependencies.
6. Process / Methodology
6.1 Analysis
• Review Swagger documentation and map required endpoints:
- Auth: POST /login (JWT token).
- Profile: GET/POST/PUT /user/profile (Bearer token) — per repo contract.
• User flows: Home → Sign-in → Profile → Edit username → Logout.
• Minimal front-end data model: auth.token, user.profile {firstName, lastName, userName}.
6.2 Breakdown into GitHub issues
• Project setup + tooling.
• Home integration.
• Routing and pages.
• Auth (form, errors, token, “Remember me”).
• Protected routes.
• Profile (fetch, display).
• Username editing (form, success/errors).
• Accessibility.
• Performance/green optimizations.
• Tests (unit/integration).
6.3 Architecture & logic
• Structure: see GitHub repo.
• Routing: React Router 6 (Home “/”, Sign-in “/login”, Profile “/profile”).
• ProtectedRoute: redirects to /login if there is no token.
6.4 Technical choices (rationale)
• React + Redux Toolkit: simple slices, thunks for API calls, future scalability (transactions).
• Token persistence:
- Preferred: httpOnly cookie if the backend supports it.
- Otherwise: in-memory storage + sessionStorage; “Remember me” → localStorage (with internal security warning and expiration).
• API calls: Axios or a centralized fetch wrapper; 401 interceptors → logout or redirect to login.
• Forms: controlled (React), lightweight validation.
• Errors: clear messages (e.g., “Incorrect credentials”), loading states, disable buttons during requests.
• Green optimizations:
- Per-page code splitting (lazy + Suspense).
- Images: WebP/AVIF when possible, responsive sizes, <img loading="lazy">.
- Styling: reuse existing CSS; no heavy UI library; custom components.
- Minimal dependencies; memoization (React.memo/useMemo) only when needed.
• Accessibility:
- Explicit labels, aria-live for errors.
- Focus management after navigation and after errors.
6.5 Main flows
• Login
- Enter email/password → POST /login → on success: store token, redirect to /profile → on failure: show error message.
• Profile loading
- On /profile mount, if token → GET /user/profile → display data.
• Username editing
- “Edit Username” form → PUT /user/profile → on success: update store + confirmation → on failure: message + rollback if needed.
• Logout
- Clear token + user state → redirect to /.
6.6 Tests & quality
• Unit tests: Redux slices (reducers), utilities.
• Integration tests: SignIn (error/success), ProtectedRoute, Profile (fetch + username update).
• MSW (Mock Service Worker) to simulate the API in tests.
• Lint/format: ESLint + Prettier; hooks rules; commit hooks (lint-staged).
7. Analysis
• Swagger review and endpoint mapping (auth + profile), defining critical journeys and a minimal state model to keep complexity low while maintaining security and enabling future scalability (transactions).
8. Technical decisions
• React + Redux Toolkit for predictable, extensible state management.
• Token persistence prioritizing httpOnly cookies; otherwise memory + sessionStorage / localStorage with “Remember me”.
• Centralized network layer (Axios/fetch) with 401 interceptors, controlled forms, and explicit error messages.
• Green optimizations (code splitting, WebP/AVIF, lazy loading) and accessibility (semantic HTML, aria-live, focus).
9. Resolution logic
• Protected routing, profile fetch after login, username edit via PUT, then store update + user feedback; systematic error handling and logout on 401.
10. Stack used
• Front: React 18, React Router 6, Redux Toolkit.
• Network: Axios (or Fetch with a wrapper).
• Build: Vite (fast dev server, lightweight bundle).
• Quality: ESLint, Prettier, TypeScript (optional depending on the project requirements).
• Testing: Jest + React Testing Library, MSW; Cypress (optional).
• CI: GitHub Actions (lint + tests) — optional.
11. Final result
• Delivered features
- Home, Sign-in, Profile pages matching the mockups.
- Full authentication flow with error handling.
- Protected routes.
- Profile displayed after login, username editing with user feedback.
- Global state centralized with Redux (auth + user).
• Performance and green code
- Per-page code splitting, optimized images, limited dependencies.
- Fast initial load; controlled base bundle size.
• Quality and accessibility
- Full keyboard navigation, visible focus, accessible error messages.
- Tests covering critical journeys.
• Maintainability
- Clear feature-oriented architecture, reusable components (buttons, inputs, cards).
- Centralized API layer, isolated slices, testable logic.