Paella Valencia

The entire website operates in English and Spanish, switchable from the navigation bar with flag icons (🇬🇧 / 🇪🇸) and instant language toggling — no page reload. The implementation uses a custom React Context (LanguageContext) that persists the selected language across the session and is accessible to every component. Every piece of user-facing text — page headings, service descriptions, pricing labels, WhatsApp messages, navigation links, footer content, CTA buttons — exists in both languages. In the database, all text fields use a reusable BilingualString schema type ({ en: string, es: string }), and a single t() helper function resolves the correct language at render time throughout the entire codebase.

Key Details

Each of Ryan's four cooking experiences — Chalet Experience, Private Class, Corporate Events, and Paella Wars — has its own dynamically rendered page at /[slug]. Pages are server-rendered using generateStaticParams for SEO, pulling data from MongoDB at build time and re-validating on request. Each service page includes a full-screen hero with gradient overlay, an intro section, a pricing table with seasonal tiers and bilingual labels, an "included" checklist with emoji icons and bilingual descriptions, a "perfect for" tag cloud per language, a photo gallery, a testimonial section, and a WhatsApp booking CTA. Every element is bilingual and fully editable from the admin panel.

Key Details

This is the heart of the project. A fully custom content management system at /admin — no WordPress, no Contentful, no third-party CMS. The client opens a browser, sees all his services, and can edit everything: text in both languages via an EN/ES tab switcher, photos via inline Cloudinary upload, seasonal pricing rows (add/remove with bilingual labels and notes), "What's Included" items with emoji icon input, "Perfect For" tags per language, and service visibility (show/hide from the website without deleting). Every change saves to MongoDB via a PUT API with real-time success and error feedback. Ryan manages his own business presence the way you'd manage an Instagram profile — but with full control over structure, not just posts.

Key Details

Each service supports up to 6 gallery photos, stored as Cloudinary URLs in the MongoDB gallery array. On the frontend, photos display in a responsive CSS grid that adapts column count based on the number of images (1, 2, or 3 columns). Clicking any photo opens a full-screen lightbox with a dark overlay, left/right navigation arrows, a photo counter (e.g. 2/6), and close button. The lightbox is built entirely in React state — no external library, using useState for the active index with keyboard-friendly close behaviour.

Key Details

All images flow through Cloudinary — card images, hero banners, and gallery photos. The admin panel provides inline upload with a visual thumbnail preview grid and individual remove buttons for each photo slot. When the client uploads an image, it goes to Cloudinary via a POST /api/upload endpoint, which returns an optimised CDN URL that is saved to MongoDB. Cloudinary handles image transformation and global CDN delivery, keeping the database lean and the frontend fast.

Key Details

The database schema was designed for a bilingual, content-rich business site. Each service document in MongoDB Atlas contains nested BilingualString fields for every text element (title, tagline, description, long description), pricing arrays with seasonal rows (each with bilingual label and note), included items arrays with emoji icons and bilingual descriptions, perfectFor tag arrays per language, gallery URL arrays, and bilingual WhatsApp messages. The Mongoose ODM provides full type safety with a typed IService schema and model. RESTful API routes handle all CRUD operations: GET/PUT /api/services/[slug] for individual services, GET /api/services for listing, and POST /api/upload for Cloudinary.

Key Details

Every service card and service page includes a direct WhatsApp booking button that pre-populates a custom message in the visitor's language. If the visitor is browsing in Spanish, the WhatsApp message is in Spanish. The message text is stored per service in MongoDB and fully editable from the admin panel — the client can adjust his booking prompts for each experience without touching code. Built with the wa.me deep link protocol and encodeURIComponent for safe URL encoding.

Key Details

Built for discoverability and speed. Service pages are server-side rendered with generateStaticParams for fast initial load and SEO indexing. The HTML uses semantic structure with proper heading hierarchy (h1 → h2 → h3), alt text on all images loaded from bilingual service titles, and next/image optimisation for local assets with an unoptimized flag for external Cloudinary URLs. Meta tags and Open Graph metadata are configured via the Next.js metadata API for social sharing previews. The static generation approach means pages load instantly from Vercel's edge CDN.

Key Details

The visual identity was built from scratch to reflect the warmth, authenticity, and premium positioning of Ryan's brand. The palette is built around terracotta (#9B4E2E), deep espresso brown (#2C1A0E), warm parchment (#FAF6F0), and sand (#D4C4A8) — evoking wood fire, Spanish earth, and Mediterranean light. Typography pairs Cormorant Garamond for elegant headings with Jost for clean body text, all using clamp() for fluid scaling. The custom CSS design system uses CSS variables for the palette, reusable component classes (btn-primary, service-card, divider), and animation keyframes (fadeUp with delay variants). The layout is fully responsive: hamburger navigation on mobile with slide-in overlay, collapsing grid layouts, and SSR-safe responsive logic using a mounted-state pattern to avoid hydration mismatches.

Key Details

Reflection

What this project taught me

This project pushed me beyond building websites into building systems. The biggest shift was thinking about the client as a second user — someone who never sees the code but needs to operate the product daily. Every admin interface decision came down to: “Would Ryan understand this without me explaining it?”

It also deepened my understanding of data architecture. Designing a bilingual schema where every field has two versions, every API route handles both, and every component resolves the right one — that's a different kind of complexity than building a single-language site.

Integrating Cloudinary as a media pipeline taught me how real production systems handle image hosting, transformation, and delivery at scale. And working with MongoDB and Mongoose gave me a full NoSQL perspective to complement my PostgreSQL experience on other projects — understanding when each database model fits the use case.

Skills Demonstrated