https://github.com/psparwez/todoo
A simple and clean and draggable Todo built with react & framer motion.
https://github.com/psparwez/todoo
context-api framer-motion react react-todo-app todo
Last synced: 3 months ago
JSON representation
A simple and clean and draggable Todo built with react & framer motion.
- Host: GitHub
- URL: https://github.com/psparwez/todoo
- Owner: psparwez
- Created: 2025-02-26T12:45:46.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-26T13:02:35.000Z (7 months ago)
- Last Synced: 2025-02-26T13:43:32.607Z (7 months ago)
- Topics: context-api, framer-motion, react, react-todo-app, todo
- Language: TypeScript
- Homepage: https://todoo-ps.vercel.app/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
𐌕Ꝋ𐌃Ꝋ
This is a simple drag & drop todo's web app built with React,
TypeScript, Framer Motion, and Tailwind CSS. It features task creation, searching,
editing, and deleting with a clean and modern UI.
➥ Live Demo
## :camera: Demo Screenshots
## 🚀 Features
- 📌 **Drag-and-drop** Smooth drag and drop operation
- 🔍 **Search Functionality**: Filter tasks in real-time.
- 📝 **Task Management**: Create, edit, and delete tasks.
- 📅 **Task Prioritization**: Assign priority levels and deadlines.
- 🏷️ **Tagging System**: Organize tasks using tags.
- 📦 **State Management**: Context API for global state.
- 🎨 **Animated UI**: Framer Motion for smooth interactions.
## 🛠️ Tech Stack
- **Frontend:** React, TypeScript, Tailwind CSS, Framer Motion
- **State Management:** Context API
- **UI Icons:** Lucide-react
- **Notifications:** react-hot-toast
## 📦 Installation
1. **Clone the Repository**
```sh
git clone https://github.com/psparwez/todoo.git
cd todoo
```
2. **Install Dependencies**
```sh
npm install
```
3. **Run the App**
```sh
npm run dev
```
## ⚡ Usage
- **Create a Task**: Click on the add button and enter task details.
- **Search Tasks**: Type in the search bar to filter tasks dynamically.
- **Edit Task**: Click the edit button on a task card.
- **Delete Task**: Click the trash icon and confirm deletion.
- **View Details**: Click the details button on a task card.
## 🛠️ Future Enhancements
- 🌍 **Dark Mode** support
- 🔄 **Task Status Updates** (In Progress, Completed, etc.)
## 🤝 Contributing
Contributions are welcome! Feel free to fork the repo and submit a PR.