Static Wine Review website on S3 with Algolia

I’ve been trying out a trial of Algolia lately and I’ve got to say, it’s pretty cool. I’m a little sad that my trial ran out and next tier is $30/month, but you do get that convenience…

If you’ve never heard of Algolia, it’s a hosted search engine that you can plug into your website that allows for lightning fast searching of your data.

For this post, I downloaded this wine review set from Kaggle. Then, I filtered out most of the blank rows (using Python) and kept only the rows where the price was less than $25. In the end, I was left with about 30k rows of data. I exported this as a JSON (you can import JSON, CSV or TSV) to upload to Algolia.

Walkthrough

Once I logged into my account, on the left side, I clicked Indices and created a new Index. I had a couple indices for a couple other projects.

I named the index wine-reviews and clicked Create.

Next I uploaded the JSON file I created earlier.

Final output shown below. From here, you can start searching your data. You can also configure and change how you want the data searched/ranked. For this post, I’m going to leave the defaults. Algolia has a short playlist on Youtube for more detailed information here.

Final step was to create a search API key for the website. This API key will be viewable in the frontend source of the javascript file that will be linked to the index.html document. It is only used for searching because there is another key (admin key) that is used for other operations such as importing/exporting additional data.

On the left on side again, click on API Keys and create a New API Key. I locked down the operations of this key just to this specific index as seen below.

And that’s it! Now I just need to jump over to AWS > S3 > Create Bucket to create a static website. If this is second nature to you, just download the Github files from here and go have fun. Just make sure to update the app.js file with your application ID and search API key.

NOTE: For this post, this site won’t be hosted using HTTPS. If you want to that level of security, you’ll need to set up a CloudFront distribution. I won’t be using a Route53 domain either just going to keep it simple for now.

I uploaded the 3 files from the Github repo here with the default settings.

I clicked on Properties > Static website hosting then specified the index and error documents as seen below.

Switching over to the Permissions tab, I made everything public. You can also do this during upload to save an extra step.

With all the public S3 buckets hosting PII these days, please please please understand the risks of doing this.

Last step is to make all objects in the bucket public.

Now to test! Under the Properties > Static website hosting and click on the Endpoint.

I apologize ahead of time for the lack of CSS to my web developers but there is functionality?? You’ll see how fast it is and because of the following syntax on line 31 in the app.js file, values are highlighted:

_highlightResult.title.value

Here I queried the data to return all the first 20 rows with 95 points. For the logic in this post, only the top 20 will return. It is possible to have pagination with some additional logic — check the documentation or official Youtube channel.

Here I searched for the word Blueberry. Notice how I purposefully misspelled blueberry and it was still able find results? This is called Type Tolerance — a feature of Algolia.

Pretty cool eh? Hope this was helpful to someone out there. Thanks for reading. Cheers!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Interface Driven Development (part 1)

Static and Dynamic Libraries in C

Flutter Getx Translation — Cyberneom

Remote Work & Productivity 2: ONLINE TOP TOOLS

Combin Adds Gender and Language Filters, Proxy, Export & More — Version 2.0

What is a modernized Mainframe to you ? (Part 1)

Engineering Management. Is it a Rubik’s cube to solve.

The prepared developer writes better code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
rav3n

rav3n

More from Medium

Building a Simple Streaming Real-Time Chat App

Machine Learning on AWS and AWS Lambda

Datadog: Monitoring Web Services

A Practical Guide to App Monitoring with Datadog for Python APIs