HomeMuhammad Asad's Projects

Muhammad Asad's Projects

Featured work and development portfolio - 23 projects

23 Projects

Web Development Projects Portfolio

Hector — Multi-Tenant Enterprise ERP System - Multi-Tenant Architecture, RBAC, React.js, Node.js, Express.js, MongoDB, Tailwind CSS, Ant Design (AntD), TanStack Query, JavaScript, Barcode Scanning Integration by Muhammad Asad, Full Stack Engineer
01

Hector — Multi-Tenant Enterprise ERP System

A high-scale, multi-tenant ERP infrastructure designed to manage cross-business operations safely. Engineered with rigid data isolation, granular role-based access control (RBAC), and custom API pipelines to maximize database read/write speeds under heavy transactional load. Core modules span Order Processing, Inventory Management, User & Role Management, Product Management, Employee Management, Attendance, Sourcing, Procurement, Order Fulfillment, and Barcode Scanning—unified under one platform built for teams that cannot afford downtime or data leakage between tenants.

Multi-Tenant ArchitectureRBACReact.jsNode.jsExpress.jsMongoDBTailwind CSSAnt Design (AntD)TanStack QueryJavaScriptBarcode Scanning Integration
Sportly — Training Camp Marketplace - Next.js 16, TypeScript, Tailwind CSS, Redux Toolkit, React Query, Socket.IO, Stripe, Google Maps API, AWS S3, NextAuth by Muhammad Asad, Full Stack Engineer
02

Sportly — Training Camp Marketplace

Sportly is a marketplace connecting sports teams and coaches with training camp facilities worldwide — think Booking.com, but purpose-built for football/sports clubs looking to book training camps abroad. The platform serves three distinct user types (travelers, camp hosts, and platform admins), each with their own dashboard and permissions. As a frontend developer on the project, I worked on building and redesigning core UI components using Next.js 16 (App Router) and Tailwind CSS, including the site-wide footer with custom brand theming; implementing Google One Tap authentication alongside email/password, Facebook, and Apple sign-in flows; building the client-side Stripe payment flow with secure checkout redirects for camp bookings; working with Redux, React Query, and Context for state management across search, filtering, wishlist, and booking flows; and collaborating on backend handoff documentation for the Camp Operator (CP) and Admin dashboards, bridging frontend and backend teams. The platform includes real-time features (Socket.IO-based group chat and notifications), advanced camp search/filtering, a full booking + review system, and social features like team groups with camp comparison and voting.

Next.js 16TypeScriptTailwind CSSRedux ToolkitReact QuerySocket.IOStripeGoogle Maps APIAWS S3NextAuth
Telegram Channels - Next.js, React.js, Tailwind CSS, JavaScript, SEO by Muhammad Asad, Full Stack Engineer
03

Telegram Channels

Tgelevate — branded as Telegram Channels — is a directory for discovering and joining Telegram channels, groups, bots, and stickers across categories such as crypto, jobs, education, entertainment, and news. Users can explore trending and featured listings, browse Top 100 and rankings, search with category filters, and a Lucky discovery-style action alongside submit-channel flows for owners who want more visibility. The product uses a dark, focused UI with straightforward navigation, hero calls to action (Explore Channels, Submit Your Channel), and messaging aimed at active communities. Listings are structured for SEO so channels can be found via search engines, not only inside Telegram.

Next.jsReact.jsTailwind CSSJavaScriptSEO
BitKnit Limited — Digital Agency Portfolio - Next.js, React.js, Tailwind CSS, Framer Motion, JavaScript by Muhammad Asad, Full Stack Engineer
04

BitKnit Limited — Digital Agency Portfolio

BitKnit Limited is a premium digital agency website showcasing services in paid advertising, business automation, and custom web development. The site features stunning Framer Motion animations, smooth page transitions, and interactive UI elements that create an engaging user experience. Highlights include an animated hero section, dynamic service showcases, client testimonials carousel, and a comprehensive portfolio of redesigned websites for various industries including e-commerce, SaaS, healthcare, and more. Built to demonstrate cutting-edge web design and development capabilities.

Next.jsReact.jsTailwind CSSFramer MotionJavaScript
RetrovGames — Customer Portal - Next.js, Tailwind CSS, TanStack Query, React.js, JavaScript, Node.js (backend) by Muhammad Asad, Full Stack Engineer
05

RetrovGames — Customer Portal

A responsive Shopify customer portal that centralizes post-purchase operations: order management, shipment tracking, returns, PDF invoices, coupons & gift cards, and a trade-in program for selling gaming items. I led the frontend — implementing the full UI, interactions, and dynamic client-side behavior, while backend APIs were provided by a Node.js service.

Next.jsTailwind CSSTanStack QueryReact.jsJavaScriptNode.js (backend)
RetroFam — Customer Portal - Next.js, Tailwind CSS, TanStack Query, React.js, JavaScript, Node.js (backend) by Muhammad Asad, Full Stack Engineer
06

