DEV Community

Ania Kubow
Ania Kubow

Posted on

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

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

Top comments (5)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

31:06 Adding Multiple Delivery Points and Calculating the shortest route

Except that you aren't calculating the shortest route, the API is. Would be more interesting to know how this actually works. Getting kind of tired of all these 'tutorials' of how to do X that either just import a library and call a function, or make a call to an API. You could boil of these down to "How to call a function" and "How to call an API"

Collapse
 
theccode profile image
Eric A. Kumah • Edited

In this decade? "DRYing" and "!Reinventing the wheel" in step 31:06 is necessary to get things done in infinitely easier and quicker way, yet React itself is a library that depends so much on 3rd party libraries...
You cannot go down the line of not "DRYing" and "!Reinventing the wheel" without the nitty-gritty low level, in-depth knowledge of computer science concepts.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

I think you missed the point of my comment. So many 'tutorials' on here and elsewhere are essentially teaching nothing other than very simple concepts like including libraries, calling functions, calling APIs etc.

There is nothing interesting here - it's little more than simple plumbing... connect pre-built machine A to prebuilt machine B to do such and such task. That is utterly boring and to my mind - not development. If you're happy to do that kind of stuff, fine - but the really interesting work is in the building of these machines - that is infinitely more rewarding and stimulating.

Strive to be a developer, not a plumber

Thread Thread
 
theccode profile image
Eric A. Kumah • Edited

Thanks for the clarification but I strongly believe if you specifically put in a request for that tutorial, Ania can be of help.

Thread Thread
 
ania_kubow profile image
Ania Kubow • Edited

For sure! Thanks for your positive comments Eric! So much negativity in this world, its nice to see kindness! This tutorial is done especially to show what the Tom Tom API can do, as said in the intro :)