Thé Tip Top – Plateforme du jeu-concours

Présentation

Thé Tip Top est une application web complète développée dans le cadre d’un projet de certification Expert en Stratégie et Transformation Digitale.

Le projet simule le système d’information d’un jeu-concours organisé à l’occasion de l’ouverture de la 10ᵉ boutique Thé Tip Top à Nice.

La plateforme permet aux clients de participer avec un code unique présent sur leur ticket, de consulter leurs gains et de les récupérer en boutique. Elle fournit également des interfaces dédiées aux employés et aux administrateurs.

Au-delà de l’application, le projet met en œuvre une chaîne complète de CI/CD, plusieurs environnements isolés, un registre Docker privé, un reverse proxy HTTPS et une stack de supervision.

Projet étudiant — client fictif Thé Tip Top.

---

Fonctionnalités principales

Espace client

• création de compte ;
• vérification de l’adresse email ;
• connexion email / mot de passe ;
• connexion avec Google OAuth 2.0 ;
• gestion du profil ;
• saisie d’un code ticket unique ;
• participation au jeu-concours ;
• consultation des gains.

Espace employé

• authentification avec rôle EMPLOYEE ;
• recherche d’un gain ;
• contrôle des informations associées au ticket ;
• validation de la remise d’un lot.

Espace administrateur

• authentification avec rôle ADMIN ;
• tableau de bord et statistiques ;
• consultation des participants ;
• gestion des données nécessaires à l’administration ;
• création de comptes employés ;
• configuration du lancement du jeu-concours ;
• tirage au sort final ;
• consultation du grand gagnant.

Jeu-concours

Le système gère plusieurs phases :

NOT_CONFIGURED
      ↓
SCHEDULED
      ↓
OPEN
      ↓
CLAIM_ONLY
      ↓
CLOSED

Parmi les principales règles métier :

• un ticket ne peut être utilisé qu’une seule fois ;
• les tickets du jeu sont gagnants ;
• les gains sont associés aux tickets ;
• seuls les clients participent au jeu ;
• plusieurs participations d’un même client n’augmentent pas ses chances au tirage final ;
• un seul grand gagnant peut être enregistré ;
• le tirage final respecte les contraintes temporelles définies dans l’application.

---

Architecture générale

                         UTILISATEURS
                              │
                           HTTPS
                              │
                              ▼
                         ┌─────────┐
                         │ Traefik │
                         └────┬────┘
                              │
                 ┌────────────┴────────────┐
                 │                         │
                 ▼                         ▼
          Frontend React             Backend API
          Vite + Nginx             Node.js + Express
                 │                         │
                 │                         ▼
                 │                    PostgreSQL
                 │                     + Prisma
                 │
                 └────────── API REST ─────┘

---

Stack technique

Frontend

• React
• Vite
• React Router
• Tailwind CSS
• Vitest
• Testing Library
• ESLint
• Nginx

Backend

• Node.js 22
• Express.js
• Prisma ORM 6
• PostgreSQL 16
• JWT
• Passport.js
• Google OAuth 2.0
• Bcrypt
• Zod
• Nodemailer
• Helmet
• express-rate-limit
• Swagger / OpenAPI
• Jest
• Supertest

DevOps

• Git
• Gitea
• Jenkins
• Docker
• Docker Compose
• Docker Registry privé
• Traefik
• HTTPS
• Let's Encrypt

Monitoring

• Prometheus
• Grafana
• cAdvisor
• Node Exporter

---

Structure du dépôt

THE-TIP-TOP/
│
├── backend/
│   ├── prisma/
│   │   ├── migrations/
│   │   ├── schema.prisma
│   │   └── seed.js
│   ├── src/
│   ├── tests/
│   ├── Dockerfile
│   ├── package.json
│   └── README.md
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   ├── services/
│   │   └── test/
│   ├── Dockerfile
│   ├── nginx.conf
│   ├── package.json
│   └── README.md
│
├── deploy/
│   ├── dev/
│   │   └── docker-compose.yml
│   ├── preprod/
│   │   └── docker-compose.yml
│   └── prod/
│       └── docker-compose.yml
│
├── Jenkinsfile
└── README.md

Pour les informations spécifiques à chaque application :

• backend/README.md
• frontend/README.md

---

Environnements

Le projet utilise trois environnements distincts.

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

Les bases PostgreSQL et conteneurs applicatifs sont séparés entre les environnements.

---

Stratégie Git

Le workflow de branches est organisé autour de plusieurs niveaux de validation.

feature/*
    │
    │ Pull Request / Merge
    ▼
develop
    │
    │ CI + déploiement DEV
    ▼
release-*
    │
    │ CI + déploiement PREPROD
    ▼
main
    │
    │ validation manuelle Jenkins
    ▼
PRODUCTION

feature/*

Branches utilisées pour le développement des fonctionnalités.

develop

Branche d’intégration. Un changement validé sur cette branche est déployé automatiquement en DEV.

release-*

Branches de préparation d’une version. Elles sont déployées en PREPROD pour validation avant production.

main

Branche stable de production. Le déploiement PROD nécessite une validation manuelle dans Jenkins.

---

Pipeline CI/CD

Le fichier Jenkinsfile placé à la racine du dépôt définit la chaîne d’intégration et de déploiement.

Push Gitea
    │
    ▼
Jenkins
    │
    ├── Checkout
    │
    ├── Vérification workspace
    │
    ├── PostgreSQL CI temporaire
    │
    ├── Prisma migrations
    │
    ├── Prisma seed
    │
    ├── Tests backend Jest
    │
    ├── Publication JUnit
    │
    ├── Frontend ESLint
    │
    ├── Frontend Vite build
    │
    ├── Docker build
    │
    ├── Push Registry privé
    │
    └── Docker Compose deploy
    │
    ▼
DEV / PREPROD / PROD

Comportement selon la branche

Feature

Push
 ↓
Tests
 ↓
Lint
 ↓
Build

Pas de déploiement automatique.

Develop

Push develop
 ↓
CI
 ↓
Images Docker
 ↓
Registry
 ↓
Déploiement DEV

Release

Push release-*
 ↓
CI
 ↓
Images Docker
 ↓
Registry
 ↓
Déploiement PREPROD

Main

Push main
 ↓
CI
 ↓
Images Docker
 ↓
Registry
 ↓
Validation Jenkins
 ↓
Déploiement PROD

Cette validation constitue une barrière supplémentaire avant la mise en production.

---

Tests automatisés

Backend

Les tests utilisent Jest et Supertest.

Ils couvrent notamment :

• inscription ;
• connexion ;
• parcours E2E ;
• autorisations ;
• participation ;
• phases du jeu ;
• tirage au sort ;
• notifications liées aux gains ;
• notification du grand gagnant ;
• authentification Google ;
• gestion du mot de passe ;
• comportements liés aux emails.

Commande :

cd backend
npm test

Dans Jenkins, PostgreSQL est lancé temporairement pour les tests. Les migrations et données initiales sont appliquées avant l’exécution des suites.

Frontend

Les tests utilisent Vitest et Testing Library.

Ils couvrent notamment :

• connexion ;
• inscription ;
• formulaire d’inscription ;
• saisie du code unique ;
• routes protégées ;
• contexte d’authentification ;
• gestion des erreurs d’authentification ;
• services ;
• bannière de cookies.

Commandes :

cd frontend
npm run lint
npm test -- --run
npm run build

---

Authentification et sécurité

Le projet met en œuvre plusieurs mécanismes de sécurité.

Authentification

• JWT ;
• email / mot de passe ;
• Google OAuth 2.0 ;
• vérification email.

Protection des mots de passe

Les mots de passe sont hachés avec Bcrypt avant stockage.

Validation

Les données reçues par l’API sont validées avec Zod.

Contrôle d’accès

Des middlewares backend contrôlent :

• l’authentification ;
• le rôle ;
• l’accès aux routes protégées.

Sécurité HTTP

Le backend utilise notamment :

• Helmet ;
• rate limiting ;
• validation des entrées.

HTTPS

Traefik assure le routage HTTP/HTTPS vers les différents services.

---

Gestion des secrets

Les secrets ne doivent jamais être stockés directement dans le dépôt Git.

Sont notamment concernés :

JWT_SECRET
DATABASE_URL / mots de passe PostgreSQL
MAIL_USER
MAIL_PASS
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
FACEBOOK_APP_ID
FACEBOOK_APP_SECRET
identifiants du Docker Registry

Les valeurs sensibles de déploiement sont externalisées sur le serveur ou injectées par Jenkins.

Les fichiers contenant des secrets réels ne doivent jamais être ajoutés au dépôt.

---

Docker

Le frontend et le backend disposent chacun de leur propre image Docker.

Backend

Node.js 22
   ↓
npm ci
   ↓
Prisma generate
   ↓
Application Express

Frontend

Build multi-stage :

Node.js 22
   ↓
npm ci
   ↓
Vite build
   ↓
Nginx

Les images sont versionnées et publiées dans le Registry privé par Jenkins.

---

Docker Compose

Chaque environnement possède son propre fichier Compose :

deploy/dev/docker-compose.yml
deploy/preprod/docker-compose.yml
deploy/prod/docker-compose.yml

Chaque stack contient notamment :

Frontend
Backend
PostgreSQL

Les stacks sont isolées avec leurs propres conteneurs, réseaux, données et paramètres d’environnement.

---

Reverse proxy et HTTPS

Traefik constitue le point d’entrée HTTP/HTTPS de l’infrastructure.

Il permet notamment :

• le routage par nom de domaine ;
• l’exposition des frontends ;
• l’exposition des APIs ;
• la terminaison TLS ;
• la gestion des certificats HTTPS.

Seuls les ports nécessaires sont exposés publiquement.

---

Monitoring

La plateforme dispose d’une stack de supervision.

Node Exporter ──┐
                │
cAdvisor ───────┼──► Prometheus ───► Grafana
                │
Services ───────┘

Prometheus

Collecte les métriques.

Grafana

Permet de construire et consulter les tableaux de bord.

cAdvisor

Expose les métriques relatives aux conteneurs Docker.

Node Exporter

Expose les métriques système du serveur.

---

Documentation API

Le backend expose une documentation Swagger / OpenAPI.

En environnement local :

http://localhost:5000/api-docs

Elle permet de :

• consulter les routes ;
• consulter les schémas ;
• examiner les paramètres ;
• tester les endpoints ;
• utiliser l’authentification prévue par l’API.

---

Installation locale

1. Cloner le dépôt

git clone <URL_DU_DEPOT>
cd THE-TIP-TOP

2. Backend

cd backend
npm install

Configurer les variables d’environnement locales puis :

npx prisma generate
npx prisma migrate dev
npx prisma db seed
npm run dev

3. Frontend

Dans un second terminal :

cd frontend
npm install
npm run dev

Le frontend local est généralement accessible sur :

http://localhost:5173

et l’API sur :

http://localhost:5000

Consulter les README des sous-projets pour les détails de configuration.

---

Base de données

Le projet utilise PostgreSQL 16 avec Prisma ORM 6.

Commandes Prisma utiles :

npx prisma generate
npx prisma migrate dev
npx prisma migrate deploy
npx prisma db seed
npx prisma studio

En environnement déployé, les migrations sont appliquées avec prisma migrate deploy.

---

Qualité logicielle

Le projet applique plusieurs niveaux de contrôle :

Code
 ↓
ESLint
 ↓
Tests unitaires / fonctionnels
 ↓
Tests backend / E2E
 ↓
Build
 ↓
Docker Build
 ↓
Déploiement

Un échec dans une étape critique provoque l’échec du pipeline et empêche la promotion normale de la version.

---

Infrastructure DevOps

Vue simplifiée :

                    ┌───────────────┐
                    │     Gitea     │
                    └───────┬───────┘
                            │ Webhook
                            ▼
                    ┌───────────────┐
                    │    Jenkins    │
                    └───────┬───────┘
                            │
              Tests / Build / Docker
                            │
                            ▼
                    ┌───────────────┐
                    │Docker Registry│
                    └───────┬───────┘
                            │
            ┌───────────────┼───────────────┐
            ▼               ▼               ▼
           DEV           PREPROD           PROD
            │               │               │
            └───────────────┼───────────────┘
                            ▼
                         Traefik
                            │
                          HTTPS

---

État du projet

Le projet dispose notamment de :

• frontend React opérationnel ;
• backend Express opérationnel ;
• PostgreSQL et Prisma ;
• authentification JWT ;
• Google OAuth 2.0 ;
• vérification email ;
• gestion CLIENT / EMPLOYEE / ADMIN ;
• jeu-concours et gestion des gains ;
• tirage final ;
• tests automatisés ;
• documentation Swagger ;
• images Docker ;
• Registry privé ;
• pipeline Jenkins multibranch ;
• environnements DEV / PREPROD / PROD ;
• déploiements Docker Compose ;
• reverse proxy Traefik ;
• HTTPS ;
• monitoring Prometheus / Grafana.

---

Documentation complémentaire

Documentation backend :

backend/README.md

Documentation frontend :

frontend/README.md

Ces fichiers détaillent respectivement l’API et l’application React.

---

Projet académique

Projet réalisé dans le cadre de la certification :

Expert en Stratégie et Transformation Digitale

Le cas Thé Tip Top est utilisé comme contexte métier fictif pour la conception, le développement, les tests, la sécurisation, l’industrialisation et le déploiement de l’application.