🎯 Zone01 Normandie - Admin Dashboard

Un tableau de bord d'administration moderne et complet conçu pour gérer efficacement les étudiants, les promotions, les plannings et les statistiques de Zone01 Normandie.

📑 Table des matières

Vue d'ensemble
Fonctionnalités
Architecture
Stack technique
Installation
Configuration
Déploiement
Structure du projet
Documentation
Maintenance
Contribution

🌟 Vue d'ensemble

Le Zone01 Admin Dashboard est une application web full-stack qui centralise la gestion administrative de l'école Zone01 Normandie. Il permet aux administrateurs de :

👥 Gérer les étudiants et suivre leur progression
📊 Visualiser des statistiques et analytics détaillées
📅 Planifier et organiser les sessions de formation
🎯 Gérer les promotions et les projets
📈 Suivre les retards et absences
🔐 Authentification sécurisée via Stack Auth

Captures d'écran

✨ Fonctionnalités

🔐 Authentification & Autorisation

Stack Auth - Authentification moderne avec OAuth (Google, GitHub)
Gestion des rôles - Admin, Super Admin avec permissions granulaires
Métadonnées utilisateur - Rôles et permissions personnalisés
Sessions sécurisées - Cookies HTTP-only

👥 Gestion des Étudiants

Liste complète des étudiants avec recherche et filtres
Informations détaillées (progression, projets, statistiques)
Synchronisation automatique avec l'API Zone01
Mise à jour en temps réel des données

📊 Analytics & Statistiques

Tableau de bord avec métriques clés
Graphiques interactifs (progression, taux de réussite)
Statistiques par promotion et par projet
Export des données (CSV, JSON)

📅 Planning

Vue calendrier interactive
Gestion des absences et retards
Planification des projets et hackathons
Configuration des jours fériés et vacances
Export du planning (CSV)

🎯 Gestion des Promotions

Suivi des promotions actives
Statut en temps réel (en cours, terminée)
Configuration des projets obligatoires
Gestion des délais et échéances

🛠️ Configuration

Gestion des projets - Configuration des projets obligatoires
Gestion des vacances - Définition des périodes de congés
Gestion des promotions - Création et modification

🔄 Automatisation

Cron Jobs - Mise à jour automatique des données
Webhooks - Synchronisation en temps réel
API REST - Intégration avec services externes

🏗️ Architecture

Architecture Globale

┌─────────────────────────────────────────────────────────┐
│                     Client (Browser)                     │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │   Next.js    │  │  React 19    │  │ TailwindCSS  │  │
│  │   Frontend   │  │  Components  │  │   Styling    │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│                  Next.js 15 App Router                   │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │Server        │  │ API Routes   │  │ Middleware   │  │
│  │Components    │  │              │  │              │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
└─────────────────────────────────────────────────────────┘
                            │
            ┌───────────────┼───────────────┐
            ▼               ▼               ▼
    ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
    │  Stack Auth  │ │Zone01 Hub API│ │Neon Database │
    │   (OAuth)    │ │              │ │ (PostgreSQL) │
    └──────────────┘ └──────────────┘ └──────────────┘

Flux de données

Authentification : Stack Auth → Server Components → Client
Données étudiants : Zone01 API → Neon DB → Server Components
Planning : Neon DB → API Routes → Client Components
Mise à jour : Cron Jobs → Zone01 API → Neon DB

🛠 Stack technique

Frontend

Next.js 15.2.4 - Framework React avec App Router
React 19 - Bibliothèque UI avec Server Components
TypeScript 5.7.2 - Typage statique
Tailwind CSS - Framework CSS utility-first
shadcn/ui - Composants UI réutilisables
Framer Motion - Animations
Recharts - Graphiques et visualisations

Backend

Next.js API Routes - Endpoints REST
Neon Database - PostgreSQL serverless
Drizzle ORM - ORM TypeScript-first
Stack Auth - Authentification complète

DevOps & Outils

Vercel - Hébergement et déploiement
pnpm - Gestionnaire de paquets
ESLint - Linting
Prettier - Formatage du code

🚀 Installation

Prérequis

Node.js >= 18.17.0
pnpm >= 8.0.0
Compte Stack Auth - Créer un compte
Base de données Neon - Créer une DB
Accès à l'API Zone01 - Token d'accès requis

Installation locale

Cloner le repository

git clone https://github.com/makcimerrr/admin-dashboard.git
cd admin-dashboard

