🌟 We are Open Source! Check out our repository on GitHub

JavaScript Project Structure

A scalable and maintainable folder structure for JavaScript applications

File Structure

  • src
    • index.js
    • app.js
    • components
      • ui
        • Button.js
        • Modal.js
      • layout
        • Header.js
        • Footer.js
    • modules
      • auth
        • authService.js
        • authHelpers.js
      • api
        • apiClient.js
        • endpoints.js
    • utils
      • helpers.js
      • constants.js
      • validation.js
      • formatters.js
    • styles
      • main.css
      • variables.css
      • components.css
    • assets
      • images
      • fonts
      • icons
  • public
    • index.html
    • favicon.ico
    • manifest.json
  • tests
    • unit
    • integration
    • setup.js
  • docs
    • api.md
    • components.md
  • package.json
  • webpack.config.js
  • babel.config.js
  • .eslintrc.js
  • .gitignore
  • README.md

Directory Structure Explanation

src/components/ui/

Contains basic UI components that form the foundation of the application's design system.

components/ui/Button.js

Reusable button component with consistent styling and behavior.

src/components/layout/

Contains layout components that define the structure and arrangement of pages.

src/modules/auth/

Authentication module organized with separate files for services and helpers.

modules/auth/authService.js

Service class handling authentication logic and API calls.

src/modules/api/

API module with organized structure for client and endpoint management.

modules/api/apiClient.js

HTTP client configuration and request/response interceptors.

utils/formatters.js

Utility functions for formatting dates, numbers, and other display values.

src/assets/

Contains static assets like images, fonts, and icons organized by type.

styles/variables.css

CSS custom properties (variables) for consistent theming and styling.

tests/

Contains unit and integration tests organized by test type.

webpack.config.js

Webpack configuration for bundling and building the application.

babel.config.js

Babel configuration for JavaScript transpilation and modern syntax support.