Discover (stageconnect-l1-l2)

Application Next.js pour les étudiants L1/L2 (premières années). Portail de découverte des stages avec dashboard étudiant simplifié.

Niveaux Académiques Couverts

L1, L2 — Stage d'observation (1-2 mois).

Différences avec Career

Discover est destiné aux étudiants L1 et L2 avec un workflow simplifié :

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

Workflow L1/L2

1. Création compte → Profil basique
2. Consulter offres → Postuler (sans thème, sans superviseur)
3. Entreprise accepte → Stage créé automatiquement
4. Fin de stage → Upload rapport + attestation simple

Sources :

• DATABASES/logique_metier_evolution.md
• PLAN_EVOLUTION/EVOLUTION_STRATEGIE_L1_L2_M1.md

⚠️ État Actuel

Ce repo est une copie de Career — les adaptations pour L1/L2 n'ont pas encore été faites.

Issues prioritaires :

• [FEATURE] Adapter l'interface pour les étudiants L1/L2 (Haute)
• [DEBT] Supprimer le code mort copié depuis stage-connect (Haute)
• [DEBT] Différencier les services API de stage-connect (Moyenne)

Stack Technique

Framework et langage :

• Next.js 16.1.6 (App Router)
• React 19.2.3
• TypeScript 5.x

Librairies principales :

Catégorie	Librairies
UI	Radix UI, Lucide React, Tailwind CSS
État	@tanstack/react-query v5 (sous-utilisé)
Theming	next-themes
Animations	framer-motion
Date	dayjs
Utils	react-hot-toast, react-media-recorder

Outils de build :

• Tailwind CSS 3.4.17
• PostCSS 8.4.38
• ESLint 9

Prérequis et Installation

Prérequis

• Node.js 18+
• npm ou pnpm

Installation

# Cloner le repo
git clone https://github.com/stageconnect/stageconnect-l1-l2.git
cd stageconnect-l1-l2

# 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
# Le serveur écoute sur le port 3002

Build production

npm run build
npm start

Structure du Projet

stageconnect-l1-l2/
├── src/
│   ├── app/                    # Pages Next.js (App Router)
│   │   ├── auth/
│   │   │   └── signin/        # Page connexion
│   │   ├── student/           # Pages étudiant
│   │   ├── layout.tsx
│   │   ├── providers.tsx
│   │   └── page.tsx           # Page d'accueil
│   ├── components/
│   │   ├── ui/                # Composants UI base
│   │   ├── student/           # Composants étudiant
│   │   ├── Layouts/          # Layouts (header, sidebar)
│   │   └── common/           # Composants partagés
│   ├── contexts/
│   │   └── AuthContext.tsx    # Authentification
│   ├── hooks/                  # Custom hooks
│   │   ├── student/
│   │   ├── useBugReport.ts
│   │   ├── use-click-outside.ts
│   │   └── use-mobile.ts
│   ├── services/               # Services API
│   │   ├── api.config.ts
│   │   ├── token.service.ts
│   │   ├── auth/
│   │   └── *.services.ts (30+ fichiers)
│   ├── providers/
│   │   └── QueryProvider.tsx
│   ├── lib/
│   ├── types/
│   └── assets/
├── public/
├── .env.local
├── next.config.ts
├── tailwind.config.ts
└── package.json

Architecture et Principes SOLID

SRP (Single Responsibility Principle)

Bien respecté.

Exemples :

• components/student/dashboard/StatsCard.tsx — Affiche une statistique, rien d'autre
• services/token.service.ts — Ne gère que les tokens

OCP (Open/Closed Principle)

Bien respecté via class-variance-authority.

Exemple :

// components/ui/button.tsx
const buttonVariants = cva(...);
// Extensible via props variant et size

LSP (Liskov Substitution Principle)

Non applicable — Pas d'héritage de classes.

ISP (Interface Segregation Principle)

Bien respecté.

Les props sont minimalistes et ciblées.

DIP (Dependency Inversion Principle)

Bien respecté.

Exemple :

// services/auth/user.service.ts
export class UserService extends BaseApiService {
    async getCurrentUser(): Promise<BackendUser> {
        return this.makeRequest<BackendUser>(API_CONFIG.AUTH.ME);
    }
}

Les services étendent BaseApiService pour l'injection de dépendances.

Patterns Utilisés

Custom Hooks

Hook	Fichier	Rôle
useStudentDashboard	hooks/student/useStudentDashboard.ts	Données dashboard
useBugReport	hooks/useBugReport.ts	Signalement bugs
useClickOutside	hooks/use-click-outside.ts	Détection clic extérieur
useIsMobile	hooks/use-mobile.ts	Détection mobile (breakpoint: 850px)

Context Providers

Provider	Fichier	Rôle
AuthContext	contexts/AuthContext.tsx	Authentification (user, login, logout, refreshToken)
QueryProvider	providers/QueryProvider.tsx	React Query

Compound Components

Non détectés.

HOC

Non détectés.

Gestion de l'État

Outils utilisés :

• React Context — AuthContext uniquement
• useState — État local

Problème : React Query est installé et configuré mais pas utilisé ! Les hooks useQuery et useMutation ne sont pas appelés. Les services utilisent fetch directement.

Pas de Redux, Zustand, ou autre librairie.

Appels API

Bibliothèque

Fetch API native (pas Axios).

Configuration

Fichier : src/services/api.config.ts

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';

Token JWT

Fichier : src/services/token.service.ts

• Stockage : localStorage + cookies
• Clés : access_token, refresh_token, stageconnect_token_data
• Refresh automatique : toutes les 60s avec buffer de 5 min

// src/services/auth/base-api.service.ts
const accessToken = tokenService.getAccessToken();
if (accessToken) {
  headers.Authorization = `Bearer ${accessToken}`;
}

Structure des services

• BaseApiService : Classe de base avec makeRequest<T>()
• Services étendus : UserService, LoginService, etc.
• Services fonctionnels : student.dashboard.services.ts, etc.

Erreurs

Chaque service gère ses erreurs avec try/catch. 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_SITE_URL	URL du frontend	http://localhost:3002
PORT	Port du serveur	3002

Lacunes et Dette Technique

Lacune	Fichier concerné	Priorité	Suggestion
React Query sous-utilisé	QueryProvider configuré mais pas utilisé	Haute	Migrer les services vers useQuery/useMutation
Inconsistance services	Certains étendent BaseApiService, d'autres non	Moyenne	Standardiser sur BaseApiService
Pas de validation données	Pas de Zod, Yup	Moyenne	Ajouter Zod pour la validation
Pas de protection routes centralisée	Pas de middleware Next.js	Moyenne	Ajouter middleware.ts
Logs en production	console.log dispersés	Faible	Utiliser un logger adapté
Pas de tests	Aucun fichier .test.ts	Haute	Ajouter Jest
Duplication code	Logique token重复 dans plusieurs fichiers	Moyenne	Créer un interceptor
Types any	offer.queries.ts utilise any	Faible	Typer correctement