the-tip-top-frontend/README.md

# 🍵 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**
```bash
git clone <repo-url>
cd the-tip-top-frontend
```

2. **Installer les dépendances**
```bash
npm install
```

3. **Configurer les variables d'environnement**
Créer un fichier `.env.local` :
```env
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**
```bash
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

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

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