Project Structure

Overview

A well‑organized folder layout makes it easier for new developers to understand the codebase and speeds up onboarding. Below is the recommended structure for a modern web application.

Directory Layout

my-app/
├─ public/               # Static assets served as‑is
│   ├─ index.html
│   └─ favicon.ico
├─ src/                  # Source code
│   ├─ assets/           # Images, fonts, etc.
│   ├─ components/       # Reusable UI components
│   ├─ pages/            # Route‑level pages
│   ├─ hooks/            # Custom React hooks
│   ├─ utils/            # Helper functions
│   ├─ store/            # State management (e.g., Redux, Zustand)
│   ├─ App.jsx
│   └─ main.jsx          # Entry point
├─ tests/                # Unit & integration tests
│   └─ ... 
├─ .env                  # Environment variables
├─ .gitignore
├─ package.json
├─ vite.config.js        # Build tool config (example)
└─ README.md

Key Folders

public

Contains files that are copied directly to the build output without processing. Typical files include index.html, favicons, and robots.txt.

src

The heart of the application. Every component, utility, and business logic lives under src. Keep related files together (e.g., component styles next to the component).

tests

All test files should mirror the structure of src for easy navigation. Use .test.jsx or .spec.js naming conventions.

Example Component File

src/components/Button.jsx

import React from 'react';
import './Button.css';

export default function Button({children, onClick, variant='primary'}) {
  return (
    <button className={`btn ${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}