Dorm of Decents
Bachelor Flat Expense & Meal Manager — A full-featured web application for shared living, tracking meals, expenses, bills, and settlements among flat members.
Overview
Dorm of Decents is a private, role-based management platform designed for bachelor flat members to collaboratively track shared living costs. Built with Next.js 16, Firebase Auth & Firestore, and Tailwind CSS v4, it provides a real-time dashboard, detailed analytics, and a complete audit trail.
Features
Authentication & Access Control
- Three-tier role system —
admin, moderator, and member with granular permissions
- Firebase Authentication with secure httpOnly session cookies (5-day expiry) and Bearer token API auth
- Password reset flow with custom styled email templates, rate-limited for security
- Welcome emails sent automatically on user creation with a generated temporary password
- User management — admins can create, edit, activate/deactivate, and delete users
Dashboard & Analytics
- Real-time stats cards — meal rate, total meals, expenses, bills, weekly trends, active days, average per person, food budget, transaction counts, and projected totals
- Interactive charts (Recharts) — bar charts for weekly trends and per-user breakdowns
- Top consumers & contributors — at-a-glance insights into who eats the most and who pays the most
- Bills breakdown — electricity, gas, internet, and other categories
Meals Tracking
- Individual & bulk meal entry — checkbox grid for lunch/dinner per user on a given date
- Quick-select buttons — "All Lunch", "All Dinner", "Clear All"
- Per-user meal totals with filtering and sorting
- Exportable meal reports as PNG images
- Admin/moderator override to add meals for any member
Expenses
- Categorized expenses — food, electricity, internet, gas, misc
- Per-user expense tracking — who paid what, with category and date filters
- Admin/moderator override to log expenses on behalf of others
- PNG export for individual member expense reports
Bills & Bill Payments
- Recurring bill types — electricity, gas, internet
- Per-bill repayment tracking — records which member paid their share to the original payer
- Bills due calculator — equally splits bills among active members, shows net owed amounts
- PNG export for bills due reports
Settlements
- Dynamic calculation — meal rate = total expenses ÷ total meals
- Per-user settlement — shows amount owed or to be received each month
- PNG export for settlement reports
- Mark as paid workflow
Month Management
- Active/closed months — admins create monthly periods with start/end dates
- Auto-close previous months when a new month is created
- Per-month data isolation — all records (meals, expenses, bills) are scoped to a month
Reporting & Export
- CSV exports — meals, expenses, settlements, or all data combined
- PNG exports — meals, expenses, settlements, bills due
- Comprehensive settlement calculator with detailed per-user breakdown
Audit Logging
- Full activity tracking — every mutation (create, update, delete) is logged with user context
- Cursor-based pagination for browsing logs
- Rich filtering — by action type, entity type, HTTP method, user, and date range
- Proxy-level tracking — dashboard views and API requests are automatically recorded
- Stats cards — total logs, views, mutations, unique users, last 24-hour activity
User Experience
- Dark/Light/System theme with smooth transitions
- Frosted glass header with frosted glass effect
- Animated 3D background (Three.js) on login and auth pages
- Responsive sidebar — collapsible on desktop, sheet overlay on mobile
- Toast notifications (sonner) for all actions
- Loading skeletons across all data views
Architecture
Tech Stack
| Layer | Technology |
|---|
| Framework | Next.js 16 (App Router) |
| Authentication | Firebase Auth (Admin SDK + REST API) |
| Database | Cloud Firestore (7 collections) |
| Styling | Tailwind CSS v4 + shadcn/ui |
| State & Forms | React Hook Form + Zod validation |
| Charts | Recharts |
| 3D Graphics | Three.js (react-three-fiber, drei) |
| Tables | TanStack React Table v8 |
| Animations | Framer Motion |
| Email | Nodemailer (Gmail SMTP) |
| Language | TypeScript 5 |
Data Model
- profiles — user identity, role, active status
- months — billing periods (active/closed)
- meals — per-user, per-date meal entries (supports 0.5 increments)
- expenses — categorized shared expenses linked to a payer
- bills — utility bills (electricity, gas, internet)
- bill_payments — repayment records between members
- logs — comprehensive audit trail with cursor-based pagination
API Design
- Server Actions for all mutations (create, update, delete)
- REST API routes for reads and external access
- Versioned REST API (
/api/v1/*) with Bearer token authentication — meals, expenses, months, dashboard, auth endpoints
- Proxy middleware for automatic activity tracking
Key Business Logic
- Meal rate = total monthly expenses ÷ total monthly meals
- Bills are split equally among active members
- Settlements computed in real-time from meals and expenses
- All data is scoped to monthly periods
Visual Highlights
- 3D Animated Beams — custom ShaderMaterial with noise displacement on auth pages
- Frosted glass UI — backdrop-blur header with decorative beam elements
- Data export — all major views support PNG export via
html-to-image
- Responsive design — full desktop sidebar with mobile sheet navigation
- Theme system — seamless light/dark switching with
next-themes
