# 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`:

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

## Getting started

```bash
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.*