VueMap Explorer
Interactive 3D map platform built with Vue 3, Vite, Pinia, Tailwind, Mapbox Directions, PWA, Swiper, advanced UI/UX, Axios, and a Node/Express + TypeScript + MongoDB(geoJSON) backend with Swagger docs.
Overview
VueMap-Explorer is an innovative 3D map platform that caters to a wide range of usages, from casual personal trips to sophisticated route management for professionals. With its intuitive design and Mobile-First approach, it allows users to explore and manage geospatial data seamlessly. Developed using advanced technologies like Vue 3 and Mapbox, this application offers a rich set of features that enhance user interaction and mapping experiences.
The platform not only excels in visual presentation with 3D routes but also incorporates a robust Node/Express backend, ensuring efficient data handling and user authentication. Its offline capabilities and PWA support make it particularly appealing for those who need reliable access to mapping features in various environments.
Features
-
3D Routes & Custom Markers: Easily add, edit, or remove markers and enjoy smooth 3D transitions for routes powered by Mapbox GL.
-
Mobile First and Adaptive UI: Designed specifically for mobile and tablet users while still performing excellently on desktops, catering to diverse user needs.
-
Responsive & iOS-Optimized: Special attention to iPhone and iPad users with features like safe-area insets and orientation fixes, ensuring a great experience on Apple devices.
-
Pinia State Management: Efficiently manages user sessions, active route data, and iOS detection for a dynamic and responsive user interface.
-
Swiper Cards: Provides an interactive sliding gallery to swipe through points of interest, enhanced to address iOS quirks for better usability.
-
Secure Auth (JWT): Utilizes Bearer tokens to connect with the Node/Express backend, ensuring user-specific protection for routes and markers.
-
Offline-Ready: Deployed as a Progressive Web App (PWA), allowing installation on mobile devices to facilitate exploration even when offline.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.