Appearance
Build a Multi-Framework App with React
In this module, you'll use Agentforce Vibes to build a React app on Salesforce in small, visible increments. Each exercise adds one capability at a time so you can see the app evolve from a simple shell into an interactive Merchant Operations Center backed by Salesforce data.
This Merchant Operations Center is the external, merchant-facing counterpart to the Merchant Performance Dashboard you built in Module 2. Same storefront, order, and review data, but delivered as a standalone app outside Lightning Experience rather than a Lightning Web Component inside it, which is the whole point of building it with a dedicated frontend framework.
Prerequisite
Before starting this module, complete Module 2, Exercise 1: Launch and Explore Agentforce Vibes.
That exercise walks you through opening Agentforce Vibes, upgrading to Vibes 2.0, reviewing the sidebar, and understanding the controls you'll use in this module.
Scenario
Merchant operations teams need a focused command center for understanding how storefronts are performing. The app starts with mock data so you can build the user experience quickly. Then you add interactivity with React, connect the app to Salesforce data, add workflow recommendations, and deploy it to your org.
What You'll Build
- A React app called Merchant Operations Center.
- Storefront performance cards with mock data.
- Summary metrics calculated from visible storefronts.
- Cuisine filters, search, sorting, pagination, and a detail panel.
- A Salesforce-backed version that loads Storefronts and their related Orders and Reviews directly.
- Recommended next actions based on storefront performance.
- A deployed app that runs from your Salesforce org.