PlatefulAI

Planning a week of meals means juggling favourites, allergies, a grocery list and calorie and protein targets across different apps.

A team of five built a mobile-first, front-end prototype on mock meal data in about a week (Nov 26 – Dec 4, 2024). The “AI-powered meal prep” step is a UI concept: there are no model calls.

I owned the repo and wrote about half the commits (49 of 102), covering the app’s foundation and its main planning flow.

• Set up the React + Vite app with Auth0 login, the start and home screens and bottom-tab navigation, and deployed it on Vercel.
• Built the meal-planning flow: favourites, filtering out meals that clash with saved allergies and diets, a meal-details view, and meal and serving selection.
• Teammates built the grocery list and meal data (Mohammad Mohsin Khan), the calorie and protein tracker (Wajdan Faheem), and profile and target settings (Jasmine Sun-Hu).

1. Filter before you pick

   The meal list hides meals that clash with the user’s saved allergies and diets, so every option on screen is one they can actually eat.

2. Mock data, real flows

   With a week to build, we kept meals as mock data and spent the time on the flows: planning, grocery list, tracking and settings.

3. Split by screen

   Each teammate owned a part of the app end to end: grocery list and meal data, the tracker, profile and targets, and the planning flow.

1. 01Sign inAuth0
2. 02PlanFavourites, diet filters, servings
3. 03ShopMeals → grocery list
4. 04TrackCalories and protein (Chart.js)

Everything runs in the browser; the only external service is Auth0.

React

Vite

MUI

Mobile-first components and the bottom tab bar.

Auth0

Chart.js

The calorie and protein tracker (built by a teammate).

Vercel

• Live demo

The project’s links and the public sources this write-up draws on.