Muhammad Bilal Siddiqui
Cross-Platform Full-Stack Software Developer
New to Contra
Muhammad is ready for their next project!
Project Overview
Developed PlaySpace, an enterprise-grade, high-performance sports management and venue booking platform. Engineered with a unified React Native CLI core and a Node.js/Express backend, the platform bridges the gap between sports venue managers and local athletes. The system offers a seamless cross-platform experience, powering both a native mobile app (Android APK) and a lightning-fast Progressive Web App (PWA) via Expo Web hosted on Vercel. It features real-time slot availability tracking, interactive venue discovery with geolocation services, dynamic player match-hosting, and an advanced administrative orchestration dashboard.
Key Features & Technical Implementation
• Hybrid Cross-Platform Monorepo: Built a single monorepo architecture leveraging React Native CLI for native mobile performance and Expo Web for instant, zero-install PWA access across desktop and mobile browsers. • Real-Time Slot Orchestration & Double-Booking Prevention: Developed a reactive venue slot manager with dynamic availability states (Available, Reserved, Blocked), guaranteeing database-level atomicity to eliminate conflicting reservations. • Geolocation & Venue Discovery Engine: Integrated React Native Maps and Geocoder APIs to deliver location-aware venue exploration, address-to-coordinate mapping, and distance-based filtering by sport, date, and time. • Player Match Hosting & Community Activity: Built interactive social components enabling athletes to host new matches, reserve specific facility slots, and invite local players to join game sessions. • Enterprise JWT Authentication & RBAC: Implemented stateless session security using JSON Web Tokens (JWT) paired with modular Express middleware to enforce strict Role-Based Access Control (RBAC) for players and admins. • Zero-CLS Responsive Styling & State Management: Formulated platform-agnostic styling using React Native Stylesheets and React Context API to manage complex booking flows without layout shifts or page reflows.
Technologies Used
• Frontend Core: React Native CLI (v0.84), Expo Web (PWA), React (v19), React Navigation (v7) • State Management: React Context API & Custom React Hooks • Backend API: Node.js, Express.js (RESTful Architecture) • Database & ODM: MongoDB Atlas, Mongoose ODM • Geo & Mapping: React Native Maps, Geocoder API • Auth & Security: JSON Web Tokens (JWT), Nodemailer • Hosting & Infrastructure: Vercel Serverless Functions (Client & Serverless API)
Outcome
Delivered a production-ready, highly responsive hybrid sports ecosystem. By unifying native mobile development with a PWA web distribution model, the platform achieved near-instantaneous page-load speeds, zero double-booking conflicts, and seamless accessibility across all user devices. The system is fully optimized for scale, mimicking top industry-standard sports discovery platforms.
0
95
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
251
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
308
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
318