Inspiration

Both of us love traveling, but we sometimes have trouble finding new places to go. We thought of RoadCode as a way to find new places for us to go in a roadtrip, without requiring either of us to do research or planning.

What it does

RoadCode generates a road trip based on the user's preferences. The user will enter their starting location, the type of locations they are interested in (such as museums, battlefields, theaters, etc.), and how far away they would like to travel. Using this data, RoadCode generates a unique roadtrip path specifically designed for that user with 25 random points of interest and a route to a random destination.

How we built it

We created this project as a NodeJS web application, using JavaScript (With jQuery), HTML, and CSS, along with several APIs. We used the Google Maps API to do the routing and mapping, OpenTripMap API to generate points of interest, and onwater.io API to detect if a point is on water or not. Digital Ocean was used to host the website.

Front-end

HTML
CSS
jQuery

Back-end

NodeJS
JavaScript
Digital Ocean

APIs

Google Maps API
OpenTripMap API
onwater API

Challenges we ran into

The main challenges we faced were trying to work within the limits of free API plans, learning brand new frameworks, as well as designing a minimalistic user experience.

API Limits

For example, figuring out a way to procedurally generate points of interest along the route with limited API calls proved to be challenging. While generating nearby points of interest at every point in the route would result in the best road trip map, the number of API calls it would require would exceed the limits of our free plan. So instead, we decided to use a heuristic solution: divide the route into segments, and within each segment, randomly, select one point to generate points of interest around. This resulted in a road trip that hit many points of interest, whilst using as few API calls as possible. We used similar principles with our other API calls to create solutions that gave acceptable results while minimizing the number of API calls.

New Language and APIs

We also faced the challenge of needing to learn and implement completely new concepts. Before this, neither of us had any experience with jQuery or any of the above mentioned APIs. We were also both beginners in JavaScript as well. Learning and trying to understand the documentation of the various APIs was a struggle, especially OpenTripMap since it wasn't documented well.

User Experience

Finally, designing a user interface that was pleasant with this many parameters was a difficult challenge for us. Our project has over 30 different filters that the user can select! In the end, we settled with collapsible menus that declutter the interface by hiding unwanted checkboxes, creating a pleasant user experience.

Accomplishments that we're proud of

It works!

We are most proud of getting our project to work in the first place. While the project seemed easy at first, it proved to be more challenging than anticipated with the usage of 3 different APIs. Some of our algorithms (especially the algorithm to generate random waypoints) were extremely buggy and prone to crashing, but we managed to get these algorithms working and in a deployable state. Our project is the culmination of many hours of grueling work over the course of 2 days, and we are extremely proud of it.

User Interface

Additionally, we are also proud of our UI, which was designed from the ground up without any prebuilt frameworks or templates such as Bootstrap. With no templates, we created a user interface that is functional, animated, sleep, and pleasing to the eye.

What we learned

APIs

We learned a lot about using APIs. How to call them, how to use them, and most importantly, how to design a program so that APIs are called as infrequently as possible to minimize cost. Neither of us have ever used this many APIs this extensively in a project before, so it was a challenging but rewarding experience.

JavaScript and jQuery

In addition, we learned a lot about JavaScript and jQuery as it was the first time both of us used it in a project. We mostly learned as we coded, referencing documentation as problems arose. Before this project, we both knew absolutely nothing about jQuery or any of the used APIs and now, we can confidently write programs in both!

Modern Design Patterns

Along with the aforementioned, we had to do a lot of research to find what made a certain element look "modern." We analyzed a lot of different companies (Google being one of them) and tried to find what made their elements look "modern," then implemented these patterns into our own UI.

What's next for Road Code

We both love Road Code, so we plan to continue developing it. Creating a whole trip without any planning is appealing to us, so we can see other travelers feeling the same way. We plan on improving the point-of-interest finding algorithm, adding more route configuration options, and adding global support. With these improvements(and maybe with some paid APIs), we believe that Road code has the potential to become extremely useful for any road trip enjoyers.