THE-TIP-TOP/frontend

Thé Tip Top – Frontend

Présentation

Frontend React du jeu-concours fictif Thé Tip Top, réalisé dans le cadre de la certification Expert en Stratégie et Transformation Digitale.

L’interface communique avec l’API backend et propose des parcours adaptés aux visiteurs, clients, employés et administrateurs.

Stack technique

Technologie	Utilisation
React	Interface utilisateur
Vite	Développement et build
React Router	Navigation
Tailwind CSS	Interface responsive
Vitest	Tests
Testing Library	Tests fonctionnels
ESLint	Analyse statique
Nginx	Serveur web du conteneur
Docker	Conteneurisation

Fonctionnalités

Visiteur

• accueil ;
• règles du jeu ;
• inscription ;
• connexion ;
• connexion Google ;
• pages légales et confidentialité ;
• CGU et accessibilité ;
• contact ;
• plan du site.

Client

• profil ;
• saisie d’un code unique ;
• participation ;
• consultation des gains ;
• gestion de session.

Employé

• recherche d’un gain ;
• vérification d’un ticket ;
• validation de la remise d’un lot.

Administrateur

• statistiques ;
• gestion administrative ;
• création d’employés ;
• configuration du jeu ;
• tirage au sort ;
• consultation du grand gagnant.

Authentification

Le frontend prend en charge l’authentification email/mot de passe, la vérification email, le JWT, les routes protégées et Google OAuth 2.0.

Flux OAuth :

Frontend
  ↓
/api/auth/google
  ↓
Google
  ↓
Callback backend
  ↓
/auth/callback frontend
  ↓
JWT + utilisateur
  ↓
Redirection selon le rôle

Rôles

• CLIENT
• EMPLOYEE
• ADMIN

Les protections frontend améliorent l’expérience utilisateur ; les autorisations sensibles restent également contrôlées côté backend.

Configuration API

Le frontend utilise :

VITE_API_URL=http://localhost:5000

Les services utilisent cette URL pour les routes /api/auth, /api/game, /api/employee et /api/admin.

Dans Jenkins, VITE_API_URL est injectée au moment du build Docker selon l’environnement cible.

Installation locale

Prérequis : Node.js 22 et npm.

npm install

Puis, si nécessaire :

VITE_API_URL=http://localhost:5000

Développement

npm run dev

L’application Vite est généralement disponible sur http://localhost:5173.

Qualité et tests

Lint :

npm run lint

Tests :

npm test -- --run

Build :

npm run build

Les tests couvrent notamment la connexion, l’inscription, la saisie de code, les routes protégées, le contexte d’authentification, les services et la bannière de cookies.

Docker

Le frontend utilise un build multi-stage :

Node.js
  ↓
npm ci
  ↓
Vite build
  ↓
dist/
  ↓
Nginx

CI/CD

feature/*  → CI uniquement
develop    → DEV automatique
release-*  → PREPROD automatique
main       → validation manuelle → PROD

Pour le frontend, Jenkins exécute notamment :

1. npm ci ;
2. npm run lint ;
3. npm run build ;
4. Docker build ;
5. publication dans le Registry ;
6. déploiement dans l’environnement cible.

Environnements

Environnement	Frontend	API
DEV	https://dev.dsp5-archi-o24a-4-5-g4.fr	https://api-dev.dsp5-archi-o24a-4-5-g4.fr
PREPROD	https://preprod.dsp5-archi-o24a-4-5-g4.fr	https://api-preprod.dsp5-archi-o24a-4-5-g4.fr
PROD	https://dsp5-archi-o24a-4-5-g4.fr	https://api.dsp5-archi-o24a-4-5-g4.fr

Architecture applicative

Navigateur
  ↓ HTTPS
Traefik
  ↓
Nginx / React
  ↓
API Express
  ↓
PostgreSQL

Le frontend n’accède jamais directement à PostgreSQL.

Pages principales

Le projet comprend notamment les pages suivantes :

• accueil ;
• inscription ;
• connexion ;
• callback OAuth ;
• définition du mot de passe ;
• saisie du code unique ;
• gains ;
• profil ;
• espace employé ;
• espace administrateur ;
• règles du jeu ;
• contact ;
• mentions légales ;
• confidentialité ;
• CGU ;
• accessibilité ;
• plan du site ;
• page 404.

Sécurité

• routes protégées ;
• gestion centralisée de l’authentification ;
• traitement des erreurs 401 ;
• redirection selon le rôle ;
• HTTPS sur les environnements déployés ;
• aucun secret OAuth privé dans le frontend.

Le GOOGLE_CLIENT_SECRET, le secret JWT, les identifiants SMTP et les mots de passe de base de données ne doivent jamais être exposés dans le frontend.

Arborescence simplifiée

frontend/
├── src/
│   ├── components/
│   ├── context/
│   ├── pages/
│   ├── services/
│   ├── test/
│   └── App.jsx
├── Dockerfile
├── nginx.conf
├── package.json
└── README.md

Infrastructure globale

Développeur
  ↓
Gitea
  ↓
Jenkins
  ↓
Tests + Lint + Build
  ↓
Docker Registry
  ↓
DEV / PREPROD / PROD
  ↓
Traefik + HTTPS

Supervision : Prometheus, Grafana, cAdvisor et Node Exporter.

Projet

Projet étudiant fictif réalisé dans le cadre de la certification Expert en Stratégie et Transformation Digitale.

Client fictif : Thé Tip Top.