RetroFam — Customer Portal

RetroFam's Shopify customer portal — built for a sibling gaming retail brand — centralizes post-purchase operations: order management, shipment tracking, returns, PDF invoices, coupons & gift cards, and a trade-in program for selling gaming items. I led the frontend for RetroFam specifically, implementing the full UI, interactions, and dynamic client-side behavior, while backend APIs were provided by a Node.js service.

Next.jsTailwind CSSTanStack QueryReact.jsJavaScriptNode.js (backend)
Canrover Admin Panel - Next.js, Node.js, TypeScript, Redux Toolkit, React Hook Form, Zod, Google Maps API, Tailwind CSS by Muhammad Asad, Full Stack Engineer
07

Canrover Admin Panel

Developed a fully dynamic Next.js/Node.js admin dashboard for a US scooter-rental client, featuring live map tracking, remote lock/unlock, QR-code ride activation, form validation, and secure access. Added Google Maps-based zone management to visualize parking zones, maintenance areas, danger zones, and more—all in a responsive, server-rendered interface for robust type safety and performance.

Next.jsNode.jsTypeScriptRedux ToolkitReact Hook FormZodGoogle Maps APITailwind CSS
Bourter - Next.js, React.js, Tailwind CSS, Framer Motion, React Hook Form, Form Validation, File Upload, Multi-step Forms, JavaScript by Muhammad Asad, Full Stack Engineer
08

Bourter

Bourter is a comprehensive ride-sharing platform landing page that connects riders with verified drivers for fast, safe, and reliable transportation. The platform features an all-in-one solution for booking rides, tracking in real-time, and seamless payments. The landing page showcases Bourter's core features including how the platform works with a 4-step process (Request, Match, Ride, Arrive), real-time GPS tracking and navigation, multiple ride type options (Economy, Comfort, Luxury), and secure payment integrations. The site includes detailed sections explaining why users should choose Bourter, highlighting verified drivers, safety features, and innovative technology. Key functionality includes two registration pathways: "Join as Driver" and "Join as Company". The driver registration features a multi-step form where users can upload required documents (license, vehicle registration, insurance), select subscription plans, and complete their profile. Similarly, the company registration allows fleet owners to register their business, upload company logo, cover image, and letterhead, and manage multiple drivers and vehicles through a comprehensive dashboard. The landing page is fully responsive, includes app store links for iOS and Android, features an FAQ section, and provides seamless user experience with smooth animations and modern UI/UX design principles.

Next.jsReact.jsTailwind CSSFramer MotionReact Hook FormForm ValidationFile UploadMulti-step FormsJavaScript
GL Dream Home - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
09

GL Dream Home

A premium furniture and interior design platform that blends curated collections with inspirational galleries. It offers detailed showcases, a user-friendly interface, and a fully responsive design for seamless shopping across devices.

Next.jsReact.jsTailwind CSSJavaScript
GL Group UAE - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
10

GL Group UAE

The GL Group UAE site presents a diversified business portfolio—from real estate to hospitality—in a clean, corporate design. It highlights projects, investor relations, and brand identity through intuitive navigation and responsive layouts.

Next.jsReact.jsTailwind CSSJavaScript
Ryde Admin Dashboard - Next.js, React.js, Tanstack Query, Redux Toolkit, JavaScript, TypeScript, Tailwind CSS by Muhammad Asad, Full Stack Engineer
11

Ryde Admin Dashboard

Ryde Admin Dashboard is a web-based task management tool built around a dynamic Kanban board. Users can create projects, add and organize tasks across Backlog, To-Do, In-Progress, and Done columns, and easily move cards via drag-and-drop. Real-time status updates keep teams in sync, while a clean, responsive UI—powered by Tailwind CSS—ensures a seamless experience across devices.

Next.jsReact.jsTanstack QueryRedux ToolkitJavaScriptTypeScriptTailwind CSS
Bourter — Admin Dashboard - Next.js, React.js, Tailwind CSS, TanStack Query, Framer Motion, JavaScript by Muhammad Asad, Full Stack Engineer
12

Bourter — Admin Dashboard

Bourter is a modern, feature-rich admin dashboard built with the latest web technologies. The dashboard provides comprehensive data visualization, user management, analytics tracking, and administrative controls. Features include interactive charts and graphs, real-time data updates with TanStack Query, smooth animations powered by Framer Motion, responsive design for all devices, and an intuitive interface for managing complex data. Built with performance and user experience in mind, utilizing server-side rendering and optimized data fetching strategies.

Next.jsReact.jsTailwind CSSTanStack QueryFramer MotionJavaScript
CodesInc – IT Solutions & Services - Next.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
13

CodesInc – IT Solutions & Services

A corporate website showcasing IT services with a modern, responsive design. It includes smooth page transitions, custom animations, and an intuitive layout. Optimized for performance and built to reflect professional branding.

