Muhammad Hanif.
Back to Projects
Full E-Commerce Supplement Store with AI Integration Search and AI Adviser
Featured2026

E-Commerce

Full E-Commerce Supplement Store with AI Integration Search and AI Adviser

Role: Full Stack Developer

Live

Designed and developed a production-ready AI-powered Supplement eCommerce Platform that combines modern eCommerce functionality with artificial intelligence to deliver a personalized shopping experience. The platform includes an intelligent AI advisor capable of recommending supplements based on user requirements, an AI-powered product search system, dynamic product management, secure user authentication, shopping cart functionality, responsive user interface, and a comprehensive admin dashboard for managing products and content.

The application was built using Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS, and MongoDB Atlas with Mongoose for scalable database management. Authentication and protected routes were implemented using NextAuth.js, while RESTful API routes handled backend operations. AI capabilities were integrated through OpenRouter AI, enabling natural language interactions and intelligent product recommendations. Additional implementation includes responsive UI/UX, reusable component architecture, image optimization, form validation, secure API design, modular project structure, and SEO-friendly development practices suitable for modern production environments.

Technologies & Tools: Next.js 16, React 19, TypeScript, Node.js, MongoDB Atlas, Mongoose, NextAuth.js, Tailwind CSS, REST APIs, OpenRouter AI, AI Chat Integration, Cloudinary, Git, GitHub, Vercel, Responsive Design, SEO Optimization, Secure Authentication, CRUD Operations, Component-Based Architecture, Performance Optimization, and Modern Full-Stack Development Practices.

Key Highlights

Customer Friendly & Intelligent AI Adviser for Supplements
Intelligent AI Shopping Assistant powered by OpenRouter AI
Smart Product Search with AI Integration
Modern Full-Stack Architecture using Next.js 16 & React 19
Secure Authentication with NextAuth.js
MongoDB Atlas Database with Mongoose ODM
Dynamic Admin Dashboard for Product & Content Management
Complete CRUD Operations for Products
Cloudinary Image Upload & Management
Responsive Mobile-First UI/UX Design
Shopping Cart & Order-Ready eCommerce Structure
REST API Architecture with Server Actions
TypeScript-based Scalable Codebase
GitHub Version Control & Vercel Production Deployment

Tech Stack

typescriptmongodbcloudinaryMongooseNextAuth.jsTailwind CSSREST APIsOpenRouter AIAI Chat IntegrationCRUD OperationsReactNext.js

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