Intro
This repository holds the main server side module the web and mobile clients interact with, it also hold the web and mobile related code.
Architecture Diagram
!Architecture diagramThe diagram above is exported from architecture.drawio - edit that file and export a new png when the architecture changes.
Third party services
The following services are used over HTTPS and are not a part of the deployment, so they are not in the diagram above:- OpenStreetMap API - login, map edits and GPS traces
- Overpass API - points of interest queries
- Wikidata and Wikimedia Commons - points of interest descriptions and images
- Mapbox - satellite imagery
- RevenueCat and iaptic - subscription receipt validation
- Imgur - anonymous image upload
- mapeak.com - the offline map files and the offline routing tiles the mobile client downloads
- Panoramax, iNature and Nakeb - content the clients fetch directly
Technology stack
The technology stack of this site is based on the following frameworks:Server Side
- Asp.Net core - infrastructure
- NSubstitute - for mocking in tests
- Valhalla - for routing between points
- Elastic Search and NEST - for database and search capabilities
- Net Topology Suite - for spatial mathmatics
- OsmSharp - for OSM capabilities
- NeoSmart.Caching.Sqlite - for persistent cache, mainly to allow idempotent operations
- Wikipedia using Wiki client library - for Wikipedia data and upload images to Wikimedia common
- Docker - for image creation and microservices architecture
Client Side
- Typescript - for sanity
- Angular and Angular-Material - for UI framework and components
- MapLibre using ngx-maplibre-gl - for map presentation and interaction
- Vitest - for unit testing
- Capacitor - for wrapping the site as a mobile application and add some native capabilities
- Turf - for spatial mathematics
- NGXS - for state management
- Dexie - for database storage
- D3 - for advanced chart capablilities
- Lottie and ngx-lottie - for image animations
- Valhalla-mobile - for offline routing between points
Architecture and folder structure of the client side
The architecture is based heavily on Angular:- application - where all the application code is, topmost folder.
- content - used for images and static content.
- environments - used for angular-cli to define production and dev variables.
- fonts - icon font generated by
npm run generate-icon-font, see AGENTS.md. - scss - used for global style files
- translations - all relevant data related to i18n.
Architecture and folder stucture of the server side
The architecture is based on layers:- API - the client entry point and main business logic module
- Web - the entry point of the app and where the client side code gets built
- DataAccessInterfaces - a slim layer to decouple business logic from data access
- DataAccess - database, file system and network request are processed in this layer
- Common - Mainly for POCOs
- Tests - where the tests are located, they mirror the BL hierarchy