Hipstew (Frontend)

Hipstew is built to help user look for recipes based on ingredients instead of name. You can also keep track of your fridge using a Fridge feature and also look up ingredients to add as well! There is also a chatbot, Stewy, who will assist you with conversion, recipe search or just to have a small talk with, be sure to check it out :)!

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Link to Hipstew's backend: https://github.com/nnhk23/hipstew_backend

Installing

For this program, please type in these following commands in your terminal before starting:

React Router installation: npm i react-router-dom

React bootstrap installation: npm i react-bootstrap bootstrap

Animation installation: npm install animate.css --save

Start

(make sure to also complete backend's installing instruction before strating the program :) )

Run npm start

First time user interface:

Login Form:

Signup Form:

After logged-in:

Recipe Details:

Chatbot Stewy:

Built With

• React-Bootstrap - Styling sheets.
• Animate CSS - Extra effect.
• React - Main framework.
• Web Speech API - external API responsible for chatbot and voice recognition.

Features

Profile:

• User can create a new account/ update name or password/ delete account (CRUD).

Recipes & Ingredients:

• User can view bookmarked recipe list/ view recipe details/ remove recipe from list (CRD).
• User can view fridge/ remove ingredients from fridge (CRD).
• User can look up recipes based on given ingredients (1 or more).
• User can look up ingredients.

Chatbot:

• User can either type or speak to chatbot Stewy.
• User can have a conversation with Stewy.
• User can ask Stewy to look up recipes based on name or specific ingredients.
• User can ask Stewy to tell a food joke/ food trivia.
• User can ask for a unit conversion.
• User can look for food substitution.
• User can view conversation history.

Authors

• Kim Nguyen - Github Link

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Inspired by foody apps: Spoonacular, Mealime, Hello Fresh.

Final Note

Feel free to contact me via socials included in Hipstew's footer. Happy coding!