Personal Task Tracker is a modern, responsive, and user-friendly web application for managing your daily tasks. Built with React, Vite, and Tailwind CSS, it allows you to add, edit, filter, and organize your tasks efficiently, with a beautiful UI that supports both light and dark modes.
- 🔐 User Login: Simple username-based login stored in localStorage (no real authentication).
- ➕ Task Creation: Add tasks with title, optional description, priority, due date, and category.
- ✅ Completion Toggle: Instantly mark tasks as completed or pending with a stylish sliding toggle.
- 🗑 Task Deletion: Remove tasks with confirmation.
- ✏️ Inline Editing: Edit task details directly from the list.
- 🔍 Search & Filter: Filter tasks by status (All, Completed, Pending), category, and search by title/description.
- 📊 Dynamic Counts: See real-time counts for each filter.
- 💾 Persistent Storage: All data is saved in localStorage and synced with React state.
- 🎨 Modern UI/UX: Gradient backgrounds, glassmorphism, and responsive design for mobile and desktop.
- 🌗 Dark/Light Mode: Seamless theme switching with a toggle.
- 🧩 Clean Code: Modular, reusable components and utilities.
- Clone the repository
git clone https://github.com/shahabas07/react-personal-task-tracker.git cd personal-task-tracker - Install dependencies
npm install
- Start the development server
npm run dev
- Open localhost in your browser
- React.js (functional components & hooks)
- Vite (fast build tool)
- Tailwind CSS v4 (utility-first CSS)
- React Router (client-side routing)
- LocalStorage (for data persistence)
- Framer Motion (for smooth animations)
Stay organized and productive with your personal task tracker!