For the past few days, I’ve been working on a small project that combines two tools I’ve wanted to get better at: FastAPI (for the backend) and React (for the frontend). To keep things practical, I built a simple Todo app where users can sign up, log in, and manage their todos securely.
This is not a “production-ready” project it’s more of a learning project, but it covers the core things that make most apps work: authentication, protected routes, and data that belongs to each user.
I didn’t want to just build another static app. Authentication is usually the first “real world” challenge every developer hits when moving from tutorials to actual projects. By making a Todo app with login and signup, I forced myself to connect the dots between backend and frontend, and it was a fun way to learn.
Tech stack
•Backend: FastAPI, passlib for hashing passwords, python-jose for JWT tokens, SQLAlchemy + PostgreSQL for storing users and todos.
•Frontend: React (hooks + fetch), with token stored in localStorage for authenticated requests.
•Communication: CORS middleware enabled on FastAPI so the React app can talk to it without errors.
How the authentication works
1.When a user signs up, their password is hashed with bcrypt (never stored in plain text).
2.On login, FastAPI checks the password and, if valid, returns a JWT token.
3.React saves this token in localStorage.
4.Every API call to protected routes (like adding or deleting todos) includes that token in the headers.
5.FastAPI verifies the token before allowing access.
Running the project locally
Clone the repo and open two terminals: one for backend, one for frontend.
Backend:
cd backend on windows terminal
Paste: python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload
Front end:
cd frontend
npm install
npm start
Now the backend runs on localhost:8000 and frontend on localhost:3000. Sign up a new user, log in, and start adding todos.
Right now the project is small.
For now, I’m happy that it works locally and I understand every piece.
Questions or feedback welcome
You can check out the full code here - https://github.com/armiyau1/Todo-App
Top comments (0)