Next.jsTailwind CSSJavaScript
GlobalZairGuide — Spiritual Journey & Ziyarat Platform - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
14

GlobalZairGuide — Spiritual Journey & Ziyarat Platform

GlobalZairGuide is a comprehensive spiritual journey and Ziyarat guidance platform designed for religious tourism. The platform helps pilgrims discover and visit sacred places in Makkah, Madinah, and Iraq's holy shrines. Features include interactive maps of sacred locations, tailored religious tourism packages from verified agents, integrated faith tools (Quranic verses, Hadiths, Qibla direction), and a seamless booking experience. Built with modern UI/UX principles to provide a serene and intuitive user experience for spiritual travelers.

Next.jsReact.jsTailwind CSSJavaScript
RizqApp — Digital Loyalty Program for Restaurants - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
15

RizqApp — Digital Loyalty Program for Restaurants

RizqApp is a modern digital loyalty platform that helps restaurants boost customer retention and increase repeat visits. The platform replaces traditional paper loyalty cards with a 100% digital solution featuring QR code scanning, points tracking, and automated rewards. Customers can manage all their loyalty cards in one app, while restaurants get a comprehensive dashboard to manage their loyalty programs, track customer engagement, and attract new clients. Built with a clean, user-friendly interface optimized for both customers and restaurant owners.

Next.jsReact.jsTailwind CSSJavaScript
HairOil — Premium E-commerce Platform - Next.js 15, React 19, Redux Toolkit, TanStack Query, Tailwind CSS 4, Framer Motion, Axios, React Hook Form, Zod, SweetAlert2, Swiper.js by Muhammad Asad, Full Stack Engineer
16

HairOil — Premium E-commerce Platform

A full-stack e-commerce platform for premium hair oil products featuring a modern customer-facing website and comprehensive admin dashboard. The platform includes dynamic product catalog with 10+ premium hair oils, advanced shopping cart with Redux state management, secure checkout process with address validation, order management system, and real-time admin analytics. Built with Next.js 15 and React 19, featuring responsive design, smooth animations, and seamless user experience across all devices.

Next.js 15React 19Redux ToolkitTanStack QueryTailwind CSS 4Framer MotionAxiosReact Hook FormZodSweetAlert2Swiper.js
the ENTERTAINER – Ultimate BOGO Deals & Lifestyle Savings - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
17

the ENTERTAINER – Ultimate BOGO Deals & Lifestyle Savings

A savings platform offering Buy One Get One Free deals across dining, wellness, and more in the Middle East. It features intuitive navigation, responsive design, and a dedicated mobile experience to unlock premium offers seamlessly.

Next.jsReact.jsTailwind CSSJavaScript
Breaking Balls Sports – Multi-Sport Analytics - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
18

Breaking Balls Sports – Multi-Sport Analytics

A comprehensive fantasy and betting analytics hub covering NFL, NBA, MLB, and more. Offers in-depth research, community features, and a user-friendly interface for informed decision-making in fantasy leagues and betting.

Next.jsReact.jsTailwind CSSJavaScript
E-Commerce Minimog Template - Next.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
19

E-Commerce Minimog Template

A sleek, minimal e-commerce storefront template with product grids, filters, and checkout flows. Optimized for performance and responsive across all devices, it delivers a smooth shopping experience.

Next.jsTailwind CSSJavaScript
Github Profile Viewer - Next.js, React.js, JavaScript, Tailwind CSS by Muhammad Asad, Full Stack Engineer
20

Github Profile Viewer

A real-time GitHub user lookup tool that fetches and displays profile data, repositories, and stats. It features live search, responsive design, and error handling for seamless browsing.

Next.jsReact.jsJavaScriptTailwind CSS
ClickUp Template - Next.js, React.js, Tailwind CSS, JavaScript by Muhammad Asad, Full Stack Engineer
21

ClickUp Template

A customizable ClickUp dashboard clone with task lists, statuses, and filters. Built for teams to visualize workflows, assign tasks, and track progress in a clean, responsive interface.

Next.jsReact.jsTailwind CSSJavaScript
Dental Health Frontend - Next.js, Tailwind CSS, React.js, JavaScript by Muhammad Asad, Full Stack Engineer
22

Dental Health Frontend

A dental clinic frontend template with service showcases, appointment booking UI, and doctor profiles. Features a crisp, responsive design optimized for patient engagement.

Next.jsTailwind CSSReact.jsJavaScript
DashStack-Dashboard - Next.js, Tailwind CSS, Chart.js, React.js, JavaScript by Muhammad Asad, Full Stack Engineer
23

DashStack-Dashboard

An analytics dashboard template with charts, tables, and KPI widgets. It provides real-time data visualization, filtering, and a modular layout for enterprise applications.

Next.jsTailwind CSSChart.jsReact.jsJavaScript