Skip to content

OmarTemsah99/issue-tracker

Repository files navigation

🐛 Issue Tracker

A modern issue tracking app built with the latest Next.js, TypeScript, Prisma, and more.
Based on Mosh Hamedani's project, refactored with current best practices.

Next.js TypeScript Prisma Tailwind CSS Vercel


🎥 Demo

👉 Watch the live demo video on Google Drive


📋 Table of Contents


🚀 Features

  • 🧾 Full CRUD functionality for issues
  • 🔐 Google OAuth with NextAuth.js
  • 🧑‍🤝‍🧑 Assign issues to team members
  • 🔍 Filter & sort issues by status, priority, or assignee
  • 📈 Dashboard with real-time issue stats
  • 📝 Markdown editor for detailed descriptions
  • ⚡ Optimistic UI updates using React Query
  • 💅 Styled with Tailwind CSS and Radix UI

🧱 Tech Stack

FrontendNext.js 15 (App Router), React, TypeScript
StylingTailwind CSS, Radix UI
FormsReact Hook Form, Zod
DataPrisma ORM, PostgreSQL/MySQL
AuthNextAuth.js (Google Provider)
APINext.js API Routes
ChartsChart.js
StateReact Query

⚙️ Getting Started

  1. Clone the repository
    git clone https://github.com/OmarTemsah99/issue-tracker.git
    cd issue-tracker
  2. Install dependencies
    npm install
  3. Set up environment variables
    cp .env.example .env
    Fill in:
    DATABASE_URL="mysql://user:password@localhost:3306/issue_tracker"
    NEXTAUTH_URL="http://localhost:3000"
    NEXTAUTH_SECRET="your-secret"
    GOOGLE_CLIENT_ID="your-client-id"
    GOOGLE_CLIENT_SECRET="your-client-secret"
  4. Run Prisma migrations
    npx prisma migrate dev
  5. Start the development server
    npm run dev
    Visit http://localhost:3000

📚 Usage

  • Sign in with Google
  • Create and assign issues
  • Edit, delete, or filter issues
  • View dashboards with charts
  • All interactions are cached for performance

🛠️ Scripts

npm run dev        # Start dev server
npm run build      # Build for production
npm run start      # Run production server
npx prisma studio  # Open Prisma DB GUI
npx prisma migrate dev  # Apply DB migrations

☁️ Deployment

This project is optimized for Vercel. Make sure to set all required .env variables in your Vercel dashboard.

Recommended Database Services:


🧯 Troubleshooting

  • Auth issues: Check Google credentials and NEXTAUTH_SECRET
  • Prisma errors: Validate your DATABASE_URL
  • Build fails: Clear .next and try rebuilding

👨‍💻 Contributors

  • Omar Temsah – project refactor, modernization
  • Based on Mosh Hamedani’s issue tracker course

📄 License

Licensed under the MIT License.


📘 Learn More


Built with ❤️ and modern web technologies

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors