Skip to content

UI Design Documentation

Test UI (test.villaecommerce.com)

Purpose

Interactive browser-based tool for comparing calculatecost4 output against the original deployed endpoint. Used for manual verification and demos.

Design

Dark theme, monospace font, grid layout with these regions:

  • Top bar -- editable endpoint URLs (new + old)
  • Preset buttons -- 6 order templates (simple, multi-product, no shipping, coupon, pickup, large)
  • Left panel -- JSON request body textarea + Send button
  • Right panel -- field-by-field comparison table with MATCH/DIFF color coding
  • Bottom panels -- full JSON response for new (left) and old (right) endpoints

Components

Component Purpose
Endpoint bar Configure new/old API URLs
Preset buttons Load pre-built order payloads
Request textarea Edit JSON order body
Send button POST to both endpoints simultaneously
Comparison table Row per field: field name, old value, new value, match status
Summary banner Green "ALL MATCH" or red "SOME DIFFER"
Response panels Full raw JSON from each endpoint

Tech Stack

Single HTML file. No build tools, no frameworks. Vanilla JS + fetch API. CSS custom properties for theming.

Color Scheme

--bg: #0f1117       /* page background */
--card: #1a1d27     /* panel background */
--border: #2d3140   /* borders */
--text: #e4e6eb     /* primary text */
--dim: #8b8fa3      /* secondary text */
--accent: #4f8cf7   /* buttons, links */
--green: #34d399    /* MATCH indicators */
--red: #f87171      /* DIFF indicators */

Deployment

Resource Value
Source test-ui/index.html in villaCalculateCost4 repo
S3 Bucket villa-calculatecost4-test-ui-017176210331
CloudFront Distribution E3O98IU4WJ5P9X
Domain test.villaecommerce.com (Route53 CNAME to CloudFront)
HTTPS ACM certificate in us-east-1

To update the Test UI, see the Deployment Guide.

Future Enhancements

  • Add response diff highlighting (show exact JSON paths that differ)
  • Add timing comparison (latency of new vs old)
  • Add batch mode (run all presets and show summary)
  • Add export (download comparison results as JSON/CSV)
  • Add dark/light mode toggle

Documentation Site (docs.villaecommerce.com)

Purpose

Central documentation hub for the team. MkDocs Material with auto-deploy.

Design Decisions

  • MkDocs Material for search, dark mode, navigation tabs, code copy
  • GitHub Pages for hosting (free, auto-deploy)
  • CNAME for custom domain
  • Navigation organized by topic (not by file number)
  • Mermaid for architecture diagrams (rendered server-side)

Deployment

Resource Value
Source github.com/thanakijwanavit/villa-ecommerce-docs (private)
Build GitHub Actions runs mkdocs gh-deploy
Hosting GitHub Pages (gh-pages branch)
Domain docs.villaecommerce.com (Route53 CNAME to thanakijwanavit.github.io)