LearnDev
Structure Explorer

See How Real Codebases Are Organized

Pick a project type below and click any folder. Every entry comes with a plain-English explanation of what it does, why it exists, and how it connects to the rest of the app.

Interactive folder tree 4 architecture presets Plain-English explanations

How a typical production full-stack codebase is organized — UI, hooks, business logic, state, and route handlers all living together with clear boundaries.

scalable-app/
src/
app/

Application routes & pages

Where the user-facing entry points live — pages, layouts, and route definitions.

  • Route segments map to URLs
  • Shared layouts wrap nested routes
  • Page-level data fetching
  • Loading & error boundaries

Visual Flow Diagrams

Frontend → API → Database. Auth lifecycle. Payment lifecycle. AI request flow.

Best Practices

File naming. Scalable folder structure. Clean architecture. Separation of concerns.

Common Mistakes

Fat components. Mixed business logic. Tight coupling. Bad state management.

All structures

Quick reference — what each preset is for.

  • Full-Stack Web App

    A modern full-stack app with rendering, state, and APIs in one repo.

    How a typical production full-stack codebase is organized — UI, hooks, business logic, state, and route handlers all living together with clear boundaries.

    app/components/hooks/services/lib/store/+2

  • Backend / API Service

    Layered backend with clear boundaries between transport, logic, and data.

    A standalone API service organized in layers — controllers handle HTTP, services hold domain logic, and repositories own data access. Easy to test, easy to grow.

    routes/controllers/services/repositories/middleware/models/+2

  • AI Application

    An LLM-powered app organized for reliability, retrieval, and evals.

    AI apps look like normal apps with extra concerns: prompts as code, a retrieval pipeline, agents that orchestrate tools, and evals that catch regressions before users do.

    app/agents/prompts/retrieval/tools/evals/+2

  • Frontend SPA

    A single-page app with clear UI, state, and data-fetching boundaries.

    How a real-world SPA is split — routes, presentational components, hooks, a state store, and a thin services layer that talks to your APIs.

    pages/components/hooks/store/services/assets/+2

Want to go deeper?

Read full architecture deep-dives or follow a structured course on building these apps from scratch.

Browse courses Read articles