chat/README.md

The Domestic Atelier (chat)

A warm, editorial family messaging app designed for the home.

A private family chat interface — "The Domestic Atelier" — built for household communication. Authenticated via PocketBase, with Apprise notifications and optional AI assistance. A cozy, editorial take on messaging that lives inside the home network.

What it is

A self-hosted family messaging application. Unlike public chat apps, it runs on the home network, keeps conversations private, and integrates with the household's own services (PocketBase for auth/data, Apprise for notifications). Designed with a warm, editorial aesthetic to feel like home, not a corporate tool.

Tech stack

Layer	Technology
Framework	React 19
Build	Vite 6
Styling	Tailwind CSS 4 (via @tailwindcss/vite)
Backend	PocketBase (pocketbase SDK)
Notifications	Apprise
AI	@google/genai (Gemini)
Routing	React Router 7
Animation	Motion 12
Icons	lucide-react
Language	TypeScript

Architecture & design patterns

• Auth context — AuthContext wraps the app, managing PocketBase auth state and session (pb.authStore)
• Service layer — lib/pocketbase.ts centralizes the PocketBase client, base URL from VITE_POCKETBASE_URL (defaults to the homelab instance), and auth-state hooks
• Route-based pages — Chat, Login, Settings, HowTo under a shared Layout
• Environment-driven config — PocketBase & Apprise URLs via VITE_* env vars (never committed)
• Editorial design — warm, styled messaging UI (The Domestic Atelier aesthetic)
• Client-side auth — login flow with PocketBase email/password auth

Pages

Route	Purpose
/chat	The family chat interface
/login	PocketBase authentication
/settings	App & notification settings
/how-to	Usage guide for the household

Configuration

Copy .env.example → .env.local:

VITE_POCKETBASE_URL=http://192.168.20.13:8090   # homelab PocketBase
VITE_APPRISE_URL=                                # Apprise notification endpoint

Getting started

npm install
npm run dev      # development server
npm run build    # production build

Structure

src/
├── components/    # Header, Layout
├── contexts/      # AuthContext (PocketBase auth state)
├── lib/           # pocketbase.ts (client + config)
├── pages/         # Chat, Login, Settings, HowTo
├── App.tsx        # Router + providers
└── main.tsx       # Entry point

Standards

• TypeScript strict mode
• Secrets never committed (.env.* gitignored)
• Semantic HTML, accessible landmarks
• Fully responsive, mobile-first (messaging on the go)
• Self-hosted — data stays in the home

---

Part of the Sam Rolfe portfolio family.