Skip to main content

Folder Structure

This guide explains the organization of the Studio project's codebase.

Root Directory​

studio/
├── src/              # Source code
├── public/           # Static assets
├── tests/            # Test files
├── docs/             # Documentation
└── config/           # Configuration files

Source Directory (src/)​

Components​

src/
├── components/       # Reusable UI components
├── pages/           # Page components
├── layouts/         # Layout components
├── hooks/           # Custom React hooks
├── utils/           # Utility functions
└── styles/          # Global styles

Features​

src/
├── features/        # Feature-specific code
│   ├── auth/       # Authentication
│   ├── content/    # Content management
│   ├── media/      # Media handling
│   └── analytics/  # Analytics

Configuration​

Environment Files​

  • .env - Environment variables
  • .env.example - Example environment variables
  • config.js - Application configuration

Build Configuration​

  • webpack.config.js - Webpack configuration
  • babel.config.js - Babel configuration
  • jest.config.js - Jest configuration

Documentation​

docs/
├── api/            # API documentation
├── guides/         # User guides
└── examples/       # Code examples

Testing​

tests/
├── unit/          # Unit tests
├── integration/   # Integration tests
└── e2e/          # End-to-end tests

Best Practices​

note

Follow these guidelines when adding new files:

  1. Place related files in appropriate directories
  2. Use consistent naming conventions
  3. Keep the structure flat when possible
  4. Document new directories

Next Steps​

Learn about the Database Schema to understand data organization.