▼
Streaming live at 10am (PST)

Search engine / Marketplace MVP with webflow and algolia

Community resources Webflow Tips
#1

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:

1_tXaCbEij6TB6f22IzuTVhA
1_tXaCbEij6TB6f22IzuTVhA800×564 2.97 MB

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

Cademy System Diagrams@2x
Cademy System Diagrams@2x2040×1686 343 KB

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 :man_technologist:t2:

9 Likes
#2

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.

#3

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 :slight_smile:

#4

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

#5

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

#6

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.

#7

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:

image
image1406×985 423 KB

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:

image
image1583×1181 439 KB

#8

Looks great! I am wondering how did you build the registration / login system?

#9

The app is now rebuilt from scratch in React.js with a serverless + mongo db back end. But the initial version of the website (the MVP) used to have a user signup and login system powered by Stacker (for signup and login) + Airtable (as the database , although google sheets is the better option if they added support for it now) + Zapier (to update the webflow cms whenever users would make changes to the content they created)

1 Like
#10

Thank you! I am also looking into creating an MVP based on no code solutions. Thank you for your reply I will look if Google sheets works well as a db :slight_smile:

#11

Hey Adrian,
Great website, always good to see people in the UK. I have seen the new website and it looks fantastic - well done. I was wondering if the new website is still built in webflow?
I would love to create a search similar to yours on my site.

Thanks
Tim

#12

Hi Tim,

No we only used webflow for the first couple of months whilst we were testing the concept. We’ve now re-built the site from scratch coding it up ourselves rather than through a website building service.

Our search experience is pretty much the same now as it was in our initial Webflow site. It’s driven through Algolia so it’s independent on webflow and we just plugged that into our new website when we transitioned. Check out step 6 in this blog post here: https://medium.com/cademy/how-weve-built-a-search-engine-marketplace-mvp-in-1-week-with-almost-no-code-9c5d8430657c

^^ I essentially outline how we’ve set up the search and I even have links to the code.

Good luck :+1:
A

2 Likes
#13

This post is awesome, not sure how I missed it back in April when I was searching for similar information. Bookmarked for future reading - thanks!

#14

Thanks @Andy_Vaughan , kind of you to say that :blush:

1 Like
#15

Out of interest, do you know if this concept could extend to a “map search”? I.e. a user plots a point in the map, defines a radius, and results from within their desired radius would show? Appreciate this might be a different topic altogether!

#16

Actually, the initial version of the search we built was supporting it. We don’t have it now because we didn’t see enough users using it to justify having it there. The user could enter an address and we’d look up results within a 10 mile radius of their entry. However, that whole functionality was a custom built using Algolia and the Google Maps API together. I’ve got a bit of the behind the scenes outlined in this blog here: https://medium.com/cademy/map-view-changelog-10-a64e4082aea4

It’s a relatively complex piece of functionality for a beginner so might not be the best thing to attempt if you’re noob programmer like I was at the time. I needed help from a more experienced coder at the time to get that working.

As far as I know, you can’t do that with Webflow + Algolia , the way we’ve built it at least. I’d try some other web app builders like Bubble as it might have a plugin already built to achieve this.

1 Like
#17

That’s really interesting, thanks so much for that. It’s an idea I’ve had for a project of mine (which has unfortunately been on the backburner for some months now) - I’ll give it a read through later as it might spark some inspiration :webflow_heart:

#18

hi Adrian,
Yes i read through this. Wanted to do the same in webflow if possible. Do you think that webflow therefore is not fit for this type of website?

#19

As far as I know you can’t do it in “pure” webflow, no

#20

Hi Adrian,

The updated site is great - so clean and fast.

I’d like some advice if you can spare a minute. I want to learn to build web apps and I’d love to try go down the same route as you have with using React with a serverless + mongo db back end if I can produce a similar outcome to you. I’ve been researching React and serverless and I’ve found a few good resources but before I jumped into one I wanted to ask you if you did a course online or how did you go about learning it? Also, which serverless provider did you go with?

Thanks for your time :pray: