/fullKetoReact

Keto Project with React

Primary LanguageJavaScript

Full Keto

Full Keto is a full stack application dedicated to the Ketogenic lifestyle. It allows users to search food items to get nutrition info and search ingredients to find related Ketogenic recipes. If users are signed in, they can save recipes and also upload their own recipes.

Full Keto

Deployment

The application is deployed to Heroku: https://fullketo.herokuapp.com

  • There may be a small delay when you first try to access the application due to the web dyno going to sleep if it receives no traffic for 30 minutes

Walkthrough

Is it Keto?

  • Search any food item to see the net carbs per serving and whether or not it's considered keto

It is Keto!

It is NOT Keto!

Recipes

  • Search an ingredient to find related Keto recipes
  • Click the "Get Random Recipes" button to get 36 random Keto recipes

Search Recipes

  • Click on the recipe title to reveal the nutrition facts

recipe nutrition facts

  • Click on the link at the bottom of the recipe to open the recipe page in a new tab
  • If the user is signed in, they can save a recipe by clicking on the heart icon at the top right corner of the recipe

User Dashboard

  • Sign in with Google to see the user dashboard

User Dashboard

  • Users can edit their username or delete their account via the Account tab

Account Tab

  • The Favorites tab shows the user's saved recipes
  • Users can remove the recipe from their favorites list by clicking on the heart icon

Favorites Tab

  • My Recipes shows the user's uploaded recipes and allows the user to add new recipes

My Recipes Tab

Add a Recipe

  • Clicking the "Add a Recipe" button will direct users to the Add Recipe form

  • The Add Recipe form is split into 3 sections:

    • The top section is used to fill in general information about the recipe:

Add Recipe Form: Top Section

  • The Ingredients section allows users to dynamically add ingredients to the recipe:
    • Clicking the "Add Another Ingredient" button will render another input group to add another ingredient
    • Clicking the "X" in the upper right hand corner will delete the ingredient from the list

Add Recipe Form: Ingredients Section

  • The Instructions section also allows users to dynamically add instructions to the recipe:

Add Recipe Form: Instructions Section

Future Features

Meal Planner

  • Allow signed in users to plan out a week's meal in a calendar
  • Allow them to search external or internal recipes
  • Drag and drop recipe cards on to the meal planner calendar
  • Automatically calculate the daily net carbs based on the recipes added

Technologies Used