BucketList App: Setup + Architecture + Basic Components (part 2)

This tutorial is part of a blog series on building an airbnb-esque interface for exploring New York Times travel recommendations. In this part of the series, I’ll show how to build the overall components and interface. Here’s what will get built:

Demo: http://nytrecsalaairbnb.surge.sh/ (not mobile friendly yet)

To build this, we will:

  • Export the data from Google Sheets and convert to JSON
  • Set up the project using create-react-app
  • Install UI libraries
  • Setup fonts and overall design theme
  • Create components for the headers, cards, filter bar, and a few others
    • Build the header
    • Build the filter bar
    • Build the parent collections of cards container
    • Build the cards to display the location data

Above all, this section will try to mimic the Airbnb exploring interface as much as reasonably possible…a la:

Export the data from Google Sheets into JSON

The first step toward building this interface is getting the data out of google sheets and into JSON that this app will be able to easily consume. This is simple as downloading the data as a csv and converting it to json using convertcsv.com. For future articles in this series, I will show how to get the data directly from Google Sheets (via the simple stack).

Set up the project using create-react-app and set up basic folder structure

I created the project using create-react-app. There are many tutorials about how to do this so I’ll skip covering those steps.

There are many different ways to structure React projects. I really like the simplicity of having one folder for containers (that will fetch data and pass it as props to components) and one for components (that will consume and display data given them). Dave Ceddia has a good article about this simple structure. I agree with him that “Simple is better. Start simple. Keep it simple, if you can”.

Source: https://daveceddia.com/react-project-structure/

Install UI libraries

I next need to install the UI libraries I’m going to use. I will recreate the Airbnb interface with material-ui and material-ui-icons. Material-ui is the most popular React UI library out there (and there many great ones). I find this library extremely intuitive and well-documented for making attractive and functional interfaces. I install both using Yarn and, so, my dependencies look like this:

Setup theme + styling

Material-ui looks quite nice out of the box with its sleek Roboto font and contrasting pink and purple primary and secondary colors. One of the cool things about material-ui is how easy is it to tweak and customize the global style settings. Rather than changing the color on each every single button or h3, you can set their colors, sizing, etc. within your app.js and then have these changes propagate through your app using React’s context. This will, in theory, allow you to make UIs that look more consistent between pages and views.

I want the styling of this app to be as close as possible to AirBnb’s elegant design for their web app. Airbnb uses the very attractive, but unfortunately, proprietary sans-serif Circular and Cereal fonts.

I asked the internet (well, Reddit + StackExchange) which open source font is closest to Cereal and most people said Montserrat, Nunito Sans, or Poppins. I decided to go with Poppins for this app. Using Poppins as my font was as simple as putting this into my index.html:

And the following into my app.js:

Next, I wanted to mimic AirBnb’s colors as much as possible. They use a mix of blacks, greys, pinks (Rausch), and greens (Kazan 🙄).

source: https://medium.freecodecamp.org/designing-in-color-abd358660a7b

To utilize these within my material-ui theme, I put these in my theme, within app.js:

Throughout this app, I’ll keep my styling DRY by using the global theme settings as much as possible. You can read more up on material-ui’s theming here.

Create components for the headers, cards, filter bar, and a few others

React is, of course, all about components. So it’s necessary to break down the app into components. In the spirit of ‘start simple, keep it simple’, I think the Airbnb interface can be broken down, initially, like so:

I’ll very likely break some of these components, like the filter bar, down into many other components/containers but this initial mockup gives a great starting point.

Building the Header

The header consists of a logo, a search bar, and some menu links. Here’s how I recreated it (I’ll comment in the code):

Building the Filter Bar

The AirBnb filter bar consists of some really intuitive/attractive filters for sorting through thousands of properties. In my little app with ~423 places, there’s no need for this much robust filtering. But I will build out a filter that lets users sort by year the articles were mentioned.

The filter bar component is really similar to the primary header component and both use AppBar, ToolBar, and Outlined Buttons. I will build out the year filter and pop up modal in a future blog in this series.

Displaying the Cards

Now that I have a nice header and filter bar in place, it’s time to actually display the data using Material-ui cards. I will make two components for this: LocationCard.js and LocationGrid.js.

First, I need to get the data in App.js and save it in state.

Next, I’ll build the LocationsGrid component, which primary serves to map over the locations json and create the individual cards.

Creating the location cards (LocationCard.js)

The final step in this part of the tutorial is creating the individual cards for each New York Times place.

As this tutorial is already quite long, I’m going to skip the beautiful carousel slideshows gallery (and save it for another tut).

Here’s what I came up with:

Here’s how I implemented the card using Material-ui:

And we’re done here. This gives a great starting point with which to continue building on. Future tutorials will cover:

  • Making this responsive
  • Adding the Map toggling + Map

  • Creating user favoriting + sign up + log in
  • Information Drawer similar to the AirBnb’s help drawer

  • Filtering functionality (by year which the places appear in the NYT list)
  • React-virtualized so that the map cards load quickly

Stay tuned for upcoming tuts!

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