Skip to content

README.md

Latest commit

 

History

History
126 lines (106 loc) · 6.39 KB

README.md

File metadata and controls

126 lines (106 loc) · 6.39 KB
Raw

Core Web

SvelteKit frontend starter template for social platforms. Users follow each other, discover profiles, manage settings, and track engagement analytics.

Tech Stack

Component Technology
Framework SvelteKit 2, Svelte 5 (runes)
UI shadcn-svelte (bits-ui), Tailwind CSS v4, lucide-svelte
Auth Supabase Auth SSR
Forms superforms + Zod v4 (SPA mode)
Toasts svelte-sonner
Dark Mode mode-watcher
Charts Chart.js v4 (line/bar charts)
Maps Leaflet.js v1 (geo maps with marker clusters)
Testing Vitest 4, Playwright

Quick Start

# Prerequisites: Node.js 20+, pnpm

# Install dependencies
pnpm install

# Copy env
cp .env.example .env

# Start dev server
pnpm dev

Environment Variables

PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
PUBLIC_API_URL=http://localhost:8080

Scripts

Script Description
pnpm dev Start dev server
pnpm build Production build
pnpm preview Preview production build
pnpm check Svelte type checking
pnpm lint ESLint
pnpm format Prettier
pnpm test:unit Vitest unit tests
pnpm test:e2e Playwright E2E tests

Project Structure

src/
├── app.html                     App shell
├── app.d.ts                     Type declarations (App.Locals, App.PageData)
├── hooks.server.ts              Supabase SSR client + session validation
├── lib/
│   ├── api.ts                   API client (all backend calls)
│   ├── insights-dedup.ts        Client-side tracking dedup (sessionStorage)
│   ├── supabase.ts              Browser + server Supabase client factories
│   ├── stores/                  Auth store, auth-modal store, cookie consent
│   ├── schemas/                 Zod validation schemas
│   ├── utils/                   cn(), date formatting, initials, URL helpers
│   └── components/
│       ├── ui/                  shadcn-svelte primitives
│       ├── common/              App components (UserAvatar, ProfileHeader, etc.)
│       ├── auth/                Auth forms + modals (Login, Signup, OAuth, Onboarding)
│       ├── layout/              Navbar, BottomNav, LeftSidebar, RightSidebar, PageFooter, StaticHeader
│       ├── logo/                Brand logo (logo.svelte, brand-icon.svelte)
│       ├── theme-button.svelte  Dark mode toggle
│       └── cookie-consent.svelte Cookie consent (GDPR)
└── routes/
    ├── +layout.server.ts        Session loading
    ├── +layout.svelte           Root layout (navbar, footer, modals, toaster)
    ├── about/                   About page
    ├── contact/                 Contact page
    ├── privacy/                 Privacy policy
    ├── terms/                   Terms of service
    ├── auth/callback/           OAuth callback
    ├── p/                       Profiles (own, public, edit, followers/following)
    ├── insights/                Insights dashboard, events
    ├── explore/                 Discover users
    ├── notifications/           Notifications
    └── settings/                User settings

Key Routes

Path Auth Description
/ No Home feed
/p Yes Own profile
/p/edit Yes Edit profile (username, display name, bio)
/p/[username] No Public profile
/p/[username]/followers No Followers list
/p/[username]/following No Following list
/explore No Discover users
/notifications Yes Notifications
/settings Yes Appearance, notifications, privacy, account (password, sessions)
/insights Yes Insights dashboard (metrics, chart, breakdowns, map)
/insights/events Yes Paginated event log (views)
/contact No Contact form
/about No About page
/privacy No Privacy policy
/terms No Terms of service
/login No Login
/signup No Sign up

Architecture

  • Svelte 5 Runes: $state, $derived, $effect, $props, $bindable throughout
  • Client-side data loading: Most routes fetch data via onMount / $effect, not SSR
  • Auth flow: Supabase → JWT → backend sync via api.getMe() on auth state change
  • Optimistic updates: Follows update UI immediately with rollback on error
  • Global auth modal: AuthDialog (desktop) / AuthSheet (mobile) controlled by authModal store
  • Token management: Proactive JWT refresh 60s before expiry
  • Layout modes: Static pages (landing-style with StaticHeader), app shell (3-column with sidebars)

License

Private — all rights reserved.