sheet 001 · architectural cross-sections of live systems

Chirag Chaudhary

I ship web products, then cut them open.

github linkedin resume email

open to internships & junior rolesUTC+05:30 --:--

02: original full-stack products live in production and open source, plus 01 frontend motion study
04: stack layers documented per full-stack build (interface, API, data, infra) · 02 on the motion study
01: commercial frontend internship shipped to production at Zonomo Technologies (May–Jul 2025)

Selected work, cut open

02 original full-stack builds · slice any layer or open the full cutaway

014 layers · interface → API → data → infra

short.link

A URL shortener where the backend was the hard part. Rotating refresh tokens, a guest-to-account claim flow that shaped the relational schema, local geo/UA click parsing off the hot path, and a VPS deploy that rolls itself back when its post-deploy check fails.

react 19
express
postgresql + drizzle
redis
docker + traefik

inspect short.link cutaway →live app ↗source ↗

/client · URL composer, QR matrix & guest claim barReact 19 · Vite · Redux Toolkit · TanStack Query

01POST /api/links

custom alias + QR SVG export

02Guest session banner

unclaimed links held pre-signup

03Click analytics view

country, OS, browser, referrer

/server · boundary validation & session rotationExpress · Zod boundary · JWT + rotating refresh

01Zod schema gate

rejects malformed payloads at edge

02Redis rate limiter

blocks bursts before PostgreSQL

03POST /api/auth/claim

migrates guest links on signup

Hot redirect path vs. async click telemetry writePostgreSQL + Drizzle ORM · Redis slug cache

01GET /:slug → Redis

O(1) cache hit → 302 redirect

02PostgreSQL + Drizzle

users · sessions · links · clicks

03geoip-lite + ua-parser

zero external API calls per click

Split topology & automated rollback gateGitHub Actions · ARM64 Docker · Traefik TLS

01Vercel CDN (/client)

static SPA rewrite to VPS API

02ARM64 VPS + Traefik

automatic Let’s Encrypt TLS

03Post-deploy health gate

auto-rollback on failed probe

024 layers · interface → API → data → infra

NutriGain

A training and nutrition tracker that turns logged kg × reps volume into a 365-day activity heatmap, PR progression curves, and weight trends — built on a token design system that holds AA contrast across light and dark themes, with personal records detected at write time.

next.js 16
mongodb + mongoose
edge jwt
recharts
gsap

inspect nutrigain cutaway →live app ↗source ↗

AppShell · macro meters, kg × reps logger & heatmapNext.js 16 · React 19 · Tailwind CSS 4 · Recharts 3

01Inline set editor

kg × reps per scheduled muscle group

02365-day volume heatmap

react-activity-calendar + tooltips

03AA dual-theme tokens

shared shell across 4 app views

Edge route guard & serverless API handlersproxy.js Edge JWT (jose) · bcryptjs · rate-limit.js

01proxy.js Edge guard

jose JWT verified in httpOnly cookie

02lib/rate-limit.js

throttles /api/auth/login attempts

03PUT /api/workout-sessions

validated merge-upsert endpoint

Single write fan-out: 1 set → 3 synchronized viewsMongoDB + Mongoose 8 · per-day merge-upserts

01Daily merge-upsert

1 document per user per day

02Write-time PR detector

flags 🏆 top-set record on insert

03Derived volume fan-out

heatmap + 6m PR chart + weight trend

Zero-VPS serverless topologyVercel Edge + Serverless · MongoDB Atlas singleton

01Vercel Edge Network

runs proxy.js auth before render

02lib/mongodb.js

cached Mongoose connection singleton

03lib/goals.js

Mifflin-St Jeor TDEE onboarding seed

Engineering studies

01 motion & timing study · kept separate from original products

012 of 4 layers · interface & motion only (no backend)

Spain Collection — a rebuild study

A frontend rebuild of an Awwwards-featured site, built to dissect scroll-linked choreography and frame timing from the inside. Their art direction and layout; my React and Framer Motion implementation. Kept in its own Studies section because it is a study, not an original product.

study · 2 layers
react
framer motion
tailwind css

inspect spain collection study →live study ↗source ↗

Reference measurement → fluid clamp() & grid rebuildReact · React Router DOM · Tailwind CSS

01Measured type ladder

CSS readouts mapped to clamp() steps

02Breakpoint grid

rebuilt in Tailwind CSS

03Explicit attribution

labelled a rebuild study on-page

Scroll progress → transform & section handoffFramer Motion · scroll-linked interpolation

01Scroll-linked progress

continuous transform interpolation

02Section choreography

pinned handoffs timed frame by frame

032 layers total

no API, database, or backend claimed

About & experience

the whole request, from the interface down to the container

I work across the whole request: React and Next.js at the front, Express and Node behind it, PostgreSQL or MongoDB under that, Redis where it earns its place, and Docker with a CI pipeline to ship it. Two original full-stack products and one frontend motion study are live today, and the source for all three is public.

My commercial work so far is a frontend internship at Zonomo Technologies (May–Jul 2025): responsive React and Tailwind pages with Framer Motion choreography, shipped to production with the founders reviewing every pull request. It is where I learned that a layout only counts once it holds on a real device.

internship · 2025: Frontend Developer Intern · Zonomo Technologies (May–Jul 2025) — owned responsive React, Tailwind CSS and Framer Motion pages end to end in production.
front end: React 19 · Next.js 16 (App Router) · TypeScript · Tailwind CSS 4 · Redux Toolkit · TanStack Query · GSAP · Framer Motion
API & auth: Node.js · Express · JWT with rotating refresh tokens · Edge jose guards · Google OAuth 2.0 · Zod boundary validation
data & infra: PostgreSQL + Drizzle ORM · MongoDB + Mongoose 8 · Redis caching & rate limits · Docker ARM64 · Traefik TLS · GitHub Actions CI