ASSIGNMENT 2 - Recipe Finder Web App
Project Overview:
This web app will allow users to search for recipes, view detailed recipe pages, and manage their own recipe
collection. It will feature dynamic routing, authentication (with dummy user data), and display images for the
recipes.
Key Features:
Dynamic Routing:
• Recipe Pages: Create dynamic routes for each recipe. The URL could look like /recipes/[id], where the id is a
unique identifier for each recipe (e.g., /recipes/spaghetti-bolognese).
• User Profile Pages: Users can view and manage their recipes, e.g., /profile/[username].
• Search: Implement a search feature for recipes that updates dynamically based on query parameters (e.g.,
/recipes/search?q=chicken).
• Image Handling:
Use [Link] Image component to optimize and serve images for recipe thumbnails and details. The images
could be stored on a remote server or fetched via an API (for example, from a recipe API like Spoonacular).
Display high-quality recipe images on the recipe pages.
• Dummy Authentication:
1. Set up a simple authentication system where users can sign up and log in using dummy credentials
(using Context API for user state management).
2. Use [Link] or a custom dummy authentication flow (with localStorage or cookies) to manage
the login/logout state.
3. After logging in, users can create, edit, and delete their recipes, which are stored in local state (or
you can mock an API for this).
• Recipe CRUD (Create, Read, Update, Delete):
Users can add new recipes, update existing ones, or delete their recipes from their profile.
You can simulate the backend with a mock API or a local JSON file to store the recipe data.
For the edit page, users can update the recipe title, ingredients, steps, and images.
• UI/UX Enhancements:
Implement a responsive design using CSS Modules or Styled Components.
Use a UI framework like Tailwind CSS or Material UI to build a modern, clean interface.
Include a loading state for the recipe search and image loading.
Project Breakdown:
1. Pages:
• /: Home page (Search recipes, Featured recipes, etc.)
• /recipes/[id]: Dynamic route for displaying a specific recipe's details.
• /profile/[username]: User profile page, where the user’s saved recipes are displayed.
• /auth/login: Login page (using dummy auth).
• /auth/signup: Sign-up page (dummy auth).
2. Components:
• Navbar: Includes links for navigation, login, and logout.
• RecipeCard: Displays a preview of each recipe, with a thumbnail and title.
• RecipeDetails: Displays full details of a recipe (ingredients, instructions, etc.).
• SearchBar: For searching recipes by name or ingredient.
• LoginForm and SignupForm: Simple forms for dummy authentication.
3. Data Handling:
• Use [Link] API routes (optional) to mock a backend for handling recipes.
• Alternatively, use static JSON data for recipes and mock user data.
• Store user authentication in localStorage or cookies.
4. Authentication (Dummy):
• Upon login, store a token or user session in localStorage or cookies.
• For logout, clear the session data.
• Display a Login/Logout button depending on the authentication state.
Technical Details:
• Dynamic Routing: Use [id].js in the /recipes directory to create dynamic routes for each recipe.
• Image Optimization: Use [Link] Image component to display optimized recipe images.
• State Management: Use React Context or a simple state management library like Redux for handling
user authentication and recipe data.
• API Routes: Create an API for simulating the backend logic (e.g., CRUD operations for recipes) using
[Link] API routes.
• Libraries and Tools:
• [Link] (obviously)
• [Link] (for authentication, though this can be a mock system)
• Tailwind CSS or Styled Components (for styling)
• React Context API (for user state)
• React Hook Form (optional for form handling)
• [Link] Image (for optimized images)
Extra Features (Optional):
1. Favoriting Recipes: Users can add recipes to their favorites list.
2. Commenting on Recipes: Allow users to leave comments on recipes.
3. Dark Mode Toggle: Implement dark mode for the UI.
4. Pagination/Infinite Scroll: For loading large lists of recipes.
