How do you organize code in a JavaScript project?

JavaScript

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.

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

Interview Tip

Describe both approaches (by feature and by type) and say when each makes sense. Mentioning that you colocate tests and keep files small shows you care about maintainability. This is an opinion question — have a preference and explain why.

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.

Table of Contents