Introduction – Why I built the project
This post will give a brief overview of how I built my TO-DO App and why I chose the specific technologies/frameworks to execute the project.
First of all I built a TO-DO App because I wanted a simple project that didn’t need a lot of ‘business logic’. This is because I felt a massive weakness in my professional journey was actually setting up and executing a project from scratch. In my day to day job I worked on a legacy project where the senior engineers had done all the setup of the app environment and I just followed instructions to install and run the project. The work involved with setting up the project included choosing frameworks and packages and understanding how to best set them up.
The TO-DO application is made up of two separate applications a client app (frontend) which handles the UI and a server app (backend) which handles the processing of data and business logic. To bring the two separate applications together the ‘frontend’ app sends HTTP requests to the ‘backend’ app and then processes the response for the end user. I chose to do this because I wanted to use this design structure as I had no practical experience of setting up an application like this.
Below I will list the main technologies I used to build the project and why I chose them.
FastAPI
For this project FastAPI handles all the business logic of the application e.g. displaying tasks, creating, updating and deleting tasks. FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints. I had completed a tutorial using it and had enjoyed using it so wanted to build my own project using it.
React
The frontend UI is built using React with the addition of other packages such as axios to send HTTP requests and bootstrap for UI features. I set up the react project using the npm package create-react-app so I had a ready-made project ready to go. Create react app also comes with commands such as npm run which runs the react app on a web server on port 3000 for ease of development and also has a build command which packages the application in to static files ready for deployment to a production environment.
Postgresql
The database I used for this project is Postgresql. Postgresql is an open source relational database which I had used in the past so I had it already installed on my Ubuntu machine.
Docker
I created docker images for my frontend and backend application. To run the images I then used docker compose to build and run the app in development. I wanted to learn Docker as I had no clue what it really was or the power of using docker. After working with it I really like using it and look forward to using it in future projects.
Pytest
I used Pytest to produce and run my integration tests for my backend FastAPI application.
Alembic
I used alembic to set up the database tables needed and to run the necessary database migrations for my backend application.
SQLAlchemy
I used SQLAlchemy as an ORM so I could make requests to my database using Python code instead of SQL. SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL. I had used SQLAlchemy in my previous corporate job and liked working with it so included it in this project.
Git
I used git for version control. I specifically use Github to store the code as I have an account there
Github Actions
I used Github actions to build a CI pipeline so whenever I pushed code to the Github repository it will build the project and run the integration tests inside a ‘runner’. You can then see if the pipeline succeeds or fails. If it succeeds you can go on to deploying the app if it fails you can then make a fix so the CI pipeline passes.
Digital Ocean
I used digital ocean to host my VPS so I could have a production version of my project which could be accessed on the internet. I have used digital ocean before so already had an account set up there.
Gunicorn
I used Gunicorn so I could run my FastAPI project in my production environment. I set up a service on my Ubuntu VPS so this runs Gunicorn in the background without needing an active terminal window. Also when the code is changed I can restart this service so Gunicorn runs the updated FastAPI application.
How it works simply is Gunicorn works as a process manager listening to a port and IP and then transmits the communication to the worker processes running the Uvicorn class for FastAPI.
And then the Gunicorn-compatible Uvicornworker class would be in charge of converting the data sent by Gunicorn to the ASGI standard for FastAPI to use it.
Nginx
I used Nginx for two ways in production.
First to run my static files that are created as a result of running npm run build in my create react app application.
Second as a reverse proxy so requests that are meant for the backend application get forwarded to port 8000 where my Gunicorn process manager is listening and can forward the request to my FastAPI application as explained above.
JWT
For authorization I used JWT. These are produced by the backend FastAPI application when a user successfully logs in and are stored in the users localStorage so the client can send the JWT in the request headers when sending a HTTP request to a secured endpoint.
Conclusion and links
The project is still a work in progress in that I will be adding more features so I can have practical understanding of how to build complex features.
To see the project in production please go to https://garethbreeze-todo-app.xyz/
To see the code repo go to this link https://github.com/garethbreeze1993/to-do-app
In later articles I will document some of the challenges I faced while completing the project.