Overview
- When two friends and I decided to move in together during our studies at ETH, we quickly realized that planning meals for three people and buying the ingredients requires a lot of time and coordination.
- After having used a Notion-based solution for a while, we decided to build our own—both to speed up our process and to gain more software engineering experience.
- We implemented a web app, using a Vue.js frontend and a Node/JavaScript backend. For the client-server communication, we opted for a socket connection to allow for real-time updates. We split the work evenly and coded the core features in a couple of months, adding a few more features later on.
- As a result, we created a reliable, collaborative meal planning application that we use daily. We also learned so many things using the app as a playground for exploring new technologies.
Context
- 🗓️ Main development: 01/2021 — 12/2021 (we still use it daily!)
- 🛠️ Project Type: Personal project
- 👔 Responsibilities: UI design (100%), frontend and backend implementation (~50%)
- 👥 Collaborators: Heinrich Grattenthaler
Technologies/Keywords
- TypeScript/JavaScript
- Vue.js
- Node.js
- Docker
- DigitalOcean
Notable Features
- Full-text search with auto-translation between German and English
- Live collaborative editing, resilient to bad network. The shopping list will update in real time, even when multiple people edit it at the same time.
- Automatic web crawler for other recipe sites (collect and import ingredients, etc.)
- Cloud deployment: We run multiple instances in different docker containers.
- Progressive web app (PWA): The app can be accessed online and installed on smartphones
Impressions
The app stores all our recipes:
We implemented a custom search functionality. It even supports search across English and German, as we use both languages:
The following page shows the details for a single recipe. The ingredients can be scaled based on the number of portions. All ingredients can be added to the shopping list in one click.
The shopping list automatically parses units and merges duplicated items. For example, “Apples 500 g” and “Apples 4.5 kg” would be merged to “Apples 5 kg”.
The following short video shows the item merging. It will automatically translate “milk” to “Milch” and merge it with the existing item:
Another essential feature of the app are the live updates. All changes are immediately distributed to all clients. This enables concurrent usage of the app—this is super handy when shopping together.
