Portfolio
Active development
Case Study · Shoppipai

Enterprise e-commerce ecosystem in three apps.

Modular Monolith in Django with hexagonal architecture and 27 bounded contexts. React 19 + Vite storefront and multi-tenant Next.js 16 dashboard. Saga + Outbox, RAG semantic search with pgvector, Stripe + Wompi payments and DIAN invoicing.

27 bounded contexts · DDD
91.76% coverage · 16,867 tests
3 apps Django · React · Next.js
01 — Context

Why it exists.

Complete e-commerce infrastructure designed to scale: massive catalogs, multiple tenants with full isolation via dynamic headers, Colombian fiscal compliance (DIAN) and engineering discipline with a hard quality floor. Three independent projects that communicate through a shared contract (OpenAPI + GraphQL) — each audience (backend, customers, staff) operates with its own rhythm and stack.

  • Modular Monolith with hexagonal architecture · 27 bounded contexts
  • Multi-tenant with full isolation via X-Tenant-Id / X-Tenant-Slug
  • Colombian fiscal compliance (DIAN) embedded in the order flow
  • Zero Shortcuts discipline: 90% coverage floor · strict typing · static analysis
02 — Architecture

Three apps, one domain.

Each app lives in its own repo, shares the backend's OpenAPI contract and deploys independently.

BACKEND :8000

backend_ecomerce

Django 5.2 LTS · DDD + Hexagonal

Modular Monolith with 27 bounded contexts (DDD + hexagonal). Dual REST + GraphQL API. Saga Pattern for checkout (automatic rollback on payment failure), Outbox Pattern for resilience, native PostgreSQL partitioning for high concurrency and RAG with pgvector for semantic search. 16,867 tests · 91.76% coverage.

Django 5.2DRFStrawberry GraphQLPostgreSQLpgvectorRedisCelerySentryPrometheusOpenTelemetry
STOREFRONT :5173

shoppipai-frontend

React 19.2 · Vite 7 · MVVM + Adapter

Premium customer SPA with MVVM + Adapter pattern (presentation logic decoupled from backend). React Compiler for automatic memoization · type-safe SDK generated by Orval from OpenAPI · Playwright × 6 configs (mobile, visual, cross-layer, strict, preflight) · Lighthouse CI perf gates.

React 19Vite 7React Router 7TanStack Query 5React CompilerTailwind 3.4OrvalSentryAxios
DASHBOARD :3001

dashboard

Next.js 16 · Turbopack · Multi-tenant

Multi-tenant admin panel with full isolation via dynamic headers (X-Tenant-Id, X-Tenant-Slug). App Router + Turbopack for instant dev · Server Components · virtualized TanStack Table for massive datasets · full catalog, order, metrics and per-store config management.

Next.js 16React 19Turbopackshadcn/uiRadix UITailwind v4TanStack QueryTanStack TableOrvalnuqs
Live storefront

How it looks for the customer.

Storefront SPA (Vite 7 + React 19) · catalog, drops and product detail · fully responsive end-to-end · in production.

shop.cristianarellano.com
LIVE
Shoppipai storefront screenshot showing the 'Made for calm before' hero banner, a featured Northline Court Classic shoe and the 'Playing field' grid of catalog products.
Same storefront in mobile format with an app-style bottom nav (Home, Search, Drops, Account) and stacks adapted to device width.
Admin dashboard

How the staff operates.

Next.js 16 + shadcn panel · live KPIs, catalog management and virtualized tables for large datasets.

