How It's Made

An overview of the software stack for this website

Hardware: AWS EC2 Instance

The backend software is being run on an AWS cloud server. It's relatively easy to configure and most importantly free! Find more imformation about AWS EC2 here.

OS: Linux Ubuntu 22.04

The server is running Ubuntu 22.04. Although there's a more up-to-date stable version of Ubuntu, I'm partial to this version. Find more information about Ubuntu here.

Backend: Nginx

Nginx is a reverse proxy server that tells the server to point HTTP traffic to the FastAPI application. It also handles HTTPS. Find more information about Nginx here.

Backend: FastAPI

FastAPI is the true backend of the website and the glue that holds everything together. It routes endpoints, handles security, renders HTML templates and JavaScript, and much more! It's all written in Python which is nice too. I've used FastAPI a lot recently and I'm very happy with it's capabilities. Find more information about FastAPI here.

Frontend: Static HTML, Javascript, and CSS

Rather than use a frontend framework like React or Vue that is component based and uses a virtual DOM (overengineered for a simple website like this), my FastAPI endpoints return static HTML templates and JS. This approach is much simpler and requires less code, and I have been pleasantly surprised with the level of capabilities possible with this approach. Find more information about static html here.

Frontend Styling: Tailwind

Tailwind is a CSS library that provides styling tools easier to use than vanilla CSS. There's an extensive library of Tailwind keywords that you can add inline to the class attribute of an HTML element and Tailwind will compile them into CSS. Tailwind has a bit of learning curve, but once you get the hang of it, it enables fast-paced development of a UI that can look like just about anything. Find more information about Tailwind here.