Folder Structure

Folder Structure

This section provides a detailed breakdown of the project's folder structure, explaining the purpose of each directory and how different components interact.

Root Directory

📦 project-root
 ┣ 📂 public            # Static assets
 ┣ 📂 src               # Application source code
 ┃ ┣ 📂 components      # Reusable Vue components
 ┃ ┣ 📂 core            # Core utilities and helpers
 ┃ ┣ 📂 router          # Vue Router configuration
 ┃ ┣ 📂 store           # Pinia state management
 ┃ ┣ 📂 views           # Page-level components
 ┃ ┣ 📜 main.ts         # Entry point of the app
 ┣ 📜 package.json      # Project dependencies
 ┣ 📜 tsconfig.json     # TypeScript configuration
 ┣ 📜 vite.config.ts    # Vite configuration

Detailed Breakdown

public/

This folder contains static assets such as icons and images that are directly accessible in the project.

src/

The main source code of the application.

components/

Contains reusable Vue components categorized into logical groups. Example:

📂 components
 ┣ 📂 Base            # Base UI components
 ┣ 📂 Data            # Geoserver Data listing components
 ┣ 📂 Geostories      # Geospatial storytelling components
 ┣ 📂 Map             # Mapping-related components
 ┣ 📂 Participation   # Citizen participation UI

core/

Contains core utilities and helper functions that support various parts of the application.

📂 core
 ┣ 📂 helpers          # Utility functions for geospatial operations

router/

Contains Vue Router configurations.

📂 router
 ┣ 📜 index.ts         # Defines app routes and navigation guards

store/

Manages global state using Pinia.

📂 store
 ┣ 📜 buffer.ts        # Buffering-related state management
 ┣ 📜 draw.ts          # Drawing tools state management
 ┣ 📜 filter.ts        # Layer filtering state management
 ┣ 📜 geoserver.ts     # Geoserver interaction state
 ┣ 📜 map.ts           # Map-related state
 ┣ 📜 participation.ts # Citizen Participation-related state

views/

Defines page-level Vue components corresponding to different routes.

📂 views
 ┣ 📜 MapView.vue           # Main map page
 ┣ 📜 ParticipationView.vue # Citizen Participation feature

main.ts

The main entry point of the application where the Vue app is initialized.

Other Important Files

• package.json – Manages dependencies and scripts.
• tsconfig.json – TypeScript configuration.
• vite.config.ts – Configuration for Vite, the project's build tool.

---

For more details on routing, state management, and UI components, explore their respective sections in the documentation.