Issue Tracking System

A modern, full-featured issue tracking system built with Next.js and integrated with Google Authentication. This system helps teams manage and track issues, bugs, and tasks efficiently.

Project link

issue-tracker-alpha-ten.vercel.app

Features

• Dashboard Overview

  • Visual representation of issues by status (Open, In Progress, Closed)
  • Quick statistics and metrics
  • Latest issues overview

• Issue list

  • Filter issues by status
  • Sort by issue title, creation date, and status
  • Pagination support

• Issue Management

  • Create, read, update, and delete issues
  • Rich text editor with Markdown support
  • Issue assignment to team members

• User Authentication

  • Secure Google OAuth integration

Tech Stack

Frontend

• Next.js 13
• Zod
• React hook form
• React query
• Radix UI
• easymde
• recharts

Backend

• MySQL
• Prisma ORM

Authentication

• Google OAuth Provider
• NextAuth.js

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm/yarn
• MySQL database
• Google Cloud Console account

Installation

1. Clone the repository

git clone https://github.com/yourusername/issue-tracker.git
cd issue-tracker

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env

Add the following variables to your .env file:

DATABASE_URL="mysql://user:password@localhost:3306/issue_tracker"
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

4. Initialize the database

npx prisma migrate dev  

5. Start the development server

npm run dev

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project
3. Enable Google OAuth 2.0 API
4. Configure OAuth consent screen
5. Create credentials (OAuth client ID)
6. Add authorized JavaScript origins:
   • http://localhost:3000 (for development)
   • https://your-production-domain.com (for production)
7. Add authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google (for development)
   • https://your-production-domain.com/api/auth/callback/google (for production)
8. Copy the client ID and secret to your .env file
9. Add test account in Google Cloud Console