GitHub Issue Tracker

A Next.js SPA application for tracking issues from multiple GitHub repositories in a single kanban board view.

Features

1. Repository Management: Add and switch between multiple GitHub repositories
2. Label Management: Create and manage custom labels to categorize issues
3. Kanban Board: View issues as cards on a kanban board with:
   • Two default lists: "Open" for open issues and "Closed" for closed issues
   • Ability to add custom lists
   • Drag and drop issues between lists
4. Issue Cards: Each issue card displays:
   • Title with a link to the GitHub issue
   • User-managed labels

Tech Stack

• Next.js 16 - React framework with App Router
• TypeScript - Type safety
• Prisma - Database ORM with SQLite
• Tailwind CSS - Styling
• @dnd-kit - Drag and drop functionality

Getting Started

Prerequisites

• Node.js 18+ and npm (for local development)
• Docker and Docker Compose (for containerized deployment)

Local Development

1. Install dependencies:

npm install

2. Set up the database:

npm run prisma:generate
npm run prisma:migrate

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Docker Deployment

Build and deploy the application with Docker Compose in one command:

docker-compose up --build

This will:

• Build the Docker image
• Run database migrations
• Start the application on port 3000

The application will be available at http://localhost:3000.

To run in detached mode (background):

docker-compose up -d --build

To stop the application:

docker-compose down

Note: The database file (prisma/prod.db) is persisted in a volume, so your data will be preserved between container restarts.

Usage

1. Add a Repository: Click "+ Add" in the Repositories section and enter a repository in the format owner/repo (e.g., facebook/react)

2. Fetch Issues: Select a repository to automatically fetch and display its issues

3. Manage Labels: Create custom labels with colors in the Labels section

4. Organize Issues:

   • Issues are automatically placed in "Open" or "Closed" lists based on their GitHub state
   • Drag and drop issues between lists
   • Add custom lists using "+ Add List"

5. View Issues: Click on any issue card title to open it on GitHub

Database

The application uses SQLite with Prisma. The database file will be created automatically in the prisma directory when you run migrations.

API Routes

• GET /api/repositories - Get all repositories
• POST /api/repositories - Add a new repository
• DELETE /api/repositories/[id] - Delete a repository
• GET /api/repositories/[id]/issues - Fetch issues from GitHub for a repository
• GET /api/labels - Get all labels
• POST /api/labels - Create a new label
• DELETE /api/labels/[id] - Delete a label
• GET /api/lists - Get all kanban lists
• POST /api/lists - Create a new list
• DELETE /api/lists/[id] - Delete a list
• POST /api/issues/[id]/move - Move an issue to a different list
• POST /api/issues/[id]/labels - Add a label to an issue
• DELETE /api/issues/[id]/labels?labelId=... - Remove a label from an issue

Notes

• The application fetches issues from the public GitHub API (no authentication required for public repos)
• Issues are stored locally in the database
• Pull requests are automatically filtered out (only issues are displayed)