Installer les dépendances

pnpm install

Configurer les variables d'environnement

cp .env.example .env

Éditer le fichier .env avec vos valeurs (voir Configuration)

Initialiser la base de données

pnpm drizzle-kit push

Lancer le serveur de développement

pnpm dev

Accéder à l'application Ouvrir http://localhost:3000

⚙️ Configuration

Variables d'environnement requises

Créez un fichier .env à la racine du projet avec les variables suivantes :

🔐 Stack Auth (Authentification)

NEXT_PUBLIC_STACK_PROJECT_ID=your_project_id
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your_publishable_key
STACK_SECRET_SERVER_KEY=your_secret_key

Comment obtenir ces clés :

Créer un compte sur Stack Auth Dashboard
Créer un nouveau projet
Copier les clés depuis Settings > API Keys

🗄️ Base de données

DATABASE_URL=postgresql://user:password@host/database?sslmode=require
POSTGRES_URL=postgresql://user:password@host/database?sslmode=require

Obtenir une base Neon :

Créer un compte sur Neon
Créer une nouvelle base de données
Copier la connection string

🌐 API Zone01

AUTHENDPOINT=https://hub.zone01normandie.org
NEXT_PUBLIC_ACCESS_TOKEN=your_zone01_api_token

🔧 Configuration générale

NEXT_PUBLIC_BASE_URL=http://localhost:3000
CRON_SECRET=your_random_secret_for_cron
AUTH_SECRET=your_random_secret_32_chars

Générer des secrets sécurisés :

openssl rand -base64 32

Configuration Stack Auth OAuth

Pour activer l'authentification Google et GitHub :

Configurer les providers dans Stack Auth Dashboard
- Aller sur Settings > OAuth Providers
- Ajouter Google OAuth
- Ajouter GitHub OAuth

Configurer les URLs de callback

Développement: http://localhost:3000/api/stack-auth/oauth/callback
Production: https://votre-domaine.vercel.app/api/stack-auth/oauth/callback

📖 Documentation détaillée : Voir docs/STACK_AUTH_OAUTH_SETUP.md

🚢 Déploiement

Déploiement sur Vercel (Recommandé)

Via GitHub (Automatique)

Connecter votre repository GitHub à Vercel
- Aller sur vercel.com
- Cliquer sur "New Project"
- Importer votre repository
Configurer les variables d'environnement
- Dans Vercel Dashboard > Settings > Environment Variables
- Ajouter toutes les variables du fichier .env
- ⚠️ Important : Sélectionner tous les environnements (Production, Preview, Development)
Déployer
- Vercel déploie automatiquement à chaque push sur main
- Chaque PR crée un déploiement preview

Via CLI Vercel

# Installer Vercel CLI
npm i -g vercel

# Se connecter
vercel login

# Déployer
vercel

# Déployer en production
vercel --prod

Configuration post-déploiement

Mettre à jour NEXT_PUBLIC_BASE_URL

NEXT_PUBLIC_BASE_URL=https://votre-app.vercel.app

Configurer les Cron Jobs sur Vercel Créer vercel.json :

{
  "crons": [
    {
      "path": "/api/cron",
      "schedule": "0 */6 * * *"
    }
  ]
}

Mettre à jour les URLs de callback OAuth
- Stack Auth Dashboard > OAuth Providers
- Ajouter l'URL de production

Déploiement sur d'autres plateformes

Docker

FROM node:18-alpine

WORKDIR /app

COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install

COPY . .
RUN pnpm build

EXPOSE 3000
CMD ["pnpm", "start"]

docker build -t admin-dashboard .
docker run -p 3000:3000 --env-file .env admin-dashboard

Autres plateformes

Railway : Connecter le repo et configurer les variables
Render : Importer le projet et ajouter les env vars
DigitalOcean App Platform : Déployer depuis GitHub

📁 Structure du projet

