Skip to main content

Price Dashboard

An internal Single Page Application (SPA) built for the marketing team to manage and publish e-commerce promotional pricing in real-time.

TL;DR

Engineered a containerized full-stack internal CMS that empowered the marketing team to execute real-time promotional pricing updates. Delivered a highly scalable React/Node.js SPA deployed on AWS ECS, utilizing Redis for optimized routing caching.

The Challenge & Impact​

  • The Challenge: During high-traffic promotional eras, relying on engineering to manually update database pricing for every campaign created severe operational bottlenecks and increased the risk of human error.
  • The Objective: To build a centralized, secure dashboard that completely decouples marketing operations from the engineering release cycle, allowing non-technical staff to dynamically schedule pricing rules.
  • The Impact: Proactively eliminated engineering overhead by replacing manual updates with a visual CMS, empowering the marketing team to independently execute CRUD operations for promotional campaigns.

Architecture & Execution​

Github Source Code

Tech Stack​

React, Redux, Node.js, Express, Redis, Docker, TravisCI

Engineering Design​

  • Designed sequence diagrams and data interface to define frontend/backend API specifications and the OAuth 2.0 authorization flow.
  • Decoupled state management using the Redux Module Pattern and implemented a custom Webpack configuration for Dev/Prod environments.
  • Wrote Dockerfiles and docker-compose to ensure consistency between local development and cloud deployment environments.
⚙️ Technical Deep Dive & Infrastructure

Frontend & Backend Architecture​

  • React/Redux SPA: Implemented scalable state management using the Redux Module pattern, served via a custom Webpack build and Nginx reverse proxy.
  • Node.js Microservices: Built modular user, promotion, and pricing services using Express. Integrated Google OAuth 2.0 for secure authentication.
  • Caching Strategy: Implemented Redis caching at the routing layer. Designed the cache invalidation strategy to return updated promotion lists without hitting the primary database after POST/PUT/DELETE operations.

DevOps & Cloud Infrastructure​

  • Container Orchestration: Designed a multi-container architecture using docker-compose for local development.
  • Version Tracking: Implemented automated image tagging using git commit hashes ($(git rev-parse HEAD)) for precise version control.
  • CI/CD & Cloud: Integrated Travis CI for automated testing. Successfully deployed and maintained the system across AWS ECS and GCP GKE (Kubernetes) environments.

Source​

Github Source

UI & Feature Showcase​

👀 System UI and Dynamic Demos

UI Demo​

price-dashboard-demo-1 price-dashboard-demo-2

Auto Sign-in​

Create a promotion​

Update a promotion​

Remove a promotion​

Create a promotion and push it on live​

Create a promotion and push it on live while there is another promotion on live​

Price updated when different products in bundles​

🌟 Present-Day (2025) Retrospective​

Looking back at this early full-stack project, if I were to rebuild it for today's enterprise-grade environments, I would make the following architectural adjustments:

  1. BigCommerce didn't provide Price updating API, making the tool half dead.
  2. Over-engineering Alert: Redis was introduced as a cache layer for performance. However, for an internal admin dashboard, the traffic did not reach a bottleneck to justify this, which added unnecessary operational complexity and we need to sync data in two places.
  3. Internal Communication: Service-to-service communication should be upgraded from REST APIs to gRPC or tRPC for stricter type safety and better transmission performance.