Project structure · Frontend
SvelteKit project structure
Opens with creditsFor developers building a full Svelte app with server rendering, form actions and a database, using SvelteKit 3 and Svelte 5 runes as npx sv create sets them up. The example is a study planner where students track courses and assignment deadlines: routes stay thin and URL-shaped, while each product area lives in a feature folder under src/lib with its own components, validation, server queries and tests.
Curated by Tauseef FayyazIntermediate181 files and foldersSvelteKit 3.0, Svelte 5.57, Vite 8Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you34 files and folders
- 2GrowingWhat a real app with features and tests adds+96 files and folders
- ProductionWhat running it for real users adds+28 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+23 files and foldersOpens with credits
How it is organised
- Routes decide URLs and stay thin: a +page.server.ts loads data and handles form actions by calling into src/lib/features/<name>, where the components, schemas, queries and tests for that area live.
- Anything that touches the database or secrets lives in a folder or file named `server`. SvelteKit 3 treats every such path as server-only and fails the build if browser code imports it.
- Use load functions and form actions first. Forms work without JavaScript and use:enhance upgrades them; reach for remote functions only when you need them, knowing they are still experimental.
- All configuration lives in the sveltekit() call in vite.config.ts. There is no svelte.config.js in SvelteKit 3.
- Declare every environment variable in src/env.ts with a schema, import secrets only from $app/env/private, and never mark a secret public.
- Write Svelte 5 runes everywhere: $props, $state, $derived, snippets. Shared state goes in .svelte.ts modules, and per-user data never sits in module scope on the server.
- Tests sit next to the code: *.spec.ts runs in Node, *.svelte.spec.ts runs in a real browser through Vitest browser mode, *.e2e.ts runs the whole app with Playwright.
At the top of the project
Open one in the explorer for the full story
- my-app/
- .husky/Git hooks managed by husky, created by npx husky init.2 inside
- .svelte-kit/Generated types, the route manifest and build intermediates.
- .vscode/Shared VS Code settings and recommended extensions.3 inside
- build/Output of `npm run build` with adapter-node: a Node server you run with `node build`.
- drizzle/SQL migration files written by drizzle-kit generate.2 inside
- messages/Translation files, one JSON file per language.2 inside
- node_modules/Installed packages.
- playwright-report/The HTML report from the last Playwright run.
- project.inlang/Paraglide project settings.2 inside
- scripts/Small Node scripts the team runs by hand or in CI.1 inside
- src/All source code: routes, library code, hooks and the HTML template.9 inside
- static/Files served as-is at fixed URLs.2 inside
- test-results/Playwright traces, screenshots and videos from failed tests.
- .envLocal secrets: DATABASE_URL, BETTER_AUTH_SECRET.
- .env.exampleEvery variable the app needs, with fake values.
- .gitignoreIgnores node_modules, .svelte-kit, build, .env files and adapter output folders.
- .npmrcContains engine-strict=true.
- .prettierignoreFiles Prettier skips: lock files, static, generated output.
- .prettierrcPrettier settings with prettier-plugin-svelte.
- AGENTS.mdInstructions for AI coding assistants, from the ai-tools add-on.
- commitlint.config.jsExtends @commitlint/config-conventional.
- compose.yamlRuns Postgres locally in Docker, created by the drizzle add-on.
- drizzle.config.tsTells drizzle-kit where the schema is, where migrations go and which database to use.
- eslint.config.jsESLint flat config with typescript-eslint and eslint-plugin-svelte.
- package-lock.jsonThe exact version of every installed package.
- package.jsonScripts, dependencies and the #lib subpath imports.
- playwright.config.tsPlaywright config: builds and previews the app on port 4173, matches *.e2e.ts files.
- README.mdHow to install, run, test and deploy the app.
- tsconfig.jsonExtends $app/tsconfig and turns on strict mode.
- vite.config.tsThe Vite config with the sveltekit() plugin, which now holds all SvelteKit config.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with SvelteKit.
- RoadmapFrontend development roadmapHTML, CSS, JavaScript and a framework
- RoadmapFull stack development roadmapBuild and ship whole web apps
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Roadmap· TypeScriptSoftware design and clean code roadmapOOP, SOLID, design patterns, refactoring
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· BeginnerMasters Application and Scholarship Deadline PlannerA web app for students applying to masters programmes and scholarships abroad: add each application with its deadline, time zone, fees and documents, and the app works backwards to a week-by-week plan, flags clashes and tracks referees. A beginner final year project with real users in every graduating class.
- FYP idea· BeginnerRent Ledger and Tenant Portal for Small LandlordsA web app for small landlords and property caretakers with a few houses, flats or shops to track agreements, monthly rent with yearly increments, utility bills, security deposits and repair requests, with a simple tenant portal. A beginner-friendly final year project in real estate and property management.
See 10 moreShow fewer
- FYP idea· IntermediateUrdu and RTL Accessibility Linter for Nastaliq Web Pages and Government FormsBuild an automated checker that finds the accessibility and layout faults specific to Urdu web pages: missing language and direction attributes, Urdu text drawn as images, broken Nastaliq rendering, mirrored icons and forms that screen readers announce in the wrong language. General tools such as axe-core do not look for any of these. The result is a command-line tool, a browser extension and a public audit of real Pakistani websites.
- QuestionWhat should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- QuestionI understand tutorials but cannot build anything myself. Why does coding feel so different when I am alone?Tutorials train recognition, not production. When you follow along, someone else makes every decision. Building alone requires you to break a problem down and make choices, which is a separate skill. Build it with small projects, planning on paper first, and a rule to struggle before you look anything up.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionShould I learn TypeScript or Python first in 2026?Learn Python first if you are new to programming or drawn to data and AI. Learn TypeScript first only if you already know some JavaScript or are certain about web development, and even then learn plain JavaScript for a few weeks before the types. The second language is much easier than the first.
- Resource· GuideMDN Web DocsMDN Web Docs is Mozilla's open, community-maintained reference for HTML, CSS, JavaScript, HTTP and browser APIs, with browser compatibility tables on every page and a structured Learn area for beginners. It is free, and a paid MDN Plus tier adds extras such as AI help and collections. It suits every web developer, from someone writing their first page to a senior engineer checking exactly how an API behaves across browsers.
- Resource· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 20 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- SvelteKit: Creating a project
- SvelteKit: Project structure
- SvelteKit: Migrating to SvelteKit v3
- SvelteKit: Routing
- SvelteKit: Form actions
- SvelteKit: Hooks
- SvelteKit: Environment variables
- SvelteKit: Server-only modules
- SvelteKit: Remote functions
- SvelteKit: Observability
- SvelteKit: Service workers
- SvelteKit: adapter-node
- Svelte CLI (sv) overview and add-ons
- sv source and templates
- Svelte: Testing
- Drizzle ORM: Migrations
- Better Auth: SvelteKit integration
- Paraglide JS: SvelteKit
- Playwright: Authentication
- Sentry: SvelteKit SDK
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com