Frontend Template

This is a template for all frontend web-based projects. Using it ensures that each app:

• Shares the same dependencies and versions
• Shares the same aesthetic (@thatsit/ui)
• Is a PWA with offline support
• Is local-first with IndexedDB (Dexie)
• Has proper iOS safe-area support

Getting Started

1. Clone this repo
2. Run pnpm install
3. Run pnpm dev to start development

PWA Setup Checklist

When creating a new app from this template:

1. Update App Identity

• index.html: Update <title>, apple-mobile-web-app-title, and description
• vite.config.ts: Update the PWA manifest:
  • id: Unique app identifier (e.g., /tasks-thatsit/)
  • name: Full app name (e.g., Tasks | That's It)
  • short_name: Short name for home screen
  • description: App description

2. Create App Icons

1. Create your app's SVG icon in public/favicon.svg
2. Copy the same icon to public/mask-icon.svg
3. Update the SVG paths in scripts/generate-icons.mjs
4. Run node scripts/generate-icons.mjs to generate PNG icons

Icon files needed:

• public/favicon.svg - Browser favicon
• public/mask-icon.svg - Safari pinned tab icon
• public/pwa-192x192.png - Generated PWA icon
• public/pwa-512x512.png - Generated PWA icon
• public/apple-touch-icon.png - Generated iOS icon

3. Configure Sync (if needed)

See CLAUDE.md for sync setup instructions.

Project Structure

src/
  components/
    Layout.tsx       # Main layout with safe-area support
    AuthPanel.tsx    # Authentication UI
    CommandPalette.tsx
  lib/
    db.ts            # Dexie database schema
    syncConfig.ts    # Sync configuration
  store/             # Zustand stores
  sync/              # Sync engine
public/
  favicon.svg        # App icon (SVG)
  mask-icon.svg      # Safari mask icon
  pwa-*.png          # Generated PWA icons
  apple-touch-icon.png
scripts/
  generate-icons.mjs # Icon generation script

Commands

• pnpm install - Install dependencies
• pnpm dev - Start development server
• pnpm build - Build for production
• node scripts/generate-icons.mjs - Generate PWA icons