Developer Documentation Introduction

Home

Welcome to the developer documentation for TOSCA. This documentation provides an overview of the project structure, development setup, and key components of the application.

Overview

This project is a Vue 3 application using TypeScript and Pinia for state management. It integrates MapLibre and OpenLayers for geospatial data visualization, along with Turf.js for geospatial data processing. The UI is built with reusable components and follows best practices for modern web development.

Features

• Vue 3 Composition API
• Pinia for state management
• Vue Router for navigation
• MapLibre and OpenLayers integration
• Turf.js for geospatial calculations
• Dynamic filtering and data visualization
• PrimeVue for UI components
• TypeScript for type safety
• Unit testing with Vitest

Folder Structure

The project follows a modular structure for maintainability and scalability. Below is an overview of the main directories:

📦 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

For a more detailed breakdown, see the Folder Structure page.

Getting Started

To set up and run the project, follow the Getting Started guide.

Documentation Sections

• Getting Started
• Folder Structure
• State Management (Pinia)
• Routing (Vue Router)
• Components & UI
• Map System
• Filtering & Data Processing
• API & Backend Configuration
• Testing

---

Continue to Getting Started to set up the development environment.