cover-image

Family Meal Planner

🧐 About

Family Meal Planner is an app to help families plan their meals and automatically generate shopping lists to save time to do better things.

🌐 Live Demo

Live demo available here:

https://andrewvo89.github.io/family-meal-planner-demo/

👨🏽‍💻 Open Source

The project is Open Source and can be viewed on GitHub:

🛠️ Technologies Used

  • React - JavaScript Framework.
  • TypeScript - Written 100% in TypeScript.
  • React DnD - Drag and drop API.
  • Firebase - Backend as a service for firestore database, authentication and real time listeners.

⭐️ Features

Drag and Drop

Intuitive dragging and dropping allows users to easily move items around the calendar with minimal clicks.

image-0f6329c992eac42ecb0c9cd8a1f21a0fd630ab0b-1060x692-gif

Customizable Recipes

Assign ingredients to meals in order to determine what items are needed to be bought to create the meal.

image-13cefc31bda48aaeb6c3ac8fd5ccf90c5a498817-1060x692-gif

Assign Family Members

Assign family members to meals and add notes for complete visibility on which meals will feed which hungry family members.

image-a7d97d8f0169b3955deefe3f6f9c489ed59bf1c5-1060x692-gif

Customizable Day Views

Adjust the amount of days to display on the calendar to minimize distraction or to get a better overview.

image-5a7f55bbd816c880f9307dfca0ed910224e9c1f8-1060x692-gif

Generate Shopping Lists

Based on your recipes and ingredients, shopping lists can be generated to help you acquire everything you need to cook your delicious meals.

image-4c64a7cf4d20efe1e71c0ee817597113ac2cf23b-1060x692-gif

Real Time Sync

Changes are synchronized in real time between all family members using the application across multiple browsers.

image-d558f2928e7f37faaa9294fd6d200d093e32d4a9-1060x692-gif