Mealbot is a single-page app that generates weekly meal plans and grocery list based on user preference. It saves users' time searching for recipes, creates a menu that doesn't repeat, and cuts down on grocery waste.
This project was initially created as a final project of Lighthouse Labs Full Time Web Development Bootcamp by Grace Wang, Lucas Tan, and Warren Roque in a week and half. Further improvement has been implemented.
- React
- Chakra UI
- React Router
- React DnD
- React Responsive
- Sass
- Twilio API
- Spoonacular API
- Express
- Axios
- PostgreSQL
- NodeJS
Users can switch to light/dark mode and access their profile settings from the drop down menu on nav bar.
homepage-profile.mov
Meal plans are generated based on user preferences, but users can also edit the meal plan using drag and drop, shuffle, and delete buttons.
edit-meal-plan.mov
Users can also access their meal plan history
meal-plan-history.mov
Ingredients, instructions and nutrition info are provided on the recipe detail page. Users can change the serving size to get updated ingredient quantity.
recipe-detail.mov
Users can get a grocery list of their weekly meal plan. The quantity is based on their household size preference setting, and the ingredients are sorted by aisles. Users can also share the grocery list by sending text message or copy on one click.
grocery-list-desktop.mov
Users can take the grocery list on the go.
grocery-list-mobile.mov
Fork this project and clone it using the command line: git clone [SSH link here]
- Please follow the README in server folder to set up the database and install the dependencies.
- For the text message function, register a trial account with Twilio and read up to and including "Get your first Twilio phone number".
- For the recipe database, register an account with Spoonacular and connect a user.
-
Run
npm i
to install the dependencies. -
Before starting the client side server, first go to
node_modules/react-dnd/dist/core/DndProvider.js
. -
On line 28, where it says
import { jsx as _jsx } from "react/jsx-runtime";
, add an ".js" extention to the file path:import { jsx as _jsx } from "react/jsx-runtime.js";
. -
Run
npm start
to start the client side server.