Build a shortest route app like UberEats / Deliveroo in React! (tutorial)

Ania Kubow - Jun 3 '21 - - Dev Community

Have you ever wanted to build a delivery app that will calculate the shortest distance from each drop off spot? if so, this is the video for you.

Now, for those of you who have never heard the buzz word Matrix Routing before, it is what we will be using to optimise our multiple deliveries by travel time.

We are going to be using TomTom Map SDK for Web, to show us the best route for us as the delivery driver, to drop off all three deliveries based on time, taking:

  1. The route into account
  2. The traffic on the roads into account.
  3. The traffic incidents on the roads into account

The final route is calculated using the “Routing API” which by default will do a “car”  route. But it can do way more than that. It can calculate the routes for motorcycles, vans, trucks or pedestrians! As you can image, the results will vary. 

00:00 Introduction
02:17 Signing up to get our API Key from Tom Tom ( click here: https://bit.ly/2S5Ry7x )
03:25 Starting our React App Project
05:43 Adding our Map
14:36 Setting the longitude and latitude by Search box + Adding traffic incidents to the map
20:00 Add a Marker to the Map
26:05 Making the Marker Draggable
28:51 Adding a Popup to the Marker
31:06 Adding Multiple Delivery Points and Calculating the shortest route

Get extra API requests using ANIAKUBOW after(!) signing up, here: https://bit.ly/3uCAkvK


⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

deliverooClone #uberClone

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .