Personal Task Tracker Pro

Live here: https://task-tracker-pro-eta.vercel.app/

A comprehensive personal task management application built with React, featuring advanced functionality like priorities, due dates, tags, search, and dark mode.

🚀 Features

Core Features

• ✅ Simple Login - Username-based authentication with localStorage persistence
• ✅ Task Management - Add, edit, delete, and toggle task completion
• ✅ Task Display - Clean interface showing title, description, status, and creation date
• ✅ Task Filtering - Filter by All, Completed, Pending, and Overdue tasks
• ✅ Data Persistence - All data saved to localStorage

Bonus Features

• 🔍 Search Functionality - Real-time search across titles, descriptions, and tags
• 🎯 Task Priority Levels - High, Medium, Low priorities with color coding
• 📅 Due Dates - Set due dates with smart formatting and overdue detection
• 🎨 Smooth Animations - Hover effects, transitions, and micro-interactions
• 🌙 Dark Mode Toggle - Complete dark/light theme with system preference detection
• 🏷️ Task Categories/Tags - Add multiple tags to organize tasks

Advanced Features

• 📊 Advanced Filtering - Combine search, tags, and status filters
• 🔄 Multiple Sort Options - Sort by creation date, priority, due date, or title
• 📱 Responsive Design - Optimized for desktop and mobile devices
• ⚡ Performance Optimized - Efficient state management and rendering

🛠️ Technologies Used

• React 18 - Modern React with hooks
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• Radix UI - Accessible UI primitives
• localStorage - Client-side data persistence

📦 Setup Instructions

1. Clone the repository ```bash git clone cd task-tracker-pro ```

2. Install dependencies ```bash npm install ```

3. Install Tailwind CSS ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ```

4. Start the development server ```bash npm start ```

5. Open your browser Navigate to http://localhost:3000

🏗️ Project Structure

``` src/ ├── components/ │ ├── ui/ # Reusable UI components │ ├── Login.js # Authentication component │ ├── TaskDashboard.js # Main dashboard │ ├── TaskForm.js # Add/Edit task form │ ├── TaskItem.js # Individual task display │ ├── TaskList.js # Task list container │ ├── TaskFilter.js # Filter tabs │ └── ThemeProvider.js # Dark/Light theme context ├── utils/ │ ├── localStorage.js # Data persistence utilities │ └── cn.js # Utility for combining classes ├── styles/ │ └── index.css # Global styles and animations ├── App.js # Main application component └── index.js # Application entry point ```

🎨 UI Components

The app uses a custom UI component library built with Tailwind CSS and Radix UI primitives:

• Button - Various styles and sizes
• Input/Textarea - Form inputs with validation
• Card - Container components
• Badge - Status and tag indicators
• Checkbox - Task completion toggle
• AlertDialog - Confirmation dialogs

📱 Responsive Design

• Mobile-first approach
• Flexible grid layouts
• Touch-friendly interactions
• Optimized for all screen sizes

🌟 Key Features Showcase

Task Priorities

• High Priority: Red color coding with left border accent
• Medium Priority: Yellow color coding
• Low Priority: Green color coding

Due Date Management

• Smart date formatting ("Due today", "Due in 3 days")
• Overdue task highlighting with red background
• Visual indicators with pulsing icons

Search & Filtering

• Real-time search across all task content
• Tag-based filtering with visual badges
• Multiple filter combinations

Dark Mode

• System preference detection
• Smooth theme transitions
• Persistent theme selection

🚀 Deployment

Build for Production

```bash npm run build ```

Deploy Options

• Netlify: Drag and drop the build folder
• Vercel: Connect your GitHub repository
• GitHub Pages: Use gh-pages package

📊 Performance Features

• Efficient state management with React hooks
• Optimized re-renders with proper dependency arrays
• Smooth animations with CSS transitions
• Responsive design with mobile optimization

🔧 Customization

Adding New Features

1. Create new components in src/components/
2. Add utility functions in src/utils/
3. Update the task interface in TaskDashboard.js
4. Modify localStorage functions as needed

Styling

• Modify tailwind.config.js for theme customization
• Update CSS variables in src/styles/index.css
• Add new animations in the utilities layer

🐛 Troubleshooting

Common Issues

1. Tasks not persisting: Check localStorage permissions
2. Styles not loading: Ensure Tailwind CSS is properly configured
3. Icons not showing: Verify lucide-react installation

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

📝 License

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

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

---