Core Concept
Home Page
Core Product: Diagram Page
Support Us
dashboard

Croi - Your Copilot for Technical Diagrams 🚀

Inspiration ✨

So, here’s the thing—I’m in between jobs right now. My new role (which I’m super excited about) starts the day this hackathon ends. I was supposed to take a break… but instead, here I am, coding away.

Initially, I joined Bolt just to explore. No plans to submit anything. But as I was reflecting on what worked (and didn’t) in my previous role, an idea started brewing. 🌱

Like many of us, I’ve been hit with the “AI is coming for your job” headlines ☠️ every morning. And honestly, if AI is going to take jobs, I’d rather it take over maintaining the core project context—keeping architecture in sync across teams.

That’s the vision behind Croi. While I didn’t have time to tackle everything in this hackathon, I focused on one critical flow: idea -> Mermaid.js/UML -> Excalidraw.

And here we are, just two weeks later! 🎉

What It Does 💡

Croi: Hackathon Edition Croi is a simple app where you type in an idea, and it turns your thoughts into clean technical diagrams. It converts your input into intermediate Mermaid.js code and then visualizes it using the open-source Excalidraw tool, right in the app.

Free Starter Tokens: Get 5000 tokens to try it out. Simple Pricing: Just €5 for 50,000 tokens (valid for a year).

How I Built It 🛠️

This came together in two main phases:

1️⃣ Testing the Waters

I needed to figure out if I could even pull this off. Which diagram tool works best? Can I make it play nicely with React? I used Bolt to whip up a quick proof of concept: Excalidra, a JSON visualizer using Excalidraw. Feasibility confirmed. ✅

2️⃣ Full Build

Connected GitHub with Bolt to manage the UI development. Bolt handled the front-end magic ✨, while I worked on modularizing the rest locally.https://bolt.new/~/github-1djybz3k

FLOW

FLOW with BOLT

NEXT JS + shadcn + tailwind + tanstack starter template on github.
Bolt branch connected to bolt.new.
Build the entire UI by prompting.
Get the Latest changes. modularize in local dev env using cursor.
Push the changes & Repeat.

everything else was traditional development.

TECH STACK.

NEXT JS
BETTER_AUTH
POSTGRES SQL, REDIS
DOCKER, RAILWAY APP
NAME CHEAP

Challenges 🤔

Security Issues: When I enabled Content Security Policies (CSP) in Next.js, it broke everything on Bolt. Fixing it felt like a rabbit hole, so I parked it for later.
Stripe Integration: It’s not live in production yet, but I’m working on it.

Accomplishments I’m Proud Of 🎉

10+ days: idea -> build -> deploy (yes, production-ready!) And honestly? I built something I’ll use daily. That’s a win in my book.

What I Learned 🧠

Bolt is fantastic for rapid prototyping.
Focus is key during hackathons—you can’t tackle everything at once. Had to aggressively cut back
AI tools can help build faster and smarter.

What’s Next for Croi 🚀

PlantUML Excalidraw Library: Add even more diagramming options.
arc42 Copilot: Turn it into a full-blown architecture assistant.
GitHub Integration Bot: Keep code architecture synced automatically with every PR.

What do you think? 😄

Support The Journey