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.
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.
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:
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!