Back to projects
Issue Tracker

Issue Tracker

Seyed Keyvan Hosseini / September 16, 2024

This is a full-stack issue-tracking application built with Next.js 14. It leverages Prisma for database management, NextAuth for authentication, and Sentry for error handling. The UI is designed using RadixUI components and Tailwind CSS for styling, with React Query managing client-side requests and caching.

You can view the live project here and check out the code on GitHub here.

Features

  • User Authentication: Secure user authentication is handled with NextAuth, providing a simple login flow.
  • Database Integration: Managed with Prisma, allowing for easy database access and manipulation.
  • Issue Creation and Management: Users can create, update, and manage issues, with a detailed dashboard to track issue statuses.
  • Error Monitoring: Integrated with Sentry for error tracking and handling, ensuring a reliable user experience.
  • Optimized Data Fetching: Utilizes React Query to handle client-side requests with caching and real-time updates.
  • Responsive UI: Built with RadixUI and styled using Tailwind CSS for a clean, responsive design.

Technologies

  • Next.js 14: A powerful React framework for building full-stack applications with a great developer experience.
  • Prisma: A modern database ORM that simplifies database interactions.
  • NextAuth: A flexible authentication solution for Next.js applications.
  • Sentry: A robust error-tracking system to capture and monitor application issues.
  • React Query: A versatile tool for handling server-state in React applications.
  • RadixUI: A set of unstyled, accessible components for building a custom UI.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Vercel: Deployed on Vercel for fast, scalable hosting.

Getting Started

To get started with this project, you can clone the repository and install the dependencies:

then you need to set your .env file according to .env.example file.

git clone https://github.com/skh113/issue-tracker.git
cd issue-tracker
npm install # installing dependencies
npm run dev # running the project

The development server will start at http://localhost:3000.

Deployment

To deploy this project, you can link your GitHub repository to Vercel and deploy the project effortlessly with automatic builds and deployments.

Conclusion

The Issue Tracker project demonstrates how to build a scalable and maintainable issue-tracking platform using the latest tools like Next.js 14, Prisma, and React Query. With NextAuth for authentication and Sentry for error monitoring, this project offers a robust solution for handling user issues efficiently.