Who Said That: A tweet guess game implemented with serverless stack
--
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)
- Hosting: Netlify
- Backend: Netlify functions
- Data store: Lambda Store (Redis)
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.
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.
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.
- Netlify functions worked seamless for me. The functions read from environment variables. They do not require a separate deployment, you deploy functions together with your site. The API Gateway and its configuration is automated. Netlify functions simplifies the development with FaaS as it combines AWS Lambda, API Gateway, AWS SAM. You can also monitor logs of each function inside Netlify dashboard.
- Local development helped me a lot. Using netlify CLI (command ‘netlify dev’), you can run the website and functions locally. This is especially helpful while you are testing and debugging the functions.
- I used my own domain (whosaidthat.net) that I registered somewhere else. Adding custom domain through Netlify dashboard did not work for me. The related documentation was too concise. Anyway, I forwarded my domain’s dns manually.
- The enabling TLS was very smooth and easy. They use Let’s Encrypt at the background.
- A little surprised that the analytics service is not free where people can easily integrate Google Analytics. I would like to see some basic metrics in Netlify dashboard.
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.
