Career (stage-connect)
Application Next.js pour les étudiants et entreprises. Permet aux étudiants de rechercher des stages, postuler, et aux entreprises de publier des offres et gérer les candidatures.
Niveaux Académiques Couverts
L3, M1, M2 — Stage de fin d'études et stages longs.
Différences avec Discover
Career est destiné aux étudiants L3, M1 et M2 avec un workflow complet :
| Fonctionnalité | Career (L3/M) | Discover (L1/L2) |
|---|---|---|
| Thème de mémoire | ✅ Obligatoire | ❌ Non applicable |
| Superviseur académique | ✅ Obligatoire | ❌ Non applicable |
| Convention de stage | ✅ Détaillée | ❌ Simplifiée |
| TODOs hebdomadaires | ✅ Obligatoires | ❌ Optionnels |
| Soutenance | ✅ Obligatoire | ❌ Non applicable |
| Binômes | ✅ Gestion complète | ❌ Non applicable |
| Durée stage | 3-6 mois | 1-2 mois |
Sources :
- DATABASES/logique_metier_evolution.md
- PLAN_EVOLUTION/EVOLUTION_STRATEGIE_L1_L2_M1.md
Stack Technique
Framework et langage :
- Next.js 16.0.7 (App Router)
- React 19.2.0
- TypeScript 5.x
Librairies principales :
| Catégorie | Librairies |
|---|---|
| UI | Radix UI, Lucide React, Tailwind CSS |
| État | @tanstack/react-query v5 |
| Theming | next-themes, tailwind-merge, clsx |
| Animations | framer-motion |
| Date | dayjs, flatpickr |
| Graphiques | apexcharts, react-apexcharts |
| Media | react-media-recorder |
| Utils | cmdk (command palette), react-hot-toast |
Outils de build :
- Tailwind CSS 3.4.18
- PostCSS 8.5.6
- ESLint 9 + eslint-config-next
Prérequis et Installation
Prérequis
- Node.js 18+
- npm ou pnpm
Installation
# Cloner le repo
git clone https://github.com/stageconnect/stage-connect.git
cd stage-connect
# Installer les dépendances
npm install
# Variables d'environnement
cp .env.local.example .env.local
# Modifier NEXT_PUBLIC_API_URL si nécessaire
# Lancer en développement
npm run dev
Build production
npm run build
npm start
Structure du Projet
stage-connect/
├── app/ # Pages Next.js (App Router)
│ ├── api/ # Routes API
│ ├── auth/ # Pages authentification
│ ├── company/ # Dashboard entreprise
│ ├── student/ # Dashboard étudiant
│ ├── university/ # Dashboard université
│ ├── mentor/ # Dashboard mentor
│ ├── layout.tsx
│ └── providers.tsx
├── components/
│ ├── ui/ # Composants UI base (button, input, card)
│ ├── auth/ # Composants auth
│ ├── company/ # Composants entreprise
│ ├── student/ # Composants étudiant
│ ├── Layouts/ # Composants layout
│ └── Forms/
├── contexts/
│ ├── AuthContext.tsx # Authentification
│ └── CompanyContext.tsx # Données entreprise
├── hooks/ # Custom hooks
│ ├── useAuth.ts
│ ├── useAuthActions.ts
│ ├── useFormValidation.ts
│ ├── useThemes.ts
│ └── ...
├── services/ # Services API
│ ├── api.config.ts
│ ├── token.service.ts
│ ├── auth.api.ts
│ └── student.*.services.ts
├── providers/
│ └── QueryProvider.tsx # React Query
├── lib/
├── utils/
├── types/
├── constants/
└── middleware.ts # Protection routes
Architecture et Principes SOLID
SRP (Single Responsibility Principle)
Bien respecté.
Exemples :
hooks/useFormValidation.ts— Ne fait que la validation de formulaireservices/token.service.ts— Ne gère que les tokens (stockage, vérification, expiration)
Violation potentielle :
- Certains composants dans
components/ui-elements/semblent peu utilisés ou font trop de choses
OCP (Open/Closed Principle)
Bien respecté via class-variance-authority.
Exemple :
// components/ui/button.tsx
const buttonVariants = cva(...);
// Extensible via props variant et size sans modifier le composant
LSP (Liskov Substitution Principle)
Non applicable — Pas d'héritage complexe de classes dans ce projet.
ISP (Interface Segregation Principle)
Bien respecté.
Les props des composants sont bien segmentées. Exemple : StatsCard n'a que les props nécessaires (title, value, icon, trend, bgColor).
DIP (Dependency Inversion Principle)
Bien respecté.
Exemple :
// hooks/useAuth.ts
// Dépend d'abstractions (services) plutôt que d'implémentations directes
const { login, logout } = useAuth();
Les services (authApiService, tokenService) sont injectés via imports.
Patterns Utilisés
Custom Hooks
| Hook | Fichier | Rôle |
|---|---|---|
| useAuth | hooks/useAuth.ts | État authentification |
| useAuthActions | hooks/useAuthActions.ts | Actions login |
| useFormValidation | hooks/useFormValidation.ts | Validation formulaires |
| useThemes | hooks/useThemes.ts | Gestion themes |
| useMultiStepForm | hooks/useMultiStepForm.ts | Formulaires multi-étapes |
| useRateLimiting | hooks/useRateLimiting.ts | Rate limiting |
Context Providers
| Provider | Fichier | Rôle |
|---|---|---|
| AuthProvider | contexts/AuthContext.tsx | Authentification |
| CompanyProvider | contexts/CompanyContext.tsx | Données entreprise |
| QueryProvider | providers/QueryProvider.tsx | React Query |
Compound Components
Non détectés dans ce projet.
HOC
Non détectés.
Gestion de l'État
Outils utilisés :
- React Query (@tanstack/react-query v5) — Requêtes API et cache
- React Context — AuthContext, CompanyContext
- useState/useEffect — État local
Pas de Redux ou Zustand.
Appels API
Bibliothèque
Fetch API native (pas Axios).
Configuration
Fichier : services/api.config.ts
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';
Token JWT
Fichier : services/token.service.ts
- Stockage : localStorage
- Clés :
access_token,refresh_token - Refresh automatique : toutes les 60s avec buffer de 5 min
// Ajout automatique du token
const token = localStorage.getItem('access_token');
headers['Authorization'] = `Bearer ${token}`;
Erreurs
Chaque service gère ses propres erreurs. Pas de gestionnaire centralisé.
Variables d'Environnement
| Variable | Description | Valeur par défaut |
|---|---|---|
NEXT_PUBLIC_API_URL | URL du backend | http://localhost:8000/api/v1 |
NEXT_PUBLIC_FRONTEND_URL | URL frontend | http://localhost:3000 |
NEXT_PUBLIC_BACKEND_URL | URL backend alternatif | http://localhost:8000 |
Lacunes et Dette Technique
| Lacune | Fichier concerné | Priorité | Suggestion |
|---|---|---|---|
| Duplication config API | 18+ services redefinissent API_URL | Haute | Utiliser uniquement api.config.ts |
| Pas de types partagés | Chaque service définit ses types | Moyenne | Créer un dossier types/ partagé |
| Gestion token分散 | localStorage lu dans chaque service | Moyenne | Créer un interceptor fetch |
| Pas de tests | Aucun dossier tests | Haute | Ajouter Jest + React Testing Library |
| Middleware basique | middleware.ts vérifie juste présence token | Moyenne | Vérifier validité + rôle utilisateur |
| Pas de gestion erreurs centralisée | Chaque service gère ses erreurs | Moyenne | Créer error-handler global |
| Composants non utilisés | components/ui-elements/ | Faible | Nettoyer le code mort |