📝 Next.js To-Do List App

🚀 A simple and efficient To-Do List App built with Next.js that allows users to add, edit, delete, and mark tasks as completed. This project helped me explore the power of Next.js, React Hooks, Local Storage, and Tailwind CSS.

🌟 Features

• ✅ Add Todos: Quickly add new tasks.
• 📝 Edit Todos: Modify existing tasks.
• ❌ Delete Todos: Remove completed or unnecessary tasks.
• ✔️ Mark as Completed: Track task progress.
• 💾 Persistent Storage: Uses LocalStorage to save tasks.
• 🎨 Modern UI: Styled with Tailwind CSS for a sleek design.

🚀 Tech Stack

• Next.js – SSR, optimized performance
• React.js – Component-based UI
• Tailwind CSS – Modern styling
• LocalStorage – Data persistence

📂 Project Structure

📦 todo-list-app
├── 📁 pages
│   ├── index.js (Home Page)
│   ├── about.js (About Us Page)
│   ├── contact.js (Contact Page)
│   ├── todos.js (My Todos Page)
│   └── edit/[id].js (Edit Todo Page)
├── 📁 components
│   ├── Header.js
│   ├── Footer.js
│   ├── TodoItem.js
│   ├── Modal.js
│   └── AddTodo.js
├── 📁 styles (Tailwind CSS styles)
└── README.md

🎯 Getting Started

1️⃣ Clone the repository

git clone https://github.com/sahilkhurana01/todo-list-app.git

cd todo-list-app

2️⃣ Install dependencies

yarn install  # or npm install

3️⃣ Run the development server

yarn dev  # or npm run dev

📌 Open http://localhost:3000 to view in the browser.

💡 What I Learned

• How to manage state using React Hooks (useState, useEffect)
• Implementing dynamic routing in Next.js
• Using LocalStorage for data persistence
• UI design with Tailwind CSS

🛠️ Future Enhancements

• 🔹 User Authentication (NextAuth, Firebase, or JWT)
• 🔹 Database Integration (MongoDB, PostgreSQL, or Firebase)
• 🔹 Drag & Drop feature for reordering tasks
• 🔹 Dark Mode Support

📌 Live Demo

🔗 Attached below

next.js.todo.app.mp4

📢 Contributing

Feel free to fork, clone, and contribute to this project. PRs are welcome! 🎉

🏷️ License

This project is open-source and available under the MIT License.