The latest articles on Forem by Armiyau Abdulhamid (@armi01). https://forem.com/armi01 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3498062%2Fb1beb0f9-e9a3-47f7-9e78-5a5e44d05b78.png https://forem.com/armi01 en Armiyau Abdulhamid Fri, 12 Sep 2025 19:18:26 +0000 https://forem.com/armi01/how-i-built-a-todo-app-with-authentication-using-fastapi-react-5068 https://forem.com/armi01/how-i-built-a-todo-app-with-authentication-using-fastapi-react-5068 <p>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.<br> 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.<br> 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.</p> <h2> Tech stack </h2> <p>•Backend: FastAPI, passlib for hashing passwords, python-jose for JWT tokens, SQLAlchemy + PostgreSQL for storing users and todos.<br> •Frontend: React (hooks + fetch), with token stored in localStorage for authenticated requests.<br> •Communication: CORS middleware enabled on FastAPI so the React app can talk to it without errors.</p> <h2> How the authentication works </h2> <p>1.When a user signs up, their password is hashed with bcrypt (never stored in plain text).<br> 2.On login, FastAPI checks the password and, if valid, returns a JWT token.<br> 3.React saves this token in localStorage.<br> 4.Every API call to protected routes (like adding or deleting todos) includes that token in the headers.<br> 5.FastAPI verifies the token before allowing access.</p> <p><strong>Running the project locally</strong></p> <p>Clone the repo and open two terminals: one for backend, one for frontend.</p> <h2> Backend: </h2> <p>cd backend on windows terminal</p> <p>Paste: python -m venv .venv<br> .venv\Scripts\activate<br> pip install -r requirements.txt<br> uvicorn main:app --reload</p> <h2> Front end: </h2> <p>cd frontend<br> npm install<br> npm start</p> <p>Now the backend runs on localhost:8000 and frontend on localhost:3000. Sign up a new user, log in, and start adding todos.</p> <p>Right now the project is small.<br> For now, I’m happy that it works locally and I understand every piece.</p> <p>Questions or feedback welcome </p> <p>You can check out the full code here - <a href="https://github.com/armiyau1/Todo-App" rel="noopener noreferrer">https://github.com/armiyau1/Todo-App</a></p> webdev programming productivity python