Skip to content
SK

company project · completed

Excel Data Automation Platform

Frontend contribution on a retail Excel forecasting platform — built React/Vite UI to display Store, COM, and Omni forecast variables, calculation breakdowns, and detailed metrics per product within the larger Django forecasting system.

React
Vite
Redux
JavaScript
REST APIs

Problem

Forecast outputs from the backend (store-level, COM-level, and omni-channel calculations) were difficult for planners to review — raw API data needed clear, structured UI with visible calculation steps and per-variable detail metrics.

Solution

Developed the product-detail forecasting UI — StoreVariables, COMVariables, OmniVariables, rolling forecast tables, and monthly forecast views — surfacing backend-calculated metrics with readable breakdowns, labels, and drill-down detail for each forecast dimension.

Architecture

React + Vite frontend consuming Django REST API forecast endpoints. Redux (forecastSlice) for state. Component hierarchy: ProductDetailsView → forecast/rolling modules → Store/COM/Omni variable panels with calculation detail modals. Backend forecasting pipeline (Django, pandas) built by other team members.

Business Impact

Made complex store/COM/omni forecast outputs readable and actionable for retail planners reviewing product-level calculations.

Technical Decisions

  • Separate StoreVariables, COMVariables, and OmniVariables components per forecast dimension
  • Redux forecastSlice for shared product forecast state across detail views
  • Modal-based calculation detail views for verbose algorithm breakdowns

Feature Breakdown

Store Forecast Metrics UI
COM Forecast Metrics UI
Omni Forecast Metrics UI
Calculation Breakdown Display
Rolling Forecast Tables
Monthly Forecast Views
Product Detail Metrics

Responsibilities

  • Built Store, COM, and Omni forecast variable UI components with structured metric display
  • Implemented calculation breakdown views so planners can see how each forecast value is derived
  • Developed rolling forecast and monthly forecast table UI for product-level detail
  • Integrated forecast API responses into Redux state and product detail views
  • Designed detail metrics layout for per-variable labels, values, and explanatory drill-downs

Challenges

  • Presenting dense forecast variables (store, COM, omni) without overwhelming the product detail view
  • Mapping backend calculation fields to clear UI labels and drill-down detail metrics

Performance Considerations

  • Structured rendering of large forecast variable sets per product
  • Redux selectors to avoid unnecessary re-renders on detail metric updates

Lessons Learned

  • Forecast UIs need progressive disclosure — summary tables first, calculation breakdown on drill-down
  • Consistent metric cards across Store/COM/Omni reduce cognitive load for planners switching contexts