I am excited to announce my hackathon project called RoadTrip.FM.
RoadTrip.FM is a site that helps you quickly & easily find nearby radio stations. It’s a perfect addition for your next road trip!
🌐 View the live version of the site at roadtripfm.live
💻 Check out the Github repo at https://github.com/Cool-Runningz/roadtrip-fm:
✨ How it Works
When you begin your search you will be prompted with two potential paths that you can take:
- Manual Search - This option allows you to narrow down your location by selecting the city and state.
- GPS Search - This path leverages the browser's native Geolocation API in order to retrieve the user’s latitude & longitude. When the user’s coordinates have been determined, a map will be shown with a marker indicating their location.
Once a location has been identified, you can click Find Stations to display a list of all the radio stations found within an approximate 50-mile radius. The display is split into 15-mile, 30-mile, and 50-mile sections and sorted in ascending order by frequency in order to provide the user with an easier way to parse through the stations' list.
💡 How I Came up with the Idea
I’ve had the idea for this project for years now. During one road trip, I remember driving through multiple towns and constantly having to manually scan for new stations as we drove in and out of range. If one of the stations went on a commercial break, I would find myself having to go through the same song & dance to try and find a new station to listen to.
It looked a little something like this:
- 📻 Click the scan button
- 🔊 static sounds
- 📻 Click the scan button again
- 🔊 More annoying static sounds to parse through
- 🔁 Rinse, wash and repeat until finally landing on the first station that seems tolerable.
After doing that for the umpteenth time during the trip, I looked over at my husband and blurted out:
“I wish there was a convenient way to be able to find radio stations so that I wouldn’t have to go through this process.”
At that moment, the lightbulb went off and my project idea was born.
🛠️ Tech Stack
- Remix (Full-stack web framework)
- Tailwind CSS (Utility-first CSS framework)
- Heroicons (SVG icons)
- Tailwind UI (Premium UI components designed with Tailwind CSS)
- Headless UI (Unstyled, fully accessible UI components)
- Prisma (ORM to help with database related work)
- Countries States Cities Database (Full Database of city, states, and countries available in SQL format.)
- MySQL Database (Main data driver that makes this whole thing possible)
- React Leaflet (React wrapper around the Leaflet.js library)
👷🏽♀️ Implementation Details
In the following sections, I will describe how I went about implementing this project and will provide a deeper dive into the technical details. The first detail I will share is why the default, max distance of a 50-mile radius was chosen. According to Wikipedia, the average FM reception is 30-40 miles (50-60 km). Based on that, I figured 50-miles would be a good range to work with and provide the users with a sizeable subset of stations to choose from.
🏗️ Phase One: Routes, Boilerplate, and Configuration
Routes
The first thing I did was plan out all of the routes and scaffold them into the project. Conveniently, Remix is built on top of React Router which made wiring up the routing a straight-forward process. This also gave me a nice introduction to Remix since it’s the first time that I’ve ever built anything with the framework.
Boilerplate
After my routes were all defined and stubbed out, I moved on to installing all the project dependencies and configured everything to be ready to be used later on.
Database
I waffled back and forth on what to do and eventually decided to have my own database as opposed to having to rely on external API’s. I decided to use Prisma as the ORM because it made bridging the gap between the backend and working with the database much more comfortable.
Thankfully, there are helpful repositories like the Countries States Cities Database. Finding this gem of a project opened up new doors and provided an opportunity for me to construct the data set I needed.
🚀 Phase 2: Deployment & Build Process
I am a tried and true front-end developer and the thought of having to deploy my first full-stack application was very daunting. Thankfully, Remix provides a Netlify template that made the process a little less intimidating. This template included a netlify.toml file that provided instructions so that Netlify could run the serverless functions.
In order to configure my local development environment, I had to install Netlify's CLI. This allowed me to run the netlify dev command which sets up a local dev server with Netlify’s proxy and redirect rules. I’m new to the whole topic of serverless development, but I find it really interesting and it’s a topic that I definitely want to explore further.
🌎 Phase 3: Gathering the Data
Figuring out how I could obtain the data I needed was one of the trickier parts of this project. I did a lot of research, and, unfortunately, there is no API out there that allows you to retrieve a list of radio stations based on a location. It simply doesn’t exist (at least not that I’ve found). Thankfully, I stumbled across a Wikipedia table that yielded a result of stations based on the U.S. State and I knew I could make something work.
Because there isn’t a pre-existing API that provides a list of radio stations based on location, I had to cobble together data from a myriad of different resources. Once I was able to identify the various services I could use, I was able to stitch them together until they formed into a data set that I could leverage.
👩🏽💻 Phase 4: Development and Design
I chose to build this project with Remix because I’d been hearing a lot about it and figured this would be a great opportunity to dabble and try something new. Because Remix is a full-stack framework, it provides a seamless transition between writing code on both the client-side and server-side. Overall it was a cool development experience and I look forward to learning more and writing blog posts about it in the near future.
Since design is not my forte, I reached for the paid, Tailwind UI kit to make wiring up the UI pieces easier. I am all in with the Tailwind ecosystem and leveraged a ton of the Tailwind Labs packages to help build out the UI for the site. It was well worth the investment.
To add a little bit of flair to the GPS search page, I utilized React Leaflet which is a wrapper around the popular vanilla JS version of the Leaflet.js package. This library allowed me to add the map that you see with a marker and radius circle which provides a nice visual effect for the user.
🔮 MVP and Beyond
I am super proud of what I’ve been able to accomplish for the hackathon, however, there are many more improvements that I would like to make in the future. Below is a list of some items that I would like to add post-MVP.
- If there’s enough traction, work on expanding out the radio stations' search to other countries.
- Create a monthly cron job that will obtain the Wikipedia data and update the database with any changes that have occurred for the stations.
- Add filtering and sorting capabilities within the stations' list page.
- Allow users to be able to choose a larger mileage radius.
- Re-map the genre names to be more applicable since the site is currently outputting the genres that the Wiki table provides.
👋🏽 El Fin
Thanks for reading about the journey to create this project. This has been something that I’ve wanted to implement for a while so I’m happy that it’s finally come to fruition. I hope you like it as much as I’ve enjoyed developing it.
Again, feel free to check out the site and view the Github repository.
