Skip to content

Frontend Architecture

Project Structure

The project follows a standard Next.js 15 App Router structure, organized by feature and function.

frontend/
├── public/             # Static assets (images, icons)
├── src/
│   ├── app/            # App Router pages and layouts
│   │   ├── (auth)/     # Authentication routes (login, signup)
│   │   ├── dashboard/  # Dashboard routes (protected)
│   │   ├── layout.tsx  # Root layout
│   │   └── page.tsx    # Home page
│   ├── components/     # Reusable UI components
│   │   ├── ui/         # Shadcn/UI primitive components
│   │   └── [feature]/  # Feature-specific components
│   ├── context/        # React Context providers (Auth, State)
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility functions and libraries (axios, utils)
│   ├── services/       # API integration services
│   └── types/          # TypeScript type definitions
├── .env.local          # Environment variables
├── next.config.mjs     # Next.js configuration
├── tailwind.config.ts  # Tailwind CSS configuration
└── tsconfig.json       # TypeScript configuration

Key Architectural Patterns

1. App Router & Layouts

We use the Next.js App Router for routing. - Layouts (layout.tsx): Define the common UI structure (e.g., sidebar, navbar) for a section of the app. - Pages (page.tsx): The unique content for a specific route. - Route Groups: We use (auth) to group authentication-related routes without affecting the URL path.

2. Service Layer Pattern

All API calls are abstracted into service modules located in src/services/. - Components do not make direct axios or fetch calls. - Instead, they import functions like userService.getProfile() or disasterService.getAll(). - This separation of concerns allows for easier testing and centralized error handling.

3. Context for Global State

We use React Context for global state management where necessary. - AuthContext: Manages user authentication state (user object, loading status, login/logout functions). - DashboardDisasterContext: Share state related to disasters across dashboard widgets.

4. Client vs Server Components

  • By default, pages are Server Components for better performance and SEO.
  • Interactive components (using useState, useEffect, or event handlers) are marked with 'use client' at the top.