{"id":19811767,"url":"https://github.com/finsberg/fastapi-react-app","last_synced_at":"2025-10-16T00:33:26.508Z","repository":{"id":98534364,"uuid":"605736818","full_name":"finsberg/fastapi-react-app","owner":"finsberg","description":"A demonstration of how to use FastAPI together with React","archived":false,"fork":false,"pushed_at":"2023-05-06T15:30:20.000Z","size":642,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T07:15:29.586Z","etag":null,"topics":["chackra-ui","fastapi","react","sqlmodel","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/finsberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-23T19:46:18.000Z","updated_at":"2024-09-06T00:48:30.000Z","dependencies_parsed_at":"2024-11-12T09:39:27.510Z","dependency_job_id":null,"html_url":"https://github.com/finsberg/fastapi-react-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finsberg%2Ffastapi-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finsberg%2Ffastapi-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finsberg%2Ffastapi-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finsberg%2Ffastapi-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finsberg","download_url":"https://codeload.github.com/finsberg/fastapi-react-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241156709,"owners_count":19919341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chackra-ui","fastapi","react","sqlmodel","typescript","vite"],"created_at":"2024-11-12T09:27:44.896Z","updated_at":"2025-10-16T00:33:21.485Z","avatar_url":"https://github.com/finsberg.png","language":"TypeScript","readme":"# Fast API + SQLModel + React example\n\nThis is an implementation of a simple TODO list with authentication using FastAPI, SQLModel and React.\n\n## Tech stack\n\nFor the frontend we use\n- [React](https://reactjs.org)\n- [TypeScript](https://www.typescriptlang.org)\n- [Chakra-UI](https://chakra-ui.com) for styling\n- [Vite](https://vitejs.dev) for building\n\nFor the backend we use\n- [FastAPI](https://fastapi.tiangolo.com) as web framework\n- [SQLModel](https://sqlmodel.tiangolo.com) for interacting with the database\n\n## Installation\n\n### Installing the backend dependencies\n\nIf is recommended to first create a virtual environment.\n\n```\npython3 -m venv venv\n```\nand activate the virtual environment\n```\n. venv/bin/activate\n```\nGo in to the `backend` directory\n```\ncd backend\n```\nand install the dependencies\n```\npython3 -m pip install -r requirements.txt\n```\nNote that the dependencies are generated from the `requirements.in` file and compiled with [`pip-tools`](https://github.com/jazzband/pip-tools/).\n\nIf you want to run the tests you also need to install the dev-requirements, i.e\n```\npython3 -m pip install dev-requirements.txt\n```\n\n\n### Installing the frontend dependencies\nFirst go in to the `frontend` directory\n```\ncd frontend\n```\nand then execute\n```\nnpm install\n```\n\n## Running\n\nOnce you have installed the dependencies you can run both the backend and frontend server.\n\n## Setting up the secrets\nBefore running the backend we need to set up the secrets. You do this by creating the file `backend/.env` with the following content\n```\nJWT_SECRET_KEY=my-secret\nJWT_REFRESH_SECRET_KEY=another-secret\nSQL_CONNECTION_STRING=sqlite:///database.db\n```\nSee [.env.exmple](backend/.env.example) for an example file.\n\nOf 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.\n\n\n### Running the backend\nWe will use `uvicorn` to run the backend. Go in to the `backend` directory\n```\ncd backend\n```\nand execute the command\n```\nuvicorn app.main:app --reload --port 8000\n```\nYour backend server should now run at \u003chttp://localhost:8000\u003e. You can verify that the server is running by pinging the server\n```\ncurl localhost:8000/api/v1/health\n```\nYou should now see the following output\n```\n{\"msg\":\"OK\"}\n```\nYou can also go to `http://localhost:8000/docs` to see the OpenAPI documentation for the endpoints.\n\n## Running the frontend\nTo run the frontend, go to the `frontend` directory\n```\ncd frontend\n```\nand execute\n```\nyarn dev\n```\nIf you don't have `yarn` install, you can also use\n```\nnpm run dev\n```\nThe frontend server should now run on \u003chttp://localhost:5173/\u003e, which you can open in the browser.\n\n\n## Testing\n\nThere also automated tests\n\n### Pre-commit hooks\nThere are set of pre-commit hooks defined in the [.pre-commit-config.yaml](.pre-commit-config.yaml) which will run linters and formatter on both the python and javascript code.\n\nThese are also run in the CI using [GitHub actions](.github/workflows/pre-commit.yml). If you want make sure that the pre-commit hooks are regularly updated, then you might consider to set up [pre-commit.ci](http://pre-commit.ci) instead.\n\n### Testing the backend\nYou can run the backend tests with pytest. First go to the `backend` directory\n```\ncd backend\n```\nand then run `pytest`\n```\npython3 -m pytest -vv\n```\nThere is also a [GitHub action](.github/workflows/test_backend.yml) to run run the tests in CI.\n\n\n### Testing the frontend\nThe frontend tests are run with [vitetest](https://vitest.dev). To run the tests you need to first go to the `frontend` directory\n```\ncd frontend\n```\nand then run\n```\nyarn test\n```\nThis 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\n```\nyarn test:ui\n```\nWhich will also open a dashboard with the test run in the browser.\nYou can also just run the tests without watching for changes with the command\n```\nyarn test:run\n```\nTo get coverage report, you can run\n```\nyarn coverage\n```\nFinally, there is a [GitHub action](.github/workflows/test_frontend.yml) to run run the tests in CI.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinsberg%2Ffastapi-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinsberg%2Ffastapi-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinsberg%2Ffastapi-react-app/lists"}