<<<<<<< HEAD

FlowChart Builder

A modern drag-and-drop flow chart & workflow management tool for designing processes, tracking work, and visualizing progress.

---

✨ Features

Flow Chart Editor

• Drag-and-drop canvas
• Node types: Start, Process, Decision, Text, Custom, End
• Visual connections between nodes
• Zoom, pan, and grid snapping
• Node metadata:
  • Owner
  • Priority
  • Status
  • Due date
• Live properties panel

---

Import & Export

Export flow charts as:

• JSON
• XML
• UML

---

Workflow Board

Kanban-style board for managing tasks and bugs.

• Custom columns (Backlog, Bug, Working On, Fixed, etc.)
• Add, edit, and drag cards between columns
• Designed to sync with flow chart nodes

---

🛠 Tech Stack

• v0.dev (UI generation & layout)
• React
• Tailwind CSS
• Component-based architecture
• Local state / mock persistence

---

🤖 AI Learning Project

This project was built as a hands-on exercise to practice working with AI tools and better understand how they fit into real development workflows.

• The entire UI and layout were generated using v0.dev
• Features were defined through structured AI prompts
• Iteration focused on learning how prompt clarity affects output quality
• This README was generated using ChatGPT

The goal was not just to build an app, but to learn how to collaborate effectively with AI—treating it as a design and development partner rather than a shortcut.

---

🚀 Getting Started

git clone https://github.com/your-username/flowchart-builder.git
cd flowchart-builder
npm install
npm run dev
=======
# FlowChart Builder

A modern **drag-and-drop flow chart & workflow management tool** for designing processes, tracking work, and visualizing progress.

---

## ✨ Features

### Flow Chart Editor
- Drag-and-drop canvas
- Node types: Start, Process, Decision, Text, Custom, End
- Visual connections between nodes
- Zoom, pan, and grid snapping
- Node metadata:
  - Owner
  - Priority
  - Status
  - Due date
- Live properties panel

![Flow chart empty](image.png)
![Flow chart example](image-1.png)
![Flow chart example](image-2.png)
![Flow chart example](image-3.png)
![Flow chart example](image-4.png)

---

### Import & Export
Export flow charts as:
- JSON
- XML
- UML

![Export options](image-7.png)

---

### Workflow Board
Kanban-style board for managing tasks and bugs.

- Custom columns (Backlog, Bug, Working On, Fixed, etc.)
- Add, edit, and drag cards between columns
- Designed to sync with flow chart nodes

![Workflow board](image-5.png)
![Workflow board columns](image-6.png)

---

## 🛠 Tech Stack
- v0.dev (UI generation & layout)
- React
- Tailwind CSS
- Component-based architecture
- Local state / mock persistence

---

## 🤖 AI Learning Project

This project was built as a **hands-on exercise to practice working with AI tools** and better understand how they fit into real development workflows.

- The entire UI and layout were generated using **v0.dev**
- Features were defined through **structured AI prompts**
- Iteration focused on learning how prompt clarity affects output quality
- This README was generated using **ChatGPT**

The goal was not just to build an app, but to **learn how to collaborate effectively with AI**—treating it as a design and development partner rather than a shortcut.

---

## 🚀 Getting Started

```bash
git clone https://github.com/your-username/flowchart-builder.git
cd flowchart-builder
npm install
npm run dev
>>>>>>> cb4652a (inital)