Dwinzo_dev/app/docs/documents/projectStructure.md

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.