Welcome to my world of creativity! Scroll down to see the exciting projects I've brought to life.

/projects

LetMeSeeTech — AI-Powered Web Change Detection & Monitoring Platform

LetMeSeeTech — AI-Powered Web Change Detection & Monitoring Platform

A production-grade, full-stack web monitoring platform built with Next.js 15 (App Router) and TypeScript, designed to help developers track meaningful content changes across documentation sites, API references, and technical blogs. The system features an intelligent scraping engine using Axios and Cheerio with noise reduction, timestamp stripping, and paragraph-level diff detection — surfacing exactly what changed rather than simply flagging that something did. Every detected change is automatically analyzed by Google Gemini 2.5 Flash, which generates a plain-English explanation and classifies the change as Low, Medium, High, or Critical. Users receive email notifications via Resend only when changes meet their configured priority threshold, eliminating noise. The platform supports per-site monitoring intervals (30 minutes to 24 hours), custom CSS selectors for targeted scraping, unread change tracking, and a complete snapshot history with side-by-side visual diffs. Authentication is handled by Clerk with social login support. The backend is fully serverless, triggered by an external cron job with header-based secret authentication, MongoDB indexes for query optimization, rate limiting, SSRF protection, and structured JSON logging for production observability. The UI is built with Tailwind CSS, Framer Motion, and GSAP ScrollTrigger, delivering a premium glassmorphism design with cursor mask effects and scroll-driven parallax animations. Deployed on Vercel with a documented infrastructure constraint model, this project demonstrates full-stack system design, AI integration, security hardening, and product thinking from idea to production.

Next.js 15TypeScriptTailwind CSSMongoDBMongooseClerk AuthenticationGoogle Gemini AIResendAxiosCheerioWeb ScrapingDiff DetectionFramer MotionGSAPServerlessCron JobsRate LimitingFull Stack DevelopmentAI IntegrationApp Router
Full-Stack E-commerce Platform with Next.js, Clerk Auth & Stripe Integration

Full-Stack E-commerce Platform with Next.js, Clerk Auth & Stripe Integration

A modern, production-grade e-commerce platform built using Next.js (App Router) with TypeScript, designed around a scalable and modular architecture. The application features complete shopping functionality including product listings, collections, cart management, wishlist system, and order processing. State management is handled efficiently using Zustand, ensuring a lightweight and performant global store. Authentication is implemented via Clerk, providing secure and seamless user sessions. The backend is structured using API routes with clear separation of concerns, supporting dynamic operations such as wishlist persistence and order handling. Stripe integration is implemented to simulate real-world payment workflows, demonstrating a strong understanding of checkout sessions and payment pipelines despite regional limitations. The UI is crafted using Tailwind CSS and shadcn/ui, delivering a clean, responsive, and modern user experience. This project showcases expertise in full-stack system design, scalable folder architecture, API handling, and real-world e-commerce logic aligned with industry standards.

Next.jsTypeScriptTailwind CSSZustandClerk AuthenticationStripe IntegrationE-commerceREST APIApp Routershadcn/uiFull Stack Development
3D Dragon on the Web with React Three Fiber & GSAP

3D Dragon on the Web with React Three Fiber & GSAP

An experimental 3D web project built to explore real-time graphics and animations in the browser using React Three Fiber and GSAP. After months of structured development work, this project was created as a focused practice to dive deeper into 3D rendering, scene composition, and animation control. The application features a 3D dragon rendered directly in the browser, showcasing the integration of Three.js through React Three Fiber along with smooth animation handling using GSAP. The project is currently not optimized and not fully responsive, as the primary goal was hands-on exploration and creative experimentation rather than production readiness. It reflects an understanding of 3D space, camera movement, performance considerations, and the workflow of building interactive 3D experiences on the web.

ReactViteReact Three FiberThree.jsDreiGSAP3D WebCreative CodingFrontend Development
AI-Powered Customer Support Chat System with Next.js & Gemini API

AI-Powered Customer Support Chat System with Next.js & Gemini API

A production-grade AI customer support system built using Next.js (App Router) and a modular backend architecture, designed to provide intelligent, domain-restricted responses based on custom business knowledge. The system integrates Google's Gemini API to generate contextual replies while enforcing strict prompt constraints to prevent hallucinations. It features a fully embeddable chatbot widget that can be injected into any external website, enabling real-time communication with a centralized API. The backend leverages MongoDB for dynamic configuration, supports multi-tenant usage via owner-based settings, and implements secure API handling with proper CORS management. This project demonstrates advanced concepts such as controlled AI behavior, API design, scalable widget architecture, and seamless frontend-backend integration for real-world SaaS applications.

