Project Structure Documentation

This document provides an overview of the project’s file structure and organization for the WMIAdminTheme 2025 project.

Common Structure Overview

The project follows a standard React application structure with some additional directories for specific features:

pills-of-zen/
├── src/                    # Main source code
│   ├── components/        # Reusable UI components
│   ├── pages/            # Page components
│   ├── layout/           # Layout components
│   ├── context/          # React context providers
│   ├── types/            # TypeScript type definitions
│   ├── constants/        # Application constants
│   ├── assets/           # Static assets
│   └── lib/              # Utility functions
├── public/               # Public static files
├── dist/                 # Production build
└── config/              # Configuration files

Key Directories Explained

1. Source Code (src/)

The main development directory containing all application code.

2. Components (src/components/)

• Reusable UI components
• Organized by feature/type
• Includes UI, forms, charts, etc.

3. Pages (src/pages/)

• Page-level components
• One directory per feature/page
• Contains page-specific components

4. Layout (src/layout/)

• Application layout components
• Header, sidebar, main layout
• Navigation structure

5. Supporting Directories

• context/ - State management
• types/ - TypeScript definitions
• constants/ - App constants
• assets/ - Static resources
• lib/ - Utility functions

Configuration Files

Located in the root directory:

• package.json - Dependencies and scripts
• tsconfig.json - TypeScript config
• vite.config.ts - Build config
• tailwind.config.js - Styling config
• Other config files for linting, formatting, etc.