As a personal project, I aimed to create a back-end based on a relational database to store and serve my experiences and skills. The goal was to use this backend in a portfolio website, both displaying my skills to anybody and allowing myself to edit the data.

From a full-stack template using FastAPI, PostgreSQL, and Vue JS, I developed a full-stack website. The back-end was based on FastAPI, which serves a REST API on top of a WSGI HTTP server (for which I used Gunicorn). Using SQLAlchemy library, I designed the data model, both for user authentication and authorization workflows and to store professional skills. Good practices of using linters/formaters (black, pylint and isort here), continuous integration (with GitHub Actions) and containerization (with Docker) were used.

The front-end is based on React JS, MUI and Tailwind CSS libraries (in opposition to Vue JS that was used in the original template). It uses Axios to communicate with the backend, including for authentication. Here again, good practices of using linters/formaters (Prettier and ESLint), continuous integration and containerization were applied.

I also set up a reverse proxy, based on Traefik, in charge of redirecting API calls properly to the back-end. It uses Let's Encrypt to automatically renew a SSL certificate (needed to enable HTTPS protocol).

The architecture is described using Docker Compose, that includes the back-end, the front-end, the reverse proxy, and other services like the PostgreSQL database.

The back-end was hosted on Amazon Web Service (AWS), using an Elastic Compute Cloud (EC2) instance. A custom domain name (mandin.dev) was dedicated to this website. Finally, Continuous Deployment workflows were setup to deploy automatically the website updates in production.

During this project, which was ultimately abandoned, I learned how to build a real-world full-stack website, from the technical functionalities (e.g. authentication) to the deployment (GitHub Actions, AWS, domain name, SSL certificates, etc.). I also learned how to set up a reverse proxy and how to work with various libraries and technologies like FastAPI, React, and SQLAlchemy.

Source code