calmtree.in

CalmTree Discover

A life-operating system built on evidence-based psychology - self-discovery assessments, a media channel and digital courses, all in one place.

Timeline: 2026
Role: Full-stack engineer
Team: Team
Status: live

Live Demo

Technology Stack

React 19TanStack RouterTanStack StartSupabaseTailwind v4RechartsPostHog

✦Overview

CalmTree Discover is the digital home for Alok Jha's applied-psychology brand - built to India's most trusted self-guided psychology learning destination. The platform serves six audience segments (self-developers, professionals, parents, creators, educators, B2B buyers) through eight interconnected product verticals, from free YouTube content all the way to paid assessment reports and certificate courses.

Technically it is a TanStack Start (SSR) application on React 19 with Supabase as the complete backend - auth, database, storage and row-level security in one managed service. TanStack Router's file-based routing means protected routes are protected by file structure, not runtime decorators. PostHog tracks every assessment start, completion and abandonment so the team can see exactly where the funnel leaks.

✦Key Features

Psychology assessments with ReportGate - Users take multi-step assessments (PersonalityCompass, ProfileRunner) scored across dimensions (DimensionBar, ScoreGauge). The free preview shows tier and top dimension; the full PDF breakdown is unlocked via a payment step.
Decode Your Mind media hub - An integrated channel hub for Alok's YouTube and Instagram psychology content - bite-sized concepts, human behaviour and mental wellness - embedded directly to close the loop from content consumer to assessment taker.
TanStack Start SSR + file-based routing - Public marketing pages are server-rendered for SEO. Protected routes (/assessments, /academy, /resources) live under a _authed/ layout route that enforces Supabase session presence - zero runtime decoration per page.
Supabase backend - Auth, PostgreSQL database, storage and row-level security from one managed service. Schema changes go through tracked migrations under /supabase - no ad-hoc database mutations.
PostHog product analytics - Every assessment start, question answer, completion and ReportGate interaction is captured in PostHog. The business sees exactly where users drop off and can run experiments without guessing.

✦Technical Implementation

01Assessment pipeline - run to score to gate

The assessment flow chains three specialised components: AssessmentRunner collects answers step by step, a scoring function maps answers to weighted dimension scores (rendered by DimensionBar and ScoreGauge), and TierBadge classifies the final score into one of four tiers. ReportGate intercepts the full ResultsView and requests payment before revealing the complete breakdown.

02TanStack Router - route structure as access control

Protected routes don't carry an auth decorator on every file. The _authed/ layout route in /src/routes runs a Supabase session check once - any file inside the directory inherits protection automatically. Adding a new protected page means creating the file; access control is structural.

src/routes/_authed/assessments.tsx

tsx

// File lives under _authed/ - layout enforces Supabase session.
// No per-page auth check. Adding a new protected page = new file here.
export const Route = createFileRoute("/_authed/assessments")({
  component: AssessmentsPage,
});

// Public equivalent (no auth):
// src/routes/decode-your-mind.tsx
export const Route = createFileRoute("/decode-your-mind")({
  head: () => ({
    meta: [{ name: "description", content: "Psychology concepts..." }],
  }),
  component: DecodeYourMindPage,
});

✦Project Structure

structure

calmtree/
├─ src/
│  ├─ routes/
│  │  ├─ _authed/     # protected: assessments, academy, resources
│  │  ├─ index.tsx    # marketing homepage (SSR)
│  │  └─ decode-your-mind.tsx  # media hub (public)
│  ├─ components/
│  │  ├─ assessment/  # AssessmentRunner, ReportGate, ScoreGauge,
│  │  │               #   DimensionBar, TierBadge, PersonalityCompassResults
│  │  └─ shared/      # SiteLayout, NewsletterForm
│  └─ server/         # TanStack Start server functions
├─ supabase/          # DB migrations + edge functions
└─ admin/             # separate Vite admin panel

✦Design Decisions

TanStack Start over Next.js

TanStack Router's type-safe, file-based routing is a better fit for a content platform with many distinct page types than Next.js App Router. TanStack Start adds SSR for the marketing pages without opinionated RSC overhead. The entire route tree is generated at build time and fully type-checked.

Supabase over a custom Node backend

For a client project, a managed backend with auth, realtime, storage and row-level security in one subscription beats building and maintaining a custom API. Row-level security policies enforce access at the database level - even a miscoded query can't return another user's assessment results.

✦Challenges

↳

Payment-gating without losing users

ReportGate intercepts the results view mid-flow. The challenge was making the free preview compelling enough that users want the full report, without spoiling it. The current design shows the tier badge and top dimension score - enough to validate the assessment, not enough to skip the paid report.

↳

Consistent scoring across different assessment types

The platform runs multiple psychology models (personality compass, profile analysis) with different score shapes. Keeping the visual vocabulary consistent - same DimensionBar scale, same tier thresholds, same ScoreGauge colour palette - across all assessments prevents a confusing mixed-language experience.

Want the full walkthrough - architecture, decisions, war stories?

ask me about it

← Previous

TechBrahmand

ConsoleCV

dealdirect.in