Who Said That: A tweet guess game implemented with serverless stack

Sven Anderson
Jun 29 · 5 min read
Image for post
Image for post
Easy one, right? :)

In this article, I will guide you how I have implemented WhoSaidThat using the serverless stack.

WhoSaidThat is a game where the player tries to guess the author of a tweet. The game collects the latest tweets of the most popular twitter users. Check it out here: https://whosaidthat.net/

And here the source code: https://github.com/Lambda-Store/whosaidthat

Tech Stack

Yes, the application will be pure serverless. But this time, I will try Netlify instead of AWS Lambda+S3. So here the stack:

  • Client side: React (CRA)

Why Netlify?

Netlify is one of the best examples for the platforms which helps developers to focus on their application rather than dealing with servers and infrastructure. Everything I do in this blog is also possible using AWS services but Netlify simplifies things by hiding complexities and automating things. With Netlify, you can rapidly prepare your work for production including processes like continuous deployment and TLS certificates for your web site. I will share my experience regarding Netlify at the end of the article.

Why Lambda Store (Redis) ?

I believe Redis is the perfect choice for most of the serverless applications with its very simple API and low latency. Redis clients and connections are very lightweight so they are cold-start friendly. Among hosted Redis services, only Lambda Store is serverless, so I will use it for my application.

Application Design

Our game will be a single page application. It will not require any authentication so anyone will be able to play it without signing up. But still it will have a leader board, so one can enter her name to save her score to the leader board.

Each question will be a multiple choice question, there will be a tweet and three choices (authors). If the user clicks on the actual author of the tweet, the game continues with the next question incrementing the score, otherwise game will be over.

We will parse questions periodically from Twitter API. I had to create a Twitter developer account, and the good news is Twitter is generous enough to allow you to get timelines of people through their API for free.

Image for post
Image for post

Data Model

I will cache the tweets in a Redis list. The size of the list will be 500. Every three hours, I will parse the latest tweets of celebrities and trim the list. For each question, I will take a random tweet from the list. I will keep the images and names of the authors in a Redis hash. When game is over, user can save her score and see the leader board.

Image for post
Image for post

Functions

Netlify supports functions in NodeJS and GoLang. I implemented my functions with Javascript.

parsetweets.js : This function runs at most once every 3 hours interval. It reads the latest tweets for each author defined in the system and saves into the tweets Redis list. If the size of the list exceeds 500, it is trimmed from the tail so the oldest tweets are deleted. See the function code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/functions/parsetweets.js)

getquestion.js: This function fetches a random tweet and prepares a question adding two random authors in addition to original author of the tweet. See the function code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/functions/getquestion.js)

play.js: This function receives the answer and returns whether the answer is correct or not. Depending on the response, frontend redirects to getquestion.js or game over screen. See the function code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/functions/play.js)

savescore.js: This function gets the name of the user and saves her score to the leader board. See the function code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/functions/savescore.js)

leaderboard.js: This returns the top 5 scorers in the leader board. See the function code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/functions/leaderboard.js)

Frontend

Frontend of the app is a single page application with React. I created the project using create-react-app. I used the fetch api to call the netlify functions. I added the bootstrap for responsive theming. See the code [here](https://github.com/Lambda-Store/whosaidthat/blob/master/src/App.js).

Deployment & Netlify

Thanks to Netlify, deployment was dead easy. When you push your code changes to your repo, Netlify deploys your app including the functions.

Notes on Experience with Netlify

  • The set-up and deployment was quite smooth. The github integration helps a lot.

Conclusion

This is my first application in Netlify. I should admit that I am quite impressed how Netlify simplifies the development and deployment experience. One more time, I experienced that Redis is a perfect data store for your serverless application as long as you do not need complex queries. I created my app with zero cost (except purchasing the domain name) thanks to free tiers of Netlify and Lambda Store. I definitely recommend Netlify+Lambda Store for your next single page application.

Lambda Store

Everything on serverless and cloud

Sven Anderson

Written by

Product Lead at lambda.store

Lambda Store

Lambda Store is the first Serverless Database for Redis. In this blog, Lambda Store engineering team shares their experiences on Cloud, AWS, Kubernetes, Redis and of course Lambda Store. https://lambda.store

Sven Anderson

Written by

Product Lead at lambda.store

Lambda Store

Lambda Store is the first Serverless Database for Redis. In this blog, Lambda Store engineering team shares their experiences on Cloud, AWS, Kubernetes, Redis and of course Lambda Store. https://lambda.store

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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