From Idea to Deployed App — A Complete Borchani Walkthrough

The best way to understand a tool is to watch someone use it on something real. This walkthrough builds a task management application from scratch — a project tracker with multiple task lists, a kanban board view, and a simple team member field — and deploys it to a live URL. The whole process takes about 45 minutes the first time you try it, and 15 minutes once you’ve done it before.

The project: a kanban-based project tracker

Here’s what we’re building:

• A sidebar with a list of projects
• A kanban board for the active project with three columns: Backlog, In Progress, Done
• Task cards with title, description, assignee, and due date
• Drag-and-drop between columns
• A modal to create and edit tasks
• Dark mode toggle

This is a real app — not a toy. It’s the kind of thing you’d actually use, and it has enough complexity to show what Borchani can and can’t do.

Step 1: Write the initial prompt

Open Borchani and type your first message. Here’s the exact prompt used for this walkthrough:

Build a project management app. On the left, a sidebar with a list of project names. I should be able to click a project to open it. The main area shows a kanban board with three columns: Backlog, In Progress, and Done. Each column has task cards. Each task card shows the task title, an assignee name, and a due date. Cards should be draggable between columns. There should be a button to add a new task, which opens a modal with fields for title, description, assignee, and due date. Include a dark mode toggle in the top right corner. Use a clean, professional design.

This is a good prompt because it covers: the main layout, the data model (what fields a task has), the interactions (drag-drop, modal, dark mode), and the aesthetic direction.

What not to do: Don’t write a single sentence like “build me a project manager.” You’ll get something vague and you’ll spend more time correcting it than if you’d written a detailed prompt upfront.

Step 2: Watch the build

Once you submit, Borchani starts generating. In the first 30 seconds or so, you’ll see:

• The project scaffold set up (Vite config, TypeScript paths, Tailwind config)
• The main layout component created — sidebar + content area
• The sidebar component with a hardcoded list of sample projects
• The kanban board structure with three columns

The live preview updates in real time. By the two-minute mark, you should have something that looks recognizably like a project management tool — even if it’s not finished yet.

Don’t interrupt unless something is clearly wrong. Let the first generation run to completion. It’s tempting to jump in, but the AI has a plan and partial interruptions can confuse it.

Step 3: First round of feedback

After the initial generation, look at the preview critically. In this walkthrough, three things needed adjusting:

The drag and drop wasn’t working. The cards rendered correctly but dragging didn’t actually move them between columns. This is a common edge case with state management. Fix it with: “The drag and drop between columns isn’t working. When a card is dropped in a different column, it should move there and persist in the new position.”

The task modal didn’t close when clicking outside. Minor but annoying. Fix: “The task creation modal should close when clicking outside of it.”

The sidebar looked cramped on smaller screens. Fix: “Make the sidebar collapsible on screens smaller than 768px with a hamburger button to open and close it.”

Each of these fixes took one message. The AI applied them without touching the parts of the app that were already working.

Step 4: Populate with realistic sample data

Generated apps often come with placeholder text that makes it hard to evaluate the design. Ask for better test data: “Replace the placeholder content with realistic sample data. Create three projects: ‘Mobile App Redesign’, ‘Q2 Marketing Campaign’, and ‘Backend API Migration’. Each project should have 5-8 tasks distributed across the three columns with realistic titles, assignee names, and due dates in the next 30 days.”

This makes a meaningful difference in how you evaluate the app. Seeing “Build authentication flow” instead of “Task 1” helps you catch UI problems that only show up with real-ish content (long text overflow, date formatting, name truncation, etc.)

Step 5: Polish

Once the core functionality is working, a few polish passes:

• Empty states: “When a column has no tasks, show a helpful empty state message instead of just blank space.”
• Loading states: “Add a subtle loading skeleton when the page first loads.”
• Keyboard shortcuts: “Pressing Escape should close the task modal.”
• Responsiveness: “Check the layout on a 375px mobile screen and fix anything that looks broken.”

Each of these took one message and a minute or two to apply.

Step 6: Export to GitHub

When you’re happy with the app, click the GitHub export button. You’ll be asked to authorize Borchani to create a repo on your GitHub account. It creates a new repo with the full source code, a proper README, and a clean initial commit.

The generated project structure looks like this:

src/
  components/
    Sidebar.tsx
    KanbanBoard.tsx
    TaskCard.tsx
    TaskModal.tsx
    DragDropContext.tsx
  hooks/
    useProjects.ts
    useTasks.ts
  types/
    index.ts
  App.tsx
  main.tsx

Each component is in its own file, properly typed, and uses React hooks for state management. The code is readable. A developer could pick it up and extend it without needing to understand how Borchani works.

Step 7: Deploy

From the GitHub repo, deployment is one button in Vercel:

1. Go to vercel.com/new
2. Import the GitHub repo
3. Vercel auto-detects it as a Vite project
4. Click Deploy

Approximately 45 seconds later, you have a live URL.

What this cost

This walkthrough used about 12 credits — the initial generation, the three bug fixes, the sample data request, and a few polish passes. On the Starter plan ($19/month, 150 credits), you could build something like this ten times over in a month. On Pro ($49/month, 500 credits), significantly more.

What you actually learned

The mechanics are simple. The skill is in the prompting. Writing a good initial description saves you four rounds of back-and-forth. Knowing when to interrupt vs. let the generation run saves time. Getting comfortable with describing what you want visually and functionally — not technically — is what the learning curve actually looks like.

Start with something you actually need. The feedback is more useful and the motivation to finish it is higher.