How we’ve built a search engine / marketplace MVP in 1 week with almost no code

A few months ago, I needed to find a local course. It took days to search, compare and decide on an option. I had to make calls to local course providers to check the necessary information that should be readily available online. So we decided to build a platform that allows you to search and book local courses easily. But first, we need to launch a prototype or MVP (Minimum Viable Product). The sooner we launch, the sooner we’ll learn which of our assumptions are wrong.

Here’s how we built the MVP in 1 week, for a total cost of $16, using almost zero code.

I decided to write up the process because I think it should actually take a day to get done start to finish if you know what to do. It took us a week because we had to experiment and figure out things for the first time. If you find this guide interesting or helpful, give it a wee 👏 so I know it’s worth taking the time to write these.

Plan / summary:

1. Scrape some of the local course providers’ websites using Webscraper.io
2. Clean up the scraped data in Google DataPrep by Trifacta.
3. Clean up the data in Google sheets.
4. Add a picture to each course listing by querying the Unsplash stock photo API using OpenRefine.
5. Import all clean data into the Webflow CMS.
6. Export Webflow CMS data and import into an Algolia index.
7. Configure Algolia instant search on the Webflow page.

1. Scrape some websites for data

After testing a dozen services to scrape the data, Webscraper.io worked best for our needs. Instant Data Scraper was good on most websites, but our sites were especially old and badly structured so it wasn’t working well enough. Import.io was great but the limit on the trial was low and the licence was over $15k! In the end, we decided to pick Webscraper.io as it was free, flexible and had the added option of being able to automate the scraping in the cloud using their paid service. There’s plenty of tutorials on how to use it here if you’re looking to get started.

2. Clean scraped data using Google Cloud Platform DataPrep by Trifacta

Once we got the CSV files with all the scraped data, we had to clean it up and get it into a manageable state. This is where DataPrep comes in.

We were able to clean up over 2,000 records in just a few hours, using a simple user interface. The best overview of the platform I’ve found is here:

By the end of the process, we had a clean and usable recordset.

3. Tagging in Google Sheets

Now that we have the data, we needed to slap a front end on top with a simple search feature and we’re ready. The initial plan was to use Sheets2Site to do just that. Unfortunately, there was no option to pay monthly, and we didn’t want to dish out $800 for an MVP. We had to build something ourselves, but first, more cleanup.

At this stage, we had two problems:

1. We needed to assign categories to all the courses so they’re grouped in a way that makes sense on the site.
2. The listings were very plain. We just had 2,000 spreadsheet rows. There’s no way to make that attractive to anyone who’s browsing.

Our solution was to use google sheets and manually go through all 2,000 records, pick a keyword from the course title and assign a category. Needless to say, it was painful. It took us half a day. We automated this process two weeks later, but initially, it worked and got us where we needed to be quick.

4. Enriching our data with images

Once we had the clean and tagged data, we needed to loop through each record in our spreadsheet and query the Unsplash API using the keyword we selected for each course. We wanted to write the script in google sheets itself, but we decided from the start to build the MVP using out of the box tools where we can to move as quickly as possible. So we used OpenRefine for the job. Here’s a video from them that outlines pretty much what we’ve done:

5. Creating a front end using Webflow

Time to build! We got a simple website live in just a few hours using Webflow, which was magic. We simply created some basic pages and imported the csv data as CMS items.

We created a design for the course page and thanks to Webflow’s Collection Pages we were good to go. Here’s an example of a course page with the contents coming from the Webflow CMS:

6. Adding advanced filtering and searching to Webflow with Algolia

At this point, we were good to launch. There was only one problem. The search offered by Webflow was too basic. It wasn’t designed for filtering in any shape or form. It’s just a basic site search. To solve this, we had to get creative again.

Until now, we were able to get away with zero code. But to get this working we had to code just a tiny little bit.

We exported our CMS items as a csv file from Webflow and imported the data into an Algolia index. Algolia offers something called InstantSearch.js, which is a lightweight template for its searching functionality. We went through their “Getting Started” docs and had a basic version of the search functionality working in no time. Find some rough code of our first working prototype here.

7. Add Algolia to Webflow

Once we had the search code working, we simply used an embed component in Webflow to hold our custom code and we were done. Here’s what the final product looked like once we got it cleaned up and embedded into our Webflow page:

Let us know what you think of this update by giving it a wee 👏 or posting a comment. Don’t forget that you can keep in the loop with all our updates on Twitter, Instagram, LinkedIn, Facebook, and on our blog. Or sign up below for email updates: