Problem

• Firestore data sits in nested layers of collections and records that are hard to picture
• As projects grew, nobody could see how the different parts of the data connected
• New developers struggled to learn how an existing project's data was organized
• Database design discussions happened in scattered docs and whiteboard photos
• Design decisions rarely made it cleanly into the finished app
• Teams were spending more time explaining their database than building on it.

Solution Exploration

• Keeping database notes in shared documents and spreadsheets
• Drawing one-off diagrams in general-purpose whiteboard tools
• Building a dedicated, collaborative Firestore designer connected to real databases and app code

How Dezoko Helped

• Visual editor: Every part of the database laid out on one canvas, with automatic tidy layouts and quick search for large projects.
• Three ways to start:
  • Design from scratch or begin with a ready-made template.
  • Describe the app in plain language and let AI create a first draft to edit.
  • Connect an existing Firebase project and get a diagram of its real structure.
• Team collaboration: Several people can edit the same diagram at once, with project roles and a full history of changes.
• From design to code: Export diagrams as images or data files, and generate ready-made code in Dart, TypeScript, Go, Python and Java.
• Works with AI assistants: Code editors and AI assistants can read the database design directly, so their help matches the real data.

Collaboration and Control

• Project roles that control who can view and edit
• Version history to review and undo design changes
• A live view of the real database, imported straight from Firebase
• A shared canvas the whole team discusses and updates together

Key Outcomes

• More than 3,000 developers have registered
• Ranked in the top 10 on Product Hunt at launch
• Teams get one shared, always-current picture of their database
• Design decisions carry straight into code instead of being re-typed by hand
• AI assistants can use the design to help write code, security rules and documentation

How We Built It

We built FireDraw as a fast, collaborative web app in three main parts:

A Shared Canvas for the Whole Team

• Teams design their database in the browser, with nothing to install.
• Everyone sees each other's changes instantly, as they happen.
• Automatic layouts and quick search keep even crowded diagrams easy to read.
• Every project keeps its own roles and full version history.

A Head Start on Every Project

• Existing projects connect to Firebase, and FireDraw draws a diagram of the real database.
• New projects can start from a plain-language description that AI turns into an editable design.
• Either way, the team ends up with a normal diagram they can keep refining.

From Diagram to Working Code

• Diagrams export as images (PNG, SVG) or data files (JSON).
• Ready-made code is generated in Dart, TypeScript, Go, Python and Java.
• Code editors and AI assistants can read each design directly as a reference.

Choices That Shaped the Product

• A living team asset: We treated the diagram as something the team keeps using, not a one-off drawing, which is why it has roles and version history.
• Design that reaches the code: Exports and generated code connect the design to the finished app.
• Built for real projects: Firebase import supports existing databases, not only brand-new designs.

Built With

• Web app: Next.js
• Server: Node.js
• Database: Firestore
• Live collaboration: WebSockets
• AI assistant access: Model Context Protocol (MCP)

Business Impact

• 3,000+ registered users
• Top 10 on Product Hunt at launch
• Ready-made code in 5 languages saves developers from writing it by hand
• Live Firebase import keeps diagrams in line with the real database