Muhammad Hanif.
Back to Projects
A Modern Full-Stack Customer Support Desk Built With Next.JS
Featured2026

Customer Support

A Modern Full-Stack Customer Support Desk Built With Next.JS

Role: Full Stack Developer

Live

AI Support Desk is a lightweight but production-oriented support desk application designed to demonstrate how a real customer support workflow can be built using modern full-stack technologies.

Customers can submit support requests through a dedicated public interface, while authenticated administrators can manage and respond to those tickets through a protected dashboard.

The project focuses on:

Real database persistence Secure authentication Protected admin routes Dynamic ticket management Ticket conversations Responsive modern UI Search and filtering Pagination Custom notifications and UX MongoDB Atlas integration šŸš€ Features šŸŽ« Customer Ticket Submission Customers can submit support requests with information such as:

Customer name Email Subject Description Category Priority Submitted tickets are stored directly in MongoDB.

šŸ§‘ā€šŸ’¼ Admin Authentication The application includes secure administrator authentication using NextAuth.

Features include:

Credentials-based login JWT sessions Protected dashboard routes Protected API endpoints Admin role handling Active user validation Secure password verification Unauthenticated users cannot access protected admin areas.

Key Highlights

šŸŽ« Customer Ticket Submission
šŸ§‘ā€šŸ’¼ Admin Authentication
šŸ“Š Admin Dashboard
šŸ’¬ Ticket Conversations
šŸ”Ž Search & Filtering

Tech Stack

Next.jstailwindcsstypescriptMongodbReact

More Projects

DriveHub — Car Rental Platform
Featured2026
In Development

Car Rental System

DriveHub — Car Rental Platform

A full-stack car rental application built with NestJS + MariaDB/MySQL on the backend and React + Tailwind CSS on the frontend. Includes customer browsing/booking, a full admin management dashboard, and is deployed live (frontend on Vercel, backend + database on Railway).

Browse fleet with search, filters (city, type, transmission, price), and sorting
Car details page with image gallery, specs, and a live price calculator
Booking with automatic double-booking prevention (date-overlap check) and server-calculated pricing (base rate + optional driver + optional insurance + service fee)
nest.jsexpress.jsnode.jstypescriptjavascripttailwindcssmysqlvitemariadbreact
Full-Stack Digital Banking Web App
Featured2026
Live

Banking Application

Full-Stack Digital Banking Web App

A full-stack MERN banking application with a modular, industry-style architecture — separate frontend and backend, independently deployable, connected via environment variables. Built to demonstrate real banking-app patterns: JWT authentication, atomic money-movement transactions, layered backend architecture, and a complete set of banking modules

Authentication & Security
Real-time total balance across all accounts
External transfers (IBFT / RTGS) to saved beneficiaries
Node.jsExpress.jsTypeScriptMongodbMongoose 8JWT authenticationzodhelmetmorganbcryptjVercelVanillaBootstrapHtml5htmljavascriptchart.jsscssgitgithubjwt
A full-stack MERN (MongoDB, Express, React, Node.js) web application
Featured2026
Live

Appointment

A full-stack MERN (MongoDB, Express, React, Node.js) web application

Patients can browse specialties, book appointments, track their appointment status, and chat with an AI assistant — while clinic staff manage everything through a secure admin dashboard, fully backed by a live MongoDB Atlas database.

Dynamic specialties
Appointment booking form
Double-booking prevention
Node.jsReactMongodbTypescriptexpress-rate-limitdotenvmorganjsonwebtoken (JWT)MongooseExpressExpress.jsbcryptjshelmetcorsBrevoOpenRouter