Application web de gestion de cantine scolaire/entreprise avec un design ultramoderne style Apple.
- CLIENT : Commander des plats, suivre les commandes, gérer le profil
- CUISINIER : Gérer les plats, préparer les commandes, voir les statistiques
- LIVREUR : Gérer les livraisons, suivi GPS, collecte des paiements
- CAISSIER : Enregistrer les paiements, générer des reçus
- ADMIN : Administration complète, rapports, gestion des utilisateurs
- Catalogue avec photos et descriptions
- Gestion des allergènes et ingrédients
- Catégorisation (Entrée, Plat, Dessert, Boisson)
- Validation par l'admin
- Panier interactif avec calcul automatique
- Instructions spéciales
- Suivi en temps réel du statut
- Historique des commandes
- Assignation automatique aux livreurs
- Suivi GPS en temps réel
- Photo de livraison obligatoire
- Zones de livraison configurables
- Paiement uniquement en main (espèces/mobile money)
- Génération de reçus
- Gestion de la caisse
- Rapports financiers
- Notifications push personnalisées par rôle
- Centre de notifications
- Paramètres de notification
- React 18 - Framework JavaScript
- Vite - Build tool ultra-rapide
- Tailwind CSS - Framework CSS utility-first
- Framer Motion - Animations fluides
- Lucide React - Icônes modernes
- React Router - Navigation
- React Query - Gestion d'état serveur
- React Hook Form - Gestion des formulaires
- PWA - Application web progressive
# Cloner le projet
git clone <repository-url>
cd appikaly-pwa
# Installer les dépendances
npm install
# Démarrer le serveur de développement
npm run dev
# Build pour la production
npm run build
# Prévisualiser le build
npm run preview- Design minimaliste et élégant
- Animations fluides et naturelles
- Typographie Inter optimisée
- Couleurs primaires et secondaires harmonieuses
- Glassmorphism et effets de profondeur
- Mobile First (320px - 768px)
- Tablet (768px - 1024px)
- Desktop (1024px+)
- Fade in/out
- Slide up/down
- Scale in/out
- Bounce gentle
- Hover effects
- Loading states
| Rôle | Mot de passe | |
|---|---|---|
| Client | client1@example.com | Client123! |
| Cuisinier | cuisinier1@example.com | Cuisinier123! |
| Livreur | livreur1@example.com | Livreur123! |
| Caissier | caissier1@example.com | Caissier123! |
| Admin | admin@example.com | Admin123! |
- Installation sur mobile/desktop
- Mode hors ligne
- Notifications push
- Service worker
- Manifest.json
- Icônes adaptatives
src/
├── components/ # Composants réutilisables
│ ├── dashboard/ # Dashboards par rôle
│ ├── Header.jsx # Navigation principale
│ └── LoadingScreen.jsx
├── pages/ # Pages de l'application
│ ├── Login.jsx
│ ├── Dashboard.jsx
│ ├── Menu.jsx
│ ├── Orders.jsx
│ ├── Profile.jsx
│ └── Admin.jsx
├── hooks/ # Hooks personnalisés
│ └── useAuth.js
├── data/ # Données mock
│ └── mockData.js
├── App.jsx # Composant principal
├── main.jsx # Point d'entrée
└── index.css # Styles globaux
- Authentification - Connexion/déconnexion, gestion des profils
- Gestion des Plats - Catalogue, ingrédients, allergènes
- Gestion des Commandes - Panier, suivi, historique
- Gestion des Livraisons - GPS, assignation, photo
- Gestion Financière - Paiements, reçus, rapports
- Notifications - Push, email, paramètres
- Administration - Utilisateurs, plats, statistiques
# Build de production
npm run build
# Le dossier dist/ contient les fichiers optimisés
# Déployer sur votre serveur web ou CDNMIT License - Voir le fichier LICENSE pour plus de détails.
npm run dev- Serveur de développementnpm run build- Build de productionnpm run preview- Prévisualisation du buildnpm run lint- Linting du code
Les données sont gérées via mockData.js avec une structure complète incluant :
- Utilisateurs avec rôles
- Plats avec catégories et allergènes
- Commandes avec statuts
- Livraisons avec géolocalisation
- Paiements et factures
- Notifications et KPIs
Appikaly - Votre cantine digitale 🍽️✨