A simple full-stack Todo application built with React, Supabase, Chakra UI, and React Context API.
This project demonstrates clean state management, database integration, and a modular architecture.
- CRUD functions on todos + marking them as completed
- Clear all todos in one click
- Persistent storage with Supabase (
⚠️ Disabled to save resources. Uses local storage now instead) - Global state management using React Context
- Cool UI with Chakra UI
- Loading indicators for a smooth UX
- Organized project structure with services and contexts
Since no login feature was implemented yet, the use of Supabase doesn't really make sense. It's just to desmostrate its usage and get used to it. If a login feature is impleted later, it can be enabled again.
- Frontend: React + Vite
- Database: Supabase (Postgres)
- UI Library: Chakra UI and React Icons
- State Management: Context API + Hooks
- Clone the repository
https://github.com/baraa-elhajj/Todo-App.git
cd todo-app- Install dependencies
npm install-
configure Supabase
- Create a Supabase project.
- Add the table
todowith:id(bigint),text(varchar),created_at(timestamp) - Copy your API URL and anon/public key into
.envfile.
-
Run the app
npm run devNote: Make sure you have Node.js and Vite installed.
Deployed on Vercel, check it out: https://todoapp-lb.vercel.app/
Love this project? Drop a star ⭐ and feel free to fork it or suggest improvements if you find something cool!