Skip to main content

World Kindness Day Lens & Web App

When a user chooses a balloon and speaks their pledge in the Lens, a record is written to the Snap Cloud database. The global pledge counter in the companion web app updates in real time - no page refresh needed.

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 come from that demo setup.

Why this pattern matters​

Many real Spectacles experiences need some form of persistence: saving user actions, syncing state across users, or displaying information outside the Lens. This demo keeps the integration minimal so you can treat it as a reference, a starting point, or a learning resource.

Use this if you want to:

  • Understand how a Lens can securely write data to Snap Cloud.
  • Learn how to query that data back using RPC functions.
  • See how the Lens & Web App web client can read the same data in real time.
  • Have a working pattern to adapt for your own projects.

Setup​

The full setup is split across three guides. Start with the Snap Cloud project, then decide whether you want to run only the Lens, or the full Lens & Web App flow.

StepGuide
1. Create tables + RPC functionsWKD Snap Cloud Setup Guide
2. Connect the Lens in Lens StudioWKD Lens Setup Guide
3. Configure and deploy the Web AppWKD Web App Setup Guide

Option A: 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 following the WKD Lens Setup Guide. The Lens writes pledge data to your database, which you can inspect directly in the Supabase dashboard.

Option B: Lens & Web App​

Complete Option A first, then download the Web App ZIP and configure it with 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 in real time.

Tips​

The Lens uses the same signInWithIdToken pattern as all other examples, then calls .from('pledges').insert(...) to write the user's pledge. The web app subscribes to changes on the same table using Supabase's Realtime postgres_changes listener.

The pattern here: Lens writes → Supabase stores → Web App reads in real time; applies to any experience that needs a live public counter, a shared map, a multiplayer leaderboard overlay, or any persistent cross-device state.

Was this page helpful?
Yes
No