FolderStructure.dev

SvelteKit Full Stack Project Structure

Complete app with form actions, server routes, and database. Full-stack TypeScript.

#sveltekit #svelte #typescript #prisma #fullstack
PNGPDF

Project Directory

my-app/
src/
app.html
app.css
app.d.ts
App-level types
hooks.server.ts
Server hooks (auth)
lib/
index.ts
server/
Server-only code
db.ts
Prisma client
auth.ts
Auth utilities
components/
Button.svelte
Input.svelte
Card.svelte
utils/
validation.ts
Zod schemas
routes/
+layout.svelte
+layout.server.ts
Root load function
+page.svelte
(auth)/
Route group for auth
+layout.svelte
Auth layout
login/
+page.svelte
+page.server.ts
Form action
register/
+page.svelte
+page.server.ts
(app)/
Protected routes
+layout.svelte
+layout.server.ts
Auth guard
dashboard/
+page.svelte
+page.server.ts
settings/
+page.svelte
+page.server.ts
api/
API endpoints
users/
+server.ts
GET/POST
[id]/
+server.ts
prisma/
Database layer
schema.prisma
migrations/
static/
favicon.png
svelte.config.js
vite.config.ts
package.json
tsconfig.json
.env
DATABASE_URL, secrets
.env.example
.gitignore

Why This Structure?

This structure combines SvelteKit's form actions with Prisma for a complete full-stack setup. Route groups separate auth pages from protected app routes. Server-only code lives in $lib/server/ and is never bundled for the client.

Key Directories

  • src/lib/server/-Server-only utilities—never sent to client
  • src/routes/(app)/-Protected routes with auth guard in layout
  • src/routes/api/-REST API endpoints using +server.ts
  • prisma/-Database schema and migrations
  • hooks.server.ts-Handle auth on every request

Form Actions

  • +page.server.ts-Define actions object for form handling
  • use:enhance-Progressive enhancement for forms
  • ActionData-Type-safe form response data
  • fail()-Return validation errors to the form

Getting Started

npm create svelte@latest my-app
npm install prisma @prisma/client
npx prisma init
# Edit prisma/schema.prisma
npx prisma migrate dev
npm run dev

When To Use This

  • SaaS applications and dashboards
  • Apps requiring user authentication
  • Forms with server-side validation
  • Projects with database-backed features

Trade-offs

  • More files-Each route may have .svelte + .server.ts
  • Server dependency-Cannot deploy as static site
  • Initial setup-Database and auth require configuration