Skip to content

Latest commit

 

History

History
97 lines (75 loc) · 5.1 KB

README.md

File metadata and controls

97 lines (75 loc) · 5.1 KB

Navigation App

Thumbnail

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.

https://navigation-sd.vercel.app/map

Main technologies

HTML CSS JavaScript TypeScript React Jest TailwindCSS Leaflet

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

Tutorial and project structure

Inside the project you'll see the following folders and files:

PROJECT_ROOT
├── public              # static assets
└── src
    ├── assets          # images
    ├── components      # React components
    ├── lib
    │   ├── api         # API functions
    │   ├── context     # React context and reducer files
    │   ├── helpers     # helpful functions
    │   ├── interfaces  # TypeScript interfaces
    │   └── test        # Jest test functions
    ├── pages           # page files
    └── styles          # style files

Download the repository to your local machine and run to download all missing dependencies:

yarn install

After that you can run this project with:

yarn dev

To build your application use:

yarn build

The application requires a connection to Here API. To do this, you need to create an account on https://platform.here.com, create a new project, add Autocomplete, Forward Geocoder, Reverse Geocoder services and generate a token that will enable communication with the API.

In addition to this, you will need a link to a Leaflet-supported map tiles (e.g. Mapbox).

After these operations, create a .env.local file with the following data in the main folder and restart your application:

VITE_HERE_API_KEY = YOUR_HERE_API_TOKEN
VITE_MAP_TILES = YOUR_MAP_TILES_LINK