Cribb is an open-source roommate-management platform that helps apartment groups coordinate chores, shared pantry inventory, and shopping lists in one place.
This repository contains the mobile-first Angular 19 client.
The REST API lives in
/CribbBackendand is written in Go 1.23.
- 🗂 Dashboard-first interface showing upcoming chores, low-stock pantry items, and group activity at a glance.
- 📱 Mobile-first, responsive layout powered by Tailwind CSS – looks great on phones, tablets, and desktops.
- ⏰ Smart Chore Board with one-time & recurring chores, auto-rotation, reminders, and gamified leaderboards.
- 📦 Categorised Pantry view with consumption tracking, expiry warnings, and low-stock notifications.
- 🛒 Shared Shopping Cart that syncs in real-time across housemates and provides an activity feed.
- 🔔 Notification Center (dropdown, badge & panel components) for consolidated alerts across the app.
- 🌐 Instant search & filtering within chores, pantry items, and shopping cart.
- ⚡️ Offline-friendly PWA thanks to Angular service-worker caching.
# 1. install deps
npm install
# 2. start local dev server (http://localhost:4200)
ng serveThe client automatically reloads when you edit a source file.
| Command | Purpose |
|---|---|
ng serve |
Development server + live reload |
ng build |
Production build → dist/ |
ng test |
Unit tests with Karma + Jasmine |
ng e2e |
Cypress end-to-end tests |
npm run lint |
ESLint over src/ |
| Layer | Details |
|---|---|
| Standalone Components | All feature areas (chores, pantry, shopping-cart, …) are implemented as standalone Angular components for faster lazy-loading and simplified module management. |
| Signals & RxJS | Some services (e.g. shopping-cart.service.ts) use Angular Signals for state, while others expose classic RxJS BehaviorSubjects. |
| NgIcons + Iconoir | Consistent iconography via @ng-icons/iconoir; icons are provided locally in each component to keep bundle size low. |
| Tailwind CSS | Design system is enforced with Tailwind utility classes plus small SCSS helpers. |
| Cypress | End-to-end flows are covered by Cypress specs in cypress/. |
API calls default to http://localhost:8080. Override using environment files in src/environments/ or by setting NG_APP_API_URL when deploying.
ng generate component feature/MyAwesomeCmp # standalone by default
ng generate service services/my-awesome # providedIn:'root'Use ng generate --help for the full schematic list.
ng build --configuration production→ static assets indist/cribb-frontend/.- Deploy to any static host (e.g. Vercel, Netlify). A ready-made
vercel.jsonis included for zero-config Vercel deploys.
Pull requests are welcome! Please follow the existing code-style (ESLint + Prettier) and ensure unit tests & Cypress suites pass.
Cribb Frontend is released under the MIT License. See LICENSE for details.