Vaishvik Trader

This was a single-product engagement, not a full end-to-end build. We designed and shipped the Vaishvik trading terminal: a Vite/React SPA on a Flask API, covering the market dashboard, FII/DII participant analytics, a configurable stock heatmap, a live and historical option-chain analysis tool, Razorpay billing with coupons and trials, and an admin console.

Scoped tight, delivered clean — the codebase is one frontend, one API, seven MongoDB collections, one-active-session enforcement, and email-verified auth.

Not every engagement is end to end. Vaishvik Traders wanted one thing built well: a trading terminal for Indian retail traders — FII/DII flows, a stock heatmap, and an option-chain tool that works in both live and historical modes — with a subscription and an admin console behind it.

So that's what we built, and only that. A Vite and React single-page app on a Flask API. In 147 days it went from an initial commit to a measured 46,792 lines across one frontend, one backend and seven MongoDB collections — no drift, no half-finished second product.

This page is short on purpose. The engagement was too.

The front end is React 19 on Vite, with Redux Toolkit and Jotai splitting global and local state, ECharts and Lightweight Charts for the visuals, and TanStack Table for the dense grids. The back end is a Flask-RESTX API over MongoDB with JWT auth and a one-active-session rule enforced server-side. A Socket.IO connection carries the live index stream.

Deploy is Gunicorn with gthread workers behind systemd. Market data is fetched through a provider proxy that attaches a service key and checks the caller's subscription on every request — the vendor never sees an end user, and access control isn't trusted from the client.

The dashboard itself does one clever thing: it resolves live index symbols once, then merges each streamed quote into the existing state object rather than replacing it, so the numbers update without the whole panel re-rendering and flashing on every tick.

The option-chain tool is the same table with two different clocks behind it. In live mode it streams the current chain; in historical mode it replays a past session, stepped by interval, off real timestamps.

Making that one component took a normalisation layer: lot sizes are normalised, CSS class strings that the data provider smuggles into payload fields are stripped, the totals row is synthesised rather than trusted, intervals are mapped to timeframes, and the ATM strike is selected from spot context. When the live feed for a symbol is missing, it falls back cleanly rather than rendering an empty grid.

The stock heatmap is configurable along every axis — data source, the metric it colours by, the metric it sizes by, how it groups — and every one of those choices is written to the URL query, so a view is a shareable link.

Rows are normalised against a fallback option set so a missing field doesn't blank a tile. Strongest and weakest stock are computed on the client from the same normalised rows. Fullscreen is real component state, not a CSS class that breaks the moment the layout changes.

Behind the terminal is a subscription that has to be exactly right. A 7-day trial, coupon validation across four discount types — flat, percentage, fixed-less and free — and Razorpay checkout with order creation, signature verification on the callback, capture, and a webhook that reconciles the local transaction record against Razorpay's.

Auth is TTL-backed: email-verification and password-reset tokens are hashed and expire on their own via MongoDB TTL indexes. One active session per account is enforced on the server, so a shared login can't run two terminals at once — which, for a paid data product, matters.