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

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.