Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
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:
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).
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.
In this section, I’ll show how to use windowing (via React-Virtualized) to make 380+ images load quickly in a list.
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.
In this section, I’ll show how to setup pagination, client-side filtering, and general responsiveness.
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 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.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.