🎯 Issue Tracker

A modern, full-stack issue tracking application built with Next.js 15, featuring real-time updates, advanced filtering, multiple view modes, and comprehensive user management.

✨ Features

🔐 Authentication & Authorization

• Google OAuth Integration via NextAuth.js
• JWT-based Sessions with automatic refresh
• Role-based Access Control with user assignment capabilities
• Secure API Routes with session validation

📊 Dashboard & Analytics

• Real-time Issue Statistics with visual charts
• Interactive Charts powered by Recharts
• Latest Issues Overview with assignee information
• Responsive Grid Layout for optimal viewing

🎫 Issue Management

• Create, Read, Update, Delete operations
• Status Tracking (Open, In Progress, Closed)
• User Assignment with avatar display
• Rich Text Editor using SimpleMDE with Markdown support
• Advanced Search & Filtering with real-time results
• Bulk Operations and batch processing

🎨 Multiple View Modes

• 📋 Table View - Traditional spreadsheet-style layout
• 🔄 Kanban Board - Drag-and-drop visual workflow
• 📱 Virtualized List - High-performance rendering for large datasets

⚡ Performance Features

• Virtual Scrolling for handling thousands of issues
• Infinite Loading with React Query
• Server-side Pagination with client-side caching
• Optimistic Updates for instant UI feedback
• Image Optimization with Next.js Image component

🔍 Advanced Filtering & Search

• Real-time Search across title and description
• Status-based Filtering with quick filters
• Sorting Options by date, title, status, and assignee
• URL State Management for shareable filtered views
• Debounced Search to prevent API spam

📱 Responsive Design

• Mobile-first Approach with Tailwind CSS
• Adaptive Layouts for all screen sizes
• Touch-friendly Interactions on mobile devices
• Progressive Web App capabilities

🛠 Developer Experience

• TypeScript for type safety
• ESLint & Prettier for code quality
• Prisma ORM with type-safe database queries
• Zod Validation for runtime type checking
• Error Monitoring with Sentry integration
• Hot Reload development with Turbopack

🚀 Quick Start

Prerequisites

• Node.js 18.0 or later
• npm or yarn package manager
• MongoDB database (local or cloud)
• Google OAuth credentials for authentication

Installation

1. Clone the repository

   git clone <repository-url>
   cd issue-tracker

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Setup

   Create a .env.local file in the root directory:

   # Database
   DATABASE_URL="mongodb+srv://username:password@cluster.mongodb.net/issue-tracker"
   
   # NextAuth.js
   NEXTAUTH_URL="http://localhost:3000"
   NEXTAUTH_SECRET="your-nextauth-secret-here"
   
   # Google OAuth
   GOOGLE_CLIENT_ID="your-google-client-id"
   GOOGLE_CLIENT_SECRET="your-google-client-secret"
   
   # Sentry (Optional)
   SENTRY_DSN="your-sentry-dsn"

4. Database Setup

   # Generate Prisma client
   npx prisma generate
   
   # Push database schema
   npx prisma db push
   
   # Seed the database with sample data
   npm run seed

5. Start the development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

📁 Project Structure

issue-tracker/
├── prisma/                    # Database schema and migrations
│   ├── schema.prisma         # Prisma schema definition
│   └── seed.js              # Database seeding script
├── public/                   # Static assets
├── src/
│   ├── app/                 # Next.js app directory
│   │   ├── api/            # API routes
│   │   │   ├── auth/       # Authentication endpoints
│   │   │   ├── issues/     # Issue CRUD operations
│   │   │   └── users/      # User management
│   │   ├── auth/           # Authentication configuration
│   │   ├── issues/         # Issue management pages
│   │   │   ├── list/       # Issue listing with filters
│   │   │   ├── new/        # Create new issue
│   │   │   └── [id]/       # Individual issue pages
│   │   ├── providers/      # React context providers
│   │   └── layout.tsx      # Root layout component
│   ├── components/         # Reusable UI components
│   │   ├── KanbanBoard.tsx     # Kanban view component
│   │   ├── EnhancedIssuesView.tsx # Multi-view container
│   │   ├── VirtualizedIssuesList.tsx # Performance-optimized list
│   │   ├── SearchInput.tsx     # Search functionality
│   │   ├── StatusBadge.tsx     # Status indicators
│   │   └── ...
│   ├── hooks/              # Custom React hooks
│   │   ├── useInfiniteIssues.ts # Infinite loading logic
│   │   └── useIssueActions.ts   # Issue operations
│   ├── lib/                # Utility libraries
│   │   ├── prisma.ts       # Database client
│   │   └── validationSchema.ts # Zod schemas
│   └── services/           # API service layer
│       └── apiService.ts   # HTTP client configuration
├── .env.local              # Environment variables
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Project dependencies

🔧 Configuration

Database Configuration

The application uses Prisma as the ORM with MongoDB as the database. The schema includes:

• Users - Authentication and profile management
• Issues - Core issue tracking entity
• Accounts/Sessions - NextAuth.js authentication tables

Authentication Setup

1. Google OAuth Setup:

   • Go to Google Cloud Console
   • Create a new project or select existing
   • Enable Google+ API
   • Create OAuth 2.0 credentials
   • Add authorized redirect URIs: http://localhost:3000/api/auth/callback/google

