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)

src/
  features/
    auth/
      LoginForm.jsx
      useAuth.js
      authApi.js
      auth.test.js
    dashboard/
      Dashboard.jsx
      DashboardStats.jsx
      useDashboardData.js
    products/
      ProductList.jsx
      ProductCard.jsx
      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)

src/
  components/
    LoginForm.jsx
    Dashboard.jsx
    ProductList.jsx
  hooks/
    useAuth.js
    useDashboardData.js
  api/
    authApi.js
    productApi.js
  utils/
    formatDate.js
    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

src/
  components/     — shared, reusable components
  pages/          — route-level components
  hooks/          — custom hooks
  utils/          — helper functions
  api/            — API client and request functions
  constants/      — shared constants
  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.