add readMe Files
This commit is contained in:
@@ -1,16 +1,275 @@
|
||||
# React + Vite
|
||||
# Thé Tip Top – Frontend
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
## Présentation
|
||||
|
||||
Currently, two official plugins are available:
|
||||
Frontend React du jeu-concours fictif **Thé Tip Top**, réalisé dans le cadre de la certification **Expert en Stratégie et Transformation Digitale**.
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
L’interface communique avec l’API backend et propose des parcours adaptés aux visiteurs, clients, employés et administrateurs.
|
||||
|
||||
## React Compiler
|
||||
## Stack technique
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
| 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 |
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
## Fonctionnalités
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
### 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**.
|
||||
|
||||
Reference in New Issue
Block a user