Bug Tracker - Simple Task Management System

A clean, beginner-friendly task management application built with React, Redux Toolkit, and TypeScript.

Video Demo

Watch the full demo showing all features in action:

🚀 Features

Authentication

• Simple Login: Demo credentials for quick access
• User Registration: Easy signup process for developers and managers
• Role-based Access: Different permissions for different user types

Task Management

• Create & Edit Tasks: Full task lifecycle management
• Time Tracking: Built-in timer and manual time entry
• Status Updates: Track progress from creation to completion
• Smart Filtering: Filter by status, priority, and assignee

Dashboard

• Task Overview: Visual statistics and progress tracking
• Trend Charts: Historical view of task activity
• Role-specific Views: Managers see team data, developers see personal tasks

🛠️ Technology Stack

• Frontend: React 18 with TypeScript
• State Management: Redux Toolkit (simplified structure)
• Styling: Tailwind CSS with Shadcn/ui components
• Charts: Recharts for data visualization
• Build Tool: Vite for fast development
• Icons: Lucide React

🎯 Quick Start

Demo Credentials

• Developer: john.dev / dev123
• Manager: alex.manager / mgr123

Installation

# Clone the repository
git clone <repository-url>

# Install dependencies
npm install

# Start development server
npm run dev

📁 Project Structure

src/
├── components/          # React components
│   ├── ui/             # Reusable UI components (Shadcn)
│   ├── Dashboard.tsx   # Main dashboard view
│   ├── TaskList.tsx    # Task management interface
│   ├── TaskModal.tsx   # Task creation/editing
│   └── TimeTrackingModal.tsx  # Time tracking interface
├── store/              # Redux state management
│   ├── index.ts        # Store configuration
│   ├── authSlice.ts    # Authentication state
│   └── taskSlice.ts    # Task and time tracking state
├── hooks/              # Custom React hooks
│   ├── redux.ts        # Typed Redux hooks
│   └── useTaskFilters.ts  # Local state for filters
├── data/               # Mock data and constants
│   └── mockData.ts     # Sample users, tasks, and time entries
├── types/              # TypeScript type definitions
│   └── index.ts        # Core type definitions
└── pages/              # Page components
    └── Index.tsx       # Main application page

🔧 Key Components

State Management (Redux)

• authSlice: User authentication and management
• taskSlice: Task CRUD operations and time tracking
• Local State: UI state managed with custom hooks

Core Features

• Task Filtering: Smart filters with search functionality
• Time Tracking: Automatic timer and manual entry
• Role Permissions: Developers see assigned tasks, managers see everything
• Data Persistence: All data saved to localStorage

UI Components

• TaskList: Main task management interface
• Dashboard: Analytics and overview
• TimeTrackingModal: Comprehensive time tracking
• TaskModal: Task creation and editing

📊 Data Flow

1. Authentication: Users log in → Redux stores user data
2. Task Management: CRUD operations → Redux updates state → localStorage persistence
3. Time Tracking: Timer/manual entry → Updates task time spent → Syncs with Redux
4. Filtering: Local state manages UI filters → Computed from Redux data

🎨 Design System

• Colors: Professional blue/slate theme
• Typography: Clean, readable font hierarchy
• Layout: Responsive grid system
• Components: Consistent Shadcn/ui design language

🔒 User Roles

Developer

• View assigned tasks only
• Track time on tasks
• Update task status (start work, request approval)
• Cannot create or delete tasks

Manager

• View all tasks and team members
• Create, edit, and delete tasks
• Assign tasks to developers
• Approve task completion
• Access team analytics

📈 Time Tracking

• Automatic Timer: Start/stop timer with descriptions
• Manual Entry: Add time manually with duration
• Task Integration: Time automatically updates task totals
• History: View all time entries per task
• Dashboard Integration: Time data visible in analytics

🚀 Development Guidelines

Adding New Features

1. Define types in src/types/index.ts
2. Add Redux actions in appropriate slice
3. Create focused components in src/components/
4. Use custom hooks for complex local state
5. Update mock data if needed

Best Practices

• Keep components small and focused
• Use TypeScript strictly
• Follow Redux Toolkit patterns
• Maintain responsive design
• Write descriptive component names

Code Organization

• One component per file
• Logical file naming
• Clear folder structure
• Consistent import patterns
• Proper type definitions

🔧 Configuration

Environment Setup

• Node.js 16+ required
• All dependencies managed via npm
• Vite for build and development
• TypeScript for type safety

Customization

• Modify tailwind.config.ts for theme changes
• Update src/data/mockData.ts for different sample data
• Extend types in src/types/index.ts for new features

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

---

Built with ❤️ for learning and productivity