Le Contexte
L'Atelier de la Fève est un projet fictif de café artisanal situé dans le 11ème arrondissement de Paris. L'objectif était de créer une identité numérique forte ("Pas juste un café, une histoire") et de développer une solution technique permettant aux clients pressés de commander à l'avance.
Ce projet m'a permis de faire le pont entre le design Front-End (création d'une ambiance cosy et moderne) et la logique Back-End (gestion des commandes via une base de données).
Fonctionnalités Clés
- Catalogue immersif : Présentation des boissons chaudes, froides et des grains avec une mise en page en grille.
- Click & Collect : Formulaire PHP permettant de réserver sa commande pour une heure précise.
- Gestion de Base de Données : Stockage des commandes (Nom, Prénom, Heure) dans MySQL.
- Génération de Ticket : Retour visuel immédiat pour l'utilisateur avec son numéro de commande unique.
Stack Technique
-
HTML5 / CSS3 : Flexbox & Grid
-
PHP (PDO) : Traitement serveur
-
MySQL : Stockage des commandes
-
Responsive : Mobile First
Les Défis Rencontrés
Connexion Base de Données : La mise en place de la connexion PDO (`try...catch`) pour gérer les erreurs de connexion à la base de données `clickandcollect` a été une étape cruciale pour assurer la fiabilité du site.
Architecture CSS : Le maintien d'une identité visuelle cohérente (couleurs, polices Playfair Display et Manrope) sur toutes les pages (Accueil, Menu, Commande) a nécessité une structure CSS rigoureuse et l'utilisation de variables ou de classes utilitaires.
Direction Artistique
Palette de couleurs
Une sélection de couleurs naturelles pour évoquer la terre, le végétal et la chaleur du café.
Typographie
L'alliance de Playfair Display pour les titres (élégance, tradition) et de Manrope pour le corps de texte (modernité, lisibilité).
Galerie du projet
Aperçu du Menu et de l'ambiance visuelle.