Grandma's Recipes: Building a Cozy Recipe Landing Page with React & Vite

Thiago Fogaca — Sun, 02 Aug 2026 00:37:05 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

For this challenge, I created Grandma's Recipes, a responsive landing page inspired by handwritten family cookbooks and the comfort of homemade food.

Rather than building a traditional restaurant website, I wanted to capture the feeling of opening a recipe notebook that's been passed down through generations. The interface uses warm colors, subtle animations, illustrated recipe cards, and a notebook-inspired aesthetic to create a cozy experience.

Features

Responsive design
Light/Dark mode
Live recipe search
Category filters
"Surprise Me!" random recipe button
Favorite recipes saved with Local Storage
Accessible recipe modal
Scroll reveal animations using the Intersection Observer API
Fully responsive layout
Semantic HTML and accessibility best practices

Tech Stack

React 19
Vite
JavaScript
CSS
Local Storage
Intersection Observer API

Demo

Live Demo

thiagofogaca25.github.io

GitHub Repository

thiagofogaca25 / Grandma_Recipes-Front_End_Challenge

Este é um projeto enviado ao Frontend Challenge - Comfort Food Edition, Perfect Landing.

Grandma's Recipes

A single-page React app for a family recipe collection — built with React 19, Vite, and plain CSS (no UI libraries).

Run it

npm install
npm run dev

Build for production:

npm run build

Output goes to dist/, ready to deploy to GitHub Pages, Vercel, or Netlify.

What's inside

Hero with an illustrated, hand-pinned recipe index card as the signature visual element
8 full recipes (ingredients + steps + a short story note each) across Breakfast, Lunch, Dinner, Dessert, Snack
Live search by title and category filters
"Surprise Me!" button that opens a random recipe from the current filter
Favorites, saved to localStorage
Recipe detail modal with full ingredients and steps, keyboard-accessible (Escape to close, focus trap on open)
Light/dark theme toggle, persisted to localStorage and defaulting to the system preference
Scroll-reveal animations via IntersectionObserver — no animation library
Fully responsive: 4 → 2 →…

View on GitHub

Development Journey

My goal was to build a polished frontend experience while keeping the project lightweight and free of unnecessary dependencies.

The application includes complete recipe details displayed in an accessible modal, a dark mode with persistence, recipe search, category filters, favorites, and smooth scroll animations—all implemented without additional UI or animation libraries.

To speed up the creative process, I used AI as a supporting tool in a few specific areas:

Generating the recipe illustrations used throughout the interface.
Brainstorming fictional recipes and their content.
Helping organize ideas and structure the project during development.

The implementation itself—including the React components, application logic, styling, responsive layout, accessibility, state management, and overall frontend development—was built by me.

One of my goals was to spend less time creating assets and more time focusing on what this challenge evaluates most: frontend development, user experience, accessibility, and code quality. Using AI for visual assets and creative inspiration allowed me to dedicate more time to building and refining the application.

I also enjoyed keeping the project dependency-light. Features like the scroll reveal animations were built with the native Intersection Observer API, while favorites are persisted using Local Storage, resulting in a fast and simple application.

Before publishing, I completed a production build to verify everything compiled successfully and tested the interface in both light and dark themes.

This challenge was a great opportunity to practice React component architecture, responsive design, accessibility, and creating a polished user experience.

Thanks for reading! I'd love to hear your feedback.

DEV Community: Thiago Fogaca