Projet MRS — Site du restaurant avec Hugo et Firebase

🌐 Site en ligne : https://mrss-33d14.web.app/

Présentation du projet

MRS est un site statique réalisé pour un restaurant local, destiné à présenter le menu hebdomadaire ainsi que les actualités du restaurant. Le site a été entièrement repensé avec Hugo comme générateur de sites statiques, un thème personnalisé créé avec Figma pour le design, et du JavaScript développé avec l’aide de Claude AI pour les fonctionnalités interactives.

Le projet est hébergé sur Firebase Hosting, garantissant une mise en ligne rapide, sécurisée et fiable.

Objectifs du projet

• Créer un site statique moderne avec une interface utilisateur sur mesure
• Utiliser Hugo pour une génération de contenu plus rapide et flexible
• Concevoir un design unique et professionnel avec Figma
• Implémenter des fonctionnalités JavaScript interactives avec l’aide de l’IA
• Maintenir un système de mise à jour simple pour les menus hebdomadaires
• Héberger le site sur Firebase pour une performance optimale

Architecture du projet

1. Design personnalisé avec Figma

Le design du site a été entièrement créé sur Figma, permettant :

• Une identité visuelle unique adaptée au restaurant
• Un système de design cohérent avec des composants réutilisables
• Une expérience utilisateur optimisée pour la consultation des menus
• Des mockups précis pour guider le développement

2. Génération statique avec Hugo

Le site utilise Hugo pour la génération de contenu :

1
2
3
4
5
6
7
8
9

# Configuration des menus hebdomadaires
weekly_menu:
  lundi:
    - "Rougail saucisses 3,50€"
    - "Rougail de poisson 3,91€"
  mardi:
    - "Sauté de poulet Tikka Massala 4,19€"
    - "Tagliatelles aux fruits de mer 3,91€"
  # ... autres jours

3. Thème Hugo personnalisé

Le thème a été développé from scratch avec :

• Templates Go pour la génération de contenu
• Structure modulaire pour une maintenance facile
• Système de navigation avancé entre les semaines
• Responsive design adapté à tous les écrans

4. JavaScript intelligent avec Claude AI

Les fonctionnalités interactives ont été développées avec l’aide de Claude AI :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// Navigation intelligente entre les semaines
const ORDERED_DAYS = ["lundi", "mardi", "mercredi", "jeudi", "vendredi"];

// Détection automatique de la semaine actuelle
const isCurrentWeek = (startDate, endDate) => {
    const today = new Date();
    const start = new Date(startDate);
    const end = new Date(endDate);
    return today >= start && today <= end;
};

// Rendu dynamique des menus
function renderMenu() {
    // Logique de rendu optimisée
}

5. Hébergement Firebase Hosting

Le déploiement reste sur Firebase Hosting pour :

• Performance : CDN mondial pour un chargement ultra-rapide
• Sécurité : HTTPS automatique et certificats SSL
• Simplicité : Déploiement en une commande
• Fiabilité : Infrastructure Google scalable

🛠️ Technologies utilisées

• Hugo : Générateur de sites statiques ultra-rapide en Go
• Figma : Outil de design pour l’interface utilisateur
• Claude AI : Assistant IA pour le développement JavaScript
• HTML/CSS/JavaScript : Technologies web fondamentales
• Firebase Hosting : Plateforme d’hébergement performante
• Firebase CLI : Outil de déploiement
• Git/GitHub : Versioning et collaboration

🎨 Processus de design et développement

1. Conception sur Figma

• Analyse des besoins du restaurant
• Création de wireframes et mockups
• Définition du système de couleurs et typographie
• Prototypage des interactions utilisateur

2. Développement avec Hugo

• Création du thème personnalisé
• Développement des templates Go
• Intégration du design Figma en CSS
• Configuration du système de contenu

3. Développement JavaScript avec Claude

• Définition des fonctionnalités interactives
• Collaboration avec Claude AI pour le code JavaScript
• Implémentation de la navigation entre semaines
• Optimisation des performances

4. Déploiement et maintenance

• Tests et optimisations
• Déploiement sur Firebase
• Mise en place du workflow de mise à jour

🚀 Fonctionnalités clés

Navigation intelligente

• Détection automatique de la semaine actuelle
• Navigation fluide entre les semaines précédentes et suivantes
• Indicateurs visuels pour la semaine en cours

Gestion des menus

• Structure flexible pour différents types de plats
• Affichage optimisé par jour de la semaine
• Mise à jour facile via des fichiers Markdown

Interface utilisateur

• Design responsive adapté mobile et desktop
• Animations fluides et micro-interactions
• Accessibilité optimisée pour tous les utilisateurs

📈 Apprentissages techniques

Ce projet m’a permis de maîtriser :

Design et UX

• Figma : Création d’interfaces complètes et systèmes de design
• Design thinking : Approche centrée utilisateur
• Prototypage : Validation des concepts avant développement

Développement statique

• Hugo : Architecture avancée et templating Go
• Performance : Optimisation pour des sites ultra-rapides
• SEO : Optimisation pour les moteurs de recherche

IA et développement

• Collaboration avec Claude AI : Accélération du développement JavaScript
• Debugging assisté : Résolution de problèmes complexes
• Optimisation de code : Amélioration des performances

🌟 Points forts du projet

1. Design unique : Interface sur mesure créée avec Figma
2. Performance exceptionnelle : Hugo + Firebase = vitesse optimale
3. Développement accéléré : Utilisation de Claude AI pour le JavaScript
4. Maintenabilité : Code propre et architecture claire
5. Évolutivité : Base solide pour futures fonctionnalités
6. Expérience utilisateur : Navigation intuitive et design moderne