Search engine / Marketplace MVP with webflow and algolia

[adrianbinzaru]

Hey folks, I built a little marketplace MVP that allows you to find a local course easily. You can find it here: https://www.cademy.io

Here’s the final result:

Here’s the rough outline of how we got it done:

Here’s how it’s made:

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.

I’ve written more details about each step here if anyone’s interested: https://go.cademy.io/70d

If you got any questions please comment here or on the medium post and I’ll happily answer.

Thanks
Adrian

[Diarmuid_Sexton]

Hey Adrian,

This is a really cool concept and very inspiring how you’ve pulled it all together using difference tools and minimal code. Will be interested to see how it progresses and how the final product looks, feels and works.

[adrianbinzaru]

thanks Diarmuid. I’ve been expanding it quite a bit the last week or so. We’ve added the ability to sign up users and for them to list courses onto the platform - all without code (powered by airtable, stacker, zapier, slack and wayscript). Maybe I’ll do a writeup at that point

[charliebay (Charlie)]

Hey @adrianbinzaru thanks for sharing! I think Algolia is a great tool and thanks for laying out your detailed process.

I’m really struggling at the moment to adjust the CSS of the Algolia search input - do you have any advice on how I do this? Would happily pay for some help on this as it’s driving me mad and I want to get this implemented ASAP!

You can see the current draft version here: https://goformaco.webflow.io/home-v2

[adrianbinzaru]

Happy to assist @charliebay . What are you struggling with ?

[charliebay (Charlie)]

Hi @adrianbinzaru - thanks for the response. I’d like to customise the style of the search input and the menu items. For the moment I’ve stuck with the Algolia CSS.

I was able to successfully do this with the hits results but when I tried to apply a class to the search bar it didn’t work (have removed the CSS stylesheet when testing). I’ve set a class where I want the search bar to be larger and added some margin around the text:

<div id="search-box" class="home-search"></div>

I’ve also tried other methods like

<input type="search" id="search-box" class="home-search"></div>

I was looking at how I add the CSS elements into the javascript sections but again, couldn’t get this to work.

For the menu’s as well, I wanted to try and put them as a horizontal menu across the page rather than a vertical menu down but couldn’t find a way to do this.

[adrianbinzaru]

OK, i can see that you’ve added the home-search class to the search bar element. I’m not sure I’m understanding you correctly, but i think what you’re trying to do is to make the actual search input bigger. If that’s the case, you need to target the actual input with the css selectors. So instead of setting your styling in your css on the .home-search class, do it on the .home-search input. Here’s how I used that selector to turn the input green:

To display the filters in a row you should target the .ais-Menu-list class and use the flexbox property to show items in a row rather then vertically. Here’s a quick example of how i made those filters appear in a row in your site: