# 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.