Road trip planner

1510 developers have joined this project.

What you will practice

In this project, you’ll practice receiving user input, interacting with a mapping API, and displaying mapping and locational information. You can also explore responding to DOM events, overlays, local storage persistence, and iFrames within your framework of choice.

Introduction

As travelling restrictions are beginning to be lifted globally, maybe it’s finally time for you to plan that roadtrip! In this project, you’ll give users the opportunity to list out the destinations they want to visit, let users order them, and display the best route between destinations.

There are many ways you can enhance this project and share it with friends and family.

Depending on how much extra challenge you take on, this project should take around 20 hours.

Requirements

As a user, I should be able to add destinations. I should be able to do this by using a form, click on a map (with an API call), or other approaches included.
As a user, I should be able to rearrange the order of my destinations.
As a user, I’d like to be able to see my destinations on a map.
As a user, I’d like to be able to see information about the distance and journey time between each destination.
As a user, I’d like to be able to see summary data about my entire journey. This could include the total time, distance and, for extra points, even the fuel needed.
As a user, I’d like my data to be stored in my browser’s local storage so I can navigate away from this page and come back with the data still there.

For extra challenge:

Display points of interest between each destination This can be achieved by either looking at popular attractions or asking the user about their interests.
For longer parts of the journey, suggest where users might take shortstops (i.e.hotels and their rates).
Use the dates of the road trip and suggest events of interest that are on the path.

Suggested Implementation

For the initial pass, you can call out to the API directly from your application. You may want to introduce a server to obscure your API key going forward.

There are a variety of mapping platforms and libraries you could use to access these features. Google Map API could be helpful for most of the feature set but you could equally explore OpenMaps and Leaflet.

References

Google Maps API
Helpful tutorial by Colby Fayock

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

Ruby PHP Python Java Node.js Angular React JavaScript Vue.js

Difficulty

medium

Contributed by

Kevin Cunningham

Developer and Educator

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

medium

Random color palette generator web app

In today's world, design is everything. Choosing the right color palette for a product or website will help evoke different emotions you'd like your audience to experience. You'll build a full-fledged random color palette generator web app using Colormind API, which can be used for both web apps and mobile apps.

JavaScriptReactAngularVue.js

medium

Mortgage calculator web app

Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!

JavaScriptReactAngularVue.js

easy

Build a screenshot pipeline

Set up a CI/CD workflow which will produce a screenshot of your homepage and keep it updated as you keep changing the code. This kind of always-up-to-date screenshot can be useful for your README or as the basis of marketing materials that include screenshots of your website. You can even use these images to perform [visual regression testing](https://medium.com/loftbr/visual-regression-testing-eb74050f3366)!

Node.jsReact