brief-20/frontend

Frontend Implementation

This document provides an overview of the frontend implementation for the "Application de Création de Groupes" project.

Architecture

The frontend is built with Next.js 15 using the App Router architecture. It follows a component-based approach with a clear separation of concerns:

• app/: Contains all the pages and layouts organized by route
• components/: Reusable UI components
• lib/: Utility functions, hooks, and services

Authentication Flow

The application uses GitHub OAuth for authentication:

1. User clicks "Login with GitHub" on the login page
2. User is redirected to GitHub for authorization
3. GitHub redirects back to our callback page with an authorization code
4. The callback page exchanges the code for an access token
5. User information is stored in the AuthContext and localStorage
6. User is redirected to the dashboard or the original page they were trying to access

Authentication Components

• AuthProvider: Context provider that manages authentication state
• AuthLoading: Component that displays a loading screen during authentication checks
• useAuth: Hook to access authentication state and methods

API Communication

All API communication is centralized in the lib/api.ts file, which provides:

• A base fetchAPI function with error handling and authentication
• Specific API modules for different resources (auth, projects, persons, tags, groups)
• Type-safe methods for all API operations

Protected Routes

All authenticated routes are protected by:

1. Middleware: Redirects unauthenticated users to the login page
2. AuthLoading: Shows a loading screen during authentication checks
3. AuthContext: Provides user information and authentication methods

Layout Structure

The application uses a nested layout structure:

• RootLayout: Provides global styles and the AuthProvider
• DashboardLayout: Provides the sidebar navigation and user interface for authenticated pages
• AdminLayout: Provides the admin interface for admin-only pages

Components

UI Components

The application uses ShadcnUI for UI components, which provides:

• A consistent design system
• Accessible components
• Dark mode support

Custom Components

• dashboard-layout.tsx: Main layout for authenticated pages
• auth-loading.tsx: Loading component for authentication checks
• admin-layout.tsx: Layout for admin pages

Future Development

Adding New Pages

1. Create a new directory in the app/ folder
2. Create a page.tsx file with your page content
3. Create a layout.tsx file that uses the appropriate layout and AuthLoading component

Adding New API Endpoints

1. Add new methods to the appropriate API module in lib/api.ts
2. Use the methods in your components with the useEffect hook or event handlers

Adding New Features

1. Create new components in the components/ folder
2. Use the components in your pages
3. Add new API methods if needed

Best Practices

• Use the AuthContext for authentication-related operations
• Use the API service for all API communication
• Wrap authenticated pages with the AuthLoading component
• Use TypeScript for type safety
• Follow the component-based architecture