Shriyash Sharma
Back to projects
production·May 31, 2026, 8:02 AM

Chaukanna — CCTV & Home Automation Platform

Chaukanna is the digital storefront for Shri CCTV & Home Automation Services, a Pune-based installer covering nine service lines from CCTV and AMC contracts to smart-home automation. The site replaces phone-only intake with a fast, mobile-first PWA that ranks for local intent searches and converts visits into qualified inquiries through inline forms, WhatsApp/call CTAs, and Tawk.to chat.

nextjsreactsupabasetailwindcsspwaseolead-generationlocal-business

Overview

Product direction and engineering scope

A lead-generation and service platform built for a Pune-based security systems provider. The platform showcases CCTV, home automation, biometric, access control, and fire safety services while supporting SEO-driven customer acquisition, online inquiries, and site-survey bookings.

Full writeup

Implementation notes

What it is

A Next.js 16 + App Router website serving as the primary acquisition channel for a security and home-automation services business operating in Pune. The site is installable as a PWA, optimized for local SEO, and integrates lead capture directly into Supabase so the business owner gets every inquiry without managing a separate CRM.

The problem

The business previously relied entirely on word-of-mouth and phone calls. Service buyers research online before calling, so an offline-only presence meant losing leads to competitors with even minimal web visibility. The goals were:

  • Rank for service + locality intent ("CCTV installation Pune", "biometric attendance Pune", etc.).
  • Convert visitors immediately without friction — WhatsApp, call, or form.
  • Stay zero-maintenance: no CMS babysitting, no recurring infra cost beyond the Vercel free tier and Supabase free tier.

Architecture

  • Next.js 16 (App Router) with React 19 — file-based routing, RSC for per-service landing pages, ISR for the blog.
  • Tailwind CSS v4 for styling; design system kept intentionally narrow so the operator can add new service pages by copying one file.
  • Supabase as the only backend: a contact_submissions table behind RLS captures form leads, an interaction_logs table captures click events on call/WhatsApp/email CTAs for funnel analysis.
  • PWA via @ducanh2912/next-pwa — installable on Android/iOS, offline shell for previously visited service pages.
  • Resend for transactional email notifications on new inquiries.
  • Tawk.to widget for live chat fallback when the customer prefers conversation over a form.
  • Vercel Analytics + GA4 for traffic and conversion attribution.

Key engineering decisions

  • Supabase over a custom Node API. A side-business site doesn't justify running a separate backend. Direct browser → Supabase (with RLS-restricted INSERT-only policies) gives the same security posture as a thin proxy with zero ops surface.
  • Service pages as data, not routes. All nine service definitions live in src/data/services.ts. One dynamic route renders them all, which keeps the SEO copy consistent and makes adding a tenth service a one-file diff.
  • PWA-first, not retrofitted. The manifest, icons, and offline fallback were defined up front so the install prompt works on the first visit — critical for repeat-customer retention on a service business.

Outcome

  • Single source of truth for service content (src/data/services.ts).
  • Installable PWA with offline shell, sub-2s LCP on 4G.
  • Inbound leads flow into Supabase + Resend without manual triage.
  • Zero recurring infra cost (Vercel + Supabase free tiers).