Curated – Behind-the-Scene Part 1

From Spreadsheet to a Algolia

6 min readMar 14, 2019

As a designer, my dev skills are very limited to build a project by myself as I’d wish for. However, some great alternatives already exist!

We have the chance to live in a world where a lot of things can be automated. Take a look at IFTTT or even Zapier. The gap between having an idea an shipping an MVP is quickly decreasing.

In this article series, I’ll explain how I got there to ship the first beta of Curated : https://www.designcurated.io

Designing my database

Some of you may know how to use GraphQL, Firebase and other big names like that. I don’t. So to be honest, I think I’ll lose time if I started to learn that directly.

In the area of these code-free tools, I’ve learned we can make magic things with very little. You just need to take a look at how Pieter Levels is building his set of products like Hoodmaps, NomadList, and others. Others very young people are doing the same things: Take a look at Alyssa X!

So, why not me?

Since I’m planning to use Algolia in the next part, the main idea here is to think of a spreadsheet like a JSON file. What attributes will I need?

This is pretty much how I’ve started:

{
     "title": "Behind-the-Scene – Part 1",
     "type": "article",
     "category": "code",
     "img_url": "http://mydomain.com/myImage.jpg",
     "link_url": "http://mydomain.com/articleLink",
     "date": "03/13/2019"
}

Now that we have a good idea, let’s translate that inside our spreadsheet. As you can see below, nothing fancy, it’s as simple as that! ✨

Capture of the example inside Google Spreadsheet

You already have enough code in this simple template to start your project! Seems crazy but it’s the truth. It’s time for you now to populate your database with the content you want to display. On my side, I went a little bit further. I try to think about how I want to improve my product and what I’ll need soon.

For example, here is a preview of my current JSON:

{
    "title": "A guide to color accessibility in product design",
    "type": "Article",
    "category": ["Accessibility", "Color", "Product Design"],
    "description": "There’s a lot of talk about accessible design, but have you ever thought about color accessibility?",
    "img_url": "https://res.cloudinary.com/aplu/image/upload/q_40/v1548544033/Curated/color-accesssibility-feature-810x810.jpg",
    "img_alt": "Accessible color palette",
    "link_url": "https://www.invisionapp.com/inside-design/color-accessibility-product-design/",
    "date": "2019-01-21T23:00:00.000Z",
    "date_timestamp": 1548115200,
    "date_display": "Jan 24th",
    "curator": "Antoine",
    "curator_handle": "@AntoinePlu",
    "author": "Justin Reyna",
    "author_handle": "@justinreyreyna"
}

I’m switching the category attribute from a string to an array to be able to have multiple categories for a single link. Your images will need to have an alt description to be accessible. I’ve done a bit of conversion for my date to be a timestamp, what is natively used by Algolia. I’m keeping a readable date Jan 24th if I want to use it in my design later.

Converting a Spreadsheet to a JSON

Now that we have everything ready, we need to be able to convert that table into something we can reuse somewhere else. After a bit of research, I’ve found this useful add-on called Export Sheets Data available here.

Capture of the add-on in the Google Store

This will allows you to set up your JSON configuration and exporting it as you want it. I’m avoiding you this process because I’m not really an expert here. I’m just exporting the Current sheet only while ignoring empty cells and exporting sheet arrays. With a tiny amount of cleaning, you can have a valid JSON file ready to be imported.

If you have any doubt, you can still copy-paste your code into a JSON validator and fix what’s wrong in it.

Going full speed with Algolia

Let’s jump on the most exciting part. This is where the magic happens 🎩 ✨

Algolia is a fast and reliable Search as a Service. It gives you all the elements you need to build a search experience that doesn’t suck:

Autocompletion
Managing typos and synonyms
Ability to add some filters or sort by
And so much more!

They give you the possibility to enroll in a free plan with a sufficient quota to kickstart your project. It allows you to experiment with everything you need, for free!

Once you’ve set up your account, you’ll need to create a new index in their dashboard. Now, let’s upload our JSON file to move on the index setup.

Modal inside Algolia to create a new Index

Empty index waiting for you to add some data

Index Configuration

There are few things you need to know about that configuration. You can learn it in their tutorial or follow this quick preview.

First, you need to declare which Attributes Algolia is using to find the content. Remember what we’ve done with our JSON?

{
    "title": "Behind-the-Scene – Part 1",
    "type": "article",
    "category": "code",
    "img_url": "http://mydomain.com/myImage.jpg",
    "link_url": "http://mydomain.com/articleLink",
    "date": "03/13/2019"
}

When you type in the search bar, what Algolia should search? Is it the title, the category or maybe a description? It’s your choice 🤷🏻‍♂️

On my side, for now, I’ll only use the title attribute because this is what we’re looking for in term of relevance in my case.

Defining Searchable attributes inside Algolia’s configuration tab

Note that Algolia retrieves the attributes automatically based on your JSON. If something is missing, there is a great chance you have a problem with your original file.

Then we move on the Ranking and Sorting logic: How do you want to see your content displayed by default?

Maybe you’d prefer to see it sorted by the latest submission? Or ordered by each category first? Whatever the decision you take, there are two things to know :

To apply a sortBy to the content, you need to place it on top of the default Ranking Criteria
If you have a Custom Raking, put it under the Ranking Criteria
DO NOT modify the current Ranking Criteria, unless you’re really used to Algolia

If you need to add some filters along with your search, you’ll need to set up which attributes are used in the facets. It’s similar to what we’ve done two steps ahead for the primary search.

In this case, I’m also defining which attributes are searchable (inside my filters only) or not. It depends on what you have in mind for your design.

In this case, type = Article, Website, Book or Video. And the category are all the topic related to design

As you can see from the Dashboard to my app, I’m displaying all the link types first, acting as a select or radio button. Then I have all the list of the different categories. This part can be very long depending on your content; that’s why I’m using a search to find a specific topic.

The next part will be a focus on building the UI from what we’ve got. We’ll see together how to implement the search, the different filters and push the first version online with Netlify.

✨ Stay tuned! ✨