Trey t
264107e3bf
Layout & Navigation: - Tighten max-width to 6xl, adjust padding, add warm gradient overlay - Add icons to desktop nav links, responsive header height, stronger blur - Active pill highlight on mobile nav icons - Fix middleware blocking static assets (logo.png) behind auth Dashboard restructure: - Merge quick actions into hero area as inline pills - Rename "Coming Up" to "Needs Attention", exclude completed tasks - Promote task cards to #2 with richer card design (2-col grid, colored date badges) - Drop "Your Homes" to #3 with accent bars and larger icons Card redesigns: - Residence cards: accent bar, home icon, warm hover shadow - Contractor cards: letter avatar, text contact links, separator - Document cards: type-colored accent bar, restructured footer - Task cards: warm hover shadow - Empty states: larger icon container, gradient bg, rounded CTA Residence detail page: - Add full kanban board with drag-and-drop for task management - Add "Add Task" button pre-filling residence on task form - Replace broken Users stat with Overdue/Completed stats - Compute task summary from kanban columns (always accurate) Data accuracy fixes: - Fix getMyResidences() to fetch kanban data in parallel and compute real per-residence task counts instead of hardcoding zeros - Task form accepts defaultResidenceId prop for pre-filling - New task page reads residence_id from URL, redirects back after create Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Casera Web App
Next.js web client for the Casera property management platform. Connects to the Go REST API backend.
Features
- Residences — Create and manage properties, share access with household members via invite codes
- Tasks — Track maintenance tasks with kanban board, due dates, recurring schedules, and completion photos
- Contractors — Manage service providers with contact info, specialties, and task associations
- Documents — Store leases, warranties, manuals, and other property documents
- Demo Mode — Try the full app with mock data at
/demo, no account required - Notifications — Real-time notification bell with preference management
- Settings — Profile editing, password changes, notification preferences, account deletion
Tech Stack
- Framework: Next.js 16 (App Router, Turbopack)
- UI: Tailwind CSS + shadcn/ui
- State: TanStack React Query for server state
- Forms: React Hook Form + Zod validation
- Drag & Drop: @dnd-kit for kanban board
- Analytics: PostHog
- E2E Tests: Playwright
- Deployment: Docker (Dokku-compatible)
Getting Started
# Install dependencies
npm install
# Run development server
npm run dev
Open http://localhost:3000.
Scripts
| Command | Description |
|---|---|
npm run dev |
Start dev server with Turbopack |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run test:e2e |
Run Playwright tests |
npm run test:e2e:ui |
Run Playwright tests with UI |
Environment Variables
| Variable | Description | Required |
|---|---|---|
NEXT_PUBLIC_API_URL |
Go API base URL (e.g. https://casera.treytartt.com/api) |
Yes |
API_URL |
Server-side API URL (defaults to NEXT_PUBLIC_API_URL) |
No |
NEXT_PUBLIC_POSTHOG_KEY |
PostHog project API key | No |
NEXT_PUBLIC_POSTHOG_HOST |
PostHog instance URL | No |
Architecture
src/
├── app/ # Next.js App Router pages
│ ├── (auth)/ # Login, register, forgot password
│ ├── api/ # Route handlers (auth, proxy)
│ ├── app/ # Authenticated app pages
│ └── demo/ # Demo mode (mirrors app/ with mock data)
├── components/
│ ├── contractors/ # Contractor cards, forms
│ ├── dashboard/ # Stats cards, recent activity
│ ├── demo/ # Demo banner
│ ├── documents/ # Document cards, forms, image gallery
│ ├── layout/ # Sidebar, top bar, mobile nav
│ ├── notifications/ # Notification bell
│ ├── onboarding/ # Onboarding steps
│ ├── residences/ # Residence cards
│ ├── settings/ # Profile, password, preferences
│ ├── shared/ # Error banner, form field
│ ├── sharing/ # Share codes, user management
│ ├── tasks/ # Kanban board, task cards, forms
│ └── ui/ # shadcn/ui primitives
├── lib/
│ ├── analytics/ # PostHog provider
│ ├── api/ # API client, auth, residences, tasks, etc.
│ ├── demo/ # Demo data provider, mock data
│ └── hooks/ # React Query hooks per domain
└── tests/ # Playwright E2E tests
All client-side API requests go through Next.js proxy route handlers (/api/proxy/...) which attach the auth token from an httpOnly cookie before forwarding to the Go API.
License
Private