TreeChart Playground

A highly customized version of the d3-org-chart. It provides a flexible and visually appealing way to display hierarchical data in a tree-chart format.

TreeChart Playground is a visual, Org Chart built with Vue 3, D3, and Express.js. Users can view, explore, and dynamically add new nodes to the chart with data persisted on a backend server.

🔗 Live Demo

Frontend: treechartplayground.netlify.app

Backend: tree-chart-backend.onrender.com
(Render takes ~50 seconds to cold start)

---

🛠 Tech Stack

Frontend

• Vue 3 + <script setup>
• D3.js (customized for organizational layout)
• Vite
• Netlify (deployment)

Backend

• Node.js
• Express
• Render (cloud hosting)

---

📦 Project Structure

treechart-playground/
├── client/                 # Vue 3 frontend
│   ├── components/
│   ├── Chart/              # D3 logic, render, UI components
│   ├── App.vue
│   └── main.ts
├── service/                # Express backend
│   ├── src/
│   │   ├── routes/
│   │   ├── models/
│   │   └── index.js
│   └── db/                 # Local JSON-based storage
├── .env
├── ecosystem.config.js     # PM2 configuration
├── README.md
└── package.json

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/treechart-playground.git
cd treechart-playground

2. Install Frontend Dependencies

cd client
npm install

3. Install Backend Dependencies

cd ../service
npm install

4. Start the Development Servers

Backend

cd service
npm run dev

Frontend

cd ../client
npm run dev

The app should now be running at http://localhost:5173

🌐 API Endpoints

Method	Endpoint	Description
GET	/api/nodes	Fetch all nodes
POST	/api/nodes	Add a new node

All data is saved in a flat JSON format under the db/ directory.

⚙️ Environment Variables

Create a .env file in the client/ directory:

VITE_API_URL=https://tree-chart-backend.onrender.com

🔒 CORS Setup (Backend)

Express server uses CORS middleware to allow requests from:

origin: ["http://localhost:5173", "https://treechartplayground.netlify.app"]

---

🧪 Future Improvements

• ✅ Editable nodes and inline updates
• 🛠 Drag & drop node rearrangement
• 🔍 Advanced search/filtering
• 🧱 Modular component system
• 🧾 Undo/redo history support

How to Contribute

Contributions are welcome! If you have ideas for improvements or bug fixes, feel free to open an issue or submit a pull request.

📄 License

MIT License. Use freely for learning or commercial purposes.