Todo List With Supabase

Live Site Demo

---

A simple and intuitive Todo List web application built with React, Supabase, and Zustand.

Features

• Real-Time Synchronization: Updates in real time across multiple devices.
• Task Management: Create, read, and delete tasks.
• Light/Dark Mode: Switch between light and dark themes for better user experience.

Tech Stack

• Frontend: React
• State Management: Zustand state management solution.
• Backend: Supabase (Database and API)
• Real-Time Updates: Supabase subscriptions.
• Typescript: Typescript - A strongly typed language, builds on top of javascript.
• CSS Framework: Tailwind CSS for styling.
• Package Management: Pnpm for package management.
• Bundler: Vite is a blazing fast frontend build tool.

Installation

1. Clone the repository:

   git clone https://github.com/souleymanesy7/todo-list-with-supabase.git
   cd todo-list-with-supabase

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create a .env or .env.local file in the root directory and add the following environment variables:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run the application:

   pnpm dev

The app will be available at http://localhost:3000.

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

1. Fork the project.

2. Create your feature branch: git checkout -b feature/my-feature.

3. Commit your changes: git commit -m 'Add some feature'.

4. Push to the branch: git push origin feature/my-feature.

5. Open a pull request.

Author

• GitHub - Souleymane Sy
• Frontend Mentor - @SouleymaneSy7
• Dev Challenges - Souleymane Sy
• Twitter - @Souleymanesy43