Project Structure — Senior Interview Prep
On this page3
- Files
- The senior framing
- Related
Project Structure — Senior Interview Prep
How to lay out a frontend codebase so it scales with the team: folder organization, monorepo shape, import boundaries, App Router patterns, and the linting/formatting baseline. The senior question is rarely “where does file X go” — it’s “what convention scales when 20 people commit to this repo daily?”
Files
The senior framing
A junior asks “what should I name this folder?” A senior asks “what’s the rule that decides where any file goes, and what stops the team from breaking it?” The conventions in this folder are about:
- Discoverability — can someone new find a file by guessing.
- Locality — code that changes together lives together.
- Boundaries — explicit interfaces, no cross-feature dependency creep.
- Enforcement — lint rules + CI gates that catch violations before review.
Contents
6
- Feature vs Layer Architecture 5 Two organizing principles for app code: layer-based (components/, hooks/, pages/, utils/) groups files by kind; feature-based (features/auth/,…
- Monorepo Layout — Apps, Packages, Tooling 5 A monorepo holds multiple deployable apps + shared libraries in one repo.
- Barrels (index.ts) — When Helpful, When Harmful 5 A barrel is an index.ts (or index.js) file that re-exports many siblings: export from "./Button"; export from "./Input";.
- Next.js App Router Layout — Segments, Parallel Routes, Intercepts 5 Next.js 13+'s App Router rebuilt routing around the file system + React Server Components.
- Module Boundaries — eslint-plugin-boundaries, dependency-cruiser 4 A "rule" is only a rule if it's enforced.
- Linting and Formatting — ESLint Flat Config, Prettier, husky, lint-staged 5 The senior baseline for a frontend project: ESLint (with flat config — eslint.config.js) for static analysis + code rules, Prettier for formatting, husky +…