Skip to content

A single-page app that generates weekly meal plans and grocery lists based on user preference. Built for Lighthouse Labs Full Time Web Development Bootcamp final project demo.

Notifications You must be signed in to change notification settings

GraceWXT/Mealbot-LHL-Final

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mealbot

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.

Technologies and Libraries

  • React
  • Chakra UI
  • React Router
  • React DnD
  • React Responsive
  • Sass
  • Twilio API
  • Spoonacular API
  • Express
  • Axios
  • PostgreSQL
  • NodeJS

Features

Homepage & User Profile

Users can switch to light/dark mode and access their profile settings from the drop down menu on nav bar.

homepage-profile.mov

Meal Plan

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

Recipe Detail

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

Grocery List (Desktop)

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

Grocery List (Mobile)

Users can take the grocery list on the go.

grocery-list-mobile.mov

Getting Started

Fork this project and clone it using the command line: git clone [SSH link here]

Server Side

  1. Please follow the README in server folder to set up the database and install the dependencies.
  2. For the text message function, register a trial account with Twilio and read up to and including "Get your first Twilio phone number".
  3. For the recipe database, register an account with Spoonacular and connect a user.

Client Side

  1. Run npm i to install the dependencies.

  2. Before starting the client side server, first go to node_modules/react-dnd/dist/core/DndProvider.js.

  3. 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";.

  4. Run npm start to start the client side server.

About

A single-page app that generates weekly meal plans and grocery lists based on user preference. Built for Lighthouse Labs Full Time Web Development Bootcamp final project demo.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages