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.
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
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!
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:
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.
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:
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)
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.
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.
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!
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: Map view 🗾 — Changelog #10. We are excited to announce a new way to… | by Adrian Binzaru | Cademy | Medium
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.
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
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?
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?
