Lightning Components Sample App: Belgian Beer Explorer

Learn how to build interactive apps like this Belgian Beer Explorer using Lightning Components.

Belgium has a long tradition of beer making. According to Wikipedia, the country counts over 1700 beers of various styles, including Trappist, Abbey, Saisons, Lambic, Gueuze, Fruit Beers, White, Double, Triple, Quadruple, etc.

As I was experimenting with the new Lightning Components, I thought it would be fun to build an app that lets users search and explore this list in different ways: by name, style, brewery, alcohol content, etc. I learned a ton: not only building the application, but also using it!

Check out the end result in this video:

In this post, I’ll show how the application works and how to install it in your own org.

Architecture Highlights

The data is imported in two custom objects: breweries and beers.

The client side of the explorer is built as a Lightning Application that assembles different Lightning Components: SearchBar, Paginator, BeerList, and BeerListItem.

Click this link to install the application using an unmanaged package, then click Continue, Next, Next, Install.

Step 2: Import Data

You currently have to disable Lightning Components for the Data Import Wizard to work correctly when importing csv files. To disable Lightning Components: In Setup, click Develop | Lightning Components, uncheck the Enable Lightning Components checkbox, and click Save.

Step 3: Explore the Application

Click File | Open Lightning Resources in the menu, select Explorer | APPLICATION in the dialog, and click the Open Selected button

Click Preview in the code editor (upper right corner) for the Explorer application

Source Code

The source code for the application is available in this GitHub repository.

Resources

If you’d like to get started building your own Lightning Apps and Components, take a look at the new Lightning Components module in Trailhead. You’ll earn a new badge, and be able to show off your Lightning skills.