Muhammad Bilal Siddiqui
Cross-Platform Full-Stack Software Developer
New to Contra
Muhammad is ready for their next project!
Project Overview
Developed MernEats, an enterprise-grade, high-performance full-stack food discovery and ordering platform. Engineered with a complete MERN stack (MongoDB, Express.js, React, Node.js) and fully typed with TypeScript, the platform bridges the gap between hungry customers and local restaurants. The system is designed to provide a premium, lightning-fast ordering experience, complete with fuzzy-search discovery, a state-driven interactive cart, secure Stripe-powered transactions, and an advanced administrative dashboard for real-time order orchestration and menu control.
Key Features & Technical Implementation
End-to-End TypeScript Integration: Developed client and server architectures entirely in TypeScript, ensuring robust type safety, eliminating runtime errors, and facilitating clean code compilation.
Fuzzy Search & Cuisine Filtering: Engineered a smart restaurant discovery engine supporting fuzzy text matching across restaurant names, locations, and menu items, paired with custom cuisine-chip filters.
Global State Management with Zustand: Integrated lightweight Zustand stores on the frontend to seamlessly manage user authentication, cart items with dynamic quantity constraints, and real-time order status updates.
Secure Checkout & Stripe Integration: Configured an asynchronous payment flow leveraging Stripe Checkout sessions, validated via custom Webhook endpoints to handle atomic order creation and payment confirmation securely.
Cloud-Managed Media & Dynamic CRUD: Built comprehensive admin workflows for restaurant profile customization and menu item management, with images served via Cloudinary CDN and automatic media cleanup on item deletion.
Responsive, Adaptive Layouts: Designed a sleek modern interface leveraging Tailwind CSS and shadcn/ui components, complete with a persistent system-aware dark mode and buttery-smooth micro-animations.
Transaction-Driven Email Workflows: Programmed fully automated email validation and password reset modules using Mailtrap.
Technologies Used
Frontend Core: React (v18), Vite, TypeScript, Zustand (State Management)
Styling Framework: Tailwind CSS, shadcn/ui, Lucide Icons
Backend API: Node.js, Express.js (TypeScript)
Database & ORM: MongoDB Atlas, Mongoose
Payment Processor: Stripe API, Stripe Webhooks
Cloud Services: Cloudinary (Media Assets CDN), Mailtrap (Transactional Emails)
Hosting & Deployment: Vercel (Client & Serverless Functions)
Outcome
Delivered a production-ready, highly secure, and pixel-perfect MERN application. By implementing automated payment confirmation, smart discovery search, and robust role-based access control (RBAC), the platform is fully optimized for scale. It offers a smooth, reliable experience that mimics major industry-standard delivery platforms.
1
39
Project Overview
Developed Foodi, a high-performance, enterprise-grade full-stack food delivery ecosystem designed to deliver a seamless, modern dining experience from kitchen to doorstep. Unlike typical static frontend prototypes, this is a complete production-ready MERN (MongoDB, Express, React, Node.js) application. The platform features a highly responsive, mobile-first customer storefront, a secure transactional pipeline integrated with Stripe, dual-layer authentication (Firebase + custom JWT), and a dedicated, role-based administrative dashboard for real-time order lifecycle governance and business analytics.
Key Features & Technical Implementation
Dual-Layer Authentication: Integrated Firebase Authentication for quick identity verification, paired with a custom server-side JWT (JSON Web Token) exchange mechanism to secure all private API endpoints.
Dynamic Catalog & State Management: Utilized React 18 and TanStack Query (React Query) for smart client-state fetching, background synchronization, and automatic caching of menu items and cart states, reducing database load.
Secure Payment Pipeline: Integrated Stripe Checkout API using the Stripe Payment Intents model, ensuring safe, PCI-compliant card processing with automatic backend transaction validation and database persistence.
Real-Time Order Tracking: Implemented a state-driven interactive timeline tracking the entire lifecycle of an order (Pending → Cooking → On the Way → Delivered) with dynamic UI updates.
Role-Based Admin Control Panel: Built a comprehensive dashboard featuring secure route guards, custom menu CRUD operations (with remote image hosting via ImgBB), real-time booking status managers, and user role administration.
Technologies Used
Frontend Stack: React 18 (Vite), React Router v6, TanStack Query (React Query), Axios
Backend & Database: Node.js, Express.js, MongoDB Atlas, Mongoose ODM
Authentication & Security: Firebase Auth, Custom JWT Middleware
Payment Integration: Stripe API & SDK
Styling & UI: Tailwind CSS, DaisyUI, React-Slick, SweetAlert2, React Toastify
Deployment & Hosting: Vercel (Monorepo configuration with /api/* rewrites)
Outcome
Delivered a secure, pixel-perfect, and fully functional MERN application featuring optimized rendering times and immediate cart state feedback. The deployment of a unified monorepo on Vercel guarantees clean routing and high scalability, resulting in a premium digital storefront that is fully ready to handle real-world commercial operations.
1
87
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.
1
119
Project Overview Engineered PrimeEstate, a production-grade, high-performance MERN stack real estate marketplace. The primary goal was to design and build an intuitive, secure, and visually stunning digital platform where users can seamlessly buy, rent, sell, and discover properties. Designed with a mobile-first philosophy, the web application combines advanced database search algorithms, a secure hybrid session model, and an automated image processing pipeline to offer an enterprise-level user experience.
Key Features & Technical Implementation
Secure Hybrid Authentication System: Implemented a robust dual authentication mechanism combining standard Email/Password credentials with Google OAuth (via Firebase Auth SDK), unified into a single secure JWT session stored in HTTP-Only cookies to prevent XSS-based token theft.
Dynamic Property & Media Pipeline: Built a seamless media upload flow that uploads up to 6 high-resolution property images directly to Cloudinary via client-side unsigned requests, managing secure CDN links dynamically in MongoDB and enabling drag-and-drop cover image sorting.
Advanced Query & Search Engine: Developed an Express backend search controller supporting complex Mongoose queries (full-text search, property type, price limits, discount offers, furnished status, parking availability, and custom sorting) with paginated "Show More" listing retrieval.
Global State & Session Persistence: Managed application state with Redux Toolkit and integrated Redux Persist to securely cache user session data across browser reloads, ensuring instant interface responsiveness.
Responsive Layout & Visuals: Crafted a pixel-perfect, modern UI using Tailwind CSS and Swiper.js, delivering rich image sliders, responsive listing detail grids, and smooth dashboard management menus across mobile, tablet, and desktop screens.
Technologies Used
Frontend Library & Framework: React.js (v18) & Vite
Global State Management: Redux Toolkit & Redux Persist
Styling & Components: Tailwind CSS & Swiper.js
Backend Environment: Node.js & Express.js (ES6+)
Database & Modeling: MongoDB & Mongoose ORM
Authentication: JWT (HTTP-Only Cookies) & Google OAuth (Firebase SDK)
Media Storage & CDN: Cloudinary
Deployment & Hosting: Vercel (Monorepo setup with serverless functions)
Outcome
Successfully developed and deployed a scalable, highly secure, and feature-rich full-stack real estate marketplace. The clean separation between the static React frontend and the serverless Express API, coupled with optimized database indexing, guarantees sub-second page loads and seamless listing management, making the project ready for enterprise-level deployment.
0
147