108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
|
# Project Folder Structure
|
|||
|
|
|
|||
|
|
This document provides a detailed description of the purpose of each folder in the project by root level, along with the folder hierarchy.
|
|||
|
|
|
|||
|
|
## Folder Hierarchy
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
📁 src
|
|||
|
|
├── 📁 assets
|
|||
|
|
├── 📁 components
|
|||
|
|
├── 📁 functions
|
|||
|
|
├── 📁 hooks
|
|||
|
|
├── 📁 modules
|
|||
|
|
│ ├── 📁 builder
|
|||
|
|
│ ├── 📁 simulation
|
|||
|
|
│ └── 📁 visualization
|
|||
|
|
├── 📁 services
|
|||
|
|
├── 📁 store
|
|||
|
|
├── 📁 styles
|
|||
|
|
├── 📁 tests
|
|||
|
|
├── 📁 types
|
|||
|
|
├── 📁 utils
|
|||
|
|
├── App.css
|
|||
|
|
├── App.tsx
|
|||
|
|
├── index.css
|
|||
|
|
├── main.tsx
|
|||
|
|
└── vite-env.d.ts
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description of Each Folder
|
|||
|
|
|
|||
|
|
### 📁 `src`
|
|||
|
|
The root directory for all source code related to the application.
|
|||
|
|
|
|||
|
|
#### 📁 `assets`
|
|||
|
|
- **Purpose:** Contains static assets such as images, icons, fonts, or other resources.
|
|||
|
|
- **Example:**
|
|||
|
|
- `react.svg`: A static SVG file used in the project.
|
|||
|
|
|
|||
|
|
#### 📁 `components`
|
|||
|
|
- **Purpose:** Contains reusable React components, serving as building blocks for the user interface.
|
|||
|
|
- **Example:**
|
|||
|
|
- Buttons, modals, headers, and forms.
|
|||
|
|
|
|||
|
|
#### 📁 `functions`
|
|||
|
|
- **Purpose:** Stores pure functions or logic that can be reused across the application.
|
|||
|
|
- **Example:**
|
|||
|
|
- Utility functions for data transformation or computation.
|
|||
|
|
|
|||
|
|
#### 📁 `hooks`
|
|||
|
|
- **Purpose:** Holds custom React hooks for managing specific logic or behaviors.
|
|||
|
|
- **Example:**
|
|||
|
|
- Hooks for state management, API calls, or reusable effects.
|
|||
|
|
|
|||
|
|
#### 📁 `modules`
|
|||
|
|
- **Purpose:** Organizes high-level, feature-specific code into subdirectories.
|
|||
|
|
- **📁 builder:** Manages functionalities and components related to building or configuring features.
|
|||
|
|
- **📁 simulation:** Handles processes or logic related to simulations or dynamic scenarios.
|
|||
|
|
- **📁 visualization:** Focuses on displaying data visually, such as charts, graphs, or interactive UI elements.
|
|||
|
|
|
|||
|
|
#### 📁 `services`
|
|||
|
|
- **Purpose:** Encapsulates external service interactions, such as API calls or library integrations.
|
|||
|
|
- **Example:**
|
|||
|
|
- REST API clients or authentication handlers.
|
|||
|
|
|
|||
|
|
#### 📁 `store`
|
|||
|
|
- **Purpose:** Contains state management logic and configurations for tools like Redux or Zustand.
|
|||
|
|
- **Example:**
|
|||
|
|
- Redux slices, context providers, or global state stores.
|
|||
|
|
|
|||
|
|
#### 📁 `styles`
|
|||
|
|
- **Purpose:** Includes global CSS, SCSS, or theming resources.
|
|||
|
|
- **Example:**
|
|||
|
|
- Global styles, theme variables, or resets.
|
|||
|
|
|
|||
|
|
#### 📁 `tests`
|
|||
|
|
- **Purpose:** Stores test files for unit testing, integration testing, and mock data.
|
|||
|
|
- **Example:**
|
|||
|
|
- Test files (`*.test.tsx`, `*.spec.ts`) or mock utilities.
|
|||
|
|
|
|||
|
|
#### 📁 `types`
|
|||
|
|
- **Purpose:** Contains shared TypeScript type definitions and interfaces.
|
|||
|
|
- **Example:**
|
|||
|
|
- Type declarations for props, data models, or API responses.
|
|||
|
|
|
|||
|
|
#### 📁 `utils`
|
|||
|
|
- **Purpose:** Includes general-purpose utility files that don’t fit into other specific folders.
|
|||
|
|
- **Example:**
|
|||
|
|
- Helper functions like debouncers or date formatters.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Root-Level Files
|
|||
|
|
|
|||
|
|
### `App.tsx`
|
|||
|
|
- **Purpose:** The root React component, initializing the main application layout and logic.
|
|||
|
|
|
|||
|
|
### `index.css`
|
|||
|
|
- **Purpose:** Contains global styles applied throughout the application.
|
|||
|
|
|
|||
|
|
### `main.tsx`
|
|||
|
|
- **Purpose:** The entry point of the app, rendering the React application and setting up the React DOM.
|
|||
|
|
|
|||
|
|
### `vite-env.d.ts`
|
|||
|
|
- **Purpose:** TypeScript environment configuration file for Vite.
|