Grocery List App
Family Grocery is a self-hosted progressive web application I am building to replace the shared grocery list app my household currently uses. The project is designed to deliver a more organized, reliable, and flexible experience through a mobile-friendly interface, real-time syncing, offline support, and a data model built specifically around collaborative family shopping workflows.
Problem
The grocery list app we currently use works well enough to be useful, but it creates friction in the areas that matter most: organization, flexibility, and control. I wanted a replacement that better matched how families actually plan and shop together, reduced the limitations of a third-party product, and improved the experience through clearer list structure, stronger syncing behavior, and features shaped around our real household workflow instead of a generic consumer app.
Constraints
The application needed to be mobile-friendly for practical use while shopping, support multiple users collaborating on the same lists, function well as a self-hosted tool inside my broader application ecosystem, and remain usable even when connectivity is inconsistent. Because it is intended for repeated real-world use, the architecture also needed to support synchronization, structured categorization, and future feature growth without becoming fragile or difficult to maintain.
Approach
I approached Family Grocery as a structured collaborative system rather than a basic checklist. The application uses a FastAPI backend, PostgreSQL data model, JWT-based authentication, and WebSocket broadcasting to support shared list activity across family members in near real time. On the frontend, I built a mobile-friendly vanilla JavaScript single-page application with no framework or build step, along with service worker and manifest support so it behaves like a progressive web app. The underlying data model was designed to support families, users, lists, categorized items, assignment, history, meal plans, and ingredient imports, allowing the app logic to handle more than simple item entry. This made it possible to focus not just on interface polish, but on the architecture required for reliable collaboration, offline behavior, extensibility, and household-specific workflow improvements over the app it is intended to replace.
What I Built
- Built a self-hosted family grocery list progressive web application intended to replace an existing third-party grocery workflow.
- Designed a FastAPI backend with PostgreSQL for structured multi-user list management.
- Implemented JWT-based authentication and family membership flows for shared access.
- Built real-time list synchronization using WebSockets so changes can propagate across active users.
- Created a mobile-friendly vanilla JavaScript single-page frontend without relying on a framework or build pipeline.
- Implemented list, item, and category management with support for editing, deletion, reordering, and organization by category.
- Added drag-and-drop item sorting and logic to preserve custom order within shopping workflows.
- Built assignment features so list items can be associated with specific family members.
- Added item history, autocomplete support, and completion workflows to improve day-to-day usability.
- Implemented offline-oriented PWA features including service worker support and downloadable offline list access.
- Built a meal planning system with ingredient import into grocery lists to better connect planning and shopping.
- Structured the application for future enhancements such as smart consolidation, advanced search, budget tracking, barcode scanning, and analytics.
Outcome
The project is still in development, but the major architectural pieces and core collaborative features are already in place. At this stage, it stands as a strong technical portfolio project that demonstrates how I design software around real user problems, translate household workflow frustrations into application logic, and build a self-hosted system that is positioned to become a more capable replacement for the tool my family currently uses.
Why It Matters
This project highlights product thinking, application architecture, data modeling, real-time systems, offline-aware design, and disciplined feature planning. It is especially meaningful because the goal is not to build a generic demo, but to create a genuinely better experience than an existing app by solving specific usability and workflow problems through thoughtful system design. It shows how I think beyond surface-level UI and focus on the deeper logic required to make collaborative software feel reliable, practical, and worth adopting.