This is an implementation of a simple TODO list with authentication using FastAPI, SQLModel and React.
For the frontend we use
- React
- TypeScript
- Chakra-UI for styling
- Vite for building
For the backend we use
If is recommended to first create a virtual environment.
python3 -m venv venv
and activate the virtual environment
. venv/bin/activate
Go in to the backend directory
cd backend
and install the dependencies
python3 -m pip install -r requirements.txt
Note that the dependencies are generated from the requirements.in file and compiled with pip-tools.
If you want to run the tests you also need to install the dev-requirements, i.e
python3 -m pip install dev-requirements.txt
First go in to the frontend directory
cd frontend
and then execute
npm install
Once you have installed the dependencies you can run both the backend and frontend server.
Before running the backend we need to set up the secrets. You do this by creating the file backend/.env with the following content
JWT_SECRET_KEY=my-secret
JWT_REFRESH_SECRET_KEY=another-secret
SQL_CONNECTION_STRING=sqlite:///database.db
See .env.exmple for an example file.
Of course the secret keys should be changed when moving to production. We will also use a simple SQLite database i.e database.db stored in the same folder. If you want to reset the database, you can just delete this file.
We will use uvicorn to run the backend. Go in to the backend directory
cd backend
and execute the command
uvicorn app.main:app --reload --port 8000
Your backend server should now run at http://localhost:8000. You can verify that the server is running by pinging the server
curl localhost:8000/api/v1/health
You should now see the following output
{"msg":"OK"}
You can also go to http://localhost:8000/docs to see the OpenAPI documentation for the endpoints.
To run the frontend, go to the frontend directory
cd frontend
and execute
yarn dev
If you don't have yarn install, you can also use
npm run dev
The frontend server should now run on http://localhost:5173/, which you can open in the browser.
There also automated tests
There are set of pre-commit hooks defined in the .pre-commit-config.yaml which will run linters and formatter on both the python and javascript code.
These are also run in the CI using GitHub actions. If you want make sure that the pre-commit hooks are regularly updated, then you might consider to set up pre-commit.ci instead.
You can run the backend tests with pytest. First go to the backend directory
cd backend
and then run pytest
python3 -m pytest -vv
There is also a GitHub action to run run the tests in CI.
The frontend tests are run with vitetest. To run the tests you need to first go to the frontend directory
cd frontend
and then run
yarn test
This will run the test, watch for changes and then rerun the tests it is detects changes. There is also a UI version that can be using using
yarn test:ui
Which will also open a dashboard with the test run in the browser. You can also just run the tests without watching for changes with the command
yarn test:run
To get coverage report, you can run
yarn coverage
Finally, there is a GitHub action to run run the tests in CI.