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

GitHub Repository

npm install
npm run dev

npm run build

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.