How to Structure a Full-Stack TypeScript Project

A tidy structure saves hours every week. Here is a layout that scales from a side project to a team.

Top-level layout

project/
  client/   Next.js app
  server/   Express or NestJS API with Prisma
  README.md

Keeping the two apps side by side makes it easy to run both and to share conventions.

Organize the server by feature

server/src/
  config/        env validation
  common/        shared middleware, utils, errors
  modules/
    auth/
    posts/
      post.controller.ts
      post.service.ts
      post.validation.ts
      post.routes.ts

Everything about posts lives in one folder. Controllers handle HTTP, services hold business logic and validation files hold schemas.

Organize the client by route and component

client/src/
  app/           routes, layouts, metadata
  components/    ui/, site/, dashboard/
  lib/           api client, utils, types

Keep generic UI pieces separate from page-specific components.

Share types carefully

Validation schemas can double as the source of types. If you do share code between client and server, keep it to pure types and schemas, with no framework imports.

Tooling that pays off

• ESLint and Prettier for consistent style.
• TypeScript strict mode from day one.
• Scripts for common tasks: dev, build, lint, db:push, db:seed.
• Husky or CI to run checks automatically.

Document the setup

A README with install steps, required environment variables and the common commands lets anyone run the project in minutes.

Takeaway

Group by feature, keep layers thin, validate at the edges and automate checks. Structure is a kindness to your future self.