Shopping System - Complete E-commerce Platform

A comprehensive e-commerce platform integrating multiple microservices with a native mobile application. Built with .NET 9, React Native, Node.js, and MongoDB, implementing advanced architectural patterns including CQRS, BFF (Backend for Frontend), MVVM and offline-first mobile development.

System Architecture

The platform consists of multiple integrated services following Clean Architecture and microservices principles:

Core Services

• Products Management - Product catalog with inventory management (.NET 9)
• Shopping Cart - CQRS-based cart and order system (.NET 9)
• Notifications System - Multi-channel notification delivery (.NET 9)
• Backend for Frontend (BFF) - Mobile-optimized aggregation layer (Node.js/TypeScript)
• Mobile Application - React Native app with offline support

Databases

• ProductsDB - MongoDB for product catalog
• CartDB_Write - MongoDB write model (source of truth)
• CartDB_Read - MongoDB read model (optimized queries)
• NotificationsDB - MongoDB for notification tracking
• Mobile SQLite - Local offline cache for products

Key Features

Mobile Application (React Native)

• Native Mobile Experience: Cross-platform app for iOS and Android (Expo)
• MVVM Architecture: Clean separation with ViewModels, Services, and Views
• Offline Mode: SQLite-based local cache for browsing products without internet
• Smart Sync: Automatic online/offline detection with seamless fallback
• Cart Management: Add/remove products, view cart, manage quantities
• Modern UI: Glass-morphism design with gradient backgrounds
• Loading States: Proper handling of loading, error, and success states

Backend for Frontend (BFF)

• API Aggregation: Single endpoint combining data from multiple microservices
• Data Transformation: Mobile-optimized response formats
• Performance: Reduced round trips with aggregated responses
• Simplified Integration: Mobile app communicates only with BFF
• CartWithProductDetails: Enriched cart items with full product information
• ProductWithAvailability: Enhanced product data with stock indicators

Shopping Cart System (CQRS)

• Cart Management: Create, view, and manage shopping carts per user
• Product Reservation: Products locked when added to cart via Products API
• Auto Expiration: Locks expire after 15 minutes of inactivity
• Cleanup Service: Background service removes abandoned carts
• Optimistic Locking: Version-based concurrency control
• Event Sourcing: Complete audit trail of cart operations
• CQRS Pattern: Separate write and read databases with eventual consistency
• Idempotent Checkout: Safe to retry checkout operations

Products Management

• Product Catalog: Complete product management with categories
• Inventory Tracking: Real-time stock quantity management
• Reservation System: Lock products during cart operations
• Search & Filter: Category-based filtering and product lookup
• Stock Indicators: Low stock and availability flags

Notifications System

• Email Notifications: Order confirmation emails
• Push Notifications: Mobile push notification support
• Retry Mechanism: Reliable delivery with background retry workers
• Event Tracking: Complete notification audit trail
• Worker Services: Separate email and push notification workers

Monitoring & Observability

• Prometheus Metrics: System-wide performance monitoring
• Custom Metrics: Cart operations, checkouts, and business KPIs
• OpenTelemetry: Distributed tracing for HTTP requests
• Health Checks: Service health monitoring endpoints

Prerequisites

• .NET 9 SDK
• Node.js (v18 or higher)
• Docker and Docker Compose
• MongoDB (via Docker or local installation)
• Expo CLI (for mobile app development)
• iOS Simulator (macOS) or Android Emulator/Device

Getting Started

1. Clone the Repository

git clone <repository-url>
cd shopping-system

2. Configure Environment Variables

Create a .env file in the root directory:

MONGODB_CONNECTION_STRING=mongodb://localhost:27017
MONGODB_DATABASE_NAME=NotificationsDB

3. Start All Backend Services

Start all microservices using Docker Compose:

docker-compose up -d

This will start:

• Products Backend: http://localhost:5003
• Shopping Cart Backend: http://localhost:5001
• BFF (Backend for Frontend): http://localhost:5002
• Notifications Backend: http://localhost:5017
• Email Worker: http://localhost:9091
• Push Worker: http://localhost:9092
• Web Frontend: http://localhost
• Prometheus: http://localhost:9090

4. Start the Mobile Application

cd mobile-app
npm install
npx expo start

Then:

• Press i for iOS Simulator
• Press a for Android Emulator
• Scan QR code with Expo Go app on physical device

5. Configure Mobile App API Connection

Edit mobile-app/app.json to set your host IP:

{
  "expo": {
    "extra": {
      "apiHost": "192.168.1.100" // Your local IP address
    }
  }
}

For Android emulator, the default 10.0.2.2 works automatically.

Development Setup

Mobile Application Development

cd mobile-app
npm install
npx expo start

Architecture: MVVM pattern with React Native

• ViewModels: ProductsViewModel, CartViewModel, ProductDetailsViewModel
• Services: productsService, cartService, productCacheRepository
• Database: SQLite for offline cache
• API Config: config/api.ts - BFF endpoint configuration

BFF Service Development

cd bff
npm install
npm run dev

The BFF API will be available at http://localhost:5002

Key Components:

• Aggregation Service: Combines data from Products and Cart APIs
• Clients: productsClient, cartClient
• Routes: /api/products, /api/carts, /api/home

Shopping Cart Backend Development

cd shopping-cart/backend
dotnet restore
dotnet run

The API will be available at http://localhost:5001

Web Frontend Development

cd shopping-cart/frontend
npm install
npm run dev

The frontend dev server will start at http://localhost:5173

Project Structure

shopping-system/
├── mobile-app/                   # React Native Mobile Application (Lab 4)
│   ├── app/                     # Screens (Expo Router)
│   │   ├── index.tsx           # Products list screen
│   │   ├── cart.tsx            # Shopping cart screen
│   │   ├── product/[id].tsx    # Product details screen
│   │   └── _layout.tsx         # Root layout
│   ├── viewmodels/             # MVVM ViewModels
│   │   ├── ProductsViewModel.ts
│   │   ├── ProductDetailsViewModel.ts
│   │   └── CartViewModel.ts
│   ├── services/               # Business logic services
│   │   ├── productsService.ts       # Products API communication
│   │   ├── cartService.ts           # Cart API communication
│   │   ├── database.ts              # SQLite initialization
│   │   └── productCacheRepository.ts # Offline cache
│   ├── config/
│   │   └── api.ts              # BFF endpoint configuration
│   └── types/                  # TypeScript type definitions
│
├── bff/                         # Backend for Frontend (Node.js)
│   ├── src/
│   │   ├── index.ts           # Express server setup
│   │   ├── config.ts          # Environment configuration
│   │   ├── routes/            # API routes
│   │   │   ├── products.ts   # Products aggregation endpoints
│   │   │   ├── cart.ts       # Cart aggregation endpoints
│   │   │   └── home.ts       # Home screen data endpoint
│   │   ├── services/
│   │   │   └── aggregationService.ts  # Data aggregation logic
│   │   └── clients/           # Microservice clients
│   │       ├── productsClient.ts
│   │       └── cartClient.ts
│   └── Dockerfile
│
├── products-management/          # Products Service (Lab 1)
│   └── backend/
│       ├── Controllers/         # API controllers
│       ├── Models/              # Product entities
│       ├── Infrastructure/      # MongoDB configuration
│       └── Services/            # Business logic
│
├── shopping-cart/               # Shopping Cart Service (Lab 3)
│   ├── backend/
│   │   ├── Application/         # Use Cases (CQRS Commands/Queries)
│   │   │   └── UseCases/
│   │   │       ├── CreateCart/
│   │   │       ├── AddProductToCart/
│   │   │       ├── CheckoutCart/
│   │   │       └── ...
│   │   ├── Domain/              # Domain entities and logic
│   │   │   ├── Entities/        # Cart, CartItem, Order
│   │   │   ├── Events/          # Domain events
│   │   │   └── Services/        # Domain services
│   │   ├── Infrastructure/      # Infrastructure concerns
│   │   │   ├── Events/          # Event publishing
│   │   │   └── Metrics/         # Prometheus metrics
│   │   ├── Repositories/        # Data access layer
│   │   │   ├── CartRepository.cs        # Write model
│   │   │   └── CartReadRepository.cs    # Read model
│   │   └── Services/            # Application services
│   │       ├── BackgroundServices/
│   │       ├── ProductsApiClient.cs
│   │       └── NotificationsApiClient.cs
│   └── frontend/                # React web UI
│
├── notifications-system/        # Notifications Service (Lab 2)
│   ├── backend/                # Notifications API
│   ├── email-worker/           # Email worker service
│   ├── push-worker/            # Push notification worker
│   └── Shared/                 # Shared libraries
│
├── docker-compose.yml          # Orchestration for all services
├── prometheus.yml              # Prometheus configuration
├── BFF_IMPLEMENTATION.md       # BFF architecture documentation
└── README.md                   # This file

Mobile App Features

Offline Mode

The mobile app supports full offline functionality for product browsing:

1. Automatic Caching: Products are cached in SQLite when loaded
2. Offline Detection: App automatically detects connection status
3. Seamless Fallback: Switches to cache when API unavailable
4. Visual Indicators: "Offline Mode" badge shown to users
5. Cart Blocking: Cart operations disabled in offline mode

Architecture Pattern: MVVM

• Views: React Native components in app/ directory
• ViewModels: State management and business logic
• Services: API communication and data persistence
• Repository: Data access abstraction for cache

Key Screens

• Products List (/): Browse all products with offline support
• Product Details (/product/[id]): View details and add to cart
• Shopping Cart (/cart): Manage cart items and checkout
• Orders (/orders): View order history
• Profile (/profile): User settings