Skip to main content

Lens and Web App Demo

The World Kindness Day demo shows how a Spectacles Lens and a Web App can share data through Snap Cloud (Supabase). When a user chooses a balloon and speaks their pledge in the Lens, a record is written to the database, and the global counter in the web app updates in real time.

The web app below is a live demo connected to an internal Snap Cloud project and a sample World Kindness Day Lens that has already received pledges. The numbers you see here come from that demo setup.

Overview​

This project provides a clear, minimal example of how a Spectacles Lens can connect to Snap Cloud to store data and read it back across different clients. Many real Spectacles experiences require some form of persistence; saving user actions, syncing state, or displaying information outside the Lens.

This demo is useful if you want to:

  • Understand how a Lens can securely write data to Snap Cloud.
  • Learn how to retrieve data with RPC functions.
  • See how a Web App can read the same data in real time.
  • Use a working pattern you can adapt for your own projects.

It is intentionally simple so you can treat it as a reference implementation, a starting point, or a learning resource when exploring cloud-connected Spectacles workflows.

Setup and Integration​

To use this sample with your own backend and devices, you should first set up a Snap Cloud project and then decide whether you want to configure only the Lens or both the Lens and the Web App.

1. Create your Snap Cloud project​

Begin by setting up your Snap Cloud project. This includes creating the database tables, defining the required RPC functions, and configuring permissions. Follow the WKD - Snap Cloud Setup Guide to complete this step.

This Snap Cloud project acts as the shared backend for both the Spectacles Lens and the Web App.

2. Choose how you want to integrate the sample:​

Once your Snap Cloud project is ready, you can choose how you want to use this demo.

Option A – Configure the Lens only​

Open the World Kindness Day sample project from the Spectacles Sample Projects section in Lens Studio. Import your Supabase credentials and connect the Lens to your Snap Cloud backend.

Next, follow the Lens Setup Guide to verify that all required inputs are assigned and to test the experience on Spectacles. In this setup, the Lens will write pledge data to your database, which you can inspect directly from the Supabase dashboard.

Option B – Configure both the Lens and the Web App​

If you want to see the data reflected outside the Lens, you can also set up the companion Web App. Start by completing Option A to ensure the Lens is correctly connected.

Then download the Web App ZIP and configure it using your Supabase URL and anon key, as described in the Web App Setup Guide. Once configured, the Web App will display the same global pledge total that the Lens updates when users complete the experience.

While this demo focuses on a single interaction, the same setup can be reused for many cloud-connected Spectacles experiences. The guides provided here are intended to help you adapt this pattern for your own projects.

Was this page helpful?
Yes
No