Grocerace is a real-time collaborative shopping list app built as a portfolio-driven project. The goal is to demonstrate practical frontend skills using modern technologies, and to explore backend fundamentals.
I hate shopping, so I want it over with as fast as possible. This app is a mix of problem-solving and showing off what I can do.
This is a work in progress and still under active development. Many features are missing or incomplete. Expect rough edges, placeholder UI, and untested logic.
This project uses tools and patterns chosen primarily to reflect professional frontend development practices. Backend is intentionally minimal.
- Nuxt3
- Vue 3 with
<script setup> - TypeScript
- UnoCSS utility-first styling
- Socket.IO for real-time updates
- PNPM workspaces for monorepo structure
- Express.js
- Socket.IO
- TypeScript
- No database (yet)
├─ app → frontend client (Vue 3)
├─ server → backend API (Express + Socket.IO)
├─ shared → shared types/utils
Clone the repo and install dependencies:
git clone https://github.com/Ziomeka/grocerace.git
cd grocerace
pnpm installcd packages/server
pnpm devThe backend will start at http://localhost:3001
In a separate terminal:
cd packages/app
pnpm devThe frontend will start at http://localhost:3000
- Real-time collaborative list updates
- Auto-generated or manually joined list IDs
- Author name saved in browser settings
- Shared types between client and server
- Delete items
- Add item status updates - looking for item, in the cart
- Pointing system to add some gamification
- Copy list ID to clipboard
- List persistence (no DB yet)
- Login / authentication
- Multiple saved lists per user
- Save and restore list data (DB integration)
- Add unit tests (Vitest)
- Add error handling
- Add loading states
- Move all txt into i18n
- Production build & deployment
MIT – use freely, build your own, improve it if you want 😊