Muhammad Hanif.
Back to Projects
A full-stack MERN (MongoDB, Express, React, Node.js) web application
Featured2026

Appointment

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

Role: Full Stack Developer

Live

Technology Purpose React 18 + Vite UI framework and build tooling TypeScript Type safety across all components and services Tailwind CSS Utility-first styling, fully responsive design system React Router (react-router-dom) Client-side routing (/, /track, /admin, etc.) lucide-react Icon set used throughout the UI Google Fonts (Space Grotesk, Inter, JetBrains Mono) Display / body / data typography Backend (/server) Technology Purpose Node.js + Express REST API server TypeScript (via tsx) Type-safe backend, run directly without a separate build step in dev MongoDB Atlas Cloud-hosted primary database Mongoose ODM — schema modeling, validation, queries jsonwebtoken (JWT) Admin session tokens bcryptjs Password hashing for the admin account helmet Security-related HTTP headers cors Cross-origin access control (locked to the client's origin) morgan Request logging in development dotenv Environment variable loading express-rate-limit Rate limiting on the AI assistant endpoint Third-party services Service Purpose MongoDB Atlas Database hosting Brevo Transactional email (booking confirmations, status-change emails) — free tier, 300 emails/day OpenRouter Free-tier LLM access powering the AI assistant, with a multi-model fallback chain

Key Highlights

Dynamic specialties
Appointment booking form
Double-booking prevention
Email confirmation
Status-change emails
Track my appointment
JWT-based authentication
Admin Dashboard

Tech Stack

Node.jsReactMongodbTypescriptexpress-rate-limitdotenvmorganjsonwebtoken (JWT)MongooseExpressExpress.jsbcryptjshelmetcorsBrevoOpenRouter

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
Next.js 14 (App Router) + TypeScript + Tailwind CSS a Real-Estate Business App With Admin Dashboard
Featured2026
Live

Real Estate

Next.js 14 (App Router) + TypeScript + Tailwind CSS a Real-Estate Business App With Admin Dashboard

Next.js 14 App Router, TypeScript Tailwind CSS (custom design tokens — see tailwind.config.ts) Recharts for charts lucide-react for icons Mock data lives in src/data/mock.ts — swap with real API/database calls when read etc.......

ReactNext.jsTailwind CSSTypescriptMongodb