Issue Tracker

A modern, full-stack issue tracking application built with Next.js 14, featuring real-time dashboard analytics, user authentication, and comprehensive issue management capabilities.

Features

• Dashboard Analytics - Visual charts and summaries of issue statistics
• Issue Management - Create, edit, delete, and assign issues
• User Authentication - Google OAuth and credentials-based login
• Issue Assignment - Assign issues to team members
• Status Tracking - Track issues through OPEN, IN_PROGRESS, and CLOSED states
• Pagination & Filtering - Efficient browsing of large issue lists
• Responsive Design - Mobile-friendly interface with Radix UI components

Tech Stack

• Framework: Next.js 14 with App Router
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth.js with Google OAuth
• UI Components: Radix UI with Tailwind CSS
• State Management: TanStack Query (React Query)
• Form Handling: React Hook Form with Zod validation
• Charts: Recharts for data visualization

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database
• Google OAuth credentials (optional)

Installation

1. Clone the repository:

git clone <repository-url>
cd issue-tracker

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env

Configure the following variables in .env:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key
POSTGRES_PRISMA_URL=your-postgres-connection-string
POSTGRES_URL_NON_POOLING=your-postgres-direct-connection
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

4. Set up the database:

npx prisma migrate dev

5. Start the development server:

npm run dev

Visit http://localhost:3000 to see the application.

Project Structure

├── app/                    # Next.js app directory
│   ├── (home)/            # Dashboard pages
│   ├── api/               # API routes
│   ├── issues/            # Issue management pages
│   └── signup/            # User registration
├── components/            # Reusable UI components
├── lib/                   # Utilities and data queries
├── prisma/               # Database schema and migrations
└── types/                # TypeScript type definitions

API Endpoints

• GET /api/issues - Fetch issues with pagination and filtering
• POST /api/issues - Create new issue
• PATCH /api/issues/[id] - Update existing issue
• DELETE /api/issues/[id] - Delete issue
• GET /api/users - Fetch users for assignment
• POST /api/signup - User registration

Database Schema

The application uses three main models:

• Issue - Core issue tracking with title, description, status, and assignments
• User - User accounts with authentication support
• Account - OAuth account linking for NextAuth.js

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.