FULL-STACK ENGINEERING // PRODUCTION CASE STUDY

Web
Development

Two production platforms. Zero off-the-shelf templates. Engineered entirely in-house — marrying fluid 60fps interaction design, zero-trust security, and scalable commerce engines.

SCOPEFull-Stack Design + Dev
PLATFORMSsivnco.in · svarnart.com
CORE STACKNext.js · Vite · Firebase
STATUS100% In-House Shipped
Next.js & Vite
2
Full-Stack Sites Shipped
Zero-SaaS Cost
PWA
Svarnart — Offline-Ready
Lighthouse 95+
<2s
Target Load Time
Design to Deploy
100%
In-House Built
01 — The Production Platforms

Real problems.
Bespoke architectures.

Both platforms were born from a refusal to compromise: no standard builder could showcase 3D packaging with fluid scroll triggers, and no generic LMS could sustain a classical Indian arts academy with zero recurring SaaS overhead.

sivnco.in
PRODUCTION LIVE
01 — Flagship Portfolio

sivnco.in

Cinematic Personal Brand & 3D Packaging Platform

Next.jsNetlifyGSAPLenismodel-viewer (glTF)Tailwind
Inline 3D WebGL Model Viewer
Direct glTF model-viewer embed with 360° orbital controls — zero slow third-party iframes.
GSAP Pinned Horizontal Showcase
Custom scrollTrigger coordinates pinning the multi-role creative director panel smoothly.
Lenis Inertia Physics
Subpixel-interpolated smooth scrolling calibrated across high-refresh trackpads and mobile glass.
VERIFIED OUTCOMES & CAPABILITIES
◆Cinematic digital experience reflecting studio-grade craftsmanship
◆Horizontal scroll role cards with GSAP-pinned timeline logic
◆3D GLB model viewer embedded natively with zero iframe overhead
◆CSP-hardened, mobile-responsive, and continuous Netlify CI/CD pipeline
◆Fluid saffron cursor dot, ambient liquid aura, and procedural grain overlay
svarnart.com
PWA OFFLINE READY
02 — Cultural Academy PWA

svarnart.com

Progressive Web App, LMS & Indian Payment Engine

Vite + ReactFirebase AuthFirestoreRazorpayPWA / SWCloud Storage
Dual-Channel Indian Payment Flow
Native Razorpay checkout + HMAC-SHA256 webhook verification for instant course unlocking.
Installable PWA Architecture
Custom service worker caching lesson videos and notes for offline study on iOS & Android.
Zero-Trust Firebase Rules
Granular role-based Firestore access ensuring complete child data privacy and isolation.
VERIFIED OUTCOMES & CAPABILITIES
◆Automated fee settlements via Razorpay with encrypted webhook verification
◆Firebase Auth (Google One-Tap + email/password) for student & parent accounts
◆Installable PWA running offline with zero App Store commission overhead
◆Strict Content Security Policy whitelist covering Firebase, Razorpay & GCS
◆Editorial typography matching the academy's warm Indian classical heritage
02 — Engineering Philosophy

Code as a
craftsperson.

The exact same obsession that goes into bespoke packaging prototypes dictates our codebases. Every decision is intentional — from the token in the CSS variable to the CSP origin whitelist in the HTTP response headers.

TOKEN ARCHITECTURE01

Design System First

Both sites start from a hand-crafted token architecture — CSS variables, typographic scales, fluid spacing ladders, and color palettes — before writing components. Every pixel is deliberate and maintainable by a solo engineer.

SUB-2S TARGET02

Performance as UX

Font preloading, WebP/AVIF asset optimization, deferred script execution, and SSG static generation where possible. A sluggish site destroys trust before a visitor reads a headline. Both sites target sub-2s first paint.

ZERO WILDCARDS03

Security by Default

Strict Content Security Policy headers restricting script, style, and media origins on every build. Svarnart explicitly whitelists Firebase, Razorpay, and GCS with zero wildcards. Security is never an afterthought.

03 — The Production Ecosystem

Tools chosen
with purpose.

Zero framework chasing. Every dependency is vetted against load impact, developer velocity, and long-term autonomy.

Next.js 14Framework
Vite + ReactFrontend
Firebase AuthAuth
Cloud FirestoreDatabase
Firebase StorageMedia
Razorpay UPIPayments
GSAP ScrollTriggerMotion
Lenis Smooth ScrollPhysics
Next.js 14Framework
Vite + ReactFrontend
Firebase AuthAuth
Cloud FirestoreDatabase
Firebase StorageMedia
Razorpay UPIPayments
GSAP ScrollTriggerMotion
Lenis Smooth ScrollPhysics
PWA Service WorkerOffline
model-viewer (glTF)3D WebGL
Content Security PolicySecurity
Netlify CI/CDDevOps
Tailwind CSSStyles
Static Generation (SSG)Performance
Google Fonts PreloadTypography
HTML5 CanvasCreative Code
PWA Service WorkerOffline
model-viewer (glTF)3D WebGL
Content Security PolicySecurity
Netlify CI/CDDevOps
Tailwind CSSStyles
Static Generation (SSG)Performance
Google Fonts PreloadTypography
HTML5 CanvasCreative Code