Instruct BigCommerce Integration

Requirement

Integrate BigCommerce APIs into the front end app, allowing products to be added to BigCommerce cart as a user progresses through the Instruct journey.

Background

Existing BigCommerce integration was in place from a back end perspective only, mapping the existing Purplebricks order into a BigCommerce cart at the final step and allowing checkout through the BC hosted payment pages. This meant the cart was only created immediately prior to checkout and therefore no opportunity for cart abandonment at the earlier stages.

Solution

Update existing Instruct journey React app to consume BigCommerce APIs directly from the front end.

Create a new front end service layer which calls the BigCommerce Cart API (via PB proxy service to BigCommerce APIs) to perform cart CRUD actions as the user progresses through the instruct journey.

This provides the ability to use cart abandonment facility within BigCommerce, as cart is created on initial load and products are added throughout the journey. Giving more opportunity and data to leverage more sophisticated cart abandonment.

Future

The integration of BigCommerce into the current legacy Instruct app was an MVP interim solution, to leverage BigCommerce functionality whilst the larger solution was developed. The full solution involved rebuilding the Instruct app using the latest PB stack:

• Nx monorepo app and utilising / contributing to share UI component library

• NextJs app using server side rendering

• Apollo client and GraphQL for BigCommerce product data

• Create new Nx libs for new features - Azure app config env vars, OneTrust cookie consent

• New UI and improved UX

Much of the initial development and spikes were completed, with the foundations of the app being in place. The project was the unfortunately paused due to other business priorities and restructuring.

Responsibilities

Senior front end engineer within the instructions team, working alongside and mentoring back end / full stack engineers who were also supporting the BigCommerce FE integration. Lead the development of the new Nx / NextJs app as mentioned above, creating, refining and estimating required PBIs / User Stories for the technical build of the new app.

Initial hands on development and spike for initial setup and foundation tasks to create a solid base to begin iterations rebuilding the Instruct journey on a page by page basis.