Web Projects — Case Studies
Selected builds. Real clients. Measurable outcomes.
ChemOps ERP
"A fast operations and manufacturing ERP built for a specialty chemical plant — featuring 8 department role-based access models, automated GST quotation workflows, batch production tracking, and atomic inventory reconciliation."
The Challenge
Specialty chemical manufacturers operate under rigorous regulatory compliance, complex multi-tier tax structures (HSN/GST), and zero-tolerance batch quality standards. Legacy manual record-keeping and disconnected spreadsheets created operational friction: stock double-allocation, delayed customer quotations, untracked batch stages, and lack of accountability across siloed departments (Sales, Accounts, Production, QC Lab, Warehouse, and Dispatch). The facility required a hardened, auditable operations platform enforcing strict departmental handoffs and real-time ledger consistency.
My Role & Scope
- Architected end-to-end full-stack ERP on Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS
- Engineered Supabase PostgreSQL data layer with cryptographic session auth and Row Level Security (RLS)
- Designed 8 role-isolated departmental seats (Super Admin, Accounts, Sales, Production, QC Lab, Warehouse, Dispatch, Executive)
- Engineered real-time inventory engine with atomic lot reservation, unit conversions (MT, Bags, Barrels), and automated reorder alerts
- Built B2B quotation state machine with multi-tier HSN/GST calculation (CGST/SGST/IGST) and HOD sign-off pipelines
- Implemented dynamic vector PDF quote and invoice generation with embedded QR codes via @react-pdf/renderer
- Constructed batch manufacturing workflow: stage progression gating (Scheduled → Pre-Mix → Quality Check → Packaged) and variance audits
- Built interactive end-to-end process flowmap (/flowmap) visualizing cross-department lifecycle handoffs
- Authored complete automated verification suite (52 test files, 420 unit and integration tests passing)
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Multi-Tenant RBAC Isolation | 8 authenticated departmental seats with strict permission boundaries | PostgreSQL RLS policies, JWT claim verification, cryptographic session guards |
| B2B Quotation Engine | Dynamic pricing, automated HSN 28/38 GST calculation, and approval routing | Transactional state machine, discount rules, multi-tier HOD sign-off |
| Batch Production Pipeline | Stage-gated manufacturing tracker with raw material consumption gating | Linear progression guards (Pre-Mix to Packaged), yield variance tracking |
| Atomic Inventory Ledger | Real-time chemical stock allocation preventing lot double-booking | ACID transactions, safety stock thresholds, multi-unit conversions |
| GST Document Dispatch | Instant vector PDF generation and automated dispatch status tracking | @react-pdf/renderer, streaming downloads, QR verification |
| Operations Control Center | Unified IST-synced telemetry, department queue feeds, and system health KPIs | Supabase Realtime subscriptions, responsive telemetry dashboard |
| Interactive Process Flowmap | Visual supply chain lifecycle mapping from inquiry to physical dispatch | Custom interactive node network with stage state indicators |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Live IST Clock & Department Switcher
Real-time Indian Standard Time (IST) synchronization with quick role-switching header across all 8 department profiles.
Operational KPI Telemetry
Live metric cards monitoring Active Batches, Daily Raw Material Consumption, Pending Approvals, and Inventory Health.
Departmental Action Queue
Real-time priority feed aggregating urgent tasks across Sales, Production, and Quality Control pipelines.
HSN/GST Calculation Engine
Automated multi-tier chemical tax computation supporting intra-state (CGST+SGST) and inter-state (IGST) sales.
Multi-Stage Approval Pipeline
Strict state machine governing Draft → Sales Review → HOD Approval → Issued status transitions.
Dynamic Vector PDF Dispatch
Instant client-side PDF document generation formatted to international commercial chemical trade standards.
Stage-Gated Lifecycle Tracker
Enforced sequential progression from Scheduled to Pre-Mix, Reactor Processing, QC Quarantine, and Packaging.
Lot Reservation & Yield Audit
Atomic deduction of raw chemical lot stocks with automatic yield calculation and variance anomaly detection.
Interactive Topology Map
Visual map mapping end-to-end data contracts between 8 departmental units with stage-level verification gates.
Impact & Architecture Results
"8 Department Seats Deployed · 0 Data Inconsistencies · 420 Automated Tests Passing · <1.2s Realtime State Sync. ChemOps ERP replaced fragmented spreadsheet workflows with an auditable, high-throughput manufacturing operating system. The platform guarantees strict multi-tier approval enforcement, real-time inventory lot reconciliation, and instant GST-compliant document dispatch across all production and commercial departments."
The Sky Box
"The Sky Box turns an arena's QR sticker into a full booking app. Players see live slots and pay by UPI in under a minute — no app store, no sign-up — while the venue runs its entire day from one live console: orders arriving in real time, payments verified, and cancellations reopening slots instantly."
The Challenge
Turf slot bookings in India run on phone calls and WhatsApp. Players spam the venue with "bhai, aaj raat nu slot che?" messages, the owner answers the same question fifty times a day, and every booking lives in a chat log nobody can audit. The failure modes are constant and expensive: two groups show up for the same 7 PM slot because both were promised it verbally, players screenshot a UPI payment and claim "I've paid" for a booking that was never confirmed, and the owner has no single view of what is actually free tonight. Players have zero visibility into availability, so they either call repeatedly or simply book somewhere else.
The deeper problem was trust, not calendars. A shared spreadsheet or a form cannot tell the venue whether money actually arrived, and it cannot stop two people from holding the same slot at the same moment. So the product needed real payment verification — server-side confirmation against the payment gateway, an ownership check for counter payments, and a slot engine where the database itself makes double-booking structurally impossible, not just unlikely. Every status a player or manager sees has to be derived from server truth, never from optimistic client guesses.
The constraints shaped the architecture. Players organize games on WhatsApp and decide in seconds — they will not install an app or create an account just to book a box-cricket slot, so the whole flow had to live behind a QR scan in the browser with nothing more than a name and a phone number. The venue staff are not computer people either, so the management side had to work on a single phone kept behind the counter, protected by a short PIN, and readable at a glance from across the room. That ruled out dashboards-for-desktop-people and produced a phone-first app pair: a player booking app and a manager console, sharing one database.
My Role & Scope
- Designed the full product end to end: design system (phone-width app canvas, frosted bars, bottom sheets, tier-coloured slot grid), every screen in both apps, and all microcopy.
- Built the customer app: home with an auto-playing photo carousel, equal-width date chips, a colour-coded slot grid with peak/off-peak tiers and a sticky booking bar; plus My Bookings and Venue & Rules screens.
- Built the booking engine: a slot state machine (open / held / booked / blocked / past) with 10-minute holds, transactional booking creation inside a single database transaction, and human-readable conflict errors instead of raw codes.
- Integrated UPI payments through Cashfree with server-side order verification, webhook handling and polling — the app never trusts a client-side "I've paid" claim.
- Built the second payment path — Pay at the counter — with an email-OTP ownership check and a manager "Verify & Confirm" step backed by UTR reference matching.
- Built the manager console: PIN-gated login, a live day schedule that refreshes itself, payment-verification and slot-confirmation queues, bulk approve, walk-in bookings, maintenance blocking, refund requests, and a monthly calendar with revenue/occupancy analytics.
- Implemented notifications end to end: transactional email (OTP, confirmations) and a PDF Booking Pass players can download and share, plus web push with a new-order chime for the venue.
- Shipped it as an installable PWA: service worker, dynamic manifest, add-to-home-screen, and an offline-tolerant loading strategy with rescue UI that only appears on genuine slowness.
- Handled the edge cases that break booking apps in the field: past-slot rejection on the server, double-hold protection, idempotent manager actions (double-tapping Approve is harmless), rate-limited OTP, and automatic release of abandoned unpaid slots.
- Owned quality and deployment: an automated Vitest regression suite grown past 180 checks, a locked-down auth sweep of every API route, scripted live probes against production after each deploy, and a permanent canary booking that must stay untouched.
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| No-Login Booking Flow | Scan venue QR code to book instantly: name & phone are the only required inputs. | Repeat players retrieve bookings via phone lookup — no password fatigue |
| Live Slot Availability Engine | Slot states (open, held, booked, blocked, past) derived server-side on every load. | 10-minute hold state machine with single PostgreSQL transaction isolation |
| UPI Payments via Cashfree | Hosted UPI checkout with webhook parity and client polling fallback. | Environment-toggle gateway switching; server-verified order reconciliation |
| Pay-at-Counter with OTP | Cash players verify ownership via email OTP; manager confirms receipt in 1 tap. | UTR reference matching and dual-path transaction convergence |
| Manager Workbench Console | PIN-gated phone-first console with live day timeline and new-order audio chimes. | Approve / decline / cancel actions, multi-hour walk-ins, maintenance blocking |
| Refunds & Integrity Queues | Dedicated queues for payment verification, slot confirmations, and refund handling. | Strictly idempotent operations — repeated taps produce no duplicate records |
| Analytics & Month Calendar | Monday–Sunday view with pending alerts, revenue counters, and occupancy metrics. | Aggregated monthly analytics and real-time visual occupancy charts |
| Notifications & PDF Pass | Branded downloadable PDF passes, transactional emails, and venue web push. | Dynamic PDF generation with embedded QR codes & audio chimes |
| Installable PWA | Service worker, custom web app manifest, and native add-to-home-screen prompts. | Offline-tolerant loading strategy with zero-spinner instant render architecture |
End-to-End Booking Flow
Scan & Land
The venue's QR poster opens the app straight on the Book tab — venue photos in an auto-playing carousel, venue branding, and equal-width date chips across the top.
Pick Date & Slot
The slot grid renders upcoming slots, colour-coded by availability and price tier — open, peak (amber), held, and booked. The sticky bottom bar updates the total live.
Hold & Details
Chosen slots are locked server-side for 10 minutes with a live countdown chip. The sheet collects name and phone, auto-applying eligible discounts before payment.
Pay (UPI or Counter)
Pay by UPI triggers Cashfree hosted checkout; Pay at counter triggers an email OTP for fraud-free cash settlements. Abandoned holds auto-release.
Confirm & Pass
Server confirms payment, generating a unique booking code, downloadable PDF pass, calendar integration, and venue directions on a single clean receipt screen.
Venue Live Console
The order arrives in the manager queue with audio chime and web push. Managers confirm or cancel with 1 tap, instantly syncing slots back to players.
Visual Showcase
8-screen product tour across the player booking app and manager operations console.
Impact & Architecture Results
"The Sky Box went from a blank page to a live, field-tested production platform in about two weeks of October 2026, then kept hardening through 35 numbered release iterations driven by real usage — including a real customer's first booking from a phone at the venue gate. The white-label architecture is the commercial point: one venue per deployment, brand assets, photos, pricing and rules as data, so onboarding the next turf is a configuration swap, not a rebuild. Warm API responses on the booking-critical endpoints measure in the 150–250 ms range, brand assets ship inside a strict size budget with immutable caching, and a version-polling channel lets the app update itself without losing a player's place."
"The engineering that matters most is invisible. Booking creation runs inside a single database transaction that re-validates the hold and the slots together, which makes double-booking a structural impossibility rather than a race the app hopes to win. Manager actions are idempotent — approve twice and the second press is a harmless no-op — and every payment path ends in a server-side verification against the gateway, so the venue never has to trust a screenshot. Quality was enforced the same way as the features: an automated regression suite past 180 checks, a security sweep proving every admin route rejects unauthenticated calls, and an independent probe script run against the live production app after every deploy, watching a permanent canary booking that must never change."
Abhushan Jewelry
"A luxury, responsive e-commerce experience and appointment scheduler — complete with an administrative manager — for fine gold and permanent bridal jewelry in Ahmedabad."
The Challenge
Abhushan is a fine gold jewelry studio in Ahmedabad. They had no digital presence that matched their in-studio luxury experience. Clients often dropped off while trying to schedule custom design consultations over manual calls. They needed an elegant online showcase paired with an easy appointment booking system and an admin dashboard to manage visits in real time.
My Role & Scope
- Visual identity system (dark cocoa '000000', gold accent 'EB4604', editorial Garamond & Playfair typography)
- Interactive category grid for gold necklaces, solid gold rings, and custom bridal collections
- 4-service studio appointment booking scheduler (Welded Forever Bracelet, Custom Engagement, Bridal Consultation, Jewelry Refurbishing)
- Dynamic time-slot selector and real-time slot validation
- SEO infrastructure (Schema.org: LocalBusiness, Product, FAQPage)
- Core Web Vitals optimization (compressed WebP, font preloading)
- Full admin dashboard: credentials login wall, metrics dashboard (Total, Pending, Approved, Completed, Cancelled), search/filter by customer/service, WhatsApp confirmation triggers, and CSV export
- Live deployment on Vercel Edge network
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Luxury Showcase | Editorial masonry grid and interactive showcase | Flexbox grid, hover zoom scaling, CSS transitions |
| Studio Appointment Engine | Real-time scheduling form for in-person jewelry design | Date/time inputs, service picker, client-side validation |
| Admin Metrics Grid | Live KPIs: Total, Pending, Approved, Completed, Cancelled | 5-column responsive card counters with status color coding |
| Search & Filter Toolbar | Customer name/phone search + service type dropdown filter | Client-side JS filter array, live DOM rendering |
| WhatsApp Integration | Instant WhatsApp trigger pre-filled with customer details | Dynamic WA API template link triggers |
| Credentials Access Gate | Secure login gate protecting client booking data | sessionStorage validation, password verification, error popups |
| Performance & SEO | PageSpeed optimizations and schema markup | LocalBusiness JSON-LD, image preloading, lazy loading |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Editorial Branding & Navbar
Clean editorial branding featuring Playfair Display and Cormorant Garamond typography on a warm dark cocoa background.
Interactive Collections Grid
Hover-scalable gold jewelry cards, displaying pricing and designs across customized masonry layouts.
Studio Appointment Scheduler
Interactive booking card with dynamic service selections and date/time selector slot confirmation.
Metrics Dashboard
Live KPI card indicators tracking Total, Pending, Approved, Completed, and Cancelled appointments.
Search & Filter Toolbar
Instant array search for client details, alongside service-type filtering dropdown to parse schedules.
Appointments Database Table
Management list featuring customer data, status indicators, status update dropdowns, and WhatsApp direct trigger buttons.
Results & Learnings
"Delivered a complete online showcase and appointment booking system in 4 days. The custom appointment scheduler and admin dashboard simplified the studio's booking process, letting coordinators confirm sessions via WhatsApp with one click. Setting up local business SEO and optimizing images boosted local search visibility and load speeds."
Detailing Cars
"A premium, mobile-first auto detailing booking platform — complete with a live admin dashboard — designed to streamline vehicle care scheduling in Ahmedabad."
The Challenge
Detailing Cars is a premium mobile automotive styling studio in Ahmedabad, offering ceramic coating, paint correction, and full interior detailing. The business was losing potential bookings due to a manual, non-responsive pricing sheet and no digital presence. They needed a complete online system — a high-conversion landing page with instant pricing, plus an admin dashboard to manage and track every booking in real time.
My Role & Scope
- Full visual identity system (dark mode, gold/warm-cream palette, geometric typography)
- Interactive paint-restoration before/after slider
- 3-tier vehicle class dynamic pricing engine (Hatchback / Sedan / SUV)
- Floating capsule navbar with services dropdown & seasonal offer bar
- SEO infrastructure (Schema.org: Service, AutomotiveBusiness)
- Core Web Vitals optimization (compressed WebP, font preloading)
- Full admin dashboard: metrics grid, bookings table, calendar view, weekly chart, filter & export
- Password-protected admin login with toast notifications
- Edge caching deployment on Vercel
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Before/After Slider | Interactive paint-restoration swipe preview | CSS clip-path transition, touch-friendly drag triggers |
| Vehicle Class Selector | 3-tier pricing matrix — Hatchback, Sedan, SUV | Vanilla JS object model, instant UI updates |
| Scheduling Engine | Date/time reservation flow with add-on selections | Form validation, localStorage caching |
| Admin Metrics Grid | Live KPIs: Total Bookings, Pending, Confirmed, Completed, Revenue | 5-column responsive cards with accent color status indicators |
| Bookings Table | Customer info, vehicle tag, service tag, status badge, WhatsApp link, action controls | Filter tabs, search bar, CSV export button |
| Calendar View | Monthly grid with appointment chips — toggle between list and calendar | Dynamic DOM rendering, today highlight, month navigation |
| Weekly Bar Chart | Booking volume trend for the past 7 days | Pure CSS animated bar chart, responsive flex layout |
| Password-Protected Login | Admin access gate with credential validation | sessionStorage auth, toast notifications on login/logout |
| Performance | Core Web Vitals optimization | Lazy-loaded images, preloaded hero asset, critical CSS injection |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Offer Bar + Floating Navbar
Seasonal promo strip + a floating capsule nav with services dropdown and a direct call button.
Booking Scheduler
Mobile-optimized form with date/time picker, add-on selections, and vehicle details — built to convert.
Metrics Grid
5-panel KPI strip: Total Bookings, Pending, Confirmed, Completed, Revenue — live from booking data.
Weekly Bar Chart
Pure CSS animated bar chart showing booking volume per day. Hover to reveal daily counts.
Bookings Table + Filters
Filter by status, search by name, update status, WhatsApp direct-link per customer, CSV export.
Results & Learnings
"Delivered a full-stack web presence in 3 days — a high-conversion landing page and a complete booking management system. The admin dashboard lets the studio track every appointment, update statuses, reach clients via WhatsApp in one click, and view their week at a glance. Overcoming performance bottlenecks with high-resolution vehicle imagery reinforced the value of WebP compression, lazy loading, and Vercel's edge network."
KXM Fashion
"A high-concept, minimalist editorial fashion storefront — featuring a custom dynamic cart drawer and fluid horizontal lookbooks — designed to present a refined clothing line with intention and freedom."
The Challenge
KXM is an editorial, culture-driven clothing brand. Generic grid-based e-commerce templates felt too sterile for their bold streetwear aesthetic. They needed an online store that felt like an editorial magazine, pairing bold typography and smooth horizontal carousels with an instant slide-out cart and local storage persistence.
My Role & Scope
- Custom font architecture implementing PP Neue Montreal for UI elements and PP Editorial New for large editorial statements
- Infinite horizontal product marquee track controlled by clean, hardware-accelerated CSS animations
- Interactive hover transitions on products showing alternate angles and garment drape styles
- Dynamic slide-out shopping cart drawer showing live item updates and subtotal calculations
- E-commerce state management using browser localStorage/sessionStorage APIs to persist shopping bag choices
- Full-bleed lifestyle lookbook modules and responsive layouts optimized across mobile and desktop devices
- Core Web Vitals tuning: responsive asset loading, font preloading, and high-performance layout rendering
- Live deployment and configuration on Vercel's global edge network
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Editorial Typography | Aesthetic font pairing of PP Neue Montreal and PP Editorial New serif styles | @font-face loading, fluid line heights, high-contrast layouts |
| Infinite Product Marquee | Smooth, horizontal scrolling featured products track | CSS keyframe transform loop with continuous coordinate wrap |
| Garment State Hover | Alternate product display on mouseover showing details/styling | Dual absolute image tags, CSS opacity and scale transitions |
| Dynamic Cart Drawer | Slide-out bag for items list, quantity updates, and pricing updates | Vanilla JS DOM events, event listeners, dynamic subtotals |
| Manifesto Layout | Brutalist full-width quotes and vertical content sections | CSS grid, clamp text values, responsive spacing |
| State Persistence | E-commerce checkout data persists across page sessions | localStorage parsing, stringified cart states |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Minimalist Header & Navigation
Fixed top navbar featuring custom editorial serif headings, two-line menu toggle, and an interactive shopping cart bag count indicator.
Infinite Horizontal Product Marquee
Hardware-accelerated scrolling tracks displaying product cards with interactive model details changing state on hover.
Editorial Brand Manifesto
Bold editorial brand statement ("More Than Just Fashion") utilizing Instrument Serif typography layouts to present brand philosophy.
Results & Learnings
"Launched KXM's online store in 3 days. By pairing custom editorial typography with smooth micro-interactions like the infinite product marquee, we gave the brand a distinctive editorial feel. Writing the cart in lightweight vanilla JavaScript kept page loads instant on mobile without bulky plugins."