📝 Todo List App

A simple and responsive Todo List application built with React.js, Vite, Tailwind CSS, and React Context API.

The application allows users to add, edit, and delete tasks while automatically storing todo data in the browser using LocalStorage.

🚀 Live Demo

👉 View Live Demo

📸 Preview

✨ Features

• ➕ Add new tasks
• ✏️ Edit existing tasks
• 🗑️ Delete tasks
• 💾 Save tasks using LocalStorage
• 🔄 Restore tasks after refreshing the browser
• ⚛️ Global state management using React Context API
• 🔔 SweetAlert2 notifications
• 🎨 Responsive user interface
• 📱 Mobile-friendly layout
• ⚡ Fast development and production build using Vite
• 🌐 Deployed on Vercel

🛠️ Technologies Used

Technology	Purpose
React.js	Building the user interface
Vite	Development server and build tool
JavaScript	Application logic
Tailwind CSS	Styling and responsive design
React Context API	Global state management
React Hooks	State and lifecycle management
LocalStorage	Persistent browser storage
React Icons	UI icons
SweetAlert2	User notifications
Vercel	Deployment

📂 Project Structure

Todo-list/
│
├── public/
│   ├── image.png
│   ├── home.png
│   └── logo.png.png
│
├── src/
│   ├── components/
│   │   ├── AddTodo.jsx
│   │   └── AllTodo.jsx
│   │
│   ├── context/
│   │   └── ContextTodo.jsx
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

🧠 How the Application Works

1. Add a Todo

The user enters a task into the input field and clicks the add button.

The task is passed to the Context API:

addTodo(input)

The input is then cleared after adding the task.

2. Manage Todo State

Todo data is managed through React Context API.

The context provides:

addTodo()
deleteTodo()
updateTodo()
todos

This allows different components to access and modify the todo state without passing props through multiple component levels.

3. LocalStorage Persistence

The application stores todo data in the browser's LocalStorage.

The LocalStorage key is:

my_todos

Todo data is converted into JSON before being stored.

localStorage.setItem(
    "my_todos",
    JSON.stringify(todos)
)

4. Restore Todos

When the application starts, it checks LocalStorage for previously saved tasks.

localStorage.getItem("my_todos")

If saved tasks are found, they are loaded into React state.

This allows tasks to remain available after refreshing the browser.

5. Edit Todos

Users can click the edit button to modify an existing task.

After saving the change, the updated task is stored in React state and LocalStorage.

6. Delete Todos

Users can delete an existing task using the delete button.

The task is removed from the todo state and the updated list is saved to LocalStorage.

⚛️ React Concepts Used

This project demonstrates:

• Functional Components
• useState
• useEffect
• useContext
• Context API
• Controlled Components
• Event Handling
• Conditional Rendering
• Component Composition
• State Management
• LocalStorage Integration

💾 Data Persistence

The application uses browser LocalStorage instead of a backend database.

Example:

[
    "Learn React",
    "Practice JavaScript",
    "Build a project"
]

Because the data is stored locally in the browser, it is specific to the user's browser/device.

🎨 UI & Design

The interface uses:

• Tailwind CSS
• React Icons
• Responsive layout
• Background image
• Blur/glass-style visual effects
• Scrollable todo container
• SweetAlert2 notifications

📱 Responsive Design

The application is designed for different screen sizes:

• 💻 Desktop
• 💻 Laptop
• 📱 Tablet
• 📱 Mobile

⚙️ Installation

Clone the repository:

git clone https://github.com/naved2001/Todo-list.git

Move into the project directory:

cd Todo-list

Install dependencies:

npm install

Start the development server:

npm run dev

Open the local development URL provided by Vite.

🧪 Available Scripts

Development

npm run dev

Production Build

npm run build

Preview Production Build

npm run preview

ESLint

npm run lint

🚀 Deployment

The application is deployed using Vercel.

🌐 Live Demo:

https://todo-list-naved5.vercel.app/

🔮 Future Improvements

The following features can be added in future versions:

• Mark tasks as completed
• Active / Completed / All filters
• Search tasks
• Task priority
• Due dates
• Categories
• Dark / Light theme
• Drag-and-drop task ordering
• User authentication
• Backend API
• Database integration
• Supabase integration
• Synchronization across multiple devices

👨‍💻 Developer

Naved Ansari

Full Stack Web Developer

• GitHub: https://github.com/naved2001
• Portfolio: https://naved-ansari-portfolio.vercel.app/
• LinkedIn: https://www.linkedin.com/in/mohammad-naved-ansari/

📄 License

This project is created for learning and portfolio purposes.

---

⭐ If you found this project useful, feel free to explore the repository.

Made with ❤️ using React.js