Runtimes & Engines Project Architecture

09. Modern Project Types & Directory Structures

Architect production-grade codebases across full-stack applications, static sites, component libraries, and enterprise monorepo workspace hierarchies.

project-structures.ts

typescript

// Production Application & Monorepo Directory Architectures
/* Universal Web Application Standard */
// src/
// ├── lib/          <- Core application logic, shared utilities, domain modules
// │   ├── components/
// │   ├── server/   <- Server-only boundary (prevents private secret leaks)
// │   └── state/    <- Fine-grained reactive state models
// ├── routes/       <- File-based routing hierarchy (+page, +layout, +server)
// ├── assets/       <- Static fonts, icons, vector graphics
// └── app.html      <- HTML shell template
/* Enterprise Monorepo Hierarchy (pnpm-workspace.yaml) */
// apps/
// ├── web/          <- Production customer web application
// ├── admin/        <- Internal management dashboard
// └── api/          <- Shared microservice & edge API handlers
// packages/
// ├── ui/           <- Design system component library
// ├── db/           <- Drizzle ORM schema & migrations
// └── config/       <- Shared TypeScript, ESLint & Tailwind tokens

Modern Project Types & Directory Structures

Choosing the right project topology is fundamental to long-term maintainability, code reuse, and team velocity.

SvelteKit 2 Layout: Enforces strong server-side isolation with $lib/server and deterministic page routing with +page.server.ts and hooks.server.ts.
Nuxt 4 Structure: Centralises frontend components and composables in app/ while isolating backend endpoints in server/api/.
Monorepo Topologies: Organises large teams into decoupled apps/ and reusable internal packages/ linked via PNPM workspace catalogs.