Recipe Finder

Description

The Recipe Finder is an interactive web application that demonstrates core React concepts through practical implementation. Students will build a feature-rich application that connects to external APIs, manages state, and implements modern UI patterns. This project provides hands-on experience with real-world React development scenarios.

Requirements

The Recipe Finder application should provide the following functionality:

• Allow users to add new recipes with a title, ingredients list, cooking instructions, and cooking time
• Display a list of all saved recipes with their basic information
• Enable users to search for recipes by title or ingredients
• Provide ability to edit existing recipes
• Allow users to delete recipes they no longer want
• Save all recipes to localStorage so they persist between page reloads
• Filter recipes by cooking time (quick meals, medium, long preparation)
• Mark recipes as favorites and filter by favorite status

Key Concepts

• Component architecture and reusability
• State management using React hooks (useState, useEffect)
• Local data persistence with localStorage
• Form handling and user input validation
• Responsive design implementation with Tailwind CSS
• Custom hooks for shared functionality

Learning Objectives

After completing this project, students will be able to:

• Build and structure a multi-component React application
• Implement data persistence using localStorage
• Create and manage application state using React hooks
• Design responsive layouts using Tailwind CSS utilities
• Develop reusable components and custom hooks
• Implement client-side filtering and sorting functionality
• Handle user interactions and form submissions

$ npm create vite@latest recipe-finder -- --template react-ts

$ yarn create vite recipe-finder --template react-ts

$ bun create vite recipe-finder --template react-ts