THE-TIP-TOP/frontend/README.md

# 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 :

```text
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 :

```env
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.

```bash
npm install
```

Puis, si nécessaire :

```env
VITE_API_URL=http://localhost:5000
```

## Développement

```bash
npm run dev
```

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

## Qualité et tests

Lint :

```bash
npm run lint
```

Tests :

```bash
npm test -- --run
```

Build :

```bash
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 :

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

## CI/CD

```text
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

```text
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

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

## Infrastructure globale

```text
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**.