dashboard.cristianarellano.com
LIVE
Admin dashboard with 'Hello, Welcome' greeting, KPI cards (Today's Revenue, Pending Orders, Stock Alerts, Sales Velocity), daily sales chart, recent orders table, inventory valuation card and revenue-by-category donut chart.
Overview · daily KPIs, sales, recent orders and revenue-by-category donut.
dashboard.cristianarellano.com/products
LIVE
Product listing with columns Product, Category, Brand, Price, Stock, Status and Created. Rows feature thumbnails, 'In stock' / 'Published' / 'Active' badges and 20 visible products (Northline, NexaRun, Aurex, Kitchen Accessories, Home Decoration, Groceries).
Products · paginated catalog, filters by category/brand/status/stock, variant counts and publish state.
03 — Domain

27 DDD modules.

Bounded contexts grouped by business layer. Each module has services, models, tests and, where applicable, its own OpenAPI endpoint.

Commerce
  • carts
  • orders
  • payments
  • pricing
  • subscriptions
Catalog
  • catalog
  • inventory
  • search
  • storefront
  • wishlists
Identity
  • users
  • customers
  • staff
  • tenants
Operations
  • analytics
  • cms
  • i18n_app
  • locations
  • notifications
  • shipping
  • webhooks
Platform
  • gql
  • invoicing
  • gift_cards
  • meta_ai
  • site_config
  • task_engine
04 — Security

Defense in depth.

JWT
RS256 with RSA keys Key rotation via env · HS256 fallback
2FA
TOTP · django-otp + django-two-factor-auth StaffOnlyWithMFA permission on sensitive endpoints
RBAC
4 roles · CUSTOMER / STAFF / OWNER / ADMIN Strict ownership via IsOwner permission
Multi-tenant
Isolation via X-Tenant-Id / X-Tenant-Slug headers No cross-tenant queries possible
Audit log
StaffActionLog · every critical staff action
Headers
Strict CSP · HSTS · referrer-policy · X-Frame DENY
Hardening
OWASP review · rate limiting · CORS · CSRF protection
Static analysis
Ruff · MyPy strict · Bandit (security) · SonarQube
05 — Payments & Invoicing

Saga Pattern + Outbox + DIAN.

Checkout crosses several bounded contexts (inventory · orders · payments · invoicing · notifications). Modeled as a Saga with automatic compensations: if payment fails, stock is released and the order is rolled back without manual intervention. Transactional persistence via Outbox Pattern guarantees that critical actions (refunds, emails, integrations) run even under temporary system failures.

Checkout flow
  1. 01 Reserve stock
  2. 02 Create order
  3. 03 Capture payment (Stripe / Wompi)
  4. 04 Emit DIAN invoice
  5. 05 Notify customer
  • Global (Stripe) and local (Wompi · Colombia) payments with async verification flows
  • Outbox Pattern · async drainer with exponential retry and idempotency
  • Automatic per-step compensations (release stock, refund, void invoice)
  • DIAN e-invoicing via Factus integrated in the flow · automatic credit notes
06 — AI & Semantic Search

RAG with pgvector.

The meta_ai module indexes products in a 384-dimension VectorField with an HNSW index. Search understands the customer's natural language, not just keywords — an AI-powered catalog that combines semantic ranking with traditional filters and PostgreSQL full-text as fallback.

  • pgvector + HNSW · dimensions=384 · embeddings indexed on write-path
  • RAG semantic search exposed as a top-level GraphQL query
  • Combines semantic ranking + structured catalog filters
  • Falls back to PostgreSQL full-text search when the vector misses
  • Native PostgreSQL partitioning to handle millions of embeddings
07 — Quality (Zero Shortcuts)

16,867 tests · 91.76% coverage.

16,830 tests passing · 1 failed · 36 skipped
91.76% line coverage · 90% floor
6 Playwright configs × storefront
  • Backend: Pytest + Factory Boy · CI gate fail_under=90 · pytest-xdist parallel
  • Strict typing: no any in TS · no noqa / type: ignore in Python
  • Static analysis: Ruff · MyPy strict · Bandit (security) · SonarQube
  • Test layers: unit · integration · chaos · race conditions · DDD compliance
  • Storefront E2E: chromium · mobile · visual regression · cross-layer · strict · preflight
  • A11y: axe-core in Playwright + vitest-axe
  • Performance: Lighthouse CI gates (LCP ≤2.5s · CLS ≤0.1 · score ≥0.85)
  • Living documentation: Swagger · ReDoc · GraphQL Playground auto-generated
08 — Observability

Sentry + Prometheus + OpenTelemetry.

Every app instrumented to catch regressions before they escalate. Distributed tracing across the three apps via OTel.

  • Sentry: Django + Celery + Redis integrations · release tagging · sample rates
  • Prometheus: django-prometheus · per-module metrics · cluster scraping
  • OpenTelemetry: distributed traces and spans · context propagation
  • Structured logging with correlation IDs across all services
09 — Status

What's live, what's next.

Shipped
  • Full backend with 27 DDD modules and test suite
  • Checkout saga with Wompi + Factus in production
  • Customer storefront with type-safe SDK and full E2E
  • Staff dashboard with catalog and order management
  • Full-stack observability in Sentry + Prometheus
In flight
  • Multi-tenant flow polish in the dashboard
  • Production metrics for semantic search
  • Exportable BI reports from the analytics module
  • Stripe Connect hardening for split payments

Want to dig deeper?

If you're building something similar and want to review architecture decisions or see the code, drop me a line.

Back to portfolio