Navigation App - Web application
Web navigation app that allows users to input a desired route and instantly view it on the map, complete with estimated distance and time of travel.
Main technologies
Stack
- Heroicons - beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
- Leaflet - an open-source JavaScript library for mobile-friendly interactive maps.
- Leaflet Locate Control - useful control to geolocate the user with many options. Official Leaflet and MapBox plugin.
- Leaflet Routing Machine - an easy, flexible and extensible way to add routing to a Leaflet map.
- React Leaflet - React components for Leaflet maps.
- React Router - a standard library for routing in React.
- ReactToPrint - library with ability to print React components in the browser.
- Vite - a new breed of frontend build tooling that significantly improves the frontend development experience.
- vite-plugin-rewrite-all - plugin that fix dev server not rewriting the path includes a dot vite#2190.
Details
- created with React (Vite) and TypeScript
- context and reducer for managing global state
- locating your current location
- map tiles provided by Mapbox
- finding addresses and coordinates with the Here API
- create routes with the accuracy of the house number
- create routes by dragging markers on the map
- loading a route from a URL search params
- loading recently saved routes
- calculation of travel costs
- printing route details with ReactToPrint
- routing with React Router
- unit testing with Jest
- responsive website design
- styling with Tailwind CSS