What's Cooking

What's Cooking can help you. Without logging in, you can:

Browse through the recipe list for meal ideas
Click on a recipe to view detailed instructions
Need inspiration? Click the "Surprise Me" button to generate a random recipe.
Add a new recipe to the "What's Cooking?" app by clicking on the "+ Add Recipe" button

Note:

⚠️ A user does not need to login in order to use my app
The current database only has about 20 recipes
Future/Extension features will include multiple users with the ability to save recipes, create, edit, and delete recipes on their dashboard

QuickLinks

✅ A description of your app

✅ A description of your tech stack

✅ A brief description of where each of the key parts of the project live in your codebase

CLIENT

public: contains index.html
src: contains most of the dynamic UI files such as components, actions, reducers, and client side tests

SERVER

✅ If your app is meant to be re-used by other developers, instructions on how to get the app up and running (see below)

In development, your local machine should have Node.js and Mongo set up

npm install the requirements on each of the repos
Run mongod in a separate terminal shell.
Open a new terminal shell and then cd into the server side and run node server.js
Finally, cd into the client side and run npm start in a new terminal shell. A new browser window should open containing the app.

✅ 1. User can see a list of recipes when they first open the app.

All recipes in the list default to a "condensed" view showing only:

✅ 2. My app will find and import enough recipes for it to be useful.

Choice 1: Use an open source recipe API. I included three possible API links below ( just incase something bad happens), but my go to is Spoonacular's recipe API.
- A. Spoonacular's recipe API
- B. RapidAPI's Recipe API
- C. Food2Fork
Choice 2: Manually write my recipe list (at least 10)
Choice 3: Do both choice 1 & 2

Using mLab and Mongo for production database

✅ 3. User can click on “Surprise Me!” button and a random recipe will be generated.

✅ 4. When a user clicks on a recipe they are taken to a display with "detailed" view.

Detailed view expands to additionally display:**

✅ 5. User can add a new recipe to the recipe list.

When a user clicks on "+ Add Recipe", they are taken to this create new recipe form.

✅ 6. User will receive the appropriate error feedback when they cannot submit a new recipe.

✅ Landing page: On first visit, instructions containing how to use the app will render. Subsequent visits/reload will not render the first-time div, but you can click on "INFO" button to see the instructions again.**
✅ User can click on "INFO" for instructions on how to use the app
✅ User can search a recipe using the search box
User can filter the recipe list by the example categories below:
- Filter by:
- Dairy-free
- Vegetarian
- Gluten-free
- Slow Cooker
- Under 30 Minutes
- Freezer Friendly
- Kid Friendly
User can filter the recipe list a by ingredients
User can edit a recipe
User can print the desired recipe
User can bookmark a recipe
Multiple users, who can have their own “playlist” of favorite recipes. When you hit surprise me, it’ll pull from your own recipe playlist
Share button (FaceBook, E-mail, SMS)
Upload a photo as opposed to a URL
User can link other recipes and save it on their recipe playlist