Build a Bucket List Travel App with React and Material-UI

The New York Times has published a list of ‘places to go’ over the last 7+ years. This list features a well-curated list of 40-50ish places that they recommend people consider for their travels. The top of the list often emphasizes ‘up and coming / off the beaten track’ places like Mexico City, Ghana, Houston, or the Albanian Coast. I love reading through the list each year and mentally flagging places on it to go to (or seeing which ones I’ve already been to and patting myself on the back 😜).

I’ve long wanted to have a fun way of exploring all these ‘places to go’ on a map and to be able to save my favorites. I can imagine something like a simple clean Airbnb interface that would let people explore the places on a list/map, filter by year, learn more, and bookmark their favorites. So that’s what I’ll build in this short tutorial series: A New York Times places-to-go meets Airbnb mashup built with React, Material-ui, and Firebase. I’ll break the tutorial series into a couple parts like so:

  • Get the data

I’ll need to get the lists from New York Times pages over the last 7 years. I figure I can’t get in trouble by using a list of places in the world but would get a quick C&D for using their content. So I’m going to pull the actual place data from WikiVoyage and link to their pages (per Wikivoyage terms).

  • Setup the project and build the core user interface

I’ll use Create-react-app, React-router (4), and Material-ui to do this. This section will explore the power/ease of Material-ui, React, and React-router for building attractive interactive user interfaces quickly.

  1. Build the pages and components

I’ll need to build a variety of components to make this app look and work reasonably close to Airbnb. This will include things like list items, filters, and sliders. I will follow the latest best practices for React patterns based off articles like Reactpatterns.com.

  1. Create the map-ui and event handling

Google-map-react is what I’ll use for the map components and handling map events like hovers. This section will cover how to create these in an organized and clean way.

  1. Setup the user favoriting functionality with firebase

The main purpose of this app is to inspire us to travel to new places. We need bookmarking to do this and Firebase is a simple way to do this within the React world. This section will cover creating user accounts and saving/retrieving user favorites.

I hope this tutorial teaches and inspires you to build all sorts of web apps. Please stay tuned for upcoming sections.

Kyle Pennell
Kyle Pennell is a marketer and writer with a variety of technical chops (JavaScript, Google Sheets/Excel, WordPress, SEO). He loves clear and helpful copy and likes automating things and making web apps (mostly maps). Found at kyleapennall.com and many other digital spaces