1 of 32

UCP Commerce Admin UI

Samantha Zheng (intern),

Vivek Singhai (manager), Todd Sieland-Peterson (mentor)

August 2024

2 of 32

Content

About me

My team: UCP-Commerce

Project Mission

Project Deliverable

Project Evolution

Summer Experience

Contents

2

|

3 of 32

Unified Commerce Platform

UCP Engineering team

UCP Commerce builds and support modern multi-Cloud based SAAS (Software as a Service) Platform that powers Starbucks Mobile Order and Pay across various delivery channels in USA/Canada markets.
Currently supporting the following ordering channels:

Starbucks Mobile app (MOP)
Delivery Partners orders
Next Generation Point of Sale (POS) System

Team Extra shot owns services for order pricing
Team Antigua owns services for order fulfilment
Admin UI is co-owned by the two teams

team service ownership

3

|

4 of 32

Unified Commerce Platform

UCP Engineering team

Team Extra shot owns services for order pricing
Team Antigua owns services for order fulfilment

Admin UI is co-owned by the two teams

4

|

5 of 32

Project Mission

Motivation for an admin UI tool
Why switching to React

5

|

6 of 32

What is an Admin UI

An admin UI (administrative user interface) is a part of a software application designed specifically for administrators to manage and configure various aspects of the system.

What is an admin UI

Database management

Website management

6

|

7 of 32

Avoid the pain of manually executing many Postman requests to remove duplicate promotion entries.

Motivation

Easier bulk modification

Provide a way to list all locations associated with a merchant, so developers don’t have to manually trace location associations from JSON outputs.

See relationships between data

Improve the visualization of data entities, making it easier to review a data entity, without having to sift through JSON strings or the database.

Visualize data object JSON

Motivation

X 10,000

merchant

Location 1

Location 2

Location 3

Location 4

7

|

8 of 32

Frontend Migration

Per user request,

Spring Boot receives and processes the request and sends data models to the viewer
Thymeleaf processes the data and generate html
Html is sent to the browser and rendered

Spring Boot + Thymeleaf + HTML

Spring Boot + React

Per user request,

React makes AJAX calls to Spring Boot rest APIs
Spring Boot processes the request and sends back JSON response
React processes JSON data on client side and updates the DOM dynamically

Before:

After:

8

|

9 of 32

Project Deliverables

Demo
Impact

9

|

10 of 32

Home

Screens

Promotions

Locations

Screens

Merchants

10

|

11 of 32

11

|

12 of 32

Table and pagination

Homepage and

page navigation

12

|

13 of 32

Promotions Screen

Sort

Sort the list of promotions by any column in ascending or descending order

Implementation: custom hook to manage sort config with `useState`,and Javascript `Array.prototype.sort()` for sorting.

Search

Search for promotions based on specific fields

Implementation: `useState`to store the search term, and ` Array.prototype.filter()` for filtering.

Bulk select and Edit

Select multiple or all promotions from the list and perform bulk actions (enabling or disabling them)

Implementation: custom hook to handle row selection, TanStack `useMutation` for query to backend to edit data.

Cleanup duplicates

Remove redundant promotions to maintain a clean database

Implementation: `Array.prototype.reduce()`for computing duplicates, TanStack `useMutation` for query to backend to delete data.

13

|

14 of 32

Table in the old UI

14

|

15 of 32

Table and pagination

15

|

16 of 32

Sorting

Sort the list of promotions by any column in ascending or descending order.

16

|

17 of 32

Searching in the old UI

17

|

18 of 32

Searching

Search for promotions that matches a certain user input on any of the fields

18

|

19 of 32

Enable or disable promotions

Select multiple or all promotions from the list and perform bulk actions (enabling or disabling them)

19

|

20 of 32

Cleanup duplicates�

Clean up duplicates

Remove duplicated promotions to ensure each promotion has a unique combination of discount code and discount ID.

20

|

21 of 32

Detail page for a single promotion

Spring. boot

21

|

22 of 32

Detail page

Detail page comparison

22

|

23 of 32

Locations Screen

Sort

Sort the list of locations by any column in ascending or descending order.

Implementation: custom hook to manage sort config with `useState`,and Javascript `Array.prototype.sort()` for sorting.

Search

Search for locations based on specific fields.

Implementation: `useState`to store the search term, and ` Array.prototype.filter()` for filtering.

Advanced Search

Search using specific fields, with dropdown selections for 'State' and 'Country' that automatically synchronize.

Implementation: `Array.prototype.reduce()` to compile select options for dropdowns, and `useEffect` hook to update the ‘Country' field when a 'State' is selected.

23

|

24 of 32

Advanced Search

Searching with specific fields, with auto-filling for states and country

24

|

25 of 32

Advanced Search

Combined with general search

25

|

26 of 32

Merchants Screen

Sort

Sort the list of merchants by any column in ascending or descending order.

Implementation: custom hook to manage sort config with `useState`,and Javascript `Array.prototype.sort()` for sorting.

Search

Search for merchants based on specific fields.

Implementation: `useState`to store the search term, and ` Array.prototype.filter()` for filtering.

List of merchant locations

Display a list of locations under the merchant.

Implementation: Tanstack `useQuery` to query the database for the list, data display similar to locations screen.

26

|

27 of 32

Merchant locations

Connecting merchants with locations

27

|

28 of 32

Impact

More user-friendly, easy-to-use, cost-saving data display and management that adheres to modern industry standards.

Made the below future functionalities possible:

Integrate with Starbucks' single sign-on to enable tool access by a wider range of partners.
Provide an interface to build an order right here rather than running it through the services via Postman calls.
Automate the current manual processes of testing, applying future promotions to orders, and pricing to-be-released products.

28

|

29 of 32

Project Evolution

Project timeline
Challenges

29

|

30 of 32

Project timeline

Computer and tools setup,

Getting authorized to use S4 components library,

Locally running the backend.

Setup, authorization

Deploy the service to lower environment and monitor the condition of the pods.

Set up environment variables and proxies to enable backend calls.

Deployment to lower env

Give developers instructions for coding, deploying and running the application.

Writing documentation

Writing unit tests

Writing unit tests that runs per code push to GitHub to ensure that all page components function correctly.

Frontend development

Clarify the objectives before beginning to code. Provide updates during daily stand-up meetings and maintain regular check-ins with mentor or manager to receive feedback

Code cleanup

Remove log statements, commented out codes and unused files to keep the code base clean.

30

|

31 of 32

Summer Experience

favorite band

Riichi mahjong

hiking

Hack week

overpriced food

paddleboarding

31

|

32 of 32

Thank you.