Next.jsReact.jsMongoDBGemini APIAI IntegrationREST APICORS HandlingEmbeddable WidgetJavaScriptSaaS Architecture
UniSearch — NUST Admission Predictor with Real-Time API & Data-Driven Insights

UniSearch — NUST Admission Predictor with Real-Time API & Data-Driven Insights

A full-stack, production-ready university admission prediction system built to estimate admission chances for NUST applicants based on aggregate scores. The application features a clean React (Vite) frontend paired with a modular Express.js backend deployed on Render, forming a scalable client-server architecture. The backend processes structured historical closing merit data and applies custom prediction logic to classify user chances into high, medium, and low categories, providing both quantitative insights and human-readable guidance. Multiple endpoints are designed for overall predictions, department-specific analysis, and trend visualization, demonstrating strong REST API design principles. The system includes robust middleware architecture, centralized error handling, and environment-based configuration for seamless development-to-production transitions. The frontend communicates dynamically with the deployed backend using environment variables, ensuring clean separation of concerns and deployment flexibility. Tailwind CSS is used to craft a modern, responsive UI, while the entire system reflects real-world engineering practices including API testing (via curl/Postman), CORS management, and cloud deployment (Netlify + Render). This project showcases deep understanding of backend logic design, API integration, data-driven decision systems, and full-stack deployment workflows.

React (Vite)Express.jsNode.jsREST APIFull Stack DevelopmentCORS HandlingEnvironment VariablesTailwind CSSData StructuresPrediction AlgorithmsNetlify DeploymentRender DeploymentAPI Integration
Media Search Platform with Redux Toolkit & API Integration

Media Search Platform with Redux Toolkit & API Integration

A modern media discovery platform built using React and Redux Toolkit, allowing users to search high-quality images and videos from multiple sources like Unsplash and Pexels. The application demonstrates efficient global state management, API data normalization, and a clean, responsive UI system. Users can explore media content in real-time, switch between media types, and save items into a local collection. This project focuses on mastering Redux Toolkit architecture, asynchronous data handling, and building a production-level frontend experience without backend dependency.

React.jsRedux ToolkitTailwind CSSUnsplash APIPexels APIViteResponsive UIState Management
Custom Auth in Next.js with Separate Server ( in MVC architecture with logging ( Winston & Morgan ) )

Custom Auth in Next.js with Separate Server ( in MVC architecture with logging ( Winston & Morgan ) )

A full-featured personal portfolio built with the MERN stack, combining modern design with smooth interactivity and performance. This project highlights my ability to architect and develop a fully responsive, fast-loading web application using the latest technologies in the JavaScript ecosystem.

Next.jsNode.jsNode MailerWinstonMorganjwt with cookies
Portfolio in MERN Stack

Portfolio in MERN Stack

A full-featured personal portfolio built with MERN stack, combining modern design with smooth interactivity and performance. This project highlights my ability to architect and develop a fully responsive, fast-loading web application using the latest technologies in the JavaScript ecosystem.

ReactNode.jsMongoDBTailwind
Pinterest Clone

Pinterest Clone

A feature-rich, full-stack Pinterest clone built with Next.js, offering a modern, visually engaging experience for image discovery and sharing. This project focuses on seamless user authentication, optimized image handling, and a sleek UI inspired by real-world design systems.

Next jsoAuth ( Google & Github )CloudinaryMongodb
3d Nextjs Portfolio

3d Nextjs Portfolio

A cutting-edge, visually immersive 3D portfolio website built with Next.js, powered by React Three Fiber and Three.js to showcase creativity, technical depth, and frontend mastery. This project blends interactive 3D models with smooth GSAP animations to deliver a futuristic browsing experience.

Next jsReact Three FibreGSAPThree js
Bookish

Bookish

Bookish is a full-stack MERN app that allows secure user authentication with JWT and bcrypt.js. It features a responsive design for easy navigation and secure backend handling of user data with cookies. This project demonstrates my skills in both frontend and backend development.

React jsMERN StackTailwindMongodb
Wordpress Portfolio

Wordpress Portfolio

I built a personal portfolio website using WordPress to showcase my development skills and projects. The website features a clean, professional design, highlighting my expertise in the WordPress. It includes sections for project showcases, contact information, about section, hero section ets. The website is fully responsive and optimized for a seamless user experience.

WordpressElementorCustom CSS