M1720 – Shop Center
A production-grade multi-vendor e-commerce platform with real-time chat, AI-powered recommendations, Stripe payments, and a full microservices backend — all in one Nx monorepo.
Year
2026
Role
Lead Full-Stack Engineer
Platform
Web + Mobile
Status
Shipped
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| TypeScript 5.9 | Language | End-to-end type safety across all services and UIs |
| Node.js 18+ | Backend | Runtime for all 10 backend microservices |
| Express.js 4.21 | Framework | HTTP layer for each individual microservice |
| Nx 22 (monorepo) | Tools | Monorepo orchestration, affected builds, shared library management |
| Next.js 15.2 | Frontend | Server-rendered UI for shopper, seller, and admin apps |
| Tailwind CSS 3.4 | UI/UX | Utility-first styling across all UIs |
| Framer Motion 12 | UI/UX | Page transitions and micro-animations |
| shadcn/ui | UI/UX | Accessible base component primitives |
| TanStack Query 5 | Frontend | Server-state caching and background refetching |
| TanStack Table 8 | Frontend | Headless data tables for admin and seller dashboards |
| Jotai 2 | Frontend | Atomic state management for shared UI state |
| Zustand 5 | Frontend | Lightweight store for cart and session state |
| React Hook Form 7 | Frontend | Performant form management and validation |
| Axios | API | HTTP client for all frontend→gateway requests |
| MongoDB | Database | Primary cloud database for all 20+ data models |
| Prisma | Database | Type-safe ORM with MongoDB provider |
| Redis | Database | Session caching and fast key-value lookups |
| Apache Kafka | Tools | Event streaming for analytics, chat routing, and behavior tracking |
| KafkaJS | Tools | Kafka producer/consumer client for Node.js services |
| Stripe | API | Payment processing, webhook handling, and Stripe Connect for sellers |
| react-stripe-js | Frontend | Stripe Elements UI components embedded in checkout |
| TensorFlow.js | Backend | Client-side ML for personalized product recommendations |
| TF WASM Backend | Backend | WebAssembly backend enabling TF model inference without GPU server |
| WebSocket | Backend | Real-time chat between buyers/sellers and live log streaming to admin |
| ImageKit | Cloud | Image hosting, CDN delivery, and on-the-fly transformations |
| Nodemailer | API | Transactional email via Gmail SMTP |
| jsonwebtoken | Auth | JWT-based stateless authentication across all services |
| bcryptjs | Auth | Password hashing for user and seller accounts |
| express-rate-limit | Backend | API Gateway rate limiting — 200 unauth / 1000 auth per 15 min |
| swagger | Tools | Auto-generated OpenAPI docs for each microservice |
| ApexCharts | UI/UX | Analytics charts in the admin and seller dashboards |
| Recharts | UI/UX | Secondary charting library for order and revenue breakdowns |
| React Simple Maps | UI/UX | Geographical sales heatmap in the admin analytics view |
| React Quill New | UI/UX | Rich text editor for product descriptions and site content |
| PM2 | DevOps | Process manager running 10 services + 3 Next.js apps in production |
| Docker / @nx/docker | DevOps | Container support for service isolation and deployment portability |
| esbuild | Tools | Fast bundler/transpiler for backend service builds |
| Jest | Testing | Unit and integration test runner across the monorepo |
| next-themes | UI/UX | Dark/light theme switching with system preference detection |
| canvas-confetti | UI/UX | Order success celebration animation on the checkout completion screen |
What was built
Key features
Multi-vendor marketplace where sellers manage independent storefronts with product listings, inventory, and discount codes.
Stripe Connect integration enables real checkout flow with seller payouts and webhook-driven order confirmations.
TensorFlow.js recommendation engine tracks user behavior via Kafka events and surfaces personalized product suggestions in real time.
Real-time buyer-seller chat built on WebSocket with emoji support, image attachments, and Kafka-backed message routing.
Event-driven analytics pipeline (Kafka + MongoDB) captures views, cart adds, wishlist saves, and purchases per product, shop, device, and geography.
API Gateway handles routing, rate limiting (1000 req/15 min authenticated), and CORS across 10 independent backend microservices.
Three purpose-built Next.js 15 frontends — shopper, seller dashboard, and admin panel — each with full dark-mode and Framer Motion animations.
Centralized Logger Service streams structured logs live to the admin UI over WebSocket for real-time production monitoring.
More work
Related projects
Hirfa Barber — حِرفة
A cinematic, bilingual luxury barbershop website for a 15-year-old Bethlehem institution — built with animated page transitions, scroll-driven storytelling, and a full AR/EN experience.
Cancer Reports Management System
A secure, role-based medical portal for Khaled Al-Hassan Cancer Hospital — enabling staff to manage research reports, categories, and events with granular access control.
Super Al-Balad
Bilingual Arabic/English grocery e-commerce platform with a full admin CMS, real-time order notifications, and RTL-first design — built for conversion and speed. Year: 2025