How I Structure My Front-End Projects
A folder structure that actually scales past the first few features.
After a few projects that turned into chaos, I found a structure that actually scales: src/ as the root, components by feature, hooks for logic, and env validation from day one.
Share this post
After a few projects that turned into chaos, I found a structure that actually scales.
src/ as the root — All the code lives here: app/, components/, hooks/, lib/. No loose files floating around the project root.
Components by feature, not by type — Instead of /components/Button, I prefer /features/auth/LoginForm. As the project grows, this decision saves you.
Hooks for logic — Each useSomething lives in its own file inside /hooks. The component renders; the hook thinks.
/lib for utilities — Formatters, constants, API clients. If something repeats more than twice, it goes here.
.env validated with zod from day one — Without this, silent errors in production will eat you alive.