Introduction
This is a detailed tutorial for making a full stack app using Python for the backend and react for the front end. This tutorial will cover nearly every part of the process nearly line by line at the end of which you should have a fully functional app and a solid understanding of the basics of a full stack development process.
Disclaimer: I am learning most of these skills as I write this tutorial. Please give any feed back to help me fix mistakes.
I was inspired to make this as when I was trying to learn these skill I had to keep jumping back and forth between and bunch of different tutorials that all covered small parts of the process and then had to fill in the gaps myself. I wanted to make a tutorial that covered everything so that it could be used as a all in one resource (at least if you are using this stack)
Covered Topics
As this tutorial shows nearly every step of creating a full web based api and app there are many tools involved. This is a list of most of the tools that will be used. There is no guarantee that the tutorial will cover them in detail, but it will explain how to use them in service of this project.
- Git
- VScode
- Python
- FastAPI
- SQLite
- SQLalchamy
- Pytest
- Numpy docs/sphinx
- UV
- uvicorn
- Docker
- React
- Next
- More?
App Overview
The app that this tutorial will show is DK app, DK is my and my partners initials. I wanted to make an app that we could use as a synced grocery list, and started adding features like todo lists, recipes, budgets and more.
The app has to main parts. The backend is a python server using fastapi running on a uvicorn serving in a docker image. This will take web requests to save or request data. The frontend will be a website in react and hopefully an app in react native that can be used to access the grocery list, todo list etc...
The complete app can be found here: LINK
Tutorial Overview
These are the main chapters of the tutorial:
- Introduction
- (what your reading now)
- Setup and installation
- This will cover installing and setting up VSCode, git, and more.
- Configuring VSCode and git, and creating the initial project directory
- Server
- This will cover making the fastapi server along with the database
- Web App
- This will cover making the website version of the app
- Native App
- This will cover making the mobile app version
- Appendix
- This is a collection of various extra resources
Feedback
As I said I am not an expert at these tools, this is just me documenting each step I took to make DK app in a tutorial format. If there are any mistakes, questions, and anything else you want to add you can send an email here: