diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..18a25b4
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+.vscode
diff --git a/.env.development.local.sample b/.env.development.local.sample
index 21fd0af..244e21b 100644
--- a/.env.development.local.sample
+++ b/.env.development.local.sample
@@ -12,3 +12,7 @@ VITE_FIREBASE_MEASUREMENT_ID=
 VITE_MAPILLARY_API_KEY=
 
 VITE_OSM_OAUTH_REDIRECT_URI=
+
+VITE_FIREBASE_DB_EMULATOR_HOST=
+VITE_FIREBASE_DB_EMULATOR_PORT=
+VITE_FIREBASE_AUTH_EMULATOR_URL=
diff --git a/.github/workflows/publish-web-app-serve.yml b/.github/workflows/publish-web-app-serve.yml
new file mode 100644
index 0000000..20bdbfe
--- /dev/null
+++ b/.github/workflows/publish-web-app-serve.yml
@@ -0,0 +1,23 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - project/*
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/web-app-serve-action@v0.1.1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..5582964
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,70 @@
+# -------------------------- Dev ---------------------------------------
+
+FROM node:22-bullseye AS dev
+
+RUN apt-get update -y \
+    && apt-get install -y --no-install-recommends git \
+    && rm -rf /var/lib/apt/lists/* \
+    && npm install -g yarn@1.22.19 --force \
+    && git config --global --add safe.directory /code
+
+WORKDIR /code
+
+# Build stage for web app
+FROM dev AS web-app-serve-build
+
+COPY ./package.json ./yarn.lock /code/
+
+RUN yarn install
+COPY . /code/
+
+ENV VITE_FIREBASE_API_KEY=ExampleF1rebaseAP1k3y
+ENV VITE_FIREBASE_AUTH_DOMAIN=example-key.firebaseapp.com
+ENV VITE_FIREBASE_DATABASE_URL=https://example-database.firebaseio.com
+ENV VITE_FIREBASE_PROJECT_ID=example
+ENV VITE_FIREBASE_STORAGE_BUCKET=example.appspot.com
+ENV VITE_FIREBASE_MESSAGING_SENDER_ID=123123456123
+ENV VITE_FIREBASE_APP_ID=1:23456789:web:1abc234def567
+ENV VITE_COMMUNITY_DASHBOARD_URL=https://mapswipe.org
+
+ENV VITE_FIREBASE_MEASUREMENT_ID=
+ENV VITE_MAPILLARY_API_KEY=
+ENV VITE_BASE_URL=https://mapswipe.org/privacy
+ENV VITE_PRIVACY_POLICY_URL=https://mapswipe.org/privacy/
+ENV VITE_IMPRINT_URL=https://mapswipe.org/privacy/
+ENV VITE_APP_LOGO=./img/mapswipe-white.svg
+ENV VITE_PROJECTS_FALLBACK_IMAGE=./img/map-pin-600x400.jpg
+ENV VITE_ALLOW_UNVERIFIED_USERS=true
+
+ENV VITE_DEFAULT_LOCALE=en
+ENV VITE_FALLBACK_LOCALE=en
+ENV VITE_SUPPORTED_LOCALES=en,de,fr
+
+ENV VITE_THEME_LIGHT_PRIMARY=#060E2F
+ENV VITE_THEME_LIGHT_SECONDARY=#0D1949
+ENV VITE_THEME_LIGHT_TERTIARY=#EEF2FB
+ENV VITE_THEME_LIGHT_ACCENT=#589AE3
+ENV VITE_THEME_LIGHT_ERROR=#C62828
+ENV VITE_THEME_LIGHT_WARNING=#8E0000
+ENV VITE_THEME_LIGHT_INFO=#2196f3
+ENV VITE_THEME_LIGHT_SUCCESS=#4caf50
+ENV VITE_THEME_LIGHT_NEUTRAL=#272727
+
+ENV VITE_APP_NAME=MapSwipe
+ENV VITE_APP_WEBSITE_URL=https://mapswipe.org
+ENV VITE_APP_ATTRIBUTION_TITLE=MapSwipe
+ENV VITE_APP_ATTRIBUTION_URL=https://mapswipe.org/privacy/
+
+RUN WEB_APP_SERVE_ENABLED=true yarn build-only --outDir=/code/build
+
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
+
+LABEL org.opencontainers.image.source="github.com/mapswipe/mapswipe-web"
+LABEL org.opencontainers.image.authors="dev@togglecorp.com"
+
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY ./web-app-serve/web-app-apply-config.sh /code/
+ENV APPLY_CONFIG__APPLY_CONFIG_PATH=/code/web-app-apply-config.sh
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"
diff --git a/env.ts b/env.ts
new file mode 100644
index 0000000..12d54c1
--- /dev/null
+++ b/env.ts
@@ -0,0 +1,57 @@
+import {
+    defineConfig,
+    overrideDefineForWebAppServe,
+    Schema,
+} from '@togglecorp/vite-plugin-validate-env';
+
+const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
+if (webAppServeEnabled) {
+    // eslint-disable-next-line no-console
+    console.warn('Building application for web-app-serve');
+}
+const overrideDefine = webAppServeEnabled
+    ? overrideDefineForWebAppServe
+    : undefined;
+
+export default defineConfig({
+    overrideDefine,
+    validator: 'builtin',
+    schema: {
+        VITE_FIREBASE_API_KEY: Schema.string.optional(),
+        VITE_FIREBASE_AUTH_DOMAIN: Schema.string.optional(),
+        VITE_FIREBASE_DATABASE_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_FIREBASE_PROJECT_ID: Schema.string.optional(),
+        VITE_FIREBASE_STORAGE_BUCKET: Schema.string.optional(),
+        VITE_FIREBASE_MESSAGING_SENDER_ID: Schema.string.optional(),
+        VITE_FIREBASE_APP_ID: Schema.string.optional(),
+        VITE_FIREBASE_MEASUREMENT_ID: Schema.string.optional(),
+        VITE_BASE_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_PRIVACY_POLICY_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_IMPRINT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_NAME: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_TITLE: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_WEBSITE_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_LOGO: Schema.string.optional(),
+        VITE_PROJECTS_FALLBACK_IMAGE: Schema.string.optional(),
+        VITE_ALLOW_UNVERIFIED_USERS: Schema.boolean(),
+
+        VITE_DEFAULT_LOCALE: Schema.string.optional(),
+        VITE_FALLBACK_LOCALE: Schema.string.optional(),
+        VITE_SUPPORTED_LOCALES: Schema.string.optional(),
+
+        VITE_THEME_LIGHT_PRIMARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_SECONDARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_TERTIARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_ACCENT: Schema.string.optional(),
+        VITE_THEME_LIGHT_ERROR: Schema.string.optional(),
+        VITE_THEME_LIGHT_WARNING: Schema.string.optional(),
+        VITE_THEME_LIGHT_INFO: Schema.string.optional(),
+        VITE_THEME_LIGHT_SUCCESS: Schema.string.optional(),
+        VITE_THEME_LIGHT_NEUTRAL: Schema.string.optional(),
+
+        VITE_COMMUNITY_DASHBOARD_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+
+        VITE_MAPILLARY_API_KEY: Schema.string.optional(),
+    },
+});
diff --git a/package.json b/package.json
index 825d164..4e8c62b 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "mapswipe-web",
   "version": "0.2.8",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -17,9 +18,12 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@togglecorp/fujs": "^2.2.0",
+    "@turf/bbox": "^7.2.0",
     "base-64": "^1.0.0",
     "firebase": "^11.8.1",
     "mapillary-js": "^4.1.2",
+    "maplibre-gl": "^5.6.1",
     "ol": "^10.5.0",
     "ol-contextmenu": "^5.5.0",
     "ol-ext": "^4.0.31",
@@ -39,6 +43,7 @@
     "@mdi/font": "^7.4.47",
     "@playwright/test": "^1.38.0",
     "@rushstack/eslint-patch": "^1.3.3",
+    "@togglecorp/vite-plugin-validate-env": "^2.2.1",
     "@tsconfig/node18": "^18.2.2",
     "@types/base-64": "^1.0.2",
     "@types/jsdom": "^21.1.2",
diff --git a/src/components/BaseMap.vue b/src/components/BaseMap.vue
new file mode 100644
index 0000000..38c8405
--- /dev/null
+++ b/src/components/BaseMap.vue
@@ -0,0 +1,436 @@
+<script setup lang="ts" generic="GeoJsonProperties extends GeoJSON.GeoJsonProperties">
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { Map } from 'maplibre-gl';
+import { shallowRef, onMounted, onUnmounted, markRaw, watchEffect, onBeforeUnmount, computed, watch } from 'vue';
+import getBbox from '@turf/bbox';
+import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs';
+import type { OverlayTileServer, TileServer } from '@/utils/types';
+
+const BASE_SOURCE_NAME = 'base-source';
+const BASE_RASTER_LAYER_NAME = 'base-raster-layer';
+
+const BOUNDS_SOURCE_NAME = 'bounds-geojson-source';
+const BOUNDS_LINE_LAYER_NAME = 'bounds-geojson-line-layer';
+const BOUNDS_FILL_LAYER_NAME = 'bounds-geojson-fill-layer';
+
+const OVERLAY_SOURCE_NAME = 'overlay-source';
+const OVERLAY_RASTER_LAYER_NAME = 'overlay-raster-layer';
+const OVERLAY_LINE_LAYER_NAME = 'overlay-line-layer';
+const OVERLAY_FILL_LAYER_NAME = 'overlay-fill-layer';
+
+type Props = {
+  geoJson: GeoJSON.GeoJSON<GeoJSON.Geometry, GeoJsonProperties>;
+  tileSize: number;
+  mapWidth: number;
+  mapHeight: number;
+  mapState: {
+    featureId: number,
+    state: {
+      key: string,
+      value: any,
+    }[]
+  }[];
+  tileServer: TileServer;
+  overlayTileServer: OverlayTileServer;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  onBoundFeatureClick: [properties: GeoJsonProperties],
+  onBoundFeatureContextMenu: [properties: GeoJsonProperties],
+}>();
+
+const mapContainer = shallowRef<HTMLDivElement | null>(null);
+const map = shallowRef<Map | null>(null);
+const lastHoveredBoundFeatureId = shallowRef<number | string>();
+const updateBoundsRef = shallowRef();
+
+function getUpdatedUrl(url: string) {
+  // NOTE: maplibre uses `quadkey`
+  return url.replace('quad_key', 'quadkey');
+}
+
+const bounds = computed(() => (
+  getBbox(props.geoJson) as [number, number, number, number]
+));
+
+function updateBounds() {
+  window.clearTimeout(updateBoundsRef.value);
+  updateBoundsRef.value = window.setTimeout(() => {
+    if (isDefined(map.value)) {
+      map.value.fitBounds(
+        bounds.value,
+        {
+          padding: 0,
+          duration: 200,
+        },
+      );
+    }
+  }, 200);
+}
+
+const style = computed(() => ({
+  width: `${props.mapWidth}px`,
+  height: `${props.mapHeight}px`,
+}));
+
+watchEffect(() => {
+  if (isDefined(map.value)) {
+    const baseTileSource = map.value.getSource(BASE_SOURCE_NAME);
+    if (isDefined(baseTileSource)) {
+      baseTileSource.tileSize = props.tileSize;
+      updateBounds();
+    }
+  }
+});
+
+watch(style, () => {
+  updateBounds();
+});
+
+
+function clearLastHoveredFeatureState() {
+  if (isDefined(map.value) && isDefined(lastHoveredBoundFeatureId.value)) {
+    map.value.removeFeatureState(
+      {
+        id: lastHoveredBoundFeatureId.value,
+        source: BOUNDS_SOURCE_NAME,
+      },
+      'hovered',
+    );
+    lastHoveredBoundFeatureId.value = undefined;
+  }
+}
+
+
+onMounted(() => {
+  if (mapContainer.value) {
+    const mapValue = markRaw(new Map({
+      container: mapContainer.value,
+      style: {
+        version: 8,
+        sources: {
+          [BASE_SOURCE_NAME]: {
+            type: 'raster',
+            tiles: [getUpdatedUrl(props.tileServer.url)],
+            tileSize: 256,
+            attribution: props.tileServer.credits,
+            // maxzoom: 19,
+          },
+        },
+        layers: [
+          {
+            id: BASE_RASTER_LAYER_NAME,
+            type: 'raster',
+            source: BASE_SOURCE_NAME,
+          },
+        ],
+      },
+      center: [0, 0],
+      zoom: 0,
+      attributionControl: false,
+      scrollZoom: false,
+      doubleClickZoom: false,
+      dragPan: false,
+      pitchWithRotate: false,
+      dragRotate: false,
+    }));
+
+    mapValue.on('styledata', () => {
+      map.value = mapValue;
+    });
+
+    mapValue.on('mousemove', (data) => {
+      if (!map.value) {
+        return;
+      }
+
+      const { point } = data;
+
+      const hoveredBoundFeatures = mapValue.queryRenderedFeatures(
+        point,
+        { layers: [BOUNDS_FILL_LAYER_NAME] }
+      );
+
+      const firstHoveredFeature = hoveredBoundFeatures[0];
+
+      if (isNotDefined(firstHoveredFeature)) {
+        clearLastHoveredFeatureState();
+      } else if (firstHoveredFeature.id !== lastHoveredBoundFeatureId.value) {
+        if (isDefined(lastHoveredBoundFeatureId.value)) {
+          map.value.removeFeatureState(
+            {
+              id: lastHoveredBoundFeatureId.value,
+              source: BOUNDS_SOURCE_NAME,
+            },
+            'hovered',
+          );
+        }
+        map.value.setFeatureState(
+          {
+            id: firstHoveredFeature.id,
+            source: BOUNDS_SOURCE_NAME,
+          },
+          {'hovered': true },
+        );
+        lastHoveredBoundFeatureId.value = firstHoveredFeature.id;
+      }
+    });
+
+    mapValue.on('mouseout', clearLastHoveredFeatureState);
+
+    mapValue.on('click', (data) => {
+      if (!map.value) {
+        return;
+      }
+
+      const { point } = data;
+
+      const clickedBoundFeatures = mapValue.queryRenderedFeatures(
+        point,
+        { layers: [BOUNDS_FILL_LAYER_NAME] }
+      );
+
+      const firstClickedFeature = clickedBoundFeatures[0];
+
+      if (isDefined(firstClickedFeature)) {
+        emit('onBoundFeatureClick', firstClickedFeature.properties as GeoJsonProperties);
+      }
+    });
+
+    // for right click
+    mapValue.on('contextmenu', (data) => {
+      if (!map.value) {
+        return;
+      }
+      const { point } = data;
+      const clickedBoundFeatures = mapValue.queryRenderedFeatures(
+        point,
+        { layers: [BOUNDS_FILL_LAYER_NAME] }
+      );
+
+      const firstClickedFeature = clickedBoundFeatures[0];
+
+      if (isDefined(firstClickedFeature)) {
+        emit('onBoundFeatureContextMenu', firstClickedFeature.properties as GeoJsonProperties);
+      }
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  if (map.value) {
+    map.value.remove();
+    map.value = null;
+  }
+});
+
+function removeLayerSafe(layerName: string) {
+  if (isDefined(map.value)) {
+    if (map.value.getLayer(layerName)) {
+      map.value.removeLayer(layerName);
+    }
+  }
+}
+
+function removeSourceSafe(sourceName: string) {
+  if (isDefined(map.value)) {
+    if (map.value.getSource(sourceName)) {
+      map.value.removeSource(sourceName);
+    }
+  }
+}
+
+watchEffect((onCleanup) => {
+  if (isDefined(map.value)) {
+    const {
+      overlayTileServer,
+    } = props;
+
+    if (overlayTileServer.type === 'raster') {
+      const { raster } = overlayTileServer;
+
+      map.value.addSource(
+        OVERLAY_SOURCE_NAME,
+        {
+          type: 'raster',
+          tiles: [getUpdatedUrl(raster.url)],
+          attribution: raster.credits,
+        },
+      );
+
+      map.value.addLayer({
+        id: OVERLAY_RASTER_LAYER_NAME,
+        type: 'raster',
+        source: OVERLAY_SOURCE_NAME
+      });
+    } else {
+      const { vector } = overlayTileServer;
+      map.value.addSource(
+        OVERLAY_SOURCE_NAME,
+        {
+          type: 'vector',
+          tiles: [vector.tileServer.url],
+          attribution: vector.tileServer.credits,
+          minzoom: vector.tileServer.maxZoom,
+          maxzoom: vector.tileServer.maxZoom,
+        },
+      );
+
+      map.value.addLayer({
+        id: OVERLAY_LINE_LAYER_NAME,
+        type: 'line',
+        source: OVERLAY_SOURCE_NAME,
+        'source-layer': vector.tileServer.sourceLayer,
+        paint: {
+          'line-color': vector.lineColor,
+          'line-width': vector.lineWidth,
+          'line-opacity': vector.lineOpacity,
+          'line-dasharray': vector.lineDasharray,
+        },
+      });
+
+      map.value.addLayer({
+        id: OVERLAY_FILL_LAYER_NAME,
+        type: 'fill',
+        source: OVERLAY_SOURCE_NAME,
+        'source-layer': vector.tileServer.sourceLayer,
+        paint: {
+          'fill-color': vector.fillColor,
+          'fill-opacity': vector.fillOpacity,
+        },
+      });
+    }
+  }
+
+  onCleanup(() => {
+    removeLayerSafe(OVERLAY_RASTER_LAYER_NAME);
+    removeLayerSafe(OVERLAY_LINE_LAYER_NAME);
+    removeLayerSafe(OVERLAY_FILL_LAYER_NAME);
+    removeSourceSafe(OVERLAY_SOURCE_NAME);
+  });
+});
+
+watchEffect((onCleanup) => {
+  if (isDefined(map.value)) {
+    map.value.addSource(BOUNDS_SOURCE_NAME, {
+      type: 'geojson',
+      data: props.geoJson,
+    });
+
+    map.value.addLayer({
+      id: BOUNDS_FILL_LAYER_NAME,
+      type: 'fill',
+      source: BOUNDS_SOURCE_NAME,
+      paint: {
+        'fill-color': [
+          'match',
+          ['feature-state', 'result'],
+          0,
+          'white',
+          1,
+          'green',
+          2,
+          'orange',
+          3,
+          'red',
+          'orange',
+        ],
+        'fill-opacity': [
+          'case',
+          [
+            'any',
+            ['!=', ['feature-state', 'result'], 0],
+            ['boolean', ['feature-state', 'hovered'], false],
+          ],
+          0.3,
+          0,
+        ],
+      }
+    });
+
+    map.value.addLayer({
+      id: BOUNDS_LINE_LAYER_NAME,
+      type: 'line',
+      source: BOUNDS_SOURCE_NAME,
+      paint: {
+        'line-color': '#ffffff',
+        'line-width': [
+          'case',
+          ['boolean', ['feature-state', 'selected'], false],
+          20,
+          2,
+        ],
+        'line-opacity': [
+          'case',
+          ['boolean', ['feature-state', 'selected'], false],
+          0.7,
+          1,
+        ],
+        'line-offset': [
+          'case',
+          ['boolean', ['feature-state', 'selected'], false],
+          8,
+          0,
+        ],
+      },
+    });
+
+    map.value.fitBounds(
+      bounds.value,
+      {
+        duration: 0,
+        padding: 0,
+      },
+    );
+
+  }
+
+  onCleanup(() => {
+    removeLayerSafe(BOUNDS_LINE_LAYER_NAME);
+    removeLayerSafe(BOUNDS_FILL_LAYER_NAME);
+    removeSourceSafe(BOUNDS_SOURCE_NAME);
+  });
+});
+
+watchEffect(() => {
+  if (isDefined(map.value)) {
+    props.mapState.forEach((featureState) => {
+      map.value?.setFeatureState(
+        {
+          id: featureState.featureId,
+          source: BOUNDS_SOURCE_NAME,
+        },
+        listToMap(
+          featureState.state,
+          ({ key }) => key,
+          ({ value }) => value,
+        ),
+      )
+    });
+  }
+});
+
+onUnmounted(() => {
+  window.clearTimeout(updateBoundsRef.value);
+  map.value?.remove();
+});
+</script>
+
+<template>
+  <div class="map-wrapper">
+    <div
+      :style="style"
+      ref="mapContainer"
+    />
+  </div>
+</template>
+
+<style scoped>
+.map-wrapper {
+  position: relative;
+  background-color: gray;
+  isolation: isolate;
+}
+</style>
diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 533de87..0bac7f9 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -28,6 +28,7 @@ interface ProjectCompareType {
   }
   credits: string
   lookFor: string
+  projectInstruction: string
 }
 
 const defaultOptions: Option[] = [
@@ -146,7 +147,9 @@ export default defineComponent({
       return attribution.join('; ')
     },
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
+      const message = isDefined(this.project.projectInstruction)
+        ? this.project.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
       return message
     },
   },
diff --git a/src/components/CompareProjectTutorial.vue b/src/components/CompareProjectTutorial.vue
index 23ec507..35b4113 100644
--- a/src/components/CompareProjectTutorial.vue
+++ b/src/components/CompareProjectTutorial.vue
@@ -18,6 +18,7 @@ export interface Tutorial {
   projectId: string
   name: string
   lookFor?: string
+  projectInstruction?: string
   screens: {
     hint: Screen
     instructions: Screen
@@ -58,7 +59,9 @@ export default defineComponent({
   },
   computed: {
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
+      const message = isDefined(this.tutorial?.projectInstruction)
+        ? this.tutorial.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial?.lookFor })
       return message
     },
     currentScreen() {
diff --git a/src/components/CompletenessProject.vue b/src/components/CompletenessProject.vue
new file mode 100644
index 0000000..2d3803f
--- /dev/null
+++ b/src/components/CompletenessProject.vue
@@ -0,0 +1,404 @@
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch, watchEffect } from 'vue';
+import { createGeoJsonFromTasks } from '@/utils/common';
+import buildTasks from '@/utils/buildTasks';
+import type { DefaultOption, OverlayTileServer, Project, TaskGroup, TutorialTileTask, TileTask, Tutorial } from '@/utils/types';
+import BaseMap from './BaseMap.vue';
+import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs';
+import TaskProgress from '@/components/TaskProgress.vue'
+import ProjectHeader from '@/components/ProjectHeader.vue'
+import TileMap from '@/components/TileMap.vue'
+import createInformationPages from '@/utils/createInformationPages';
+import { createFallbackInformationPages } from '@/utils/domain';
+import ProjectInfo from './ProjectInfo.vue';
+import FindProjectInstructions from './FindProjectInstructions.vue';
+import { useI18n } from 'vue-i18n';
+import CompletenessProjectTutorial from './CompletenessProjectTutorial.vue';
+
+interface Props {
+  group: TaskGroup;
+  first: boolean;
+  options: DefaultOption[];
+  project: Project;
+  tasks: TileTask[];
+  tutorial: Tutorial;
+  tutorialTasks: TutorialTileTask[];
+}
+
+const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted');
+const saveResults = inject<(results: Record<string, number>, startTime: string) => void>('saveResults');
+
+// TODO: check if this is needed
+// const showSnackbar = inject<() => void>('showSnackbar');
+
+const emit = defineEmits<{ created: []}>();
+const { t } = useI18n();
+
+const ROWS_PER_PAGE = 3;
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [
+    { color: '', label: 'no', value: 0 },
+    { color: 'green', label: 'yes', value: 1 },
+    { color: 'orange', label: 'maybe', value: 2 },
+    { color: 'red', label: 'bad imagery', value: 3 },
+  ],
+});
+
+const containerRef = useTemplateRef('container');
+const projectInfoRef = useTemplateRef('projectInfo');
+
+const tileSize = ref(0);
+const columnsPerPage = ref(0);
+const taskOffset = ref(0);
+const arrowKeys = ref(true);
+const results = ref<Record<string, number>>({});
+const selectedTasks = ref<Record<string, boolean>>({});
+const debounceTimeoutRef = shallowRef();
+const startTime = shallowRef<string>();
+
+const instruction = computed(
+  () => isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('projectView.youAreLookingFor', { lookFor: props.project.lookFor })
+);
+
+const numSelectedTasks = computed(() => Object.values(selectedTasks.value).filter(Boolean).length);
+
+const processedTasks = computed(() => {
+  const tasks = props.tasks.length
+    ? props.tasks
+    : buildTasks(props.project, props.group);
+
+  const sorted = tasks.sort(
+    (a, b) => (a.taskId > b.taskId ? 1 : -1),
+  );
+
+  return sorted;
+});
+
+watchEffect(() => {
+  results.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => props.options[0].value,
+  );
+  selectedTasks.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => false,
+  );
+  startTime.value = new Date().toISOString();
+});
+
+const currentTasks = computed(() => {
+  const numTasks = columnsPerPage.value * ROWS_PER_PAGE;
+  return [...processedTasks.value].splice(taskOffset.value, numTasks);
+});
+
+// clear selected tasks when they're out of viewport
+watch(currentTasks, (newValue, oldValue) => {
+  const newValueMapping = listToMap(
+    newValue,
+      ({ taskId }) => taskId,
+      () => true
+  );
+  oldValue.forEach((task) => {
+    if (!newValueMapping[task.taskId]) {
+      selectedTasks.value[task.taskId] = false;
+    }
+  });
+});
+
+const mapState = computed(() => (
+  currentTasks.value.map((task, i) => ({
+    featureId: i + 1,
+    state: [
+      {
+        key: 'result',
+        value: results.value[task.taskId],
+      },
+      {
+        key: 'selected',
+        value: selectedTasks.value[task.taskId],
+      },
+    ],
+  }))
+));
+
+const geoJson = computed(() => (
+  createGeoJsonFromTasks(currentTasks.value)
+));
+
+const overlayTileServer = computed(() => {
+  if (isNotDefined(props.project.overlayTileServer)) {
+    return {
+      type: 'raster' as const,
+      raster: props.project.tileServerB,
+    } as OverlayTileServer;
+  }
+
+  return props.project.overlayTileServer;
+});
+
+const numFastBackColumns = computed(() => Math.min(taskOffset.value, columnsPerPage.value));
+const numFastForwardColumns = computed(
+  () => Math.min(
+    processedTasks.value.length - taskOffset.value + columnsPerPage.value * ROWS_PER_PAGE,
+    columnsPerPage.value
+  ),
+);
+const isLastPage = computed(
+  () => processedTasks.value.length <= taskOffset.value + columnsPerPage.value * ROWS_PER_PAGE
+);
+
+type GeoJsonProperties = NonNullable<(typeof geoJson.value)>['features'][number]['properties'];
+
+const viewportWidth = computed(() => tileSize.value * columnsPerPage.value);
+const viewportHeight = computed(() => tileSize.value * ROWS_PER_PAGE);
+
+function handleWindowResize() {
+  window.clearTimeout(debounceTimeoutRef.value);
+  debounceTimeoutRef.value = window.setTimeout(() => {
+    if (containerRef.value) {
+      const clientRect = containerRef.value.$el?.getBoundingClientRect();
+      const containerWidth = clientRect.width;
+
+      const usableHeight = window.innerHeight - 300;
+
+      const maxTileHeight = Math.floor(usableHeight / ROWS_PER_PAGE);
+      const tentetiveNumTiles = Math.max(
+        2,
+        Math.floor(containerWidth / maxTileHeight),
+      );
+
+      columnsPerPage.value = tentetiveNumTiles;
+      tileSize.value = Math.min(
+        maxTileHeight,
+        Math.floor(containerWidth / tentetiveNumTiles),
+      );
+    }
+  }, 200);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize);
+  handleWindowResize();
+  logMappingStarted?.(props.project.projectType);
+  emit('created');
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize);
+  window.clearTimeout(debounceTimeoutRef.value);
+});
+
+const nextOptionMapping = computed(() => listToMap(
+  props.options,
+  ({ value }) => value,
+  (_, __, index) => {
+    if (index === props.options.length - 1) {
+      return props.options[0].value;
+    }
+
+    return props.options[index + 1].value;
+  },
+));
+
+function handleTaskClick(featureProperties: GeoJsonProperties) {
+  const currentSelectedTasks = currentTasks.value.filter(
+    ({ taskId }) => selectedTasks.value[taskId]
+  );
+
+  const { taskId } = featureProperties;
+  const newValue = isDefined(results.value[taskId])
+    ? nextOptionMapping.value[results.value[taskId]]
+    : props.options[0].value;
+
+  results.value[taskId] = newValue;
+
+  currentSelectedTasks.forEach(({ taskId: selectedTaskId }) => {
+    results.value[selectedTaskId] = newValue;
+  });
+}
+
+function handleTaskContextMenu(featureProperties: GeoJsonProperties) {
+  const { taskId } = featureProperties;
+
+  if (isDefined(results.value[taskId])) {
+    selectedTasks.value[taskId] = !selectedTasks.value[taskId];
+  } else {
+    selectedTasks.value[taskId] = true;
+  }
+}
+
+function handleBack() {
+  taskOffset.value = Math.max(0, taskOffset.value - ROWS_PER_PAGE);
+}
+
+function handleFastBack() {
+  taskOffset.value = Math.max(0, taskOffset.value - numFastBackColumns.value * ROWS_PER_PAGE);
+}
+
+function handleForward() {
+  taskOffset.value = Math.min(
+    processedTasks.value.length - columnsPerPage.value * ROWS_PER_PAGE,
+    taskOffset.value + ROWS_PER_PAGE
+  );
+}
+
+function handleFastForward() {
+  taskOffset.value = Math.min(
+    processedTasks.value.length - columnsPerPage.value * ROWS_PER_PAGE,
+    taskOffset.value + numFastForwardColumns.value * ROWS_PER_PAGE
+  );
+}
+
+function handleClearTaskSelection() {
+  currentTasks.value.forEach((task) => {
+    selectedTasks.value[task.taskId] = false;
+  });
+}
+
+function handleSelectAll() {
+  if (numSelectedTasks.value === currentTasks.value.length) {
+    handleClearTaskSelection();
+  } else {
+    currentTasks.value.forEach(({ taskId }) => {
+      selectedTasks.value[taskId] = true;
+    });
+  }
+}
+
+const attribution = computed(() => ([
+  props.project.tileServer.credits,
+  overlayTileServer.value.type === 'vector'
+    ? overlayTileServer.value.vector.tileServer.credits
+    : overlayTileServer.value.raster.credits
+].join('; ')));
+
+</script>
+
+<template>
+  <project-header
+    :mission="instruction"
+    :title="props.project.projectTopic"
+  >
+    <v-chip v-if="numSelectedTasks > 0" color="primary" :ripple="false">
+      {{ numSelectedTasks }}
+      <span class="hidden-md-and-down">&nbsp;{{ $t('findProject.selected') }}</span>
+      <v-icon @click="handleClearTaskSelection">mdi-close</v-icon>
+    </v-chip>
+    <tile-map :page="currentTasks" :zoomLevel="project.zoomLevel" :key="columnsPerPage" />
+    <v-btn
+      :title="numSelectedTasks === currentTasks.length ? $t('findProject.clearSelection') : $t('findProject.selectAll')"
+      :icon="'mdi-select-'.concat(numSelectedTasks === currentTasks.length ? 'off' : 'all')"
+      @click="handleSelectAll"
+      color="primary"
+    />
+    <ProjectInfo
+      ref="projectInfo"
+      :first="first"
+      :informationPages="createInformationPages(props.tutorial, props.project, createFallbackInformationPages)"
+      :manualUrl="props.project.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <FindProjectInstructions
+          :attribution="attribution"
+          :exampleTileUrls="[currentTasks[0]?.url, currentTasks[0]?.urlB]"
+          :mission="instruction"
+          :options="options"
+        />
+      </template>
+      <template #tutorial>
+        <CompletenessProjectTutorial
+          :tutorial="props.tutorial"
+          :tasks="props.tutorialTasks"
+          :options="options"
+          @tutorialComplete="projectInfoRef?.toggleDialog"
+        />
+      </template>
+    </ProjectInfo>
+  </project-header>
+  <v-container
+    ref="container"
+    class="container"
+    v-touch="{ left: () => handleFastForward(), right: () => handleFastBack() }"
+  >
+    <BaseMap
+      v-if="isDefined(geoJson) && isDefined(overlayTileServer)"
+      :geo-json="geoJson"
+      :tile-size="tileSize"
+      :map-width="viewportWidth"
+      :map-height="viewportHeight"
+      :map-state="mapState"
+      :tile-server="props.project.tileServer"
+      :overlay-tile-server="overlayTileServer"
+      @on-bound-feature-click="handleTaskClick"
+      @on-bound-feature-context-menu="handleTaskContextMenu"
+    />
+  </v-container>
+  <v-toolbar color="white" extension-height="20" density="compact" tag="div" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('findProject.moveLeft', { n: numFastBackColumns })"
+      icon="mdi-chevron-double-left"
+      color="secondary"
+      :disabled="taskOffset === 0"
+      @click="handleFastBack"
+      v-shortkey.once="[arrowKeys ? 'arrowdown' : '']"
+      @shortkey="handleFastBack"
+    />
+    <v-btn
+      :title="$t('findProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskOffset === 0"
+      @click="handleBack"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="handleBack"
+    />
+    <v-btn
+      v-if="isDefined(startTime)"
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="!isLastPage"
+      @click="saveResults?.(results, startTime)"
+    />
+    <v-btn
+      :title="$t('findProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="isLastPage"
+      @click="handleForward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="handleForward"
+    />
+    <v-btn
+      :title="$t('findProject.moveRight', { n: numFastForwardColumns })"
+      icon="mdi-chevron-double-right"
+      color="secondary"
+      :disabled="isLastPage"
+      @click="handleFastForward"
+      v-shortkey.once="[arrowKeys ? 'arrowup' : '']"
+      @shortkey="handleFastForward"
+    />
+    <v-spacer />
+    <template #extension>
+      <task-progress
+        :progress="taskOffset + columnsPerPage * ROWS_PER_PAGE"
+        :total="processedTasks.length"
+      />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/CompletenessProjectTutorial.vue b/src/components/CompletenessProjectTutorial.vue
new file mode 100644
index 0000000..a889a05
--- /dev/null
+++ b/src/components/CompletenessProjectTutorial.vue
@@ -0,0 +1,391 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, shallowRef, useTemplateRef } from 'vue'
+import matchIcon from '@/utils/matchIcon'
+import TaskProgress from '@/components/TaskProgress.vue'
+import TutorialCompletionCard from './TutorialCompletionCard.vue'
+import { createGeoJsonFromTasks, isDefined } from '@/utils/common'
+import type { DefaultOption, OverlayTileServer, Tutorial, TutorialTileTask } from '@/utils/types'
+import { isNotDefined, listToMap } from '@togglecorp/fujs'
+import { useI18n } from 'vue-i18n'
+import BaseMap from './BaseMap.vue'
+
+interface Props {
+  tutorial: Tutorial;
+  options: DefaultOption[];
+  tasks: TutorialTileTask[];
+}
+
+const props = defineProps<Props>();
+const { t } = useI18n();
+
+const currentTaskIndex = ref(0);
+const userAttempts = ref(0);
+const answersRevealed = ref(false);
+const results = ref<Record<string, number>>({});
+const selectedTasks = ref<Record<string, boolean>>({});
+const debounceTimeoutRef = shallowRef();
+const tileSize = ref(0);
+
+const containerRef = useTemplateRef('container');
+
+const optionMap = computed(() => {
+      const maxOptionIndex = props.options.length - 1
+
+      return listToMap(
+        props.options.map((option, index) => ({
+          ...option,
+          nextOptionKey:
+            index === maxOptionIndex ? props.options[0].value : props.options[index + 1].value,
+        })),
+        ({ value }) => value,
+      );
+});
+
+const instruction = computed(
+  () => isDefined(props.tutorial.projectInstruction)
+    ? props.tutorial.projectInstruction
+    : t('projectView.youAreLookingFor', { lookFor: props.tutorial.lookFor })
+);
+
+const currentScreen = computed(() => (
+  // NOTE: this should be extracted from the `screen` property of current task
+  props.tutorial?.screens[currentTaskIndex.value]
+));
+
+const taskList = computed(() => {
+  if (!props.tasks) {
+    return []
+  }
+
+  return props.tasks.filter(({ screen }) => screen === currentTaskIndex.value + 1)
+});
+
+const hasTasks = computed(() => isDefined(props.tasks) && props.tasks.length !== 0);
+const hasCompletedAllTasks = computed(() => {
+  if (!hasTasks.value) {
+    return false
+  }
+
+  const maxIndex = props.tasks.length
+  return currentTaskIndex.value === maxIndex
+});
+
+const answeredCorrectly = computed(() => {
+  if (props.tasks.length === 0) {
+    return false
+  }
+
+  if (hasCompletedAllTasks.value) {
+    return true
+  }
+
+  if (!taskList.value || taskList.value.length === 0) {
+    return false
+  }
+
+  const hasWrongAnswer = taskList.value.some(
+    ({ taskId, referenceAnswer }) => referenceAnswer !== results.value[taskId],
+  )
+
+  return !hasWrongAnswer
+});
+
+const alertContent = computed(() => {
+  if (!currentScreen.value) {
+    return undefined
+  }
+
+  const { instructions, success, hint } = currentScreen.value;
+
+  if (!answersRevealed.value && answeredCorrectly.value && success) {
+    const icon = success.icon
+
+    return {
+      type: 'success' as const,
+      title: success.title,
+      text: success.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  if (answersRevealed.value && hint) {
+    const icon = hint.icon
+
+    return {
+      type: undefined,
+      title: hint.title,
+      text: hint.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  if (!instructions) {
+    return undefined
+  }
+
+  const icon = instructions.icon
+
+  return {
+    type: 'info' as const,
+    title: instructions.title,
+    text: instructions.description,
+    icon: icon ? matchIcon(icon) : undefined,
+  }
+});
+
+const geoJson = computed(() => (
+  createGeoJsonFromTasks(taskList.value.map((task) => ({
+    ...task,
+    taskZ: props.tutorial.zoomLevel,
+  }))
+)));
+
+const ROWS_PER_PAGE = 3;
+const COLS_PER_PAGE = 2;
+
+type GeoJsonProperties = NonNullable<(typeof geoJson.value)>['features'][number]['properties'];
+
+const viewportWidth = computed(() => tileSize.value * COLS_PER_PAGE);
+const viewportHeight = computed(() => tileSize.value * ROWS_PER_PAGE);
+
+const overlayTileServer = computed(() => {
+  if (isNotDefined(props.tutorial.overlayTileServer)) {
+    return {
+      type: 'raster' as const,
+      raster: props.tutorial.tileServerB,
+    } as OverlayTileServer;
+  }
+
+  return props.tutorial.overlayTileServer;
+});
+
+const mapState = computed(() => (
+  taskList.value.map((task, i) => ({
+    featureId: i + 1,
+    state: [
+      {
+        key: 'result',
+        value: results.value[task.taskId],
+      },
+      {
+        key: 'selected',
+        value: selectedTasks.value[task.taskId],
+      },
+    ],
+  }))
+));
+
+function handleWindowResize() {
+  window.clearTimeout(debounceTimeoutRef.value);
+  debounceTimeoutRef.value = window.setTimeout(() => {
+    if (containerRef.value) {
+      const clientRect = containerRef.value.getBoundingClientRect();
+      const containerWidth = clientRect.width;
+
+      const usableHeight = clientRect.height;
+
+      const maxTileHeight = Math.floor(usableHeight / ROWS_PER_PAGE);
+      const tentetiveNumTiles = Math.max(
+        2,
+        Math.floor(containerWidth / maxTileHeight),
+      );
+
+      tileSize.value = Math.min(
+        maxTileHeight,
+        Math.floor(containerWidth / tentetiveNumTiles),
+      );
+    }
+  }, 200);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize);
+  handleWindowResize();
+  results.value = listToMap(
+    props.tasks,
+    ({ taskId }) => taskId,
+    () => props.options[0].value,
+  );
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+  window.clearTimeout(debounceTimeoutRef.value);
+});
+
+function nextTask() {
+  if (!hasCompletedAllTasks.value) {
+    if (hasCompletedAllTasks.value) {
+      return
+    }
+
+    selectedTasks.value = {}
+    currentTaskIndex.value += 1
+    userAttempts.value = 0
+    answersRevealed.value = false
+  }
+}
+
+function getNextValueForTask(taskId: string) {
+  const currentResult = results.value[taskId]
+
+  if (!isDefined(currentResult)) {
+    return props.options[0].value
+  }
+
+  const newValue = optionMap.value[optionMap.value[currentResult].nextOptionKey].value
+
+  return newValue
+}
+
+function setResult(taskId: string, newValue: number) {
+  results.value[taskId] = newValue
+}
+
+function updateResult(taskId: string) {
+  if (!answersRevealed.value) {
+    userAttempts.value += 1
+    const newValue = getNextValueForTask(taskId)
+    results.value[taskId] = newValue
+  }
+}
+
+function handleTaskClick(featureProperties: GeoJsonProperties) {
+  const { taskId } = featureProperties;
+
+  const selectedTaskKeys = Object.keys(selectedTasks.value).filter(
+    (taskKey) => !!selectedTasks.value[taskKey],
+  )
+
+  const hasSomeSelectedItem = selectedTaskKeys.length > 0
+  const isTaskFromSelectedItem =
+    selectedTaskKeys.findIndex((taskKey) => taskKey === taskId) !== -1
+
+  if (hasSomeSelectedItem) {
+    if (isTaskFromSelectedItem) {
+      const newValue = getNextValueForTask(taskId)
+      selectedTaskKeys.forEach((taskKey) => {
+        setResult(taskKey, newValue)
+      })
+    }
+  } else {
+    updateResult(taskId)
+  }
+}
+
+function handleTaskContextMenu(featureProperties: GeoJsonProperties) {
+  const { taskId } = featureProperties;
+
+  if (isDefined(results.value[taskId])) {
+    selectedTasks.value[taskId] = !selectedTasks.value[taskId];
+  } else {
+    selectedTasks.value[taskId] = true;
+  }
+}
+
+/*
+function handleTileSelected(newValue: boolean, taskId: string) {
+  selectedTasks.value[taskId] = newValue
+}
+*/
+
+function showAnswer() {
+  answersRevealed.value = true
+  taskList.value.forEach((task) => {
+    results.value[task.taskId] = task.referenceAnswer
+  })
+}
+
+/*
+export default defineComponent({
+  emits: ['tutorialComplete'],
+  mounted() {
+    this.fillResults()
+  },
+})
+*/
+
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instruction }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <div
+          ref="container"
+          class="container"
+        >
+          <BaseMap
+            v-if="isDefined(geoJson) && isDefined(overlayTileServer)"
+            :geo-json="geoJson"
+            :tile-size="tileSize"
+            :map-width="viewportWidth"
+            :map-height="viewportHeight"
+            :map-state="mapState"
+            :tile-server="props.tutorial.tileServer"
+            :overlay-tile-server="overlayTileServer"
+            @on-bound-feature-click="handleTaskClick"
+            @on-bound-feature-context-menu="handleTaskContextMenu"
+          />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tutorial?.screens.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70vh;
+}
+</style>
diff --git a/src/components/FindProjectTutorial.vue b/src/components/FindProjectTutorial.vue
index 23eb7df..81593b9 100644
--- a/src/components/FindProjectTutorial.vue
+++ b/src/components/FindProjectTutorial.vue
@@ -27,6 +27,7 @@ export interface Tutorial {
   projectId: string
   name: string
   lookFor?: string
+  projectInstruction?: string
   screens: {
     hint: Screen
     instructions: Screen
@@ -86,7 +87,9 @@ export default defineComponent({
         )
     },
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
+      const message = isDefined(this.tutorial?.projectInstruction) 
+        ? this.tutorial.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
       return message
     },
     currentScreen() {
diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index 230c71f..25e868e 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -6,6 +6,7 @@ import ProjectHeader from './ProjectHeader.vue'
 import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import MediaProjectInstructions from './MediaProjectInstructions.vue'
+import { isDefined } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -86,7 +87,9 @@ export default defineComponent({
       return attribution
     },
     mission() {
-      const message = this.project?.lookFor
+      const message = isDefined(this.project?.projectInstruction)
+        ? this.project.projectInstruction
+        : this.project?.lookFor
       return message
     },
     isImageTask() {
diff --git a/src/components/OauthReturn.vue b/src/components/OauthReturn.vue
index c5dcfed..caf8fb4 100644
--- a/src/components/OauthReturn.vue
+++ b/src/components/OauthReturn.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { i18nRoute } from '@/i18n/translation'
-import { signInWithCustomToken, getAuth } from 'firebase/auth'
-import { logAnalyticsEvent } from '@/firebase'
+import { signInWithCustomToken } from 'firebase/auth'
+import { getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
 
 export default defineComponent({
   props: {
@@ -15,7 +15,7 @@ export default defineComponent({
     i18nRoute,
     signin(token: String) {
       const routerReplace = this.$router.replace
-      const auth = getAuth()
+      const auth = getFirebaseAuth()
       signInWithCustomToken(auth, token)
         .then(() => {
           this.showSnackbar(this.$t('authView.osmSignInSuccess'), 'success')
diff --git a/src/components/RecoverAccount.vue b/src/components/RecoverAccount.vue
index 3fb9553..66c27ef 100644
--- a/src/components/RecoverAccount.vue
+++ b/src/components/RecoverAccount.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { getAuth, sendPasswordResetEmail, type ActionCodeSettings } from 'firebase/auth'
+import { sendPasswordResetEmail, type ActionCodeSettings } from 'firebase/auth'
+import { getFirebaseAuth } from '@/firebase'
 
 export default defineComponent({
   data() {
@@ -36,7 +37,7 @@ export default defineComponent({
   methods: {
     requestReset() {
       if (this.isFormValid) {
-        const auth = getAuth()
+        const auth = getFirebaseAuth()
         // workaround: dev instance does not accept continueUrl argument at the moment
         var actionCodeSettings = undefined
         const mode = import.meta.env.MODE
diff --git a/src/components/SignIn.vue b/src/components/SignIn.vue
index fff1268..8a0cf98 100644
--- a/src/components/SignIn.vue
+++ b/src/components/SignIn.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { i18nRoute } from '@/i18n/translation'
-import { signInWithEmailAndPassword, getAuth } from 'firebase/auth'
-import { logAnalyticsEvent } from '@/firebase'
+import { signInWithEmailAndPassword } from 'firebase/auth'
+import { getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
 import SignInOsm from '@/components/SignInOsm.vue'
 
 export default defineComponent({
@@ -49,7 +49,7 @@ export default defineComponent({
     signin() {
       if (this.isFormValid) {
         const routerPush = this.$router.push
-        const auth = getAuth()
+        const auth = getFirebaseAuth()
         signInWithEmailAndPassword(auth, this.email, this.password)
           .then((userCredential) => {
             const user = userCredential.user
diff --git a/src/components/SignUp.vue b/src/components/SignUp.vue
index 3db4ea6..198f910 100644
--- a/src/components/SignUp.vue
+++ b/src/components/SignUp.vue
@@ -2,13 +2,12 @@
 import { defineComponent } from 'vue'
 import {
   type ActionCodeSettings,
-  getAuth,
   createUserWithEmailAndPassword,
   sendEmailVerification,
   updateProfile,
 } from 'firebase/auth'
-import { getDatabase, ref, set } from 'firebase/database'
-import { logAnalyticsEvent } from '@/firebase'
+import { ref, set } from 'firebase/database'
+import { db, getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
 import { i18nRoute } from '@/i18n/translation'
 import SignInOsm from '@/components/SignInOsm.vue'
 
@@ -70,8 +69,7 @@ export default defineComponent({
   methods: {
     signup() {
       if (this.isFormValid && this.consent) {
-        const auth = getAuth()
-        const db = getDatabase()
+        const auth = getFirebaseAuth()
         const routerPush = this.$router.push
 
         createUserWithEmailAndPassword(auth, this.email, this.password)
diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index bfaaf98..6e6f426 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -8,6 +8,7 @@ import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import StreetProjectInstructions from './StreetProjectInstructions.vue'
 import { defineComponent } from 'vue'
+import { isDefined } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -94,7 +95,9 @@ export default defineComponent({
   },
   computed: {
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
+      const message = isDefined(this.project.projectInstruction)
+        ? this.project.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
       return message
     },
   },
diff --git a/src/components/ValidateImageProject.vue b/src/components/ValidateImageProject.vue
new file mode 100644
index 0000000..d899ef4
--- /dev/null
+++ b/src/components/ValidateImageProject.vue
@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+
+import { isDefined } from '@togglecorp/fujs';
+import { computed, inject, onMounted, ref, shallowRef, useTemplateRef, watchEffect } from 'vue';
+import type { Project, TaskGroup, Tutorial, CustomOption, ImageTask, TutorialImageTask } from '@/utils/types';
+import ValidateImageProjectTask from '@/components/ValidateImageProjectTask.vue';
+import OptionButtons from '@/components/OptionButtons.vue';
+import ProjectHeader from '@/components/ProjectHeader.vue'
+import TaskProgress from '@/components/TaskProgress.vue';
+import ProjectInfo from '@/components/ProjectInfo.vue';
+import ValidateImageProjectInstructions from '@/components/ValidateImageProjectInstructions.vue';
+import createInformationPages from '@/utils/createInformationPages';
+import { createFallbackInformationPages } from '@/utils/domain';
+import { useI18n } from 'vue-i18n';
+import ValidateImageProjectTutorial from './ValidateImageProjectTutorial.vue';
+
+const { t } = useI18n();
+
+interface Props {
+  group: TaskGroup;
+  first: boolean;
+  options: CustomOption[];
+  project: Project;
+  tasks: ImageTask[];
+  tutorial: Tutorial;
+  tutorialTasks: TutorialImageTask[];
+}
+
+const taskOffset = ref(0);
+const projectInfoRef = useTemplateRef('projectInfo');
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [
+    {
+      mdiIcon: 'mdi-check-bold',
+      description: `The shape does outline the feature in image`,
+      iconColor: '#388E3C',
+      shortKey: 1,
+      title: 'Yes',
+      value: 1,
+    },
+    {
+      mdiIcon: 'mdi-close-thick',
+      description: `The shape doesn't match the feature in image`,
+      iconColor: '#D32F2F',
+      shortKey: 2,
+      title: 'No',
+      value: 0,
+    },
+    {
+      mdiIcon: 'mdi-minus-thick',
+      description: `If you're not sure`,
+      iconColor: '#616161',
+      title: 'Not sure',
+      shortKey: 3,
+      value: 2,
+    },
+  ],
+});
+
+const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted');
+const saveResults = inject<(results: Record<string, number>, startTime: string) => void>('saveResults');
+const arrowKeys = ref(true);
+const startTime = shallowRef<string>();
+const instruction = computed(
+  () => isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.project.lookFor })
+);
+
+const emit = defineEmits<{ created: []}>();
+const results = ref<Record<string, number>>({});
+
+watchEffect(() => {
+  startTime.value = new Date().toISOString();
+});
+
+
+const currentTask = computed(() => props.tasks[taskOffset.value]);
+
+onMounted(() => {
+  logMappingStarted?.(props.project.projectType);
+  emit('created');
+});
+
+function addResult(newValue: number) {
+  results.value[currentTask.value.taskId] = newValue;
+}
+
+const isLastTask = computed(
+  () => (props.tasks.length - 1) === taskOffset.value
+);
+const currentTaskAnswered = computed(
+  () => isDefined(results.value[currentTask.value.taskId])
+)
+
+function handleBack() {
+  if (taskOffset.value > 0) {
+    taskOffset.value = taskOffset.value - 1;
+  }
+}
+
+function handleForward() {
+  if (taskOffset.value < (props.tasks.length - 1)) {
+    taskOffset.value = taskOffset.value + 1;
+  }
+}
+
+</script>
+
+<template>
+  <ProjectHeader
+    :mission="instruction"
+  >
+    <Project-info
+      ref="projectInfo"
+      :first="first"
+      :informationPages="createInformationPages(props.tutorial, props.project, createFallbackInformationPages)"
+      :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <ValidateImageProjectInstructions :instruction="instruction" :options="props.options" />
+      </template>
+      <template #tutorial>
+        <ValidateImageProjectTutorial
+          :tutorial="tutorial"
+          :tasks="tutorialTasks"
+          :options="options"
+          @tutorialComplete="projectInfoRef?.toggleDialog"
+        />
+      </template>
+      <!-- FIXME: add tutorial -->
+    </Project-info>
+  </ProjectHeader>
+  <v-container
+    class="ma-0 pa-0 container"
+  >
+    <ValidateImageProjectTask
+      :task="currentTask"
+    />
+  </v-container>
+  <OptionButtons
+    v-if="currentTask"
+    :options="props.options"
+    :result="results[currentTask.taskId]"
+    :taskId="currentTask.taskId"
+    @addResult="addResult"
+  />
+  <v-toolbar color="white" density="compact" extension-height="20" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('validateProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskOffset <= 0"
+      @click="handleBack"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="handleBack"
+    />
+    <v-btn
+      v-if="isDefined(startTime)"
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="!isLastTask"
+      @click="saveResults?.(results, startTime)"
+    />
+    <v-btn
+      :title="$t('validateProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="!currentTaskAnswered || isLastTask"
+      @click="handleForward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="handleForward"
+    />
+    <v-spacer />
+    <template #extension>
+      <TaskProgress :progress="taskOffset + 1" :total="tasks.length" />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped>
+.container {
+  height: calc(100vh - 390px);
+}
+</style>
diff --git a/src/components/ValidateImageProjectInstructions.vue b/src/components/ValidateImageProjectInstructions.vue
new file mode 100644
index 0000000..c41d8c3
--- /dev/null
+++ b/src/components/ValidateImageProjectInstructions.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import OptionButton from '@/components/OptionButton.vue'
+import type { CustomOption } from '@/utils/types';
+
+interface Props {
+  instruction: string;
+  options: CustomOption[];
+}
+
+const props = defineProps<Props>();
+
+</script>
+
+<template>
+  <v-card-text>
+    <div class="text-h6">
+      {{ $t('projectInstructions.classifyTitle') }}
+    </div>
+    <div class="text-p">{{ props.instruction }} {{ $t('projectInstructions.classifyInstruction') }}.</div>
+    <v-row v-for="(option, optionIndex) in props.options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mt-5 mr-4">
+        <option-button :option="option" :only-icon="true" />
+      </v-col>
+      <v-col class="mt-5">{{
+        [option.title, option.description].filter(Boolean).join(': ')
+      }}</v-col>
+    </v-row>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">{{ $t('projectInstructions.everyTaskIsViewedBy') }}.</div>
+  </v-card-text>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ValidateImageProjectTask.vue b/src/components/ValidateImageProjectTask.vue
new file mode 100644
index 0000000..c5e0fac
--- /dev/null
+++ b/src/components/ValidateImageProjectTask.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { ImageTask } from '@/utils/types';
+import { isNotDefined } from '@togglecorp/fujs';
+import { onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
+
+interface Props {
+  task: ImageTask;
+}
+
+const imgRef = useTemplateRef("taskImage");
+const props = defineProps<Props>();
+
+const bbox = ref<{ x: string, y: string, width: string, height: string} | undefined>();
+const debounceTimeoutRef = shallowRef();
+
+function calculateBbox() {
+  if (isNotDefined(imgRef.value?.image)) {
+    bbox.value = undefined;
+    return;
+  }
+
+  if (isNotDefined(props.task.bbox)) {
+    bbox.value = undefined;
+    return;
+  }
+
+  const imageWidth = props.task.width ?? imgRef.value.image.naturalWidth;
+  const imageHeight = props.task.height ?? imgRef.value.image.naturalHeight;
+
+  const containerWidth = imgRef.value.image.clientWidth;
+  const containerHeight = imgRef.value.image.clientHeight;
+
+  const containerAspectRatio = containerWidth / containerHeight;
+  const imageAspectRatio = imageWidth / imageHeight;
+
+  const renderedHeight = imageAspectRatio > containerAspectRatio
+    ? containerWidth / imageAspectRatio
+    : containerHeight;
+
+  const renderedWidth = containerAspectRatio > imageAspectRatio
+    ? containerHeight * imageAspectRatio
+    : containerWidth;
+
+  const yExcess = containerHeight - renderedHeight;
+  const xExcess = containerWidth - renderedWidth;
+
+  const [x1, y1, w, h] = props.task.bbox;
+
+  const cx = (x1 / imageWidth) * renderedWidth + xExcess / 2;
+  const cy = (y1 / imageHeight) * renderedHeight + yExcess / 2;
+  const cw = (w / imageWidth) * renderedWidth;
+  const ch = (h / imageHeight) * renderedHeight;
+
+  bbox.value = {
+    x: `${cx}px`,
+    y: `${cy}px`,
+    width: `${cw}px`,
+    height: `${ch}px`,
+  }
+}
+
+watch(
+  () => props.task,
+  calculateBbox,
+);
+
+function handleResize() {
+  calculateBbox();
+}
+
+function handleImageLoad() {
+  setTimeout(calculateBbox, 0);
+}
+
+function handleWindowResize() {
+  window.clearTimeout(debounceTimeoutRef.value);
+  debounceTimeoutRef.value = window.setTimeout(() => {
+    calculateBbox();
+  }, 200);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize);
+  window.clearTimeout(debounceTimeoutRef.value);
+});
+
+</script>
+
+<template>
+  <v-img
+    class="task-image"
+    v-if="props.task.url"
+    :src="props.task.url"
+    @load="handleImageLoad"
+    :onresize="handleResize"
+    ref="taskImage"
+  >
+    <svg
+      v-if="bbox"
+      class="bbox"
+      view-box="0 0 100 100"
+    >
+      <rect
+        :x="bbox.x"
+        :y="bbox.y"
+        :width="bbox.width"
+        :height="bbox.height"
+      />
+    </svg>
+    <template v-slot:placeholder>
+      <v-row class="fill-height ma-0" align="center" justify="center">
+        <v-progress-circular color="primary" indeterminate />
+      </v-row>
+    </template>
+    <template v-slot:error>
+      <v-row class="fill-height ma-0 image-failed" align="center" justify="center">
+        {{ $t('imageTile.failureMessage') }}
+      </v-row>
+    </template>
+  </v-img>
+  <div class="image-not-available" v-if="!props.task.url">
+    {{ $t('imageTile.notAvailableMessage') }}
+  </div>
+</template>
+
+<style scoped>
+.task-image {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  height: 100%;
+}
+.image-not-available {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  aspect-ratio: 1;
+  background-color: #a1a1a1;
+  color: rgba(255, 255, 255, 0.6);
+}
+.image-failed {
+  color: rgba(255, 255, 255, 0.6);
+  background-color: #a1a1a1;
+}
+.bbox {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.bbox rect {
+  stroke: #fff;
+  stroke-width: 2;
+  fill: #fff;
+  fill-opacity: 0.1;
+  transition: .2s all ease-in-out;
+  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
+}
+</style>
diff --git a/src/components/ValidateImageProjectTutorial.vue b/src/components/ValidateImageProjectTutorial.vue
new file mode 100644
index 0000000..657de4f
--- /dev/null
+++ b/src/components/ValidateImageProjectTutorial.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { isDefined } from '@togglecorp/fujs';
+import matchIcon from '@/utils/matchIcon'
+import type { CustomOption, Tutorial, TutorialImageTask } from '@/utils/types';
+import ValidateImageProjectTask from './ValidateImageProjectTask.vue';
+import OptionButtons from '@/components/OptionButtons.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+import TutorialCompletionCard from '@/components/TutorialCompletionCard.vue'
+
+const { t } = useI18n();
+
+interface Props {
+  tutorial: Tutorial;
+  options: CustomOption[];
+  tasks: TutorialImageTask[];
+}
+
+const props = defineProps<Props>();
+
+const currentTaskIndex = ref(0);
+const userAttempts = ref(0);
+const answersRevealed = ref(false);
+const results = ref<Record<string, number>>({});
+
+const instruction = computed(
+  () => isDefined(props.tutorial.projectInstruction)
+    ? props.tutorial.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.tutorial.lookFor })
+);
+
+const hasTasks = computed(() => isDefined(props.tasks) && props.tasks.length !== 0);
+
+const task = computed(() => (
+  props.tasks?.[currentTaskIndex.value]
+))
+
+const hasCompletedAllTasks = computed(() => {
+  if (!hasTasks.value) {
+    return false
+  }
+
+  const maxIndex = props.tasks.length
+  return currentTaskIndex.value === maxIndex
+});
+
+const currentScreen = computed(() => (
+  props.tutorial?.screens[currentTaskIndex.value]
+));
+
+const answeredCorrectly = computed(() => {
+  if (!hasTasks.value) {
+    return false
+  }
+
+  if (hasCompletedAllTasks.value) {
+    return true
+  }
+
+  const result = results.value[task.value?.taskId]
+  return isDefined(result) && result === task.value?.referenceAnswer
+});
+
+const alertContent = computed(() => {
+  if (!currentScreen.value) {
+    return undefined
+  }
+
+  // FIXME: we may not have success and hint for this project type
+  const { instructions, success, hint } = currentScreen.value;
+
+  if (answeredCorrectly.value && success) {
+    const icon = success.icon
+
+    return {
+      type: 'success' as const,
+      title: success.title,
+      text: success.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  if (userAttempts.value > 0 && hint) {
+    const icon = hint.icon
+
+    return {
+      type: undefined,
+      title: hint.title,
+      text: hint.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  if (!instructions) {
+    return undefined
+  }
+
+  const icon = instructions.icon
+
+  return {
+    type: 'info' as const,
+    title: instructions.title,
+    text: instructions.description,
+    icon: icon ? matchIcon(icon) : undefined,
+  }
+});
+
+function showAnswer() {
+  answersRevealed.value = true;
+  results.value[task.value.taskId] = task.value.referenceAnswer;
+}
+
+function nextTask() {
+  if (!hasCompletedAllTasks.value) {
+    currentTaskIndex.value += 1
+    userAttempts.value = 0
+    answersRevealed.value = false
+  }
+}
+
+function addResult(value: number) {
+  if (!answersRevealed.value) {
+    userAttempts.value += 1;
+    results.value[task.value.taskId] = value;
+  }
+};
+
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instruction }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <div
+          v-if="tasks[currentTaskIndex] && tutorial"
+          class="task-container"
+        >
+          <ValidateImageProjectTask
+            :task="tasks[currentTaskIndex]"
+          />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="options">
+      <v-col>
+        <option-buttons
+          v-if="task?.taskId"
+          :options="options"
+          :result="results[task.taskId]"
+          :taskId="task.taskId"
+          @addResult="addResult"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.task-container {
+  height: calc(100vh - 600px);
+}
+</style>
diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index 5029e05..fb82c69 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { Collection } from 'ol'
+import { isDefined } from '@togglecorp/fujs'
 import createInformationPages from '@/utils/createInformationPages'
 import { theme } from '@/plugins/vuetify'
 import OptionButtons from '@/components/OptionButtons.vue'
@@ -101,9 +102,11 @@ export default defineComponent({
       return colors
     },
     mission() {
-      const message = this.$t('validateProject.doesTheShapeOutline', {
-        feature: this.project?.lookFor,
-      })
+      const message = isDefined(this.project?.projectInstruction)
+        ? this.project?.projectInstruction
+        : this.$t('validateProject.doesTheShapeOutline', {
+          feature: this.project?.lookFor,
+        })
       return message
     },
   },
diff --git a/src/components/ValidateProjectTutorial.vue b/src/components/ValidateProjectTutorial.vue
index 9872d4c..ea450ef 100644
--- a/src/components/ValidateProjectTutorial.vue
+++ b/src/components/ValidateProjectTutorial.vue
@@ -37,9 +37,12 @@ interface Tutorial extends Project {
   projectId: string
   name: string
   lookFor?: string
+  projectInstruction?: string
   screens: {
-    hint: Screen
     instructions: Screen
+
+    // FIXME: we may not have success and hint for this project type
+    hint: Screen
     success: Screen
   }[]
 }
@@ -71,9 +74,11 @@ export default defineComponent({
   },
   computed: {
     mission() {
-      const message = this.$t('validateProject.doesTheShapeOutline', {
-        feature: this.tutorial?.lookFor,
-      })
+      const message = isDefined(this.tutorial?.projectInstruction)
+        ? this.tutorial.projectInstruction
+        : this.$t('validateProject.doesTheShapeOutline', {
+          feature: this.tutorial?.lookFor,
+        });
       return message
     },
     currentScreen() {
@@ -110,6 +115,7 @@ export default defineComponent({
         return undefined
       }
 
+      // FIXME: we may not have success and hint for this project type
       const { instructions, success, hint } = this.currentScreen
 
       if (this.answeredCorrectly && success) {
diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index f15c9ec..5918646 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -13,7 +13,7 @@ const projectTypes = {
   },
   '4': {
     name: 'Completeness',
-    component: 'findProject',
+    component: 'completenessProject',
   },
   '5': {
     name: 'Media',
@@ -27,6 +27,10 @@ const projectTypes = {
     name: 'Street',
     component: 'streetProject',
   },
+  '10': {
+    name: 'Validate Image',
+    component: 'validateImageProject',
+  },
 }
 
 export default projectTypes
diff --git a/src/firebase/index.ts b/src/firebase/index.ts
index 5888e3a..001c0e5 100644
--- a/src/firebase/index.ts
+++ b/src/firebase/index.ts
@@ -1,6 +1,8 @@
 import { initializeApp } from 'firebase/app'
 import { initializeAnalytics, logEvent } from 'firebase/analytics'
-import { equalTo, getDatabase, orderByChild, query, ref, startAfter } from 'firebase/database'
+import { connectDatabaseEmulator, equalTo, getDatabase, orderByChild, query, ref, startAfter } from 'firebase/database'
+import { connectAuthEmulator, getAuth } from 'firebase/auth'
+import { isDefined } from '@togglecorp/fujs'
 
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
@@ -25,6 +27,27 @@ export const logAnalyticsEvent = (eventName, eventParams = {}) => {
 // used for the database refs
 export const db = getDatabase(firebaseApp)
 
+const shouldUseEmulator = isDefined(import.meta.env.VITE_FIREBASE_DB_EMULATOR_HOST)
+    && isDefined(import.meta.env.VITE_FIREBASE_DB_EMULATOR_PORT);
+
+if (shouldUseEmulator) {
+  connectDatabaseEmulator(
+    db,
+    import.meta.env.VITE_FIREBASE_DB_EMULATOR_HOST,
+    import.meta.env.VITE_FIREBASE_DB_EMULATOR_PORT,
+  );
+}
+
+export function getFirebaseAuth() {
+  const auth = getAuth(firebaseApp);
+
+  if (shouldUseEmulator && isDefined(import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_URL)) {
+    connectAuthEmulator(auth, import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_URL);
+  }
+
+  return auth;
+}
+
 // export reusable database references
 export const dbRef = ref(db)
 export const getProjectRef = (projectId: string) => ref(db, `v2/projects/${projectId}`)
diff --git a/src/utils/buildTasks.ts b/src/utils/buildTasks.ts
index aa7ba21..68c31b9 100644
--- a/src/utils/buildTasks.ts
+++ b/src/utils/buildTasks.ts
@@ -1,12 +1,21 @@
 import getQuadKeyFromCoordsAndZoom from './getQuadKeyFromCoordsAndZoom'
 
-const arrayFromMinMax = (min, max) => {
-  min = parseInt(min)
-  max = parseInt(max)
-  return Array.from({ length: max - min + 1 }, (_, i) => i + min)
+import type { Project, TaskGroup, TileServer, TileTask } from "./types";
+
+const arrayFromMinMax = (min: number | string, max: number | string) => {
+  const minValue = parseInt(String(min));
+  const maxValue = parseInt(String(max));
+  return Array.from({ length: maxValue - minValue + 1 }, (_, i) => i + minValue)
 }
 
-const formatXYZoomKey = (urlTemplate, x, y, zoom, apiKey, wmtsLayerName = '') => {
+const formatXYZoomKey = (
+  urlTemplate: string,
+  x: number,
+  y: number,
+  zoom: number,
+  apiKey: string,
+  wmtsLayerName = ''
+) => {
   const url = urlTemplate
     .replace('{x}', x.toString())
     .replace('{y}', y.toString())
@@ -16,14 +25,14 @@ const formatXYZoomKey = (urlTemplate, x, y, zoom, apiKey, wmtsLayerName = '') =>
   return url
 }
 
-const getBingURLFromQuadKey = (urlTemplate, quadKey, apiKey) => {
+const getBingURLFromQuadKey = (urlTemplate: string, quadKey: string, apiKey: string) => {
   const bingUrl = urlTemplate
     .replace(/({quadKey})|({quad_key})/, quadKey)
     .replace(/({apiKey})|({key})/, apiKey)
   return bingUrl
 }
 
-const getTileUrlFromCoordsAndTileserver = (x, y, zoom, tileServer) => {
+const getTileUrlFromCoordsAndTileserver = (x: number, y: number, zoom: number, tileServer: TileServer) => {
   // based on https://github.com/mapswipe/mapswipe/blob/master/src/shared/common/tile_functions.js
   const urlTemplate = tileServer.url
   const apiKey = tileServer.apiKey
@@ -46,17 +55,18 @@ const getTileUrlFromCoordsAndTileserver = (x, y, zoom, tileServer) => {
   return url
 }
 
-const buildTasks = (project, group) => {
+const buildTasks = (project: Project, group: TaskGroup) => {
   const xArray = arrayFromMinMax(group.xMin, group.xMax)
   const yArray = arrayFromMinMax(group.yMin, group.yMax)
-  const tasks = []
+  const tasks: TileTask[] = [];
   for (const x of xArray) {
     for (const y of yArray) {
-      const task = {
-        groupId: group.groupId,
-        projectId: project.projectId,
+      const task: TileTask = {
+        groupId: String(group.groupId),
+        projectId: String(project.projectId),
         taskX: x,
         taskY: y,
+        taskZ: Number(project.zoomLevel),
         taskId: `${project.zoomLevel}-${x}-${y}`,
         url: getTileUrlFromCoordsAndTileserver(x, y, project.zoomLevel, project.tileServer),
       }
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 1bdc070..986ef1b 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,3 +1,107 @@
 export function isDefined<T>(item: T | null | undefined): item is T {
   return item !== null && item !== undefined
 }
+
+export function isNotDefined<T>(item: T | null | undefined): item is undefined | null {
+  return item === null || item === undefined
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function tileToLng(x: number, z: number) {
+    return (x / (2 ** z)) * 360 - 180;
+}
+
+export function tileToLat(y: number, z: number) {
+    const n = Math.PI - 2 * Math.PI * (y / (2 ** z));
+    return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+}
+
+export interface GeoJsonProps {
+  taskId: string,
+  taskX: number,
+  taskY: number,
+  taskZ: number,
+  reference?: number | undefined,
+}
+
+export function createGeoJsonFromTasks(
+  tasks: GeoJsonProps[] | undefined,
+) {
+  if (isNotDefined(tasks) || tasks.length === 0) {
+    return undefined;
+  }
+
+  const geojson: GeoJSON.GeoJSON<GeoJSON.Polygon, GeoJsonProps> = {
+    type: 'FeatureCollection' as const,
+    features: tasks.map((task, i) => {
+      const {
+        taskId,
+        taskX,
+        taskY,
+        taskZ,
+        reference,
+      } = task;
+
+      if (isNotDefined(taskX) || isNotDefined(taskY) || isNotDefined(taskZ)) {
+        return undefined;
+      }
+
+      const west = tileToLng(taskX, taskZ);
+      const east = tileToLng(taskX + 1, taskZ);
+      const north = tileToLat(taskY, taskZ);
+      const south = tileToLat(taskY + 1, taskZ);
+
+      const feature = {
+        id: i + 1,
+        type: 'Feature' as const,
+        geometry: {
+          type: 'Polygon' as const,
+          coordinates: [[
+            [west, south],
+            [east, south],
+            [east, north],
+            [west, north],
+            [west, south],
+          ]],
+        },
+        properties: {
+          taskId,
+          taskX,
+          taskY,
+          taskZ,
+          reference: reference ?? 0,
+        },
+      };
+
+      return feature;
+    }).filter(isDefined),
+  };
+
+  return geojson;
+}
+
+export function getInstruction(
+  instruction: string | null | undefined,
+  lookFor: string | null | undefined,
+  projectType: string,
+) {
+  if (isNotDefined(instruction) && isNotDefined(lookFor)) {
+    return '??';
+  }
+
+  if (isDefined(instruction)) {
+    return instruction;
+  }
+
+  // Validate = 2, Validate image = '10'
+  const fallbackInstruction = (projectType === '2'
+    || projectType === '10')
+    ? `Does the shape outline ${lookFor}?`
+    : `You are looking for ${lookFor}`;
+
+  return fallbackInstruction;
+}
+
diff --git a/src/utils/domain.ts b/src/utils/domain.ts
new file mode 100644
index 0000000..236301e
--- /dev/null
+++ b/src/utils/domain.ts
@@ -0,0 +1,47 @@
+import { getInstruction } from "./common"
+import type { Tutorial } from "./types"
+
+export function createFallbackInformationPages(tutorial: Tutorial) {
+  if (tutorial.exampleImage1 && tutorial.exampleImage2 && (tutorial.projectInstruction || tutorial.lookFor)) {
+    return [
+      {
+        blocks: [
+          {
+            blockNumber: 1,
+            blockType: 'text',
+            textDescription: getInstruction(
+              tutorial.lookFor,
+              tutorial.projectInstruction,
+              tutorial.projectType,
+            ),
+          },
+          {
+            blockNumber: 2,
+            blockType: 'text',
+            textDescription: 'From the ground, it looks like this:',
+          },
+          {
+            blockNumber: 3,
+            blockType: 'image',
+            image: tutorial.exampleImage1,
+          },
+          {
+            blockNumber: 4,
+            blockType: 'text',
+            textDescription:
+            'But the images you will see will show it from above, and it looks like this:',
+          },
+          {
+            blockNumber: 5,
+            blockType: 'image',
+            image: tutorial.exampleImage2,
+          },
+        ],
+        pageNumber: 1,
+        title: 'What to look for',
+      },
+    ]
+  } else {
+    return undefined
+  }
+}
diff --git a/src/utils/geomFromTileCoords.ts b/src/utils/geomFromTileCoords.ts
index b9e6913..2adff0f 100644
--- a/src/utils/geomFromTileCoords.ts
+++ b/src/utils/geomFromTileCoords.ts
@@ -9,7 +9,7 @@ const pixelCoordsZoomToLonLat = (pixelX, pixelY, zoom, size = 256) => {
   return [lon, lat]
 }
 
-const geomFromTileCoords = (tileX, tileY, zoom, size = 256, epsg = 3857) => {
+const geomFromTileCoords = (tileX: number, tileY: number, zoom: number, size = 256, epsg = 3857) => {
   const leftPixelX = tileX * size
   const topPixelY = tileY * size
   const lonLeftLatTop = pixelCoordsZoomToLonLat(leftPixelX, topPixelY, zoom, size)
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..6be5209
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,134 @@
+export interface ImageTask {
+  taskId: string;
+  fileName: string;
+  url: string;
+  width: number;
+  height: number;
+  bbox: [number, number, number, number];
+}
+
+export interface TutorialImageTask {
+  taskId: string;
+  fileName: string;
+  url: string;
+  width: number;
+  height: number;
+  bbox: [number, number, number, number];
+  referenceAnswer: number;
+}
+
+export interface TileTask {
+  groupId: string;
+  projectId: string;
+  taskX: number;
+  taskY: number;
+  taskZ: number;
+  taskId: string;
+  url: string;
+  urlB?: string;
+}
+
+export interface TutorialTileTask extends TileTask {
+  screen: number;
+  referenceAnswer: number;
+}
+
+interface SubOption {
+  value: number;
+  description: string;
+}
+
+export interface CustomOption {
+  value: number;
+  title: string;
+  description: string;
+  iconColor: string;
+  subOptions?: SubOption[];
+
+  // NOTE: following are injected
+  shortKey: number;
+  mdiIcon: string;
+}
+
+export interface DefaultOption {
+  color: string;
+  label: string;
+  value: number;
+}
+
+export interface TileServer {
+  apiKey: string;
+  credits: string;
+  name: string;
+  url: string;
+  maxZoom?: number;
+  imagerySet?: string;
+  wmtsLayerName?: string;
+}
+
+export interface VectorTileServer {
+  circleColor: string;
+  circleOpacity: number;
+  circleRadius: number;
+  fillColor: string;
+  fillOpacity: number;
+  lineColor: string;
+  lineDasharray: [number, number];
+  lineOpacity: number;
+  lineWidth: number;
+  tileServer: {
+    credits: string;
+    maxZoom: number;
+    minZoom: number;
+    name: string;
+    url: string;
+    sourceLayer: string;
+  }
+}
+
+export type OverlayTileServer = {
+    type: 'vector'
+    vector: VectorTileServer;
+  } | {
+    type: 'raster';
+    raster: TileServer;
+}
+
+export interface Project {
+  projectId: string;
+  zoomLevel: number;
+  tileServer: TileServer;
+  tileServerB?: TileServer;
+  overlayTileServer?: OverlayTileServer;
+  lookFor: string;
+  projectInstruction: string;
+  projectTopic: string;
+  manualUrl?: string;
+  projectType: string;
+}
+
+interface Screen {
+  title: string
+  icon: string
+  description: string
+}
+
+export interface Tutorial extends Project {
+  projectId: string
+  name: string
+  exampleImage1?: string;
+  exampleImage2?: string;
+  screens: {
+    hint: Screen
+    instructions: Screen
+    success: Screen
+  }[]
+}
+
+export interface TaskGroup {
+  groupId: string;
+  xMin: number;
+  xMax: number;
+  yMin: number;
+  yMax: number;
+}
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 71a499a..d2075e0 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -2,9 +2,9 @@
 import BasicPage from '@/components/BasicPage.vue'
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
-import { getAuth, signOut, updateProfile } from 'firebase/auth'
-import { getDatabase, ref, push, set, update, onValue } from 'firebase/database'
-import { logAnalyticsEvent } from '@/firebase'
+import { signOut, updateProfile } from 'firebase/auth'
+import { ref, push, set, update, onValue } from 'firebase/database'
+import { db, getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
 import { useCurrentUserStore } from '@/stores/currentUser'
 import {
   dbRef,
@@ -91,7 +91,6 @@ export default defineComponent({
     changeUsername() {
       this.changeUsernameDialog = false
       const userId = this.user.uid
-      const db = getDatabase()
 
       if ((this.newUsername?.length ?? 0) >= 4) {
         updateProfile(this.user, { displayName: this.newUsername })
@@ -202,7 +201,7 @@ export default defineComponent({
     },
     signOut() {
       this.hideDialog()
-      const auth = getAuth()
+      const auth = getFirebaseAuth()
       signOut(auth)
         .then(() => {
           logAnalyticsEvent('sign_out')
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index bffdea5..a232040 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -22,6 +22,8 @@ import MediaProject from '@/components/MediaProject.vue'
 import ValidateProject from '@/components/ValidateProject.vue'
 import DigitizeProject from '@/components/DigitizeProject.vue'
 import StreetProject from '@/components/StreetProject.vue'
+import CompletenessProject from '@/components/CompletenessProject.vue';
+import ValidateImageProject from '@/components/ValidateImageProject.vue';
 import projectTypes from '@/config/projectTypes'
 import { decompressTasks } from '@/utils/tasks'
 
@@ -30,6 +32,8 @@ export default defineComponent({
     basicPage: BasicPage,
     compareProject: CompareProject,
     findProject: FindProject,
+    completenessProject: CompletenessProject,
+    validateImageProject: ValidateImageProject,
     mediaProject: MediaProject,
     validateProject: ValidateProject,
     digitizeProject: DigitizeProject,
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 3f0d4a6..a6ff018 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -2,8 +2,8 @@
 import { defineComponent } from 'vue'
 import BasicPage from '@/components/BasicPage.vue'
 import ProjectMoreInfo from '@/components/ProjectMoreInfo.vue'
-import { ref, getDatabase, onValue, set } from 'firebase/database'
-import { activeProjectsQuery, logAnalyticsEvent, getUserContributionsRef } from '@/firebase'
+import { ref, onValue, set } from 'firebase/database'
+import { activeProjectsQuery, logAnalyticsEvent, getUserContributionsRef, db } from '@/firebase'
 import { i18nRoute } from '@/i18n/translation'
 import { mapStores } from 'pinia'
 import { useCurrentUserStore } from '@/stores/currentUser'
@@ -156,7 +156,7 @@ export default defineComponent({
     },
     updateLastAppUse() {
       const userId = this.user.uid
-      set(ref(getDatabase(), `/v2/users/${userId}/lastAppUse`), new Date().toISOString())
+      set(ref(db, `/v2/users/${userId}/lastAppUse`), new Date().toISOString())
     },
   },
   mounted() {
diff --git a/vite.config.ts b/vite.config.ts
index e985859..86bd4bd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,11 +4,13 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import { ValidateEnv } from '@togglecorp/vite-plugin-validate-env';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: './',
   plugins: [
+    ValidateEnv(),
     vue(),
     vueJsx(),
     VueI18nPlugin({
diff --git a/web-app-serve/.gitignore b/web-app-serve/.gitignore
new file mode 100644
index 0000000..2003fbf
--- /dev/null
+++ b/web-app-serve/.gitignore
@@ -0,0 +1,13 @@
+.env
+.vite/
+
+# Tooling
+node_modules/
+.eslintcache
+tsconfig.tsbuildinfo
+
+# Custom
+build/
+generated/
+coverage/
+stats.html
diff --git a/web-app-serve/docker-compose.yml b/web-app-serve/docker-compose.yml
new file mode 100644
index 0000000..fdf0d9a
--- /dev/null
+++ b/web-app-serve/docker-compose.yml
@@ -0,0 +1,14 @@
+name: mapswipe-web-app
+
+services:
+  web-app-serve:
+    build:
+      context: ../
+      target: web-app-serve
+    environment:
+      # web-app-serve config
+      APPLY_CONFIG__ENABLE_DEBUG: true
+    # NOTE: See "Dockerfile" to get dynamic env variables for .env file
+    env_file: .env
+    ports:
+      - '8050:80'
diff --git a/web-app-serve/web-app-apply-config.sh b/web-app-serve/web-app-apply-config.sh
new file mode 100755
index 0000000..cac1c49
--- /dev/null
+++ b/web-app-serve/web-app-apply-config.sh
@@ -0,0 +1,9 @@
+#!/bin/env bash
+
+set -xe
+
+while IFS='=' read -r KEY VALUE; do
+    REPLACEMENT="${VALUE:-undefined}"
+    find "$DESTINATION_DIRECTORY" -type f \
+        -exec sed -i "s|\<WEB_APP_SERVE_PLACEHOLDER__$KEY\>|$REPLACEMENT|g" {} +
+done < <(env | grep '^VITE_')
diff --git a/yarn.lock b/yarn.lock
index 1cad830..887c8c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -196,6 +196,13 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
     "@babel/plugin-syntax-typescript" "^7.27.1"
 
+"@babel/runtime-corejs3@^7.22.6":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.28.2.tgz#1382be38259226003575d9597a57f1eb467de2e7"
+  integrity sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ==
+  dependencies:
+    core-js-pure "^3.43.0"
+
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.26.7":
   version "7.27.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.3.tgz#10491113799fb8d77e1d9273384d5d68deeea8f6"
@@ -231,6 +238,11 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
+"@colors/colors@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
+  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
+
 "@esbuild/aix-ppc64@0.25.5":
   version "0.25.5"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz#4e0f91776c2b340e75558f60552195f6fad09f18"
@@ -967,6 +979,59 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@mapbox/geojson-rewind@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz#591a5d71a9cd1da1a0bf3420b3bea31b0fc7946a"
+  integrity sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==
+  dependencies:
+    get-stream "^6.0.1"
+    minimist "^1.2.6"
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2", "@mapbox/jsonlint-lines-primitives@~2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
+  integrity sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==
+
+"@mapbox/tiny-sdf@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz#9a1d33e5018093e88f6a4df2343e886056287282"
+  integrity sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==
+
+"@mapbox/unitbezier@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz#d32deb66c7177e9e9dfc3bbd697083e2e657ff01"
+  integrity sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
+"@maplibre/maplibre-gl-style-spec@^23.3.0":
+  version "23.3.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.3.0.tgz#b69ab48cb3abead4e49213396c8f83492638b97c"
+  integrity sha512-IGJtuBbaGzOUgODdBRg66p8stnwj9iDXkgbYKoYcNiiQmaez5WVRfXm4b03MCDwmZyX93csbfHFWEJJYHnn5oA==
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives" "~2.0.2"
+    "@mapbox/unitbezier" "^0.0.1"
+    json-stringify-pretty-compact "^4.0.0"
+    minimist "^1.2.8"
+    quickselect "^3.0.0"
+    rw "^1.3.3"
+    tinyqueue "^3.0.0"
+
 "@mdi/font@^7.4.47":
   version "7.4.47"
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
@@ -1020,6 +1085,34 @@
   dependencies:
     playwright "1.44.0"
 
+"@poppinss/cliui@^6.4.3":
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/@poppinss/cliui/-/cliui-6.4.4.tgz#3000c6ededfcbbe2a889375ac518f7b89a2a14ac"
+  integrity sha512-yJfm+3yglxdeH85C+YebxZ1zsTB4pBh+QwCuxJcxV/pVbxagn63uYyxqnQif2sKWi+nkNZxuyemON3WrtGMBCQ==
+  dependencies:
+    "@poppinss/colors" "^4.1.5"
+    cli-boxes "^4.0.1"
+    cli-table3 "^0.6.5"
+    cli-truncate "^4.0.0"
+    log-update "^6.1.0"
+    pretty-hrtime "^1.0.3"
+    string-width "^7.2.0"
+    supports-color "^10.0.0"
+    terminal-size "^4.0.0"
+    wordwrap "^1.0.0"
+
+"@poppinss/colors@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@poppinss/colors/-/colors-4.1.5.tgz#09273b845a4816f5fd9c53c78a3bc656650fe18f"
+  integrity sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==
+  dependencies:
+    kleur "^4.1.5"
+
+"@poppinss/validator-lite@^2.1.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@poppinss/validator-lite/-/validator-lite-2.1.2.tgz#3e7fdb340dd92d3471ae9c6274760deaf9bffbd7"
+  integrity sha512-UhSG1ouT6r67VbEFHK/8ax3EMZYHioew9PqGmEZjV41G15aPZi6cyhXtBVvF9xqkHMflA5V680k7bQzV0kfD5w==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -1073,6 +1166,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@quansync/fs@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@quansync/fs/-/fs-0.1.5.tgz#8d89bc7add93f9b77e053ff8293d5ca82199fb1f"
+  integrity sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==
+  dependencies:
+    quansync "^0.2.11"
+
 "@rolldown/pluginutils@^1.0.0-beta.9":
   version "1.0.0-beta.9"
   resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz#68ef9fff5a9791a642cea0dc4380ce6cb487a84a"
@@ -1192,6 +1292,28 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz#053f1540703faa81dea2966b768ee5581c66aeda"
   integrity sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==
 
+"@standard-schema/spec@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.0.0.tgz#f193b73dc316c4170f2e82a881da0f550d551b9c"
+  integrity sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==
+
+"@togglecorp/fujs@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@togglecorp/fujs/-/fujs-2.2.0.tgz#f069d2e6db7dedf70c8be9bd6977b318c7ebaf55"
+  integrity sha512-OuoQ9Bj7SiI2sTLpaM/HivU6HpSbZ3ANBIn7f9KUz5eFcfwBBEDvjI+4ah6WktJEYTUKY4RxX37z64qOrTJSwA==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.22.6"
+
+"@togglecorp/vite-plugin-validate-env@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@togglecorp/vite-plugin-validate-env/-/vite-plugin-validate-env-2.2.1.tgz#c739b515814d4f186526c55c204cf36fc26723d2"
+  integrity sha512-K39bpXSOdliJPMNfHuK17pszgWWNRJfaB4NRDQBuWx9h4O4/qF1nl7DpwBqSB006e3E284jZAZEw2r7RoHdG4w==
+  dependencies:
+    "@poppinss/cliui" "^6.4.3"
+    "@poppinss/validator-lite" "^2.1.0"
+    "@standard-schema/spec" "^1.0.0"
+    unconfig "^7.3.2"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -1299,7 +1421,14 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/geojson@^7946.0.10":
+"@types/geojson-vt@3.2.5":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@types/geojson-vt/-/geojson-vt-3.2.5.tgz#b6c356874991d9ab4207533476dfbcdb21e38408"
+  integrity sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/geojson@*", "@types/geojson@^7946.0.10", "@types/geojson@^7946.0.16":
   version "7946.0.16"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
   integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
@@ -1318,6 +1447,20 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d"
+  integrity sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==
+
+"@types/mapbox__vector-tile@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz#ad757441ef1d34628d9e098afd9c91423c1f8734"
+  integrity sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==
+  dependencies:
+    "@types/geojson" "*"
+    "@types/mapbox__point-geometry" "*"
+    "@types/pbf" "*"
+
 "@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "20.12.12"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.12.tgz#7cbecdf902085cec634fdb362172dfe12b8f2050"
@@ -1347,7 +1490,7 @@
   resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
   integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
 
-"@types/pbf@^3.0.2":
+"@types/pbf@*", "@types/pbf@^3.0.2", "@types/pbf@^3.0.5":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.5.tgz#a9495a58d8c75be4ffe9a0bd749a307715c07404"
   integrity sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==
@@ -1377,6 +1520,13 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
+"@types/supercluster@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-7.1.3.tgz#1a1bc2401b09174d9c9e44124931ec7874a72b27"
+  integrity sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/three@^0.134.0":
   version "0.134.0"
   resolved "https://registry.yarnpkg.com/@types/three/-/three-0.134.0.tgz#22ae9892f4490faaf35f0ccea127df18407b8ab3"
@@ -1828,6 +1978,13 @@ alien-signals@^1.0.3:
   resolved "https://registry.yarnpkg.com/alien-signals/-/alien-signals-1.0.13.tgz#8d6db73462f742ee6b89671fbd8c37d0b1727a7e"
   integrity sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==
 
+ansi-escapes@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-7.0.0.tgz#00fc19f491bbb18e1d481b97868204f92109bfe7"
+  integrity sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==
+  dependencies:
+    environment "^1.0.0"
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -1852,7 +2009,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ansi-styles@^6.1.0:
+ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
@@ -2087,6 +2244,35 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+cli-boxes@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-4.0.1.tgz#7267f4ae32ecbb52b5af77fef48be219f666c57c"
+  integrity sha512-5IOn+jcCEHEraYolBPs/sT4BxYCe2nHg374OPiItB1O96KZFseS2gthU4twyYzeDcFew4DaUM/xwc5BQf08JJw==
+
+cli-cursor@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
+  integrity sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
+  dependencies:
+    restore-cursor "^5.0.0"
+
+cli-table3@^0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.5.tgz#013b91351762739c16a9567c21a04632e449bf2f"
+  integrity sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==
+  dependencies:
+    string-width "^4.2.0"
+  optionalDependencies:
+    "@colors/colors" "1.5.0"
+
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^7.0.0"
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -2155,6 +2341,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+core-js-pure@^3.43.0:
+  version "3.44.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.44.0.tgz#6e9d6c128c8b967c5eac4f181c2b654d85c28090"
+  integrity sha512-gvMQAGB4dfVUxpYD0k3Fq8J+n5bB6Ytl15lqlZrOIXFzxOhtPaObfkQGHtMRdyjIf7z2IeNULwi1jEwyS+ltKQ==
+
 core-js@^3.6.0, core-js@^3.8.3:
   version "3.42.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.42.0.tgz#edbe91f78ac8cfb6df8d997e74d368a68082fe37"
@@ -2309,6 +2500,11 @@ define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+defu@^6.1.4:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
+  integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2371,6 +2567,11 @@ earcut@^3.0.0:
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.1.tgz#f60b3f671c5657cca9d3e131c5527c5dde00ef38"
   integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
 
+earcut@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.2.tgz#d478a29aaf99acf418151493048aa197d0512248"
+  integrity sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -2396,6 +2597,11 @@ element-matches@^0.1.2:
   resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
   integrity sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ==
 
+emoji-regex@^10.3.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2416,6 +2622,11 @@ entities@~2.1.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
+environment@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
+  integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2973,6 +3184,11 @@ geographiclib-geodesic@^2.1.1:
   resolved "https://registry.yarnpkg.com/geographiclib-geodesic/-/geographiclib-geodesic-2.1.1.tgz#5f9c02f2e0db5403055ba637f76d9e58b2215863"
   integrity sha512-lkd8EUkPSByobWu9BPMHTdYA5AUZxOa8McmUNtBE9KrvUJEvSADnN6gTDmhXbi6NzdA16LtWLpSxLE/lIIRhyA==
 
+geojson-vt@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-4.0.2.tgz#1162f6c7d61a0ba305b1030621e6e111f847828a"
+  integrity sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==
+
 geotiff@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/geotiff/-/geotiff-2.1.3.tgz#993f40f2aa6aa65fb1e0451d86dd22ca8e66910c"
@@ -2992,6 +3208,11 @@ get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-east-asian-width@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz#21b4071ee58ed04ee0db653371b55b4299875389"
+  integrity sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==
+
 get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
@@ -3027,6 +3248,11 @@ get-proto@^1.0.1:
     dunder-proto "^1.0.1"
     es-object-atoms "^1.0.0"
 
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-symbol-description@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
@@ -3036,6 +3262,11 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
+gl-matrix@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
+  integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -3073,6 +3304,15 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global-prefix@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-4.0.0.tgz#e9cc79aab9be1d03287e156a3f912dd0895463ed"
+  integrity sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==
+  dependencies:
+    ini "^4.1.3"
+    kind-of "^6.0.3"
+    which "^4.0.0"
+
 global@^4.3.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
@@ -3291,6 +3531,11 @@ ini@^1.3.4:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+ini@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
+
 internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
@@ -3371,6 +3616,18 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-fullwidth-code-point@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz#9609efced7c2f97da7b60145ef481c787c7ba704"
+  integrity sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==
+  dependencies:
+    get-east-asian-width "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -3463,6 +3720,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isexe@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
+  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
+
 jackspeak@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
@@ -3472,6 +3734,11 @@ jackspeak@^2.3.6:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jiti@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.5.1.tgz#bd099c1c2be1c59bbea4e5adcd127363446759d0"
+  integrity sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==
+
 js-beautify@^1.14.9:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.15.1.tgz#4695afb508c324e1084ee0b952a102023fc65b64"
@@ -3554,6 +3821,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stringify-pretty-compact@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
+  integrity sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==
+
 json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
@@ -3589,6 +3861,11 @@ jsts@2.7.1:
   resolved "https://registry.yarnpkg.com/jsts/-/jsts-2.7.1.tgz#a921c0cc9eefeef588bd53e952e0a7782d812d52"
   integrity sha512-x2wSZHEBK20CY+Wy+BPE7MrFQHW6sIsdaGUMEqmGAio+3gFzQaBYPwLRonUfQf9Ak8pBieqj9tUofX1+WtAEIg==
 
+kdbush@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39"
+  integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -3596,6 +3873,16 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+kind-of@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+kleur@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 lerc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lerc/-/lerc-3.0.0.tgz#36f36fbd4ba46f0abf4833799fff2e7d6865f5cb"
@@ -3648,6 +3935,17 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+log-update@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.1.0.tgz#1a04ff38166f94647ae1af562f4bd6a15b1b7cd4"
+  integrity sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
+  dependencies:
+    ansi-escapes "^7.0.0"
+    cli-cursor "^5.0.0"
+    slice-ansi "^7.1.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
+
 long@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
@@ -3706,6 +4004,38 @@ mapillary-js@^4.1.2:
     three "^0.134.0"
     virtual-dom "^2.1.1"
 
+maplibre-gl@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.6.1.tgz#d6fd215f14274aef9b695cd2a34eb3b4ad788049"
+  integrity sha512-TTSfoTaF7RqKUR9wR5qDxCHH2J1XfZ1E85luiLOx0h8r50T/LnwAwwfV0WVNh9o8dA7rwt57Ucivf1emyeukXg==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^2.0.6"
+    "@mapbox/unitbezier" "^0.0.1"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "@maplibre/maplibre-gl-style-spec" "^23.3.0"
+    "@types/geojson" "^7946.0.16"
+    "@types/geojson-vt" "3.2.5"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    earcut "^3.0.1"
+    geojson-vt "^4.0.2"
+    gl-matrix "^3.4.3"
+    global-prefix "^4.0.0"
+    kdbush "^4.0.2"
+    murmurhash-js "^1.0.0"
+    pbf "^3.3.0"
+    potpack "^2.0.0"
+    quickselect "^3.0.0"
+    supercluster "^8.0.1"
+    tinyqueue "^3.0.0"
+    vt-pbf "^3.1.3"
+
 markdown-it@^12.3.2:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
@@ -3771,6 +4101,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -3813,6 +4148,11 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimist@^1.2.6, minimist@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.4:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.1.tgz#f7f85aff59aa22f110b20e27692465cf3bf89481"
@@ -3843,6 +4183,11 @@ muggle-string@^0.4.1:
   resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
   integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
 
+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
+  integrity sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==
+
 nanoid@^3.3.8:
   version "3.3.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
@@ -3974,6 +4319,13 @@ once@^1.3.0:
   dependencies:
     wrappy "1"
 
+onetime@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-7.0.0.tgz#9f16c92d8c9ef5120e3acd9dd9957cceecc1ab60"
+  integrity sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
+  dependencies:
+    mimic-function "^5.0.0"
+
 optionator@^0.9.3:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
@@ -4104,7 +4456,7 @@ pbf@4.0.1:
   dependencies:
     resolve-protobuf-schema "^2.1.0"
 
-pbf@^3.2.1:
+pbf@^3.2.1, pbf@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.3.0.tgz#1790f3d99118333cc7f498de816028a346ef367f"
   integrity sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==
@@ -4202,6 +4554,11 @@ postcss@^8.5.3:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+potpack@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-2.1.0.tgz#fe548e2f9061e9937f17191c1ab6dd98ca30e02f"
+  integrity sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -4219,6 +4576,11 @@ prettier@^3.0.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
+
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
@@ -4271,6 +4633,11 @@ punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+quansync@^0.2.11:
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.11.tgz#f9c3adda2e1272e4f8cf3f1457b04cbdb4ee692a"
+  integrity sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -4379,6 +4746,14 @@ resolve@^1.10.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+restore-cursor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-5.1.0.tgz#0766d95699efacb14150993f55baf0953ea1ebe7"
+  integrity sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
+  dependencies:
+    onetime "^7.0.0"
+    signal-exit "^4.1.0"
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -4442,6 +4817,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs@^7.3.0:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@@ -4573,7 +4953,7 @@ siginfo@^2.0.0:
   resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
   integrity sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==
 
-signal-exit@^4.0.1:
+signal-exit@^4.0.1, signal-exit@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
@@ -4583,6 +4963,22 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
+slice-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.0.tgz#cd6b4655e298a8d1bdeb04250a433094b347b9a9"
+  integrity sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
 source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -4676,6 +5072,15 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
+string-width@^7.0.0, string-width@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
 string.prototype.padend@^3.0.0:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.6.tgz#ba79cf8992609a91c872daa47c6bb144ee7f62a5"
@@ -4728,7 +5133,7 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -4745,6 +5150,18 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+supercluster@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5"
+  integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==
+  dependencies:
+    kdbush "^4.0.2"
+
+supports-color@^10.0.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-10.2.0.tgz#4e2ff2704883c99d95ba659ac5e702f06e12e8ed"
+  integrity sha512-5eG9FQjEjDbAlI5+kdpdyPIBMRH4GfTVDGREVupaZHmVoppknhM29b/S9BkQz7cathp85BVgRi/As3Siln7e0Q==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -4782,6 +5199,11 @@ synckit@^0.8.6:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
+terminal-size@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/terminal-size/-/terminal-size-4.0.0.tgz#a0b7530518afe5f49952c58251ec6e2e3a740570"
+  integrity sha512-rcdty1xZ2/BkWa4ANjWRp4JGpda2quksXIHgn5TMjNBPZfwzJIgR68DKfSYiTL+CZWowDX/sbOo5ME/FRURvYQ==
+
 text-segmentation@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
@@ -4842,6 +5264,11 @@ tinyqueue@^2.0.3:
   resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
   integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
 
+tinyqueue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-3.0.0.tgz#101ea761ccc81f979e29200929e78f1556e3661e"
+  integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==
+
 tinyrainbow@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-2.0.0.tgz#9509b2162436315e80e3eee0fcce4474d2444294"
@@ -4977,6 +5404,16 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+unconfig@^7.3.2:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/unconfig/-/unconfig-7.3.3.tgz#bdb2dbbb5d271e601bc7e0922512ce397c5a9e8d"
+  integrity sha512-QCkQoOnJF8L107gxfHL0uavn7WD9b3dpBcFX6HtfQYmjw2YzWxGuFQ0N0J6tE9oguCBJn9KOvfqYDCMPHIZrBA==
+  dependencies:
+    "@quansync/fs" "^0.1.5"
+    defu "^6.1.4"
+    jiti "^2.5.1"
+    quansync "^0.2.11"
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
@@ -5111,6 +5548,15 @@ vscode-uri@^3.0.8:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.1.0.tgz#dd09ec5a66a38b5c3fffc774015713496d14e09c"
   integrity sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==
 
+vt-pbf@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
+  integrity sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.2.1"
+
 vue-component-type-helpers@^2.0.0:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-2.0.18.tgz#92568185cd951f30bab3c455d1a62f507e47febf"
@@ -5323,6 +5769,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
+  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
+  dependencies:
+    isexe "^3.1.1"
+
 why-is-node-running@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
@@ -5341,6 +5794,11 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
@@ -5368,6 +5826,15 @@ wrap-ansi@^8.1.0:
     string-width "^5.0.1"
     strip-ansi "^7.0.1"
 
+wrap-ansi@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.0.tgz#1a3dc8b70d85eeb8398ddfb1e4a02cd186e58b3e"
+  integrity sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"