The Preceptor Global — Vedic Astrology Consultation Platform

A practicing astrologer needed a premium, conversion-optimized web presence to serve high-value clients across the United States and internationally. The existing solution had no content management system — every text update required a developer. Booking was handled manually via DMs, causing scheduling friction and lost leads. The site had no SEO foundation, no structured metadata, and no automated quality assurance — making it invisible on Google and fragile to regressions.

Built a production-grade React SPA on Vite 6 with a three-platform architecture: Vercel for global edge deployment, Sanity CMS for full client content autonomy, and Cal.com for zero-backend booking with timezone intelligence. Implemented a centralized SEO system via a single seo.js module consumed by react-helmet-async across all 8 routes. Covered every route and SEO requirement with 48 Playwright E2E tests running on every push via GitHub Actions. Delivered a premium UX using Framer Motion scroll reveals and Lenis smooth scroll to build brand trust and justify premium pricing.

the-preceptor/
├── src/
│   ├── routes/              # 8 page-level route components
│   │   ├── index.jsx        # Homepage
│   │   ├── about.jsx
│   │   ├── services.jsx
│   │   ├── book.jsx         # Cal.com embed
│   │   ├── contact.jsx      # Combobox form → Formspree
│   │   ├── testimonials.jsx
│   │   ├── blog.jsx
│   │   └── faq.jsx
│   ├── components/
│   │   ├── site/            # Nav, Footer, Logo, Reveal
│   │   └── ui/              # select, badge, card primitives
│   ├── content/
│   │   └── site.js          # siteConfig — single source of truth
│   ├── lib/
│   │   └── sanity.js        # Sanity GROQ client
│   └── utils/
│       └── constants.js     # CMS fallback data
├── studio/
│   └── schemas/             # Sanity schemas
├── tests/                   # 48 Playwright E2E specs
├── .github/workflows/       # CI pipeline — test → deploy
├── vercel.json              # SPA routing + security headers
├── sanity.config.js         # Studio config
└── vite.config.js           # Build config + path aliases

Static SPA served from Vercel's global edge CDN — sub-200ms TTFB worldwide. Vite's code-splitting produces per-route chunks, keeping initial JS bundle under 150KB gzipped. Images served via Vite's imagetools plugin with WebP conversion and lazy loading. Lenis smooth scroll runs on RAF (requestAnimationFrame), never blocking the main thread. Framer Motion animations use GPU-composited properties (transform, opacity) only — zero layout thrash.

Chose React Router DOM over TanStack Router for simplicity — sacrifices file-based routing convention but reduces bundle size and learning curve for future maintainers. Chose Formspree over a custom backend for the contact form — eliminates server infrastructure but caps submissions at 200/month on the free tier. Chose Cal.com embed over a custom booking UI — loses full design control but eliminates all scheduling backend logic, timezone handling, and email infrastructure entirely. Chose client-side Sanity queries over build-time static generation — content always fresh but requires Sanity CDN availability for first paint.

1. Radix UI Select breaks silently when CSS variable tokens (--popover, --popover-foreground) are not defined in the design system — replaced with a custom combobox built from scratch.
2. Playwright tests must run against a production-equivalent build (npm run build + preview), not the dev server — dev server masks real import errors.
3. Canonical tags are easy to forget on secondary routes. Adding a canonical-presence test to CI caught two missing tags before production.
4. CMS empty-state handling is critical for perceived performance — a collapsing/re-expanding testimonial grid destroys trust on first load. Fallback constants solved this completely.
5. lucide-react caused Vercel build failures due to ESM/CJS resolution conflicts with Vite — replacing with inline SVG functions eliminated the dependency entirely with zero visual change.

1. Migrate contact form to a serverless function (Vercel Edge Function) to remove Formspree dependency and capture leads directly to a database.
2. Add Sanity webhooks to trigger Vercel redeployment on content publish — enabling true ISR-like behavior without a Next.js migration.
3. Implement Google Analytics 4 with custom event tracking for "Book" button clicks and service card impressions.
4. Add structured data (JSON-LD) for LocalBusiness and Service schema types to improve Google rich result eligibility.
5. Introduce visual regression testing via Playwright screenshots to catch unintended UI changes on deploy.

All environment variables (Sanity project ID, dataset, API version) stored as Vercel environment variables — never committed to source. Vercel.json enforces security headers: X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin. No user authentication surface — contact form submissions go to Formspree (third-party, SOC 2 compliant). Cal.com booking data handled entirely by Cal.com's infrastructure — zero PII stored in this codebase.