Issue Tracker
Built as part of the "Next.js Projects: Build an Issue Tracker" course by Code with Mosh to deepen my understanding of Next.js and gain hands-on experience with modern full-stack technologies.
I built a full-stack issue tracker application as a practical project to strengthen my understanding of Next.js and gain hands-on experience with modern web technologies. The app leverages TypeScript, Prisma, PostgreSQL, Tailwind CSS, Radix UI, and NextAuth.js (Google login authentication) to deliver a responsive and secure issue management platform. I also integrated Sentry.io for monitoring, error tracking, and performance insights, ensuring better reliability during development. This project allowed me to explore new tech trends, improve my knowledge of full-stack development practices, and deploy a production-ready application on Vercel.
Features
A full-stack issue tracker application built to practice Next.js 13+ and modern technologies, designed to help teams manage and resolve issues more effectively.
Admin Dashboard — Oversee all issues in the system, manage user roles and permissions, and monitor project activity for better team coordination.
Issue Management — Create, assign, update, and resolve issues with detailed tracking. Support for categorization, prioritization, and status updates.
Authentication — Secure login system powered by NextAuth.js with Google OAuth integration, ensuring seamless and reliable access control.
Database Integration — Powered by Prisma and PostgreSQL for robust and scalable data storage, enabling efficient issue tracking and reporting.
UI/UX — Built with Tailwind CSS and Radix UI to provide a modern, responsive, and accessible interface for users across devices.
Monitoring & Error Tracking — Integrated with Sentry.io to capture errors and performance issues, ensuring better reliability and easier troubleshooting.
Deployment — Deployed on Vercel with performance optimizations and SEO best practices, making the app production-ready.
Screenshots
Tech Stack
This project is built with modern technologies, ensuring maintainability, scalability, and an efficient development experience while exploring the latest web development trends.
Frontend
React v19.1.1 — A JavaScript library for building dynamic and interactive user interfaces using reusable components.
TypeScript v5.x — Adds static typing to JavaScript, improving code maintainability, scalability, and developer productivity.
Next.js v15.5.0 — A React framework used to build the frontend and backend of the application, leveraging the App Router, Server Components, and SEO optimizations.
Tailwind CSS v4.x — A utility-first CSS framework that allows for rapid UI development with responsive and customizable design patterns.
Radix UI v3.2.1 — Provides accessible, unstyled UI components that integrate seamlessly with Tailwind CSS for building modern interfaces.
Backend
RESTful APIs — Implemented using Next.js API routes to handle issue creation, updates, and resolution in a structured and scalable manner.
Prisma v6.10.1 — An ORM used to interact with the database, offering a type-safe and efficient way to query and manage data.
PostgreSQL v17.6 — A relational database used to store issue data, providing strong consistency, scalability, and reliability.
NextAuth.js v4.24.11 — Handles authentication and authorization, including secure Google OAuth login for user access control.
Google OAuth — Integrated with NextAuth.js to enable secure login using Google accounts, providing a seamless authentication experience.
DevOps
Vercel — Used for deployment, providing fast builds, edge functions, and optimized hosting for Next.js applications.
Supabase — Provides cloud-hosted PostgreSQL along with APIs, authentication, and storage, powering the project’s database in production.
Sentry.io — Integrated for real-time error tracking and performance monitoring, improving reliability and debugging efficiency.