Skip to content
BA.
Live2025 · Full-stack — design & buildBuilt with v0

Family Grocery Tracker

A family grocery list & budget tracker.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Firebase Auth
  • Supabase
  • Prisma
  • shadcn/ui

Overview

Family Grocery Tracker is a smart, family-focused grocery list and budget-tracking app — a shared place to maintain master grocery items, plan monthly lists, predict budgets, and track who bought what, where, and when.

I scaffolded it with v0 and built it out into a working multi-user app, pairing a clean Next.js + shadcn/ui frontend with Firebase auth and a Supabase/Prisma data layer.

Solution

  • Master grocery items with prices, units, sources, and notes.
  • Monthly checklists with budget prediction vs. actual spend.
  • Purchase tracking — who bought what, where, and when.
  • Multi-user support with Firebase auth and role-based access.
  • Smart UI: items fade when not needed, must-buy items stand out.

Tech Stack

  • Frontend: Next.js 14 (App Router), React, Tailwind CSS, shadcn/ui
  • Auth: Firebase (Email/Password + Google)
  • Database: PostgreSQL via Supabase, Prisma ORM
  • Built with: v0