Projects

May 2026 - Jun 2026

Collab

Built a real-time collaborative whiteboard platform with a secure, multi-tenant billing & subscription system. Features include WebSocket-based live sync, role-based access (owner/editor/viewer), project sharing, and a robust Razorpay integration with transaction-first verification to prevent payment bypasses.

Collab
Next.js
Next.js
TypeScript
TypeScript
Go
Go
Gin
Gin
PostgreSQL
PostgreSQL
WebSocket
WebSocket
tldraw
tldraw
Zustand
Zustand
Docker
Docker
Supabase
Supabase
Razorpay
Razorpay
Webhooks
Webhooks
WebsiteFEBE

Collab is an enterprise-ready collaborative whiteboard application where teams can brainstorm and work together on a shared canvas simultaneously — similar to Figma or Miro.

The Engineering Story

Collab began as a real-time canvas powered by WebSockets and tldraw, but as user demands grew, it evolved into a fully monetized, secure SaaS platform. A major phase of development focused on designing a secure, production-grade Razorpay Subscription & Recurring Billing System to handle multi-tier plans (Silver and Gold).

During implementation, we tackled and resolved a critical payment bypass loophole. Previously, starting a checkout flow would pre-upgrade the user's tier while keeping the payment status 'incomplete'. If a user closed the payment modal without paying, they still obtained access to premium features. To solve this, we re-architected the state machine to be transaction-first:

  1. Checkouts now log a pending order in a dedicated transactional ledger without altering the user's active tier.
  2. The subscription tier is upgraded and activated ONLY after cryptographic signature verification (via Razorpay webhook callbacks or client-side validation APIs).
  3. The active subscription status is verified server-side on every project operation and user invite to enforce strict plan limits.

To complete the SaaS experience, we developed a premium Billing Dashboard displaying current plan status, billing cycles, upcoming renewal dates, and a dynamic historical invoice ledger.

Key Features

  • Real-Time Collaboration: Dynamic multi-user canvas sync via optimized Go WebSockets with presence indicators.
  • Subscription Billing: Recurring Razorpay subscription payments, webhooks for auto-renewals, plan pauses, and cancellations.
  • Transaction-First Security: Solved gateway-cancellation loopholes using transactional record validation before upgrading subscription state.
  • Billing Ledger: Detailed client dashboard for invoices, payment statuses (Created, Captured, Failed), and subscription cycles.
  • Role-Based Access Control: Strict project sharing via email invites with owner, editor, and viewer roles.
  • Persistence & OTP: Automated canvas state recovery with PostgreSQL and OTP verification for secure login.

Tech Stack

Next.js, TypeScript, Go, Gin, PostgreSQL, Razorpay, Webhooks, WebSocket, tldraw, Zustand, Supabase, Docker, Vercel