📝 Awesome Todo List App

🚀 Project Overview

Welcome to the Awesome Todo List App! This is a modern, responsive, and feature-rich Todo List application built with React, TypeScript, and Zustand for state management. Styled using SCSS Modules, this app offers a seamless user experience with persistent state management, ensuring your todos are saved across sessions.

🌟 Features

• Add Todos: Easily add new tasks to your todo list.
• Delete Todos: Remove tasks that are no longer needed.
• Toggle Completion: Mark tasks as completed or incomplete with a simple click.
• Persistent Storage: Todos are saved in localStorage, ensuring they persist across browser sessions.
• Unique Identifiers: Each todo has a unique UUID, ensuring reliable identification.
• Performance Optimizations: Utilizes React.memo to prevent unnecessary re-renders.
• Responsive Design: Fully responsive layout that adapts to all screen sizes.
• Dark and Light Modes: Automatically adapts to your system's color scheme preference.
• Accessible UI: Designed with accessibility in mind for an inclusive user experience.

🛠 Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: A strongly typed programming language that builds on JavaScript.
• Zustand: A fast and scalable state-management solution.
• SCSS Modules: Enhanced CSS with nesting, variables, and more.
• UUID: For generating unique identifiers.
• Create React App: Set up a modern web app by running one command.

📸 Screenshots

🔧 Installation

Follow these steps to set up the project locally:

1. Clone the Repository

   git clone https://github.com/paladinknightmaster/react-zustand-todo-app.git

2. Navigate to the Project Directory

   cd react-zustand-todo-app

3. Install Dependencies

   Ensure you have Node.js installed. Then, install the required packages:

   npm install

4. Start the Development Server

   npm start

   The app should automatically open in your default browser at http://localhost:5173. If it doesn't, you can manually navigate to that URL.

🏃‍♂️ Usage

Once the development server is running:

1. Add a Todo

   • Enter your task in the input box.
   • Click the "Add" button or press Enter.
   • The new todo will appear in the list below.

2. Toggle Completion

   • Click on the todo text to mark it as completed or incomplete.
   • Completed tasks will have a line-through effect.

3. Delete a Todo

   • Click the "Delete" button next to the todo you wish to remove.

4. Persisted Todos

   • Your todos are saved in localStorage.
   • Refreshing the page or reopening the browser will retain your todo list.

📁 Project Structure

react-zustand-todo-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── TodoList.tsx
│   │   └── TodoList.module.scss
│   ├── store/
│   │   └── todoStore.ts
│   ├── types/
│   │   └── types.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── ...

👨‍💻 Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the Repository

2. Create a New Branch

   git checkout -b feature/YourFeatureName

3. Make Your Changes

4. Commit Your Changes

   git commit -m "Add some feature"

5. Push to the Branch

   git push origin feature/YourFeatureName

6. Open a Pull Request

📝 License

This project is licensed under the MIT License.

📞 Contact

For any questions or feedback, feel free to reach out:

• Email: paladinknight.master@gmail.com
• GitHub: PaladinKnightMaster