Skip to content

web

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

web

README.md

Web App (SvelteKit)

Modern web application built with Svelte 5, TypeScript, Tailwind CSS 4, and comprehensive tooling for production-ready development.

Tech Stack

  • Frontend: Svelte 5 (Runes API), SvelteKit, TypeScript
  • Styling: Tailwind CSS 4, shadcn-svelte UI components
  • Authentication: @supabase/ssr for server-side auth
  • Forms: Superforms with Formsnap for type-safe form handling
  • Icons: Lucide Svelte for consistent iconography
  • Validation: markuplint for HTML validation, Valibot for schema validation
  • Testing: Bun test
  • Linting: ESLint, Prettier

Architecture

This application follows a page-based component organization with class-based design patterns for improved maintainability:

src/lib/
├── components/
│   ├── pages/           # Page-specific components
│   │   ├── auth/        # Authentication pages
│   │   ├── home/        # Home page components
│   │   └── layout/      # Layout components
│   └── ui/              # Reusable UI components (shadcn-svelte)
├── constants/           # Application constants
├── helpers/             # Business logic and API operations (comment handling, authentication, etc.)
├── schemas/             # Valibot validation schemas
├── stores/              # State management (class-based)
│   └── local/           # Component-scoped stores
├── types/               # TypeScript type definitions
└── utils/               # Generic utility functions (reusable, not feature-specific)

Layer Communication Rules:

  • Components: Access Helpers via Stores/LocalStores (direct Helper dependency is prohibited)
  • Stores/LocalStores: Can directly access Helpers, pass state to Helpers for execution
  • Helpers/Utils: Cannot depend on Stores (must be pure functions, receive values as arguments)

State Management

Class-based stores using Svelte 5 Runes API ($state, $derived):

Type Location Instantiation Purpose
Stores src/lib/stores/index.ts Singleton (automatic) Application-wide shared state
LocalStores src/lib/stores/local/ new in component Component-scoped state and logic encapsulation

Stores: supabaseStore, userStore, commentStore

[Demo]

Commands

bun dev       # Start development server (port 5173)
bun build     # Build for production
bun preview   # Preview production build
bun test      # Run tests
bun lint      # Run linting

Development

  1. Start Supabase API: cd ../api && bun start
  2. Generate types: cd ../.. && bun generate
  3. Start dev server: bun dev
  4. Open http://localhost:5173

Deploy to Vercel

Configuration

  • Framework Preset: SvelteKit
  • Root Directory: apps/web
  • Build Command: Automatically configured via vercel.json
  • Install Command: Automatically configured via vercel.json

Environment Variables

Set these in your Vercel project settings:

PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
PUBLIC_GA4_MEASUREMENT_ID=G-XXXXXXXXXX  # Optional

See the root README for complete setup instructions.