O'Délice Burger

Le projet

Description du projet

O'Délice Burger est un projet complet réalisé pour un restaurant fast-food souhaitant renforcer sa présence en ligne. L'objectif était de créer une vitrine attrayante qui met en valeur la carte, les promotions et l'ambiance de l'enseigne, tout en offrant une expérience mobile fluide pour les clients.

Le projet se compose de deux volets : un site web responsive développé en React, et une application mobile conçue sur Figma puis intégrée avec React Native & Expo, permettant de consulter la carte et de passer commande directement depuis son smartphone.

Stack technique

Technologies utilisées

Le projet mobilise un ensemble de technologies modernes pour le web et le mobile.

Challenges

Défis techniques résolus

• Synchronisation web & mobile

  Maintenir une cohérence visuelle et fonctionnelle entre le site web et l'application mobile malgré deux codebases distincts. Résolu grâce à un design system partagé défini sur Figma avec des tokens de couleurs et de typographie communs.

• Performance des images

  Les visuels des burgers étant très lourds, la vitesse de chargement était dégradée sur mobile. Résolu par la conversion en formats WebP, le lazy loading natif et l'implémentation d'un skeleton loader pour améliorer le ressenti utilisateur.

• Responsive design multi-breakpoints

  La mise en page de la carte des produits devait s'adapter de manière cohérente du mobile (1 colonne) à la tablette (2 colonnes) jusqu'au desktop (3-4 colonnes). Résolu via CSS Grid avec des breakpoints précis et des unités fluides.

• Navigation mobile intuitive

  Sur l'application React Native, la navigation entre les sections (accueil, carte, panier) devait être naturelle et rapide. Implémenté avec React Navigation et une bottom tab bar personnalisée adaptée à la charte graphique du restaurant.

Aperçu

Screenshots