How do you organize code in a JavaScript project?

The short answer

Good code organization groups related files together, separates concerns, and makes things easy to find. The most common approaches are: organizing by feature (all files for a feature in one folder), organizing by type (components, hooks, utils in separate folders), or a mix of both. The right structure depends on the project size.

By feature (recommended for larger projects)

1src/
2  features/
3    auth/
4      LoginForm.jsx
5      useAuth.js
6      authApi.js
7      auth.test.js
8    dashboard/
9      Dashboard.jsx
10      DashboardStats.jsx
11      useDashboardData.js
12    products/
13      ProductList.jsx
14      ProductCard.jsx
15      productApi.js

Everything related to authentication lives in auth/. You do not have to jump between folders to work on a feature.

By type (common for smaller projects)

1src/
2  components/
3    LoginForm.jsx
4    Dashboard.jsx
5    ProductList.jsx
6  hooks/
7    useAuth.js
8    useDashboardData.js
9  api/
10    authApi.js
11    productApi.js
12  utils/
13    formatDate.js
14    formatCurrency.js

Simple and works well for small to medium projects. Gets harder to navigate as the project grows.

Common conventions

• One component per file — easier to find and test
• Index files for clean imports — import { Button } from './components'
• Colocate tests — put Component.test.js next to Component.jsx
• Shared utilities in utils/ — formatters, helpers, constants
• Keep files small — if a file is over 200-300 lines, consider splitting it

In React specifically

1src/
2  components/     — shared, reusable components
3  pages/          — route-level components
4  hooks/          — custom hooks
5  utils/          — helper functions
6  api/            — API client and request functions
7  constants/      — shared constants
8  types/          — TypeScript types

Why interviewers ask this

This tests how you think about code architecture. Interviewers want to see if you can organize a project so other developers can navigate it easily. Good organization shows experience building and maintaining real projects.