Christian CastillejoDesign Engineer
Case Study / 1

Kashmir Shaiva Institute

Translating an ancient tradition into a modern digital experience. By focusing on the organization's unique constraints, I engineered a multi-tenant architecture and a bespoke request-to-order commerce.

Core Stack
Next.js 16
TypeScript
GraphQL
Contentful
Tailwind v4
Radix UI
Framer Motion
Zustand
Resend
Key Metrics
99%

Performance

100%

Best Practices

Visit Live SiteCheck the Repo
The Process

Engineering narrative.

01

The Architecture

Multi-Tenant Edge Routing

The Organization operates across different regional domains. Instead of building isolated apps, I designed a single Next.js codebase. Using Edge Middleware, the server dynamically resolves the tenant based on the URL, serving localized content and themes with zero client-side overhead.

the-architecture.ts
// src/lib/tenant.ts
export type TenantId = "ksi" | "delhi" | "srinagar";

export function getTenant(domain: string | null | undefined): TenantId {
    if (!domain) return "srinagar";
    const normalizedDomain = domain.toLowerCase();

    if (normalizedDomain.includes("kashmirshaivainstitute")) return "ksi";
    if (normalizedDomain.includes("delhi")) return "delhi";
    
    return "srinagar";
}
02

Performance

The Trunk and the Leaves

I treat React Server Components as the 'trunk' of a tree—handling heavy tasks like Contentful queries and routing. The ''use client'' directive is reserved strictly for the 'leaves': interactive islands powered by Framer Motion and Zustand. This keeps the JS bundle incredibly lean.

Performance
03

Business Logic

E-Commerce by Policy

Strict copyright policies meant a standard checkout wasn't legally viable. I designed a bespoke 'Request-to-Order' flow instead (If you want to see a standard Shopify flow, check out my Silvestra case study). Using React 19 Server Actions, the system gracefully bifurcates domestic shipping and international requests, ensuring the architecture adapts to the business reality, not the other way around.

business-logic.ts
// src/features/cart/CartDrawer.tsx
{destination === "international" ? (
    <div className="p-4 bg-accent/5 border border-accent/20 rounded-md">
        We only ship physical copies within India. For international orders, please visit our global partner.
        <Button asChild">
            <Link href="https://www.lakshmanjooacademy.org/books">Global Partner</Link>
        </Button>
    </div>
) : (
    <Button asChild>
        <Link href="/checkout">Request Order</Link>
    </Button>
)}
Data Flow

Strictly Typed
Mutations

Contentful provides the flexible editorial data, while TypeScript provides the strict guardrails. I integrated GraphQL Codegen to ensure zero runtime errors, pairing it with Zod and Resend for secure, type-safe server mutations.

Contentful CMS

Headless Content

Editorial control over philosophy texts and institute data.

Zustand Store

Local Hydration

Persistent cart state synchronized cleanly on the client.

Server Actions

Next.js 16 Mutations

Zero-JS form submissions handling the core 'Request' logic.

Zod & Resend

Type-Safe Dispatch

Strict runtime validation before securely emailing the organization.

Configurationcodegen.ts
actions.ts
"use server";
import { z } from "zod";
import { Resend } from "resend";

export async function submitCheckoutForm(prevState, formData: FormData) {
    const schema = z.object({
        name: z.string().min(2),
        email: z.string().email(),
        cartItems: z.string(),
    });

    const parsed = schema.safeParse(Object.fromEntries(formData));
    if (!parsed.success) return { success: false, errors: parsed.error };

    // Secure server-side email dispatch
    await resend.batch.send([...]);
    return { success: true };
}

Server Actions executing request-scoped validation with Zod and handling secure API keys exclusively on the server.

Design Engineering

Editorial
Aesthetics.

The UI embraces an editorial, print-inspired aesthetic. I used Tailwind v4 to map contextual color primitives (Saffron, Himalaya, Parchment) into an organic interface, animated with slow, deliberate spring physics.

Properties
Isolation Mode
Select.usage.tsx
<Select defaultValue="srinagar" onValueChange={switchTenant}>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Organization</SelectLabel>
      <SelectItem value="srinagar">Srinagar (Main)</SelectItem>
      <SelectItem value="delhi">New Delhi</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>International</SelectLabel>
      <SelectItem value="ksi">Kashmir Shaiva Institute</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
Engineering Foundations

The technical
decisions behind the code.

When building for an institution with a deep legacy, stability is paramount. I established these core principles to ensure the platform remains robust, maintainable, and respectful to the user.

01

Multi-Tenant Edge

Built to scale horizontally. Adding a new regional ashram only requires updating the routing logic, keeping the codebase completely DRY and centralized.

Edge Computed Routing
02

Business-Driven Logic

I adapted the engineering to meet strict organizational and legal policies. If you want to see a standard Shopify flow, check out my Silvestra case study.

Custom Transaction Flow
03

Organic Motion

A purely static page can feel disconnected. I used Framer Motion's spring physics to create a breathing, calm interaction flow that respects the philosophical subject matter.

60fps Spring Physics
04

Server-First Mentality

By leveraging React 19 Server Components and Server Actions, the client ships almost zero JavaScript for core routing and form submissions.

Zero-JS Baselines
Retrospective

Engineering
Trade-offs.

Every project is a series of decisions. Here are the critical pivot points where I had to balance technical purity with business reality.

01

Constraints breed elegant UI

One of the biggest UX challenges here was legal, not technical. Building a robust bifurcation for International vs. Domestic users inside the cart reminded me that engineering is about solving business constraints gracefully, rather than just writing code.

Key Takeaway
02

The Power of the Leaf

Pushing state management (Zustand) to the absolute 'leaves' of the component tree prevented hydration bottlenecks, allowing complex layouts to be served as static HTML for blazingly fast performance.

Key Takeaway