Avnyr
cd5ad2e1e4
- Added `lib/api.ts` to centralize API communication for authentication, projects, persons, tags, and groups. - Introduced `middleware.ts` to handle route protection based on authentication and roles. - Created `auth-context.tsx` to manage authentication state with `AuthProvider` and `useAuth` hook. - Updated `package.json` to include `swr` for data fetching. - Enhanced project documentation (`RESPONSIVE_DESIGN.md` and `README.md`) with responsive design and architecture details.
95 lines
3.2 KiB
Markdown
95 lines
3.2 KiB
Markdown
# 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 |