Project Overview Developed BilalShop, a high-performance, enterprise-grade full-stack MERN (MongoDB, Express, React, Node.js) e-commerce platform designed to deliver a modern, secure, and seamless online shopping experience. The primary goal was to construct a responsive storefront coupled with a robust, production-ready backend API. The project features category-wise product carousels (Speakers, Airpods, Mobiles, Watches, etc.), instant search indexing, and micro-interactions powered by Lottie player. On the server side, it features role-based access control (RBAC), secure cookie-based session management, and automated order fulfillment triggered through Stripe payment webhooks. The entire application is orchestrated as a single-domain monorepo optimized for instant loading times and serverless scaling.

Key Features & Technical Implementation Responsive Category Carousels & Lottie UI: Implemented a mobile-first UI using TailwindCSS and dynamic carousels for seamless product discovery. Integrated @lottiefiles/react-lottie-player to deliver smooth micro-animations, improving user engagement and polish. Hybrid Client-Side State Management: Engineered a robust dual-state model utilizing Redux Toolkit to persist global user authentication data, alongside a lightweight React Context API to synchronize real-time shopping cart badge counts across the header and product cards without unnecessary re-renders. Secure Cookie-Based JWT Authentication: Developed a secure login system using JWTs stored in HTTP-only cookies (to mitigate XSS/CSRF vulnerabilities), backed by bcryptjs for secure password hashing and custom Express middleware to protect private API endpoints. Stripe Gateway & Webhook Synchronization: Integrated the Stripe Checkout SDK for secure payments. Implemented Express webhook handlers to listen for checkout.session.completed events, verifying signatures, creating timestamped order documents, and automatically clearing active shopper carts upon successful payment. Full-Scale Admin Dashboard: Built a dedicated administrative panel featuring dynamic modals to add, update, or remove inventory items, along with user management tools allowing administrators to assign user roles (Admin vs. Shopper) protected by rigorous server-side checks. Unified Monorepo & Deployment: Configured a single-domain monorepo structure utilizing vercel.json rewrites to deploy the React SPA frontend and Express serverless backend as a unified application, bypassing CORS complications and optimizing network latency.

Technologies Used Frontend Stack: React.js (v18), Vite, TailwindCSS, Redux Toolkit, React Router v6, React Context, React Toastify, React Icons Backend API & Security: Node.js, Express.js, JSON Web Tokens (JWT), Cookie-Parser, Bcryptjs, CORS Database & Modeling: MongoDB, Mongoose ODM Payment Processing: Stripe API & Stripe Webhooks (tested using Ngrok tunnel) Hosting & DevOps: Vercel (Unified Static Hosting + Serverless API routing)

Outcome Delivered a secure, production-ready full-stack e-commerce marketplace featuring pixel-perfect responsive layouts and an intuitive, administrative backend control system. The separation of client-side routing, global state synchronization, payment webhooks, and secure database validations ensures the codebase is fully scalable, robust, and ready for commercial use.