Add doorbell channel using Supabase

Author: samholmes

.github/workflows/deploy.yml

@@ -24,6 +24,9 @@ jobs:
   # Build job
   build:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+      NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4

README.md

@@ -35,6 +35,17 @@ bun run dev
 
 The site will be running at http://localhost:3000.
 
+### Environment Variables
+
+Realtime doorbell interactions rely on Supabase Realtime. Create a Supabase project (free tier is fine) and add the following to `.env.local`:
+
+```sh
+NEXT_PUBLIC_SUPABASE_URL=<your-supabase-project-url>
+NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-public-anon-key>
+```
+
+These keys are safe to expose to the browser but should be scoped to the realtime channel only via Supabase RLS/policies.
+
 **Note: This project is being refactored to use styled-components exclusively. Please do not add new Tailwind classes. See [styling guidelines](./docs/conventions/styling-guidelines.md) for details.**
 
 ## Contributing

app/doorbell/page.tsx

@@ -1,21 +1,79 @@
 "use client"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
+import type { RealtimeChannel } from "@supabase/supabase-js"
 import styled from "styled-components"
 import { motion } from "framer-motion"
 import { PotionBackground } from "../components/PotionBackground"
 import { ErrorBoundary } from "../components/ErrorBoundary"
 import { Button } from "../components/Button"
+import { supabaseClient } from "@/lib/supabaseClient"
 
 // Components //
 
 export default function Doorbell() {
 	const [isRinging, setIsRinging] = useState(false)
+	const channelRef = useRef<RealtimeChannel | null>(null)
+	const lastRingIdRef = useRef<string | null>(null)
 
-	const handleDoorbellClick = () => {
+	const triggerLocalRing = useCallback(() => {
 		playDoorbellSound()
 		setIsRinging(true)
+	}, [])
+
+	const broadcastRing = useCallback(async (ringId: string) => {
+		if (!channelRef.current) {
+			return
+		}
+
+		try {
+			const status = await channelRef.current.send({
+				type: "broadcast",
+				event: "ring",
+				payload: { ringId }
+			})
+
+			if (status !== "ok") {
+				console.error("Failed to broadcast doorbell ring:", status)
+			}
+		} catch (error) {
+			console.error("Failed to broadcast doorbell ring:", error)
+		}
+	}, [])
+
+	const handleDoorbellClick = () => {
+		const ringId = createRingIdentifier()
+		lastRingIdRef.current = ringId
+		triggerLocalRing()
+		void broadcastRing(ringId)
 	}
 
+	useEffect(() => {
+		const client = supabaseClient
+		if (!client) {
+			return
+		}
+
+		const channel = client
+			.channel("doorbell")
+			.on("broadcast", { event: "ring" }, ({ payload }) => {
+				const ringPayload = payload as RingPayload | undefined
+				if (ringPayload?.ringId && ringPayload.ringId === lastRingIdRef.current) {
+					return
+				}
+
+				triggerLocalRing()
+			})
+			.subscribe()
+
+		channelRef.current = channel
+
+		return () => {
+			void channel.unsubscribe()
+			client.removeChannel(channel)
+			channelRef.current = null
+		}
+	}, [triggerLocalRing])
+
 	useEffect(() => {
 		if (isRinging) {
 			const timer = setTimeout(() => {
@@ -152,6 +210,18 @@ const AnimatedButtonContent = styled(motion.span)`
 
 // Constants //
 
+type RingPayload = {
+	ringId?: string
+}
+
+const createRingIdentifier = () => {
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+		return crypto.randomUUID()
+	}
+
+	return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
 const playDoorbellSound = () => {
 	try {
 		const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()