Issue Tracker App with Google OAuth Authentication

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 📸 Screenshots

🤖 Introduction

This application is a lightweight issue tracker built using Next.js, React.js, TypeScript, Tailwind CSS, and Prisma for the backend with MySQL. It features seamless integration with React Query for data fetching and management, and NextAuth for easy authentication setup. Enjoy a smooth user experience and efficient project management with this intuitive and versatile tool.

⚙️ Tech Stack

• Next.js
• TypeScript
• React Query
• Tailwind CSS
• Shadcn
• Prisma(ORM)
• MySQL Workbench(Dev) / AWS RDS-(MySQL) for Production

🔋 Features

👉 Authentication System: Utilizing NextAuth, seamlessly integrate Google OAuth for secure user authentication.

👉 Dashboard: Display graphical representation of issue counts alongside a summary of recent issues for enhanced visibility and analysis.

👉 Filter Functionality: Users can categorize issues by status (OPEN, CLOSED, IN PROGRESS) for streamlined management.

👉 Sorting Functionality: Users can alphabetically sort issues by title, status, and creation date for improved task organization.

👉 Detailed Issue Page: A detailed issue page displaying description and status of isusse and edit and delete issue for autharized users.

👉 Create Issue Page: Add a Markdown Editor to help users create detailed issue descriptions with ease.

👉 Edit Issue Functionality: Provide authorized users with the ability to edit the description and status of an issue at any time.

👉 Light and Dark Mode: Implement both light and dark themes to provide users with a personalized and visually comfortable experience.

👉 React Query Integration: Incorporate the React Query (Tanstack Query) data fetching library for, Auto caching to enhance performance, Parallel queries for efficient data retrieval.

👉 Prisma (Object-Relational Mapper ORM): Utilize Prisma as an ORM tool for seamless interaction between your application and the database.

👉 Backend (MySQL): Use MySQL in development for efficient data management. Integrate other preferred databases like PostgreSQL or MongoDB if needed. For production, transition to Amazon RDS MySQL for scalability and performance.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/TarakaKoda/issue-tracker-app.git
cd issue-tracker

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

DATABASE_URL=""
NEXTAUTH_URL ="http://localhost:3000"
NEXTAUTH_SECRET=""
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

Replace the placeholder values with your actual Google OAuth credentials. You can obtain these credentials by signing up on the Google | NextAuth.js.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

📸 Screenshots

DASHBOARD 📊
Desktop View 💻
Tablet View 📱	Mobile View 📱

ISSUES LIST PAGE 📃
Desktop View 💻
Tablet View 📱	Mobile View 📱

FILTER FUNCTIONALITY 🔍
OPEN ISSUE❓ Desktop View 💻
Tablet View 📱	Mobile View 📱
IN PROGRESS ISSUE ⌛ Desktop View 💻
Tablet View 📱	Mobile View 📱
CLOSED ISSUE ✅ Desktop View 💻
Tablet View 📱	Mobile View 📱

Sort Functionality 🔢
Desktop View 💻
Tablet View 📱	Mobile View 📱

DETAILED ISSUE 📄
Desktop View 💻
Tablet View 📱	Mobile View 📱

CREATE NEW ISSUE 📃
Desktop View 💻
Tablet View 📱	Mobile View 📱

📝 Edit Issue
Desktop View 💻
Tablet View 📱	Mobile View 📱

Light Mode ☀️
DASHBOARD 📊
Desktop View 💻
Tablet View 📱	Mobile View 📱

ISSUES LIST PAGE 📃
Desktop View 💻
Tablet View 📱	Mobile View 📱

FILTER FUNCTIONALITY 🔍
OPEN ISSUE❓ Desktop View 💻
Tablet View 📱	Mobile View 📱
IN PROGRESS ISSUE ⌛ Desktop View 💻
Tablet View 📱	Mobile View 📱
CLOSED ISSUE ✅ Desktop View 💻
Tablet View 📱	Mobile View 📱

Sort Functionality 🔢
Desktop View 💻
Tablet View 📱	Mobile View 📱

DETAILED ISSUE 📄
Desktop View 💻
Tablet View 📱	Mobile View 📱

CREATE NEW ISSUE 📃
Desktop View 💻
Tablet View 📱	Mobile View 📱

📝 Edit Issue
Desktop View 💻
Tablet View 📱	Mobile View 📱