The Stack

1.1 Core Technologies

Layer	Technology	Why We Chose It
Framework	Next.js 16 (App Router)	Full-stack React, API routes, server components
Language	TypeScript	Type safety, IDE support, fewer bugs
Styling	Tailwind CSS	Rapid UI development, consistent design
Database	SQLite (better-sqlite3)	Serverless, fast, zero-config
Auth	bcrypt + Redis sessions	Secure, scalable, session management
Icons	Lucide React	Clean, consistent icon set
Deployment	PM2 + Nginx	Process management, reverse proxy

1.2 The Mental Model

Think of the app as three distinct zones:

┌─────────────────────────────────────────────────────────────┐
│  CLIENT ZONE (Browser)                                      │
│  - React components                                         │
│  - User interactions                                        │
│  - State management                                         │
└──────────────────────┬──────────────────────────────────────┘
                       │ HTTP requests
                       ▼
┌─────────────────────────────────────────────────────────────┐
│  SERVER ZONE (Next.js)                                      │
│  - API routes (app/api/*)                                   │
│  - Server components (async)                                │
│  - Middleware (auth, security)                              │
└──────────────────────┬──────────────────────────────────────┘
                       │ SQL queries
                       ▼
┌─────────────────────────────────────────────────────────────┐
│  DATA ZONE (SQLite)                                         │
│  - Tables: clients, users, invoices, calls, etc.            │
│  - Migrations: schema versions                              │
│  - Backups: .db files                                       │
└─────────────────────────────────────────────────────────────┘

Key insight: Next.js blurs the line between frontend and backend. Some pages are server-rendered (fetch data directly), some are client-rendered (fetch via API).