todrawn.com

todrawn.com is a full-stack interactive whiteboard SaaS, built end-to-end with a Java 21 and Spring Boot backend and a Next.js, React, and TypeScript frontend. It is currently deployed and running in production at todrawn.com.

The canvas itself is rendered with Konva, while WebSockets carry real-time board updates between connected clients. PostgreSQL persists boards and account data, and Redis backs the parts of the system that need fast, short-lived state.

Technical Architecture

• Backend (Spring Boot): Built on Java 21, with Spring Security handling authentication and authorization for the API.
• Frontend (Next.js / React): A TypeScript codebase styled with Tailwind CSS, with the whiteboard canvas itself implemented on top of Konva.
• Real-Time Layer: WebSockets propagate drawing and board state between clients, with Redis used alongside PostgreSQL for state that doesn't belong in the primary data store.
• Data & Persistence: PostgreSQL is the system of record for boards, accounts, and related data.

      
[ Next.js / React / Konva ] <--WebSocket--> [ Spring Boot API ]
                                                    ↓
                                    [ PostgreSQL ]     [ Redis ]
      
    

Payments & Deployment

Billing runs through Stripe, integrated directly into the Spring Boot backend. Shipping and hosting are containerized and automated:

• Payments: Stripe handles subscription and payment processing for the SaaS.
• Containerization: The application is packaged with Docker for consistent builds across environments.
• CI/CD: GitHub Actions automates the build and deployment pipeline.
• Hosting: The backend runs on Google Cloud Run.