Pedro Pasta.

( 01 )
Plat de pâtes italiennes servi dans une assiette, illustration du site du restaurant Pedro Pasta.

Overview

Pedro Pasta est un site vitrine pour un restaurant italien — menu, localisation et identité de marque, avec une navigation simple et chaleureuse.

Carte interactive Leaflet pour afficher l'emplacement du restaurant. Formulaire de contact fonctionnel avec React Hook Form et validation. Données gérées via une base Neon connectée avec Prisma. Animations UI fluides avec Motion Primitives, notamment le composant Morphing Dialog pour la navigation dans le menu.

Site complet livré en une semaine — premier contact avec Leaflet, Neon et les animations avancées tout en maintenant la clarté de l'interface.

Challenge & Problem Statement

Trois défis techniques à résoudre pour un site vitrine de restaurant fonctionnel et mémorable :

  • Intégrer une carte interactive Leaflet pour afficher la localisation
  • Créer un formulaire de contact fiable avec React Hook Form
  • Gérer les données via une base Neon connectée avec Prisma

Le tout en maintenant une interface claire, chaleureuse et sans surcharge visuelle.

Solution

Une interface simple et efficace combinant :

  • Une carte interactive pour la localisation
  • Un formulaire robuste avec validation
  • Un menu animé et fluide pour améliorer l’expérience utilisateur

Development

Stack

Frontend Next.js avec un backend léger — API Routes pour le formulaire, Neon (PostgreSQL serverless) + Prisma pour la persistance.

Frontend — Next.js

  • Next.js 14 + TypeScript — App Router
  • Tailwind CSS — styling utilitaire, palette chaude et italienne
  • Motion Primitives — animations UI avancées (Morphing Dialog pour le menu)
  • React Hook Form — formulaire de contact avec validation
  • Leaflet — carte interactive pour l'emplacement du restaurant

Backend — API Routes + Neon

  • Next.js API Routes — endpoint pour la soumission du formulaire
  • Prisma ORM — schéma et requêtes typés
  • Neon — PostgreSQL serverless, zéro infrastructure à gérer

Décisions techniques notables

  • Neon + Prisma : première utilisation d'un PostgreSQL serverless — setup en quelques minutes, même ergonomie que Prisma classique.
  • Morphing Dialog pour le menu : transition animée entre la carte des plats et le détail — plus engageant qu'un simple modal statique.
  • Leaflet sans SSR : Leaflet n'est pas compatible avec le rendu serveur — chargement dynamique avec next/dynamic et ssr: false.

Outcome & Results

Résultats

Site vitrine complet et fonctionnel : carte interactive, formulaire opérationnel, navigation animée dans le menu. Expérience utilisateur claire et moderne.

Ce que j'ai appris

  • Leaflet en Next.js : la contrainte SSR de Leaflet m'a appris l'importance du chargement dynamique côté client pour les librairies qui dépendent du DOM.
  • Neon pour les petits projets : une base PostgreSQL serverless sans infrastructure à gérer — le bon choix pour un site vitrine qui n'a pas besoin d'un serveur dédié.
  • Animations sans sacrifier la lisibilité : Motion Primitives permet d'ajouter de la vie à une interface sans alourdir le code ni perturber la navigation.

Learnings & Conclusion

Ce projet m’a permis de :

  • Approfondir l’intégration de cartes interactives avec Leaflet
  • Mieux structurer des formulaires avec React Hook Form
  • Découvrir la gestion de données avec Neon et Prisma
  • Intégrer des animations UI avancées tout en conservant une interface sobre