cover-image

Family Meal Planner

About

Family Meal Planner is an app that helps 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 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 number 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