Build, auto-generate, and collaboratively edit interactive dashboards with AI-powered chart recommendations, real-time WebSocket sync, and secure user authentication — built with React, Spring Boot & WebSockets
Built with the tools and technologies:
React | TypeScript | Spring Boot | Postgres | WebSockets (STOMP) | OpenRouter API | JWT Auth
Collaborative AI Dashboard is an interactive web platform where users can upload datasets, auto-generate meaningful visualizations via AI, and collaborate in real-time with other users. The system blends AI intelligence, real-time sync, and multi-user support to enable data-driven insights quickly and effectively.
- AI Auto-Charting: Suggests charts and mappings via OpenRouter API based on dataset samples.
- Manual Chart Builder: Create bar, line, pie, scatter, histogram, radar, doughnut, area charts, and more.
- Collaboration: Real-time editing, add/delete sync, and WebSocket-based updates across tabs/sessions.
- Persistence: Save and reload charts via a Postgres-backed Spring Boot API.
- Authentication: Secure login/signup with JWT-based authentication and role-based access.
- Scalable Design: Extensible architecture to add more AI/ML, export options, and UI polish.
- AI-driven chart recommendations with editable configurations.
- Multi-component dashboards: render multiple charts on one screen.
- WebSocket-powered real-time chart updates, add, and delete sync.
- Save/load charts per dataset and per user.
- Data Cleaner for missing values, type issues, and outliers.
- Secure login/signup flow with user-specific charts and datasets.
- Backend persistence with Postgres and JPA.
collaborative-dashboard/
├─ frontend/ # React + TS client
│ ├─ src/
│ │ ├─ components/ # Chart blocks, dashboard
│ │ ├─ context/ # WebSocket context provider
│ │ ├─ pages/ # Login, Signup, Dashboard
│ │ └─ api/ # Axios calls to backend
├─ backend/ # Spring Boot server
│ ├─ controller/ # Chart, Dataset, Auth APIs
│ ├─ model/ # Entities: User, Dataset, Chart
│ ├─ repository/ # Spring Data JPA repos
│ ├─ security/ # JWT filters, user provider
│ └─ service/ # Business logic
├─ docker/ # Deployment configs (future)
├─ README.md
└─ LICENSE
- Node.js 18+
- Java 17+
- Postgres 15+
- OpenRouter API key for AI chart suggestions
-
Install frontend dependencies:
cd frontend npm install -
Run backend:
cd backend ./mvnw spring-boot:run -
Run frontend:
cd frontend npm start
- Configure
.envin frontend with API base URL. - Configure
application.propertiesin backend with Postgres DB connection and JWT secret.
- Sign up and log in.
- Upload/select a dataset.
- Generate AI-suggested charts or manually create them.
- Save charts → reload them when selecting the same dataset.
- Edit, delete, and see changes in real-time across sessions.
- ✅ Manual chart builder with multiple chart types.
- ✅ AI auto-generation of charts via OpenRouter.
- ✅ WebSocket setup for real-time edit sync.
- ✅ Save to backend & load per dataset/user.
- ✅ Delete charts from backend & UI.
- ✅ Prevent duplicate chart insertion.
- ✅ Secure login/signup with JWT authentication.
- 🔄 WebSocket sync for add/delete across tabs.
- 🔄 Real-time multi-user collaboration (beyond same-user).
- 🔄 Drag-and-drop repositioning of charts in the dashboard.
- 🔄 Enhanced UI/UX based on reference designs.
- 🔄 Data Cleaner enhancements with aggregation support.
- 🔄 Export options: PDF/Excel snapshot of dashboards.
- 🔄 Containerization & deployment with Docker.
This project is licensed under the MIT License. See the LICENSE file for details.
💬 Want to collaborate or contribute? Issues and PRs are welcome!
Reach me on LinkedIn.
🚀 Let’s build the most intelligent, collaborative data dashboard together!