Taskify Hub is a modern, mobile-first Todo List Web Application designed to help users organize tasks efficiently. It features task creation, categorization, priority setting, recurring tasks, and progress tracking, all in a sleek, responsive interface.
- Add, Edit, Delete Tasks: Quickly manage your daily tasks.
- Task Metadata: Add date, time, priority, category, and recurring options.
- Search & Filter: Easily find tasks using the search bar.
- Drag & Drop: Rearrange tasks with a smooth drag-and-drop interface.
- Progress Tracking: Visual progress bar shows completed vs pending tasks.
- Points & Rewards: Earn points for completing tasks; celebrate milestones with confetti animation.
- Dark Mode: Switch between light and dark themes for comfortable usage.
- Import/Export JSON: Backup your tasks or transfer between devices.
- Frontend: React.js, CSS3, HTML5
- State Management: React Hooks (
useState,useEffect) - Drag & Drop:
@hello-pangea/dnd - UUID Generation:
uuid - Animations:
canvas-confetti - File Management: JSON import/export for tasks
- Responsive Design: Mobile-first with media queries
- Mobile-first approach ensures usability on smartphones, tablets, and desktops.
- Input fields, dropdowns, and buttons automatically adjust for smaller screens.
- Dark mode for night-time usability.
- Node.js >= 18.x
- npm >= 9.x
- Clone the repository:
git clone git@github.com:SundaramDev/ToDo_APP.git
cd Taskify
npm install
npm run dev├── public/ # Static assets (images, audio)
│ ├── demo.mp3
│ ├── FrontPage.png
│ └── illustration.png
├── src/ # Source code for the application
│ ├── components/ # Reusable React components
│ ├── pages/ # Main page components
│ └── utils/ # Utility functions
│ ├── App.jsx # Main application component
│ └── main.jsx # Entry point for the React app
├── TodoList.css # Global styles for the Todo List
├── .gitignore # Specifies files to be ignored by Git
├── eslint.config.js # ESLint configuration for code quality
├── index.html # The main HTML file
├── package-lock.json # Dependency tree lock file
├── package.json # Project dependencies and scripts
├── README.md # Project overview and instructions
└── vite.config.js # Vite configuration file
- User authentication for personalized tasks
- Cloud synchronization for multiple devices
- Advanced notifications & reminders
- Analytics dashboard for completed tasks
- Add a new task using the input fields.
- Assign date, time, priority, category, and recurrence.
- Drag tasks to reorder them.
- Mark tasks as done to earn points and see confetti animation.
- Export your tasks as a JSON file or import them from a file.
- Toggle between light and dark modes using the menu.
- Taskify Hub is built mobile-first for seamless use on smartphones, tablets, and desktops.
- Dropdowns, buttons, and input fields adjust dynamically to screen size.
- Enjoy a clean, professional interface on any device.
I'm passionate about web development and always open to connecting with other developers or exploring new opportunities.
💼 LinkedIn: linkedin.com/in/sundaram-5695b629a
📧 Email: sundaram95802@gmail.com
💻 GitHub: github.com/Sundaram-Dev