Skip to content

README.md

Latest commit

 

History

History
166 lines (122 loc) · 5.13 KB

README.md

File metadata and controls

166 lines (122 loc) · 5.13 KB
Raw

Map Dashboard Frontend

A modern, interactive map dashboard built with React and Vite. This project provides a user-friendly interface for visualizing and interacting with geospatial data layers.

Map Web App Preview

Features

  • Interactive map visualization with Leaflet
  • Dark mode support
  • Layer controls for toggling map data
  • Custom UI components (Button, CheckBox)
  • Responsive layout and styling
  • Mock data for development and testing
  • Modular component structure

Prerequisites

  • Node.js (v20 or higher recommended)
  • pnpm (v9 or higher)
  • Docker Desktop (for DevContainer or Docker setup)

Getting Started

Option A: DevContainer Setup (Recommended)

This is the easiest way to get started. The DevContainer automatically provisions a complete development environment with all dependencies pre-installed.

Requirements:

Steps:

  1. Clone the repository:

    git clone https://github.com/OpenSourceFellows/map-dashboard.git
cd map-dashboard

  2. Open in VS Code:

    code .

  3. When prompted, click "Reopen in Container" — or open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and select "Dev Containers: Reopen in Container".

  4. VS Code will build the Docker image and start the container. This may take a few minutes on first run. Once ready, a terminal will open inside the container.

  5. The dev server starts automatically. The app will be available at http://localhost:5173.

Note: The DevContainer configuration is in .devcontainer/devcontainer.json and uses the Docker Compose file at .docker/docker-compose.yml. It automatically installs the ESLint and GitLens extensions and runs pnpm install on container creation.

Option B: Docker Setup (Without VS Code DevContainers)

If you prefer to use Docker without VS Code's DevContainer integration:

  1. Clone the repository:

    git clone https://github.com/OpenSourceFellows/map-dashboard.git
cd map-dashboard

  2. Build and start the container:

    docker compose -f .docker/docker-compose.yml up -d

  3. The app will be available at http://localhost:5173.

  4. To stop the container:

    docker compose -f .docker/docker-compose.yml down

Option C: Manual Installation (Without Docker)

  1. Clone the repository:

    git clone https://github.com/OpenSourceFellows/map-dashboard.git
cd map-dashboard

  2. Install dependencies:

    pnpm install

  3. Start the development server:

    pnpm run dev

    The app will be available at http://localhost:5173 by default.

  4. Optional: For full development setup, you may also need the companion backend server:

    git clone https://github.com/OpenSourceFellows/dashboard-server.git

    See the dashboard-server repository for backend setup instructions.

Development

Build for production:

pnpm run build

Preview production build:

pnpm run preview

Run linter:

pnpm run lint

Project Structure

map-dashboard/
├── public/           # Static assets
├── src/              # Source code
│   ├── components/   # UI and map components
│   │   ├── Layout/   # Header and layout components
│   │   ├── Map/      # Map-related components
│   │   └── UI/       # Reusable UI components
│   ├── data/         # Mock data
│   ├── hooks/        # Custom React hooks
│   ├── styles/       # CSS files
│   ├── types/        # TypeScript types
│   ├── utils/        # Utility functions
│   ├── App.tsx       # Main app component
│   └── main.tsx      # Entry point
├── package.json      # Project metadata and scripts
├── vite.config.ts    # Vite configuration
└── README.md         # Project documentation

Tools & Libraries

Custom Components

  • Header – App title and navigation
  • MapContainer – Interactive Leaflet map with markers and polygons
  • LayerControls – Toggle map layers and data types
  • MapLegend – Map legend display
  • CheckBox – UI checkbox component

Additional Documentation