admin-dashboard/
├── app/                          # Next.js App Router
│   ├── (dashboard)/             # Routes dashboard (layout groupé)
│   │   ├── layout.tsx           # Layout dashboard avec auth
│   │   ├── page.tsx             # Page d'accueil dashboard
│   │   ├── students/            # Gestion étudiants
│   │   ├── analytics/           # Statistiques
│   │   ├── planning/            # Planning
│   │   │   ├── page.tsx         # Vue planning
│   │   │   ├── absences/        # Gestion absences
│   │   │   └── extraction/      # Export planning
│   │   ├── promos/              # Gestion promotions
│   │   │   └── status/          # Statut promotions
│   │   ├── config/              # Configuration
│   │   ├── employees/           # Gestion employés
│   │   ├── history/             # Historique
│   │   └── account/             # Compte utilisateur
│   ├── (home)/                  # Routes publiques
│   │   ├── layout.tsx           # Layout home
│   │   ├── hub/                 # Hub d'informations
│   │   └── non-admin/           # Page non-admin
│   ├── api/                     # API Routes
│   │   ├── auth/                # Authentification (legacy)
│   │   ├── stack-auth/          # Stack Auth endpoints
│   │   ├── students/            # API étudiants
│   │   ├── planning/            # API planning
│   │   ├── promos/              # API promotions
│   │   ├── cron/                # Cron jobs
│   │   └── webhooks/            # Webhooks
│   ├── login/                   # Page de connexion
│   ├── register/                # Page d'inscription
│   ├── handler/                 # Stack Auth handler
│   ├── layout.tsx               # Root layout
│   ├── providers.tsx            # Providers (Theme, Auth)
│   └── loading.tsx              # Loading state
├── components/                   # Composants réutilisables
│   ├── ui/                      # Composants shadcn/ui
│   ├── planning/                # Composants planning
│   ├── login-form.tsx           # Formulaire connexion
│   └── nav-user.tsx             # Navigation utilisateur
├── lib/                         # Utilitaires et configuration
│   ├── db/                      # Configuration DB
│   │   ├── config.ts            # Connection Neon
│   │   ├── schema.ts            # Schéma Drizzle
│   │   └── services/            # Services DB
│   ├── stack-auth.ts            # Config Stack Auth
│   ├── stack-server.ts          # Stack Auth server
│   ├── stack-client.ts          # Stack Auth client
│   ├── stack-helpers.ts         # Helpers Stack Auth
│   └── ensure-user-metadata.ts  # Sync métadonnées
├── config/                      # Fichiers de configuration
│   ├── promoConfig.json         # Config promotions
│   └── promoStatus.json         # Statut promotions
├── drizzle/                     # Migrations Drizzle
│   └── migrations/              # Fichiers migration SQL
├── public/                      # Assets statiques
│   └── screenshots/             # Captures d'écran
├── docs/                        # Documentation complète
│   ├── DEPLOYMENT.md            # Guide déploiement
│   ├── FEATURES.md              # Documentation features
│   ├── ARCHITECTURE.md          # Architecture détaillée
│   ├── MAINTENANCE.md           # Guide maintenance
│   └── ENV_VARIABLES.md         # Variables d'environnement
├── .env                         # Variables d'environnement (local)
├── .env.example                 # Template variables
├── middleware.ts                # Middleware Next.js
├── next.config.js               # Configuration Next.js
├── tailwind.config.ts           # Configuration Tailwind
├── tsconfig.json                # Configuration TypeScript
├── drizzle.config.ts            # Configuration Drizzle
├── package.json                 # Dépendances
└── README.md                    # Ce fichier

📚 Documentation

Documentation complète

📖 DEPLOYMENT.md - Guide de déploiement détaillé
🎯 FEATURES.md - Documentation des fonctionnalités
🏗️ ARCHITECTURE.md - Architecture technique
🔧 MAINTENANCE.md - Guide de maintenance
⚙️ ENV_VARIABLES.md - Variables d'environnement

Documentation Stack Auth

🔐 docs/STACK_AUTH_MIGRATION.md - Migration NextAuth → Stack Auth
🌐 docs/STACK_AUTH_OAUTH_SETUP.md - Configuration OAuth
🔍 docs/STACK_AUTH_TROUBLESHOOTING.md - Dépannage
📊 docs/STACK_METADATA_GUIDE.md - Gestion métadonnées

API Documentation

Les endpoints API sont documentés dans chaque fichier route. Exemples :

GET /api/students - Liste des étudiants
GET /api/promos/status - Statut des promotions
POST /api/planning/absences - Créer une absence
GET /api/cron - Trigger cron job

🔧 Maintenance

Mise à jour des dépendances

# Vérifier les mises à jour
pnpm outdated

# Mettre à jour toutes les dépendances
pnpm update

# Mettre à jour une dépendance spécifique
pnpm update next

Migrations de base de données

# Générer une migration
pnpm drizzle-kit generate

# Appliquer les migrations
pnpm drizzle-kit push

# Ouvrir Drizzle Studio
pnpm drizzle-kit studio

Synchronisation des données

Les données sont automatiquement synchronisées via cron jobs. Pour forcer une synchronisation manuelle :

curl -X GET https://votre-app.vercel.app/api/cron \
  -H "Authorization: Bearer YOUR_CRON_SECRET"

Logs et Monitoring

Logs Vercel : Dashboard Vercel > Logs
Erreurs : Vérifier les logs dans Vercel
Performance : Vercel Analytics activé

Sauvegardes

La base de données Neon effectue des sauvegardes automatiques. Pour une sauvegarde manuelle :

# Export de la base de données
pg_dump $DATABASE_URL > backup.sql

👥 Contribution

Les contributions sont les bienvenues ! Voici comment contribuer :

Workflow de contribution

Fork le projet
Créer une branche (git checkout -b feature/AmazingFeature)
Commit vos changements (git commit -m 'Add: Amazing Feature')
Push vers la branche (git push origin feature/AmazingFeature)
Ouvrir une Pull Request

Conventions de code

TypeScript - Typage strict requis
ESLint - Suivre les règles configurées
Prettier - Formater le code avant commit
Commits - Suivre Conventional Commits

# Format des commits
feat: nouvelle fonctionnalité
fix: correction de bug
docs: mise à jour documentation
style: formatage code
refactor: refactoring
test: ajout de tests
chore: tâches diverses

Tests

# Lancer les tests (à venir)
pnpm test

# Linter
pnpm lint

# Formatter
pnpm format

📄 License

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

🙏 Remerciements

Zone01 Normandie - Pour le projet et l'API
Vercel - Pour l'hébergement gratuit
Stack Auth - Pour la solution d'authentification
shadcn/ui - Pour les composants UI
Neon - Pour la base de données PostgreSQL

📞 Contact & Support

Développé par Maxime Dubois

🌐 Website: makcimerrr.com
💼 GitHub: @makcimerrr
📧 Email: maximedubs@proton.me

Besoin d'aide ?

📖 Consulter la documentation complète
🐛 Signaler un bug via GitHub Issues
💬 Poser une question via Discussions

⭐ Si ce projet vous a été utile, n'hésitez pas à lui donner une étoile !

Made with ❤️ by Maxime Dubois

Name		Name	Last commit message	Last commit date
Latest commit History 381 Commits
.cursor		.cursor
.github/workflows		.github/workflows
.vscode		.vscode
app		app
components		components
config		config
docs		docs
drizzle/migrations		drizzle/migrations
lib		lib
public		public
screenshots		screenshots
stack		stack
.env.example		.env.example
.gitignore		.gitignore
.mcp.json		.mcp.json
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
SECURITY_INCIDENT.md		SECURITY_INCIDENT.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
firebase-config.ts		firebase-config.ts
mdx-components.tsx		mdx-components.tsx
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

License

makcimerrr/admin-dashboard

Folders and files

Latest commit

History

Repository files navigation

🎯 Zone01 Normandie - Admin Dashboard

📑 Table des matières

🌟 Vue d'ensemble

Captures d'écran

✨ Fonctionnalités

🔐 Authentification & Autorisation

👥 Gestion des Étudiants

📊 Analytics & Statistiques

📅 Planning

🎯 Gestion des Promotions

🛠️ Configuration

🔄 Automatisation

🏗️ Architecture

Architecture Globale

Flux de données

🛠 Stack technique

Frontend

Backend

DevOps & Outils

🚀 Installation

Prérequis

Installation locale

⚙️ Configuration

Variables d'environnement requises

🔐 Stack Auth (Authentification)

🗄️ Base de données

🌐 API Zone01

🔧 Configuration générale

Configuration Stack Auth OAuth

🚢 Déploiement

Déploiement sur Vercel (Recommandé)

Via GitHub (Automatique)

Via CLI Vercel

Configuration post-déploiement

Déploiement sur d'autres plateformes

📁 Structure du projet

📚 Documentation

Documentation complète

Documentation Stack Auth

API Documentation

🔧 Maintenance

Mise à jour des dépendances

Migrations de base de données

Synchronisation des données

Logs et Monitoring

Sauvegardes

👥 Contribution

Workflow de contribution

Conventions de code

Tests

📄 License

🙏 Remerciements

📞 Contact & Support

Besoin d'aide ?

About

Resources

License

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 3

Uh oh!

Languages

Packages