Map My Recipe - Recipe Book Application This project is a simple Recipe Book application developed using React.js. The objective of this application is to allow users to browse through a collection of recipes, view individual recipe details, search for specific recipes, and optionally mark recipes as favorites.
Features User Interface:
User-friendly interface with sections for displaying a list of recipes and individual recipe details. Search functionality to help users find specific recipes. Option to mark recipes as favorites. Recipe Data:
Utilizes JSON data to provide sample recipe information, including title, ingredients, instructions, and optionally, an image URL. Loads the recipe data into the React application and displays it in the appropriate sections. Functionality:
Displays a list of recipes with their titles and optionally, a brief description or image. Shows the full recipe details (ingredients and instructions) in a separate section or modal when a user selects a recipe. Implements search functionality to allow users to find recipes based on keywords or ingredients. Provides the option for users to mark recipes as favorites and displays a separate list of favorite recipes. Code Structure:
Organized code into separate components for better reusability and maintainability. Utilizes appropriate React hooks (e.g., useState, useEffect) to manage state and side effects. Implements proper handling of user events (e.g., clicking recipes, searching, filtering). Styling:
Applies basic styling to the application using Tailwind CSS and SCSS. Ensures a clean and user-friendly layout. Installation and Setup To run the application locally, follow these steps:
Clone the GitHub repository:
bash Copy code git clone
Navigate to the project directory:
Copy code cd map-my-recipe Install dependencies:
Copy code npm install Start the development server:
Copy code npm run dev Open your browser and navigate to http://localhost:3000 to view the application.
Additional Notes This project was bootstrapped with Vite.js, a build tool that provides fast and efficient development workflows for modern web apps. Tailwind CSS is used for styling the components, providing utility-first CSS classes for rapid UI development. React.js is utilized as the JavaScript library for building the user interface, making use of functional components and hooks for state management. The project adheres to best practices in terms of code quality, component structure, state management, and event handling. Any challenges or limitations encountered during the development process are documented in the README file.