🍔 Guelmim Snacks

Plateforme de Click & Collect complète et fonctionnelle pour la restauration rapide.

Guelmim Snacks est une application Web Full Stack (SPA) qui connecte les clients affamés aux meilleurs snacks de la ville. Elle digitalise la prise de commande pour réduire l'attente et offre aux restaurateurs un outil de gestion puissant en temps réel.

---

🌟 Points Forts du Projet

Ce projet démontre une maîtrise complète du développement web moderne :

• Architecture Découplée : API REST Laravel (Backend) séparée du Client React (Frontend).
• Gestion d'État Avancée : Utilisation de Redux Toolkit pour gérer l'authentification, le panier et les données API.
• Sécurité : Authentification robuste via Laravel Sanctum (Tokens).
• UX Soignée : Feedback utilisateur (Toasts), validation de formulaires et design responsive.

---

📸 Aperçu du Projet

🏠 L'Expérience Client

Une interface moderne, fluide et responsive pour commander sans attente.

Page d'Accueil	Le Menu & Filtres
Vitrine attractive avec CTA clairs	Filtrage dynamique par catégories

Détail du Snack	Panier Interactif
Présentation du restaurant et ses plats	Gestion des quantités en temps réel

---

👨‍🍳 L'Espace Gérant (Partenaire)

Un tableau de bord puissant pour gérer le restaurant et le flux de commandes.

1. Authentification & Onboarding

Un système de connexion sécurisé et un assistant de configuration (Wizard) pour les nouveaux restaurants.

Connexion Sécurisée	Configuration (Wizard)

2. Gestion des Commandes (Kanban)

Suivi en temps réel des commandes : Nouvelles -> En Préparation -> Prêtes.

3. Gestion du Menu (CRUD)

Ajout, modification et suppression des plats via une interface intuitive.

---

🚀 Fonctionnalités Clés

👤 Espace Client

• Navigation Dynamique : Exploration des restaurants et menus (données réelles API).
• Panier Intelligent : Gestion d'état globale avec persistance.
• Commande en Ligne : Validation de commande connectée à la base de données.
• Suivi de Commande : Consultation de l'historique et des statuts (En attente / Prête).

👨‍🍳 Espace Gérant (Partenaire)

• Onboarding Automatisé : Inscription et assistant de configuration (Upload de logo/couverture).
• Tableau de Bord "Kanban" : Gestion des commandes en temps réel (changement de statut).
• Gestion du Menu (CRUD) :
  • Ajout de plats avec upload d'images.
  • Modification et suppression sécurisées.
  • Gestion de la disponibilité (Toggle Switch).
• Statistiques : Visualisation du Chiffre d'Affaires et des performances (Calculs Backend).

---

🛠️ Stack Technique

Front-End (Client)

• Framework : React.js 19 (Vite)

• Routing : React Router DOM v7 (Routes imbriquées & protégées)

• Gestion d'État (Démonstration académique) :

  • Version 1 (Recommandée) : Redux Toolkit (RTK)
  • Version 2 : Redux Classique (Actions/Reducers)
  • Version 3 : useState & Prop Drilling

• HTTP Client : Axios (Intercepteurs & Gestion d'erreurs)

• UI/UX : CSS Modules, React Hot Toast, React Icons, Leaflet Maps

Back-End (API)

• Framework : Laravel 12
• Architecture : API RESTful
• Base de Données : MySQL
• ORM : Eloquent (Relations complexes, Mutators, Scopes)
• Authentification : Laravel Sanctum (Tokens API)
• Storage : Gestion des fichiers (Images) via Symbolic Links

---

Installation rapide

Le projet contient deux dossiers : backend et frontend.

1. Pré-requis

• Node.js & npm
• PHP & Composer
• MySQL

2. Installation du backend (Laravel)

cd backend

# Installer les dépendances PHP
composer install

# Configurer l'environnement
cp .env.example .env
# (Configurez votre base de données 'guelmim_snacks_db' dans le fichier .env)

# Générer la clé d'application
php artisan key:generate

# Créer les tables et injecter les données de test (Seeders)
php artisan migrate:fresh --seed

# Lancer le serveur API
php artisan serve

L'API est disponible par défaut sur http://127.0.0.1:8000 (les routes API sont sous /api).

3. Installation du Frontend (React)

cd guelmim-snacks-frontend

# Installer les dépendances JavaScript
npm install

# Lancer le serveur de développement
npm run dev

Par défaut l'app React est accessible sur http://localhost:5173 (ou l'URL fournie par Vite).

Remarque : adaptez l'URL de l'API côté frontend (.env client ou configuration) si besoin.

---

🧪 Comptes de Démonstration (Seeders)

Pour tester immédiatement l’espace gérant, utilisez les identifiants suivants générés par les seeders :

• Email : ali@gmail.com
• Mot de passe : password123

---

Architecture et organisation

• frontend/ : code React (pages, components, store)
• backend/ : API Laravel (controllers, models, migrations, seeders)

---

🎓 Contexte du Projet

Projet réalisé dans le cadre du projet de fin de module ReactJS et du module Laravel.

👤 Auteur

Abdelmajid El ainousi
Développeur Full-Stack passionné par la création d'applications web modernes et performantes.

🌐 Mon Portfolio | 💼 Mon LinkedIn