Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
The New York Times has published a list of travel recommendations called ‘Places to go in [year]’ over the last 7+ years. The list length was standardized to 52 in 2014.
The top of the list often features ‘off-the-beaten-track’ places like Mexico City, Ghana, Houston, or the Albanian Coast. Each item in the lists features a photo or video of the place with a succinct summary of why people should go there. Check out 2018’s list here.
I’m a huge fan of these lists and I’ve long wanted a simple application to be able to explore all the places at once. What I’m imagining is something with a simple clean Airbnb-esque interface that would let people explore the travel recommendations on a list/map, filter by year, learn more, and bookmark their favorites (to hopefully go travel to them later).
And 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 shall call it AirNYT.
I’ll break this tutorial series into a couple of parts:
Getting 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 + Architecture + Basic Components
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.
React-Virtualized + Material-UI Cards for Fast Lists
In this section, I’ll show how to use windowing (via React-Virtualized) to make 380+ images load quickly in a list.
Build the Map and Markers Interactivity
In this section, I’ll show how to build out a ‘toggle-able’ map with Airbnb-esque markers using a library called Google-map-react.
Build Pagination + Filtering + Responsiveness
In this section, I’ll show how to setup pagination, client-side filtering, and general responsiveness.
Setup the user favoriting functionality with firebase (coming soon)
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.
Purpose of this Tutorial
I hope this tutorial shows you how to use React, Material-ui, and Firebase to build client-side mapping interfaces that could be recycled to build a number of applications. I’d love if this code/tutorial inspires people to build all sorts of map-based web apps.
