title: How I Built an AI-First Whiteboard Tool (Miro Alternative) in 30 Days With Zero Budget

Introduction

As developers, we all love clear architecture diagrams, flowcharts, and quick wireframes. But most existing tools out there are either bloatware or charge heavy premiums for basic AI integrations. So, I decided to build my own alternative: Scrawl.ai. It is a lightweight, blazing-fast, and AI-powered collaborative workspace built specifically for developers, students, and system architects. It is completely free to use, and once you sign up, you unlock full cloud synchronization and advanced AI canvas features.

The Tech Stack

To keep things modular and high-performing, I went with a modern, full-stack JavaScript environment:

• Frontend: React.js, TypeScript, and Tailwind CSS.
• Canvas Engine: Fully customized and optimized lightweight canvas infrastructure designed for a clean, professional developer aesthetic.
• Backend Wrapper: Node.js & Express (acting as a secure middleware proxy).
• AI Engine: Google Gemini API / OpenAI (Structured JSON Mode to map text inputs directly into canvas elements).
• Database & Auth: Supabase (PostgreSQL) for secure user registration, data persistence, and seamless cross-device cloud syncing.

Key Engineering Challenges (And How I Solved Them)

1. Parsing AI Output into Canvas Elements

The hardest part wasn't getting the AI to describe a system architecture; it was forcing the LLM to output accurate, non-corrupted canvas JSON structures.

The Solution: I utilized Node.js as a secure proxy layer and implemented strict prompt engineering coupled with Structured JSON output modes. The backend validates the structural integrity before streaming it to the frontend, allowing users to type a single prompt (e.g., "Design an e-commerce backend architecture using AWS") and watch the flowchart render instantly.

2. Absolute Client Privacy & Security

When working on proprietary architectures or system code, privacy is non-negotiable.

The Solution: No API keys are exposed on the client side. Everything routes through a secure Node.js wrapper equipped with aggressive rate-limiting (express-rate-limit) to prevent API abuse and DDoS attacks.

3. Mandatory Cloud-Sync Infrastructure

To ensure that users never lose their data and can access their complex system designs across multiple devices, a robust authentication system was required.

The Solution: By making sign-up a quick, baseline requirement, the tool hooks directly into a Supabase PostgreSQL instance. This ensures every canvas state, user profile, and custom workspace is heavily protected and instantly synced to the cloud.

Core Features Baked In

• AI Text-to-Diagram: Describe your workflow or architecture in plain English, and the AI automatically handles the layout, boxes, and arrows.
• Grouped Color Palettes: Quickly switch between tailored color schemes designed to maintain high readability in both light and dark modes.
• Persistent Custom Sidebars: Access tools, chat with the integrated AI assistant, or manage your personal boards without the sidebar UI auto-closing on you.
• Privacy-First Exports: Export ultra-high-resolution PNG or SVG files instantly for documentation or team reviews.

Open for Feedback

This is a 100% indie-hacker project built in public. I would love to get the Dev.to community's honest feedback on this. What features do you think are missing in standard whiteboard tools that you would love to see here?

Try it right now: scrawldraw.vercel.app

GitHub Repository: github.com/yashwantsingh8455