2. NextAuth Secret:

   # Generate a secure secret
   openssl rand -base64 32

Sentry Integration (Optional)

For error monitoring and performance tracking:

1. Create account at Sentry.io
2. Create new project for Next.js
3. Copy DSN to environment variables
4. Sentry is pre-configured in next.config.ts

🎯 API Documentation

Issue Endpoints

GET /api/issues

Retrieve issues with filtering and pagination

Query Parameters:

• page - Page number (default: 1)
• pageSize - Items per page (default: 10)
• status - Filter by status (OPEN, IN_PROGRESS, CLOSED)
• search - Search in title and description
• orderBy - Sort field (createdAt, title, status)
• orderDirection - Sort direction (asc, desc)

Response:

{
  "issues": [...],
  "totalCount": 150,
  "page": 1,
  "pageSize": 10,
  "totalPages": 15
}

POST /api/issues

Create a new issue

Body:

{
  "title": "Issue title",
  "description": "Detailed description in Markdown"
}

GET /api/issues/[id]

Retrieve specific issue with assignee information

PATCH /api/issues/[id]

Update issue details

Body:

{
  "title": "Updated title",
  "description": "Updated description",
  "assignedUserId": "user-id-or-null"
}

DELETE /api/issues/[id]

Delete an issue (requires authentication)

User Endpoints

GET /api/users

Retrieve all users for assignment dropdown

🎨 Customization

Styling

The application uses Tailwind CSS with Radix UI components:

• Colors: Modify tailwind.config.ts for custom color scheme
• Typography: Geist Sans and Geist Mono fonts are pre-configured
• Components: Radix UI provides accessible, unstyled components
• Theme: Light theme with violet accent color

Adding New Status Types

1. Update prisma/schema.prisma:

   enum Status {
     OPEN
     IN_PROGRESS
     CLOSED
     BLOCKED      // Add new status
   }

2. Update src/constants/statuses.ts with new status configuration

3. Run database migration:

   npx prisma db push

🧪 Development

Available Scripts

# Development server with Turbopack
npm run dev

# Production build
npm run build

# Start production server
npm start

# Run linting
npm run lint

# Seed database with sample data
npm run seed

# Database operations
npx prisma studio          # Database GUI
npx prisma db push         # Push schema changes
npx prisma generate        # Generate client

Code Quality

• ESLint: Configured with Next.js recommended rules
• TypeScript: Strict mode enabled for type safety
• Prettier: Auto-formatting on save (configure in your editor)
• Husky: Git hooks for pre-commit checks (optional)

Performance Monitoring

• React Query DevTools: Available in development
• Next.js Bundle Analyzer: Run ANALYZE=true npm run build
• Sentry Performance: Automatic performance monitoring
• Chrome DevTools: Built-in performance profiling

🚀 Deployment

Vercel (Recommended)

1. Connect Repository:

   • Import project to Vercel
   • Connect your Git repository

2. Environment Variables:

   • Add all environment variables from .env.local
   • Update NEXTAUTH_URL to your production domain

3. Deploy:

   • Automatic deployments on Git push
   • Preview deployments for pull requests

Alternative Platforms

The application can be deployed to any platform supporting Node.js:

• Netlify
• Railway
• Digital Ocean App Platform
• AWS Amplify
• Heroku

Docker Deployment

Create Dockerfile:

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Development Setup

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run tests and linting: npm run lint
5. Commit changes: git commit -m 'Add amazing feature'
6. Push to branch: git push origin feature/amazing-feature
7. Open a Pull Request

Code Standards

• TypeScript: Use proper typing, avoid any
• Components: Use functional components with hooks
• Styling: Use Tailwind CSS classes
• API: Follow REST conventions
• Database: Use Prisma for all database operations

Commit Messages

Follow Conventional Commits:

feat: add new issue filter by assignee
fix: resolve pagination bug on mobile
docs: update API documentation
style: improve button hover states

🐛 Troubleshooting

Common Issues

1. Database Connection Failed

# Check MongoDB connection string
# Ensure database is running
# Verify network access (whitelist IP for cloud MongoDB)

2. Google OAuth Not Working

# Verify GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET
# Check authorized redirect URIs in Google Cloud Console
# Ensure NEXTAUTH_URL matches your domain

3. Prisma Client Errors

# Regenerate Prisma client
npx prisma generate

# Reset database (caution: loses data)
npx prisma db push --force-reset

4. Build Errors

# Clear Next.js cache
rm -rf .next

# Clear node_modules
rm -rf node_modules package-lock.json
npm install

Getting Help

• Issues: Create an issue on GitHub
• Discussions: Use GitHub Discussions for questions
• Documentation: Check Next.js and Prisma docs
• Community: Join relevant Discord servers

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js Team - Amazing React framework
• Vercel - Hosting and deployment platform
• Prisma Team - Excellent database toolkit
• Radix UI - Accessible component primitives
• Tailwind CSS - Utility-first CSS framework
• React Query - Powerful data synchronization

📊 Project Stats

• Lines of Code: ~15,000
• Components: 25+
• API Endpoints: 8
• Database Tables: 5
• Third-party Integrations: 3

---

Built with ❤️ using modern web technologies. Star ⭐ this repo if you find it helpful!