A user-friendly application for exploring ingredients, creating ingredient pairings, and contributing new ingredients. The app allows users to interact with ingredient data, learn about flavor combinations, and view recommendations on ingredient pairings.
- View a list of ingredients with descriptions, images, and associated flavors.
- Add new ingredients, complete with name, description, image, and flavors.
- Explore ingredient pairings, with insights on why certain ingredients work well together.
- Create and save new ingredient pairings.
- Responsive design for mobile, tablet, and desktop users.
- Error handling for missing resources and loading indicators during data retrieval.
As a user, I want to view a list of ingredients, so that I can explore different ingredients and their associated flavors.
- Display a list of ingredients, each with a name, description, and associated flavors.
- Each ingredient is displayed in a card format with visuals and key details.
- The ingredients are dynamically fetched from the backend.
- If no ingredients are available, a message is displayed.
As a user, I want to add a new ingredient with a name, description, image, and associated flavors, so that I can contribute to the list of ingredients.
- A form allows users to enter details for a new ingredient: name, description, image URL, and flavors.
- The ingredient is added to the list upon form submission and displayed immediately.
- The new ingredient is saved to the backend database.
- Form includes validation for all fields and displays errors if required fields are missing.
As a user, I want to view a list of ingredient pairings, so that I can learn which ingredients pair well together and why.
- Display a list of ingredient pairings with names of paired ingredients and an explanation of why they work well together.
- Pairings are dynamically fetched from the backend.
As a user, I want to create a new ingredient pairing by selecting ingredients and providing a reason for the pairing, so that I can document useful combinations.
- A form is provided to select ingredients and enter a reason for the pairing.
- The new pairing is saved and added to the list of pairings upon form submission.
- The pairing is stored in the database and visible immediately. Form includes validation for selecting ingredients and entering a reason.
As a user, I want to see clear error messages if the app fails to load ingredients or pairings, so that I know something went wrong and can retry or report the issue.
- Display a clear error message when ingredients or pairings fail to load (e.g., “Failed to load ingredients. Please try again later.”).
- The error message explains the issue and suggests actions like retrying or checking the connection.
As a user, I want the app to be responsive, so that I can use it on different devices, including mobile phones and tablets.
- The app layout adapts to mobile, tablet, and desktop screen sizes.
- Ingredient and pairing lists adjust to different screen resolutions without breaking the layout.
- Navigation and interactions are optimized for touchscreens and smaller displays.
As a developer, I want to ensure that each ingredient and pairing has a unique key when rendering lists, so that React efficiently renders updates and I avoid issues with missing keys.
- Each item in a list of ingredients or pairings has a unique key to pass React’s key prop validation.
- There are no warnings or errors in the console for missing or duplicate keys.
As a user, I want to see a loading indicator when data is being fetched, so that I know the app is retrieving information.
- A loading spinner or message is displayed when data (ingredients or pairings) is being fetched.
- Once the data is loaded, the loading indicator disappears.
- If fetching fails or takes too long, an error message is shown (linked to the error handling story).
To run the app locally, follow these steps:
- Clone the repository:
git clone https://github.com/Judiaca/cooksmart.git
- Navigate to the project directory:
cd recipe-app
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and visit:
http://localhost:3000
- Frontend: React, CSS
- Backend: Next.js
- Database: MongoDB
- Deployment: Vercel