🛍️ ecommerce-app

A full-stack, microservices-driven e-commerce platform built with React Native, Next.js, Nx, Express, Kafka, Prisma, MongoDB, Redis, Stripe, Socket.io, TensorFlow.js, and more.

Originally a simple mobile shopping app, the project evolved into a full ecosystem including:

• ✨ Mobile App
• 🧩 Microservices
• 🛒 Product System
• 🚚 Order Processing
• 💳 Stripe Payments
• 💬 Realtime Chat
• 📦 Admin Dashboard
• 🔥 Recommendation AI
• 📡 Kafka Event Streaming
• ⚙️ Api Gateway
• 📊 Logger Service

This project is focused on architecture, learning, and scalability, not UI fanciness.

---

📦 Technologies

Mobile & Frontend

• React Native
• React.js
• Next.js
• TypeScript
• NativeWind
• React Hook Form
• React Query
• Lucide Icons
• React-Quill-New
• React-Image-Magnify
• React-Range

Backend & Services

• Express.js
• Nx Monorepo
• Microservices
• KafkaJS
• Socket.io
• Swagger
• Prisma
• MongoDB (Atlas)
• Redis (Upstash)
• Node-Cron
• Stripe
• TensorFlow.js

Infrastructure

• Docker
• AWS EC2
• Cloudflare
• ImageKit
• Firebase
• Grafana / Opensearch / ElasticSearch (planned)

---

🦄 Features

• 🛍️ Browse products & shops (SEO-optimized via SSR)
• 🧺 Cart + Wishlist
• 💳 Stripe Payments w/ webhooks
• 🧾 Order Creation & Tracking
• 🌐 Web App + Mobile App
• 💬 Realtime Chat with sellers (Socket.io + Kafka)
• ⚡ Event-driven user activity tracking
• 🔥 Batch message storage (every 3 seconds)
• 🎯 AI Recommendations using TensorFlow.js
• 🖼️ Image Optimization using ImageKit
• 🛠️ Admin Dashboard for product, shop & order management
• 🌪️ Nx Microservice Architecture
• 🧩 API Gateway (auth, rate limit, proxy, cookies)
• 📚 Swagger Docs for all services
• 🎉 Confetti on successful payments
• 📡 Kafka multi-topic event system
• 🔐 Advanced error handling middleware

---

👩🏽‍💻 The Process

How this e-commerce ecosystem was built:

• Set up Nx monorepo for all microservices & apps

• Built microservices:

  • Auth
  • Product
  • Order
  • Kafka
  • Chat
  • Recommendation
  • Logger

• Created a custom API Gateway with proxy + middleware

• Added Redis OTP limiter

• Built a Next.js-based Seller/Admin Dashboard

• Connected Kafka (Docker + Confluent) for events

• Implemented Stripe checkout + webhook listener

• Built Realtime WebSocket server (Socket.io)

• Implemented TensorFlow.js recommender service

• Documented everything using Swagger

• Added image uploads using ImageKit

• Added mobile event tracking + cart tracking

• Improved SEO using dynamic [slug].tsx pages

• Built daily summary jobs using node-cron

---

📚 What I Learned

🏗️ 1. Monorepos & Nx

• Managing dozens of apps/services in one place
• Shared utils, configs, libraries
• Task pipelines & caching

📡 2. Kafka & Event-Driven Design

• Producers & Consumers
• Multiple topics for analytics
• Batch consumption
• Event replay patterns

💳 3. Stripe Payment Workflows

• Checkout Sessions
• Webhooks
• Order creation on payment success

💬 4. WebSockets & Realtime Systems

• Socket rooms
• Message queues
• Realtime chat + Kafka persistence

🧠 5. AI Recommendations

• TensorFlow.js ranking
• Normalization & scoring
• Building a simple ML pipeline

🧩 6. Backend Architecture

• Gateways
• Error middleware
• Swagger docs
• Database relationships
• Prisma patterns

📱 7. Mobile UI + Native Handling

• Coordinates & measurement
• State management (Zustand / React Query)
• Cross-device safe area patterns

📈 Overall

This project dramatically improved my understanding of distributed architectures, scalable backend systems, microservices, and mobile/next.js ecosystems.

---

💭 Future Improvements

• Full Observability (Grafana + Prometheus)
• Logs → ElasticSearch / Opensearch
• ML pipeline for smarter recommendations
• Seller mobile app
• Kubernetes deployment
• GRPC communication
• Rate-limiting per-microservice level
• Full automated CI/CD via GitHub Actions
• More Kafka topics for analytics

---

🚦 Running the Project

Run everything (dev mode)

npm run dev

Start a single microservice

npx nx serve auth-service
npx nx serve product-service
npx nx serve order-service
npx nx serve kafka-service
npx nx serve chat-service
npx nx serve logger-service

Reset Nx cache

npx nx reset cache

Start Kafka (locally)

docker-compose up -d

Stripe Webhook

stripe listen --forward-to localhost:6004/api/create-order

---

🎥 Demo

---