How jonathan-ngamboe/mentra-frontend works
<explanation>
1. Identify the project type and purpose
- This is a full‑stack, multi‐language Next.js 13 “App Router” application.
- It provides user authentication (via Supabase), a career‑matching questionnaire (the RIASEC test), multilingual content (EN/FR), and result pages.
2. Major architectural components
a. Client (Browser or Mobile)
- React UI components under /app and /components
- Static assets under /public (images, emojis, flags)
b. Next.js Server
- Server and server‐components live in /app/[lang]/*
- API routes (e.g. /app/auth/confirm/route.ts)
- Middleware (middleware.ts, i18n, Supabase auth)
c. Services layer (business logic)
- /services/auth.ts – sign‐up, sign‐in, token handling
- /services/database.ts – generic DB helpers
- /services/riasec.ts – career‐matching logic
- /app/[lang]/services/career-matching/* – test & result pages
d. Data layer (external services)
- Supabase (Auth, Postgres database)
- Potential third‑party APIs (none explicit, but open for future integration)
e. Utility and configuration modules
- /utils/supabase/* – client/server Supabase initialization & middleware
- /utils/i18n/* – language middleware, constants, route config
- /lib, /hooks, /contexts, /types, /constants
3. Interactions and data‐flow
- User → Browser → Next.js front‐end (page or component)
- Front‐end fetches data via:
• Server‐side getServerSideProps or server components calling /services modules
• Client‐side API calls to Next.js API routes (e.g. /auth/confirm)
- Next.js API route → service module (e.g. services/auth.ts) → Supabase client
- Supabase client → Supabase Auth/DB → returns data/confirmation → Next.js → Browser
- Career matching flow: user completes questionnaire (frontend) → calls RIASEC logic (services/riasec.ts) → optionally persists results in DB → displays results.
4. Architectural patterns & design principles
- “App Router” file‐based routing for pages and API routes
- Separation of concerns: UI components vs. services (business logic) vs. utils (configuration)
- Middleware for cross‐cutting concerns (i18n, auth)
- Code‐sharing via /components, /hooks, /contexts
- Strong typing with TypeScript (/types)
- CSS Modules, Tailwind for styling
5. Diagramming guidelines for this full‐stack app
a. Components to include
- Client (Browser)
- Next.js Frontend (Pages & UI Components)
- Next.js Server/API (Route Handlers, Middleware)
- Services Layer (Auth, RIASEC, Database)
- External Services (Supabase Auth + Postgres)
- Static Asset Store (public)
b. Relationships & data flow
- Draw arrows:
• Browser → Next.js Frontend (HTTP/SSR)
• Frontend → Next.js API (REST calls)
• Next.js API → Services (internal function calls)
• Services → Supabase (API/SQL)
• Supabase → Services → Next.js → Browser
c. Highlight tech stack
- Next.js 13, React 18
- Supabase (Auth, Database)
- TypeScript, Tailwind CSS
- Middleware (i18n, auth guards)
d. Tailor to a full‐stack app
- Clearly separate “Client” vs. “Server” vs. “External”
- Show both SSR/SSG data‐fetching and client‐side API flows
- Emphasize multi‐language routing under /app/[lang]
6. Diagram styling recommendations
- Use distinct colors or shapes for:
• UI Components (e.g., blue rectangles)
• Server/API layer (e.g., green rectangles)
• Service modules (e.g., orange rectangles)
• External services (e.g., purple cylinders)
- Label each box with directory or module name (e.g., /app/[lang]/page.tsx, services/auth.ts)
- Use directional arrows annotated with protocols (e.g., “HTTP GET”, “RPC call”, “Supabase JS SDK”)
- Group related modules inside swimlanes or containers (e.g., “Utilities”, “Business Logic”, “Data Layer”)
7. Detail is key
- Capture all major subsystems in their own container (UI, API, Services, Data)
- Don’t over‑fragment—group similar files (e.g., all Supabase utils)
- Ensure arrows reflect actual runtime interactions (SSR fetch vs. client fetch)
By following these guidelines, you’ll produce a clear, accurate system design diagram that reflects:
• the multi‐language Next.js app structure
• the layered service architecture
• integrations with Supabase for auth and persistence
• the separation of UI, server logic, and external data stores
</explanation>