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!