Serverless Flashcard App

Summary

While studying for the SAA-C03 exam, I decided to turn my notes into flashcards. At the same time, I wanted to get some hands-on experience with AWS and Python. I built an app that gives me three flashcards at a time using definitions from my notes.

Link to the App here

Architecture Overview

Technologies and Tools

This project uses the following technologies:

• AWS S3 (for storing CSV to be imported to DynamoDB)
• DynamoDB (table for the flashcards)
• Lambda function (to read items from the DB)
• Amazon API Gateway
• Docker container, hosted on Lightsail
• Programming languages: Python, HTML, CSS, JS

Procedure

Rather than going step by step, I'll link to the references that I used to complete the project. In a general sense, the steps taken are as follows:

1. Create flashcards in CSV format.
2. Import the CSV into DynamoDB.
3. Create a Lambda function, and an API Gateway to trigger it.
4. Build a Flask app that retrieves data from that API and makes flashcards out of the items.
5. Containerize the application.
6. Push the container image to Lightsail.
7. Resolve DNS issues

References and Resources

• Importing CSV into Dynamo DB (AWS Documentation)
• Lambda/API Gateway Tutorial
• Github link with code for Lambda, Flask app
• Containerizing the Flask app
• Pushing container to Lightsail and deployment

Challenges and Solutions

I had two major issues when working on this:

The Lambda function returning: "Object of type 'Decimal' is not JSON serializable." After some research, I found that this is because DynamoDB was returning the index values (which should be integers) as decimals. Solution here.

DNS issues. I'm using Cloudflare as a proxy, and me enforcing "Flexible SSL" somehow made the app unreachable using my domain name (although it still worked using AWS's URI). If I switched to "Strict" SSL, the app would show an Error 404 , and Cloudflare would return an Error 522 when trying to access my static website. The fix for this was to tell Lightsail to allow connections to the app from a different public domain name solution here, and to create a Page Rule in Cloudflare to enforce flexible mode only on the static webpage, not the entire domain.