Belgian Beer Explorer with React and Bootstrap on the Salesforce Platform

In my previous posts, I shared a React and an Ionic version of a Belgian Beer Explorer application that lets users search and explore over 1700 Belgian beers by name, style, brewery, etc.

In this post, I’m sharing the same application built with React and Bootstrap on top of the Salesforce platform.

When you build on top of the Salesforce platform, you automatically get the infrastructure and turnkey modules that make up most of the application: you can focus your development efforts on differentiating features, like the custom user experience demonstrated in this application.

For example, this specific application could leverage the following modules of the platform:

  • CRUD Interface for maintaining the beer and brewery data (create, update, delete)
  • Authentication
  • Authorization: who can do what in the application, up to field-level security
  • Reporting
  • Workflow for approval processes (for example, new product image approval)
  • Bulk emails to customers (for example, to announce new products)

Architecture Highlights

  1. The data is imported in two Salesforce custom objects: breweries and beers
  2. The client side of the explorer is built with React and Bootstrap in a Visualforce page
  3. The data service is built in Salesforce (Apex)
  4. The client application accesses data using JavaScript Remoting

The Application can run inside the Salesforce Chrome or full screen.

Installing the Application in your Salesforce Instance

Step 1: Install the Application

Login to your developer org and click this link to install the application using an unmanaged package, then click Continue, Next, Next, Install.

You can sign up for a free developer environment here if you don’t already have one.

Step 2: Import Data

Import Breweries

  1. Save breweries.csv on your local file system
  2. In Salesforce’s Setup Mode, select Administer > Data Management > Data Import Wizard
  3. Click Launch Wizard
  4. Click the Custom objects tab, select Breweries
  5. Click Add New Records
  6. Drag breweries.csv to the upload area, select Unicode (UTF8)
  7. Click Next

  1. Click Map for the Id column
  2. Map the CSV’s Id field to the Custom Object BreweryId field
  3. Click Next, and Start Import

Import beers

  1. Save beers.csv on your local file system
  2. In Salesforce’s Setup, select Administer > Data Management > Data Import Wizard
  3. Click Launch Wizard
  4. Click the Custom objects tab, select Beers
  5. Click Add New Records
  6. For Which Brewery field in your file specifies the Master/Detail relationship?, select Extenal ID.
  7. Drag beers.csv to the upload area, select Unicode (UTF8)
  8. Click Next

  1. Click Map for the brewery_id column
  2. Map the CSV’s brewery_id field to the Custom Object’s Brewery field
  3. Click Next

Step 3: Explore the Application

  1. Select Beer Explorer in the application selector
  2. Click the Explorer or Explorer (Full Screen) tab to start the application
  • That’s a lot of different implementations. In the end which one was your personal preference? It would have been nice to see a summary of the pros and cons of each solution, from your perspective. Thanks for sharing!

  • You can follow this web address current issues

  • Ron Heiney

    How do I delete the data from salesforce after I have run the sample?

  • very useful info for me, thanks

  • Jakes

    I tried to upload the csv files to salesforce, but they both failed. Anybody else have had this problem?

  • good content thanks..

  • Justin Dove

    Really wish I knew about this before I went to Belgium in March. Guess I’ll have to work on this and then go back!

  • качество, доступность и цена производства..http://jonsunsport.com/spor-coraplari.html

css.php