PlsFix - Issue Tracker

A Linear-inspired issue tracking board built with React, TypeScript, and Tailwind CSS.

Features

• 📋 Kanban board with 5 status columns (Backlog, Todo, In Progress, In Review, Done)
• 🎯 Create, update, and delete issues with full CRUD operations
• 🏷️ Label and priority management
• 👥 Team member assignment
• 🔍 Real-time search across issues
• 🎨 Clean, modern Linear-inspired design
• 💾 Local state management with React Context

Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling with custom design tokens
• Vite - Build tool

Getting Started

Install Dependencies

npm install

Run Development Server

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Project Structure

src/
├── components/
│   ├── AppHeader.tsx          # Top navigation bar
│   ├── AppSidebar.tsx         # Left sidebar with filters
│   ├── KanbanBoard.tsx        # Main kanban board view
│   ├── IssueCard.tsx          # Individual issue card
│   ├── IssueModal.tsx         # Issue detail/edit modal
│   ├── CreateIssueButton.tsx  # Floating action button
│   ├── FilterBar.tsx          # Quick filters bar
│   └── LinearLayout.tsx       # Main layout structure
├── context/
│   └── LinearContext.tsx      # State management
├── App.tsx                    # Root component
├── main.tsx                   # App entry point
└── index.css                  # Design tokens & global styles

Features Details

Issue Management

• Create: Click the floating '+' button to create new issues
• Edit: Click any issue card to open the detail modal and edit
• Delete: Delete issues from the detail modal
• Status: Move issues between columns by updating their status
• Priority: Set priority levels (None, Low, Medium, High, Urgent)
• Assign: Assign issues to team members
• Label: Add multiple labels to categorize issues

Filters & Search

• Search: Search by title, description, or issue identifier
• Quick Filters: All Issues, My Issues, Unassigned
• Status Filters: Filter by specific status columns
• Sidebar Filters: Filter by team member or label

Design System

• Linear-inspired color palette with purple accent
• Semantic design tokens for colors, spacing, and shadows
• Smooth transitions and hover states
• Consistent 8px grid system

Data Model

Issue

• Identifier (PLS-XXX)
• Title and description
• Status (Backlog, Todo, In Progress, In Review, Done)
• Priority (None, Low, Medium, High, Urgent)
• Assignee (team member)
• Labels (multiple)
• Timestamps (created, updated)

License

MIT