Writing
Case studies & notes
Case studies, engineering notes, and blog posts on product engineering — from this site's layout system to Lenis and Next.js caching patterns.
Case studies
In-depth pages for open-source projects on this site.
Feature Kits
Composable form, data-table, layout, and uploader kits for React and Next.js, distributed as a shadcn registry.
Loftlancer
Environment and secrets manager for organizations, projects, and environments.
Lucsum
Full-stack commerce platform with authenticated customer flows, staff operations, and server-authoritative Razorpay checkout.
Modelry
Interactive AI lab with streaming chat, threads, attachments, and a credits ledger — Vercel AI SDK with Ollama or Google Gemini.
Stats On Spotify
Spotify stats visualization side project with a public demo.
Engineering
How I build
How I structure applications — UI layers, typed APIs, and delivery patterns from shipped projects.
Product UI
Tables, forms, filters, validation, states, and responsive workflows shaped for real product tasks.
Type-safe architecture
Strong contracts from UI through APIs to the data layer — tRPC and typed procedures where projects use that stack.
Reusable systems
Shared UI primitives, tokens, and modular application structure — especially in Loftlancer and Feature Kits.
Quality & delivery
Testing, linting, CI, and deployment workflows documented in repos (Biome, Vitest, GitHub Actions, Vercel).
Next.js
Frontend · used in 5 public projects
React
Frontend · used in 5 public projects
tRPC
Data / API · used in 3 public projects
Drizzle ORM
Data / API · used in 3 public projects
Better Auth
Platform & quality · used in 3 public projects
Razorpay
Platform & quality · used in 2 public projects
Frontend systems
App → Layout → Feature → Data query → UI state
Data & API (where used in projects)
Client → tRPC / REST → Auth → PostgreSQL
Infrastructure (documented in repos)
Git push → GitHub Actions → Build → Vercel deploy
Blog posts
Notes on implementation details from this site and patterns I reuse in product work.
October 2026 · 6 min
Grayscale-to-color project images, accessibly
How the content-image utility on this portfolio restores color on hover and focus, skips the effect on touch-first devices, and respects reduced motion.
CSS · Accessibility · Portfolio
October 2026 · 7 min
Smooth scroll without breaking nested scroll areas
Lenis smooth scrolling is great until a menu or code block needs its own wheel track. Here is the data-lenis-prevent convention I use on this site.
Lenis · UX · Next.js
October 2026 · 8 min
Layout shells: stop fixing padding page by page
MainShell, SectionShell, ContentShell, and GridShell replaced one-off padding on jayantrohila.com — plus a Playwright audit that enforces a 16px minimum inset.
CSS · Design systems · Next.js
October 2026 · 9 min
Caching a dashboard overview with Next.js Cache Components
A pattern guide for mixing static shell, cached KPIs, and dynamic feeds with use cache, cacheLife, cacheTag, and updateTag — without reading cookies inside cached scopes.
Next.js · Caching · Architecture