Issue Tracking & Team Assignment System
Sife Mahmud Simon
esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
—_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
Issue Tracking & Team Assignment System
Full Stack Issue Management Platform
Tech Stack
Frontend
Next.js
React
TypeScript
Tailwind CSS
React Markdown
Backend
Next.js API Routes
Prisma ORM
MySQL
NextAuth
Tools
Axios
React Hook Form
Zod Validation
React Query
Lucide Icons
React Toastify
Company: Issue Tracker
Type:
Status:
Year:
Duration:
Overview
Issue Tracker is a collaborative issue management platform designed for small-to-medium teams to track bugs, feature requests, and project tasks in one centralized workspace. The system includes Google authentication, markdown-powered issue descriptions, assignment workflows, filtering and sorting capabilities, and a live analytics dashboard that provides real-time visibility into project health and task progress.
Features
- Google authentication using NextAuth for secure and seamless sign-in
- Create, edit, delete, and manage issues with markdown descriptions
- Three-stage issue workflow (Open → In Progress → Closed)
- Issue assignment system with assignee avatars and ownership tracking
- Live dashboard with issue statistics and project health visualization
- Latest issues activity feed with real-time status updates
- Status filtering and column-based sorting system
- Pagination support for managing large issue backlogs
- Responsive UI optimized for desktop and mobile devices
- Persistent authentication sessions across browser restarts
- Markdown rendering support for structured issue descriptions
- URL-based filter and sorting persistence for shareable views
Challenges
- Managing authenticated and unauthenticated user states across protected actions
- Implementing real-time dashboard synchronization with issue updates
- Handling markdown rendering and validation securely
- Designing scalable filtering, sorting, and pagination logic
- Maintaining responsive table layouts across smaller devices
- Optimizing Prisma queries for dashboard statistics and issue feeds
Results
- Delivered a streamlined workflow for issue tracking and team collaboration
- Improved task visibility through live dashboard analytics
- Reduced workflow complexity with a clean and intuitive UI
- Created a scalable issue management architecture for future expansion
- Enabled teams to organize and resolve issues more efficiently
Technologies Used
- Next.js for routing, server-side rendering, and API handling
- TypeScript for scalable and type-safe development
- Prisma ORM for database management and optimized querying
- NextAuth for Google OAuth authentication and session handling
- Tailwind CSS for responsive and utility-first styling
- React Markdown for rendering formatted issue descriptions
- MySQL for relational database storage and issue management
Responsibilities
- Designed and developed the complete frontend UI and workflow
- Implemented Google authentication with NextAuth
- Integrated Prisma ORM with relational database schema
- Built issue CRUD operations with validation
- Developed dashboard analytics and issue visualization
- Implemented filtering, sorting, and pagination system
- Created responsive layouts for desktop and mobile experiences
- Managed markdown rendering and issue detail pages
Architecture
Type: full-stack web application
Pattern: component-based + API-driven architecture
Data Flow: Client UI → Next.js API Routes → Prisma ORM → Database → Dashboard/UI Rendering
Integrations
- Google OAuth authentication with NextAuth
- RESTful API routes for issue operations
- Markdown editor and renderer integration
- Database integration using Prisma ORM
Performance Optimizations
- Optimized database queries using Prisma select and pagination
- Server-side rendering for faster page loading and SEO benefits
- Reusable component architecture for maintainability
- Efficient dashboard aggregation queries for live statistics
- Conditional rendering and lazy loading for improved UX
Testing
- Manual testing for issue creation and assignment workflows
- Authentication and session validation testing
- Responsive UI testing across devices
- Validation testing for issue forms and markdown inputs
- API response and database consistency testing
User Roles
User: View issues and dashboard information
Corporate: Create, edit, assign, update, and manage issues
Admin: Monitor project activity and manage workflow