Application React + TypeScript + Vite permettant de générer des cartes de métro personnalisées selon le profil utilisateur. Intègre un backend Express + PostgreSQL + Prisma pour collecter les retours utilisateurs via un questionnaire de satisfaction.
- React 19 avec TypeScript
- Vite pour le build et le dev server
- TailwindCSS pour le styling
- D3.js pour le rendu des cartes schématiques
- Leaflet pour les cartes géographiques
- Radix UI (shadcn/ui) pour les composants UI
- Express - API REST
- PostgreSQL 16 - Base de données
- Prisma - ORM avec migrations
- Zod - Validation des données
- TypeScript - Type safety côté serveur
- Docker & Docker Compose - Containerisation
- Nginx - Serveur web statique et reverse proxy
- Node.js 24+
- npm ou yarn
- Docker & Docker Compose (pour la production)
- PostgreSQL 16 (pour le développement local)
- Installer les dépendances
npm install- Configurer la base de données
Créez une base PostgreSQL locale :
# Avec psql
createdb metrodb
# Ou via Docker
docker run -d \
--name metro-postgres \
-e POSTGRES_USER=metroadmin \
-e POSTGRES_PASSWORD=metropassword \
-e POSTGRES_DB=metrodb \
-p 5432:5432 \
postgres:16-alpine- Configurer les variables d'environnement
Le fichier .env est déjà configuré pour le développement local :
DATABASE_URL="postgresql://metroadmin:metropassword@localhost:5432/metrodb"
PORT=3001
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173- Initialiser Prisma et créer les tables
npm run prisma:migrate- Générer le Prisma Client
npm run prisma:generateTerminal 1 - Backend API :
npm run server:devLe serveur démarre sur http://localhost:3001
Terminal 2 - Frontend Vite :
npm run devL'application est accessible sur http://localhost:5173
Le proxy Vite redirige automatiquement /api vers le backend.
npm run prisma:studioOuvre une interface web sur http://localhost:5555 pour explorer la base de données.
docker-compose up --buildServices démarrés :
- Frontend (Nginx) :
http://localhost:3200 - Backend (Express) :
http://localhost:3001 - PostgreSQL :
localhost:5432
┌─────────────────────────────────────────┐
│ Frontend (Nginx :80) │
│ Serve static files + reverse proxy │
│ Port exposé: 3200 │
└────────────┬────────────────────────────┘
│ Proxy /api → backend
↓
┌─────────────────────────────────────────┐
│ Backend (Express :3001) │
│ API REST + Prisma Client │
│ Port exposé: 3001 │
└────────────┬────────────────────────────┘
│ Connexion DATABASE_URL
↓
┌─────────────────────────────────────────┐
│ PostgreSQL 16 (:5432) │
│ Volume persistant: postgres_data │
└─────────────────────────────────────────┘
Soumet un questionnaire de satisfaction.
Body:
{
"question1": 4,
"question2": 5,
"question3": 3,
"question4": 4,
"question5": 5,
"openFeedback": "Super application !",
"userProfile": {
"profession": "etudiant",
"domicile": "vieux_lyon",
"travail": "cordeliers",
"mapType": "schematisee",
"geometry": "octilineaire",
"lineColor": "#e60042",
"colorMode": "custom",
"modeAffichage": "mobile",
"basemap": "cartodb-light"
},
"mapConfig": {
"basemap": "cartodb-light",
"colorMode": "custom",
"lineColor": "#e60042",
"geometry": "octilineaire",
"mapType": "schematisee"
}
}Response 201:
{
"success": true,
"id": 1,
"message": "Merci pour votre retour !"
}Récupère les statistiques agrégées des réponses.
Response 200:
{
"success": true,
"totalResponses": 42,
"averageRatings": {
"question1": 4.2,
"question2": 4.5,
"question3": 3.8,
"question4": 4.1,
"question5": 4.3
}
}Health check endpoint.
model SurveyResponse {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
question1 Int // 1-5
question2 Int // 1-5
question3 Int // 1-5
question4 Int // 1-5
question5 Int // 1-5
openFeedback String @db.Text
userProfile Json
mapConfig Json
@@map("survey_responses")
}| Script | Description |
|---|---|
npm run dev |
Démarre Vite dev server (frontend) |
npm run build |
Build production du frontend |
npm run server:dev |
Démarre le serveur Express en mode dev |
npm run server:build |
Compile le backend TypeScript |
npm run server:start |
Lance le serveur compilé |
npm run prisma:generate |
Génère le Prisma Client |
npm run prisma:migrate |
Crée une nouvelle migration |
npm run prisma:migrate:deploy |
Applique les migrations en production |
npm run prisma:studio |
Ouvre Prisma Studio |
my-metro-app/
├── server/ # Backend Express
│ ├── index.ts # Point d'entrée serveur
│ ├── routes/
│ │ └── survey.ts # Routes API questionnaire
│ ├── types.ts # Types TypeScript backend
│ └── prisma/
│ └── schema.prisma # Schéma base de données
├── src/ # Frontend React
│ ├── components/ # Composants React
│ │ ├── Header.tsx # Formulaire questionnaire
│ │ ├── RatingSlider.tsx
│ │ └── ...
│ ├── data/ # Données JSON des réseaux
│ ├── types.ts # Types TypeScript frontend
│ └── App.tsx
├── Dockerfile # Build frontend (Nginx)
├── Dockerfile.backend # Build backend (Node)
├── docker-compose.yml # Orchestration services
├── nginx.conf # Config reverse proxy
├── vite.config.ts # Config Vite avec proxy
├── tsconfig.server.json # Config TypeScript backend
└── package.json
DATABASE_URL=postgresql://user:password@host:port/db
PORT=3001
NODE_ENV=development|production
CORS_ORIGIN=http://localhost:5173VITE_API_URL=/apinpm run prisma:migrate
# Nom suggéré: add_new_field, rename_table, etc.npx prisma migrate reset --schema=./server/prisma/schema.prisma- Logs backend : Affichés dans le terminal
npm run server:dev - Logs Docker :
docker-compose logs -f backend - Connexion PostgreSQL :
docker exec -it metro-postgres psql -U metroadmin -d metrodb - Inspect tables :
SELECT * FROM survey_responses ORDER BY "createdAt" DESC LIMIT 10;
À implémenter : tests unitaires avec Vitest, tests d'intégration avec Playwright
Projet académique - Tous droits réservés