Coreweb

devsin

SvelteKit 5 starter pack with TailwindCSS, shadcn-ui, Supabase Auth, Storybook, Superforms, zod

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

Top categories