Intern Assignment

Assignment: Online Recipe Book

Objective:

Design and implement an online recipe book where users can browse recipes, view detailed instructions, and add their own recipes.

Timeline: 1 Week

Features:

1. Homepage:

• Display a list of all recipes with their names and a thumbnail image.
• Include a button/link to add a new recipe.
• Each recipe name should be clickable, leading to the detailed recipe page.

2. Recipe Detail Page:

• Display the recipe name, image, ingredients list, and step-by-step instructions.
• Include a button/link to go back to the homepage.

3. Add Recipe Page:

• A form to input the recipe name, upload an image, list ingredients, and provide step-by-step instructions.
• Provide a 'Submit' button to add the recipe to the recipe book.
• Technical Requirements:

4. HTML:

• Use semantic tags (like <article>, <section>, <header>, <footer>) where appropriate.
• Use forms for adding recipes.

5. CSS:

• Design a responsive layout using Flexbox or Grid.
• Maintain a consistent color scheme and typography across the platform.
• Style the recipe list, individual recipe details, and the add recipe form distinctly.

6. JavaScript:

• Use JavaScript to dynamically load and display recipes.
• Handle form submissions and validate input data before processing.
• Implement client-side routing to navigate between the homepage, individual recipes, and the add recipe page.

7. React:

• Create reusable components for the recipe list item, full recipe details, and the add recipe form.
• Manage the state of the application using React's useState and/or useContext hooks.
• Use React Router for navigating between different views/pages.

8. Bonus:

• Implement a search feature to find recipes by name or key ingredient.
• Add user ratings or reviews for each recipe.
• Use local storage or IndexedDB to persistently store recipes.

Notes for the intern:

• Prioritize functionality over design. However, if you have time, focus on refining the user interface.
• Make sure the code is clean, well-commented, and organized.
• Break the task into smaller chunks and tackle each feature step by step.