🍵 Thé Tip Top - Jeu Concours Frontend

Application web moderne pour le jeu-concours "Thé Tip Top" avec Next.js 14 et Tailwind CSS.

📋 Description

Site web complet permettant aux utilisateurs de :

• Se connecter via Google/Facebook OAuth ou formulaire classique
• Participer au jeu-concours en entrant un code de ticket (10 caractères)
• Consulter leurs gains et historiques
• Permettre aux employés de vérifier les gains et marquer comme "remis"
• Permettre aux administrateurs de visualiser les statistiques globales du jeu

🚀 Technologies utilisées

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Gestion d'état: React Context API (AuthContext)
• Formulaires: React Hook Form + Zod
• Notifications: React Hot Toast
• Appels API: Axios
• Language: TypeScript

📁 Structure du projet

the-tip-top-frontend/
├── app/                          # Pages Next.js 14 (App Router)
│   ├── page.tsx                  # Page d'accueil
│   ├── login/page.tsx            # Connexion
│   ├── register/page.tsx         # Inscription
│   ├── jeux/page.tsx             # Page de jeu
│   ├── client/page.tsx           # Dashboard client
│   ├── employe/page.tsx          # Dashboard employé
│   ├── admin/page.tsx            # Dashboard admin
│   ├── historique/page.tsx       # Historique
│   ├── profile/page.tsx          # Profil
│   ├── layout.tsx                # Layout principal
│   └── globals.css               # Styles globaux
│
├── components/                   # Composants réutilisables
│   ├── Header.tsx                # Header avec navigation
│   ├── Footer.tsx                # Footer complet
│   ├── Button.tsx                # Bouton personnalisé
│   └── ui/                       # Composants UI
│       ├── Card.tsx
│       ├── Input.tsx
│       ├── Badge.tsx
│       ├── Modal.tsx
│       ├── Loading.tsx
│       └── Table.tsx
│
├── contexts/                     # Contextes React
│   └── AuthContext.tsx           # Authentification
│
├── services/                     # Services API
│   ├── api.ts                    # Configuration Axios
│   ├── auth.service.ts           # Auth
│   ├── user.service.ts           # Utilisateur
│   ├── game.service.ts           # Jeu
│   ├── employee.service.ts       # Employé
│   └── admin.service.ts          # Admin
│
├── hooks/                        # Hooks personnalisés
│   └── useGame.ts
│
├── lib/                          # Librairies
│   └── validations.ts            # Schémas Zod
│
├── types/                        # Types TypeScript
│   └── index.ts
│
└── utils/                        # Utilitaires
    ├── constants.ts              # Constantes
    └── helpers.ts                # Helpers

🎨 Fonctionnalités

Pages publiques

• ✅ Page d'accueil : Présentation du jeu-concours
• ✅ Connexion/Inscription : Authentification complète avec OAuth
• ✅ Navigation responsive : Header et Footer professionnels

Espace Client (/client)

• ✅ Statistiques personnelles (participations, gains, en attente)
• ✅ Historique des tickets joués
• ✅ Accès rapide au jeu

Page de jeu (/jeux)

• ✅ Saisie de code ticket avec validation
• ✅ Résultat instantané avec modal
• ✅ Protection : utilisateurs connectés uniquement

Espace Employé (/employe)

• ✅ Recherche de ticket par code
• ✅ Liste des tickets en attente
• ✅ Validation des gains
• ✅ Protection : rôle "employee" requis

Espace Admin (/admin)

• ✅ Statistiques globales du jeu
• ✅ Distribution des lots
• ✅ Aperçu des statuts
• ✅ Derniers utilisateurs et tickets
• ✅ Protection : rôle "admin" requis

⚙️ Installation

1. Cloner le projet

git clone <repo-url>
cd the-tip-top-frontend

2. Installer les dépendances

npm install

3. Configurer les variables d'environnement Créer un fichier .env.local :

NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret

4. Lancer le serveur de développement

npm run dev

Le site sera accessible sur http://localhost:3000

🔗 Routes principales

Route	Description	Protection
/	Page d'accueil	Publique
/login	Connexion	Publique
/register	Inscription	Publique
/jeux	Participer au jeu	Authentifié
/client	Dashboard client	Client
/employe	Dashboard employé	Employé
/admin	Dashboard admin	Admin
/historique	Historique	Authentifié
/profile	Profil utilisateur	Authentifié

🎯 Backend requis

Le frontend se connecte à un backend Express sur http://localhost:5000 (configurable).

Endpoints attendus :

Authentification

• POST /api/auth/login
• POST /api/auth/register
• POST /api/auth/google
• POST /api/auth/facebook
• GET /api/auth/me
• POST /api/auth/logout

Jeu

• POST /api/game/play

Utilisateur

• GET /api/user/tickets
• GET /api/user/profile

Employé

• GET /api/employee/pending-tickets
• POST /api/employee/validate/:id

Admin

• GET /api/admin/statistics
• GET /api/admin/users
• GET /api/admin/tickets

🏗️ Build de production

# Créer le build
npm run build

# Démarrer en production
npm start

🎨 Thème et design

Le projet utilise un thème personnalisé avec Tailwind CSS :

• Couleur primaire : Vert (thème du thé)
• Couleur secondaire : Jaune/Or
• Design : Moderne, responsive, accessible
• Composants : Réutilisables et modulaires

📱 Responsive

L'application est entièrement responsive :

• 📱 Mobile : < 768px
• 💻 Tablet : 768px - 1024px
• 🖥️ Desktop : > 1024px

♿ Accessibilité

• Labels ARIA sur tous les éléments interactifs
• Navigation au clavier
• Contrastes de couleurs respectés
• Messages d'erreur descriptifs

🧪 Scripts disponibles

npm run dev      # Développement
npm run build    # Build production
npm start        # Démarrer en production
npm run lint     # Linter

📄 License

Ce projet est sous licence privée - Thé Tip Top © 2024

👥 Auteur

Développé pour Thé Tip Top - Jeu Concours 2024

---

Note: Assurez-vous que le backend est démarré avant de lancer le frontend.