Natasha's Bakery

Project Overview

Natasha's Bakery is a static marketing site for a home-run Brazilian bakery specializing in artisanal cakes, brigadeiros, and traditional sweets. Built with Astro 6, Tailwind CSS v4, and daisyUI v5, the site showcases three featured desserts with detailed ingredient modals, a validated order inquiry form with a Cally date picker, and a persistent dark mode. The output is fully prerendered and deployed to Netlify as static HTML, earning a perfect 100/100/100/100 Lighthouse score.

Key Features

Dessert Gallery with Ingredient Modals

A three-card gallery of featured cakes, each opening a modal with a photo, description, and full ingredient list driven entirely from a typed data array.

Validated Order Inquiry Form

Multi-field contact form with nanostore-backed state, per-field validation, auto-formatted US phone input, and a future-dated event date enforced through a lazy-loaded Cally date picker.

Persistent Dark Mode

A theme toggle backed by a nanostore and cookie, with a pre-paint inline script that stamps the correct theme on `<html>` before first render to prevent any flash of unstyled content.

Perfect Lighthouse Scores

100/100/100/100 across Performance, Accessibility, Best Practices, and SEO — achieved through static HTML output, lazy-injected third-party scripts, and priority-loaded hero imagery.

Static-First Astro Build

Every route is prerendered at build time with `output: 'static'` — no server runtime, no API routes, and minimal client JavaScript.

Technical Deep Dive

Natasha’s Bakery is built with Astro 6 and deployed to Netlify as a fully static site. The stack layers Tailwind CSS v4 and daisyUI v5 for styling, nanostores for the tiny pockets of client state, and unplugin-auto-import so common atoms and utilities are available without boilerplate imports. Every page is prerendered — there is no server runtime, which is what makes the perfect Lighthouse scores reproducible rather than lucky.

The dessert gallery is driven by a typed desserts array in the Gallery component. Each entry renders both a GalleryCard and a paired DessertModal, so clicking a card opens a modal with the full ingredient list and description. The pattern keeps content editable in one place and makes adding a fourth featured dessert a one-object change.

The order form is the most stateful part of the site. Three nanostores — $contactForm, $contactErrors, and $contactStatus — hold the field values, per-field validation errors, and submission state. Validators handle required fields, email format, a 10-digit US phone pattern with live formatting, a future-date check on the event date, and a minimum-length message. The Cally web component for date selection is lazy-injected via an IntersectionObserver the first time the form scrolls into view, keeping it out of the critical path.

Theme handling uses a nanostore with cookie persistence. An is:inline script in the head runs pre-paint to read the cookie (or fall back to prefers-color-scheme) and stamp data-theme on the root element before hydration, preventing any flash of unstyled content on first load.