MediaMatter Dashbo+ 🚀

Professional Visual Workflow Dashboard with AI Integration

📋 Overview

MediaMatter Dashbo+ is an interactive visual dashboard for managing and organizing professional workflows. Create visual maps of your work categories, tasks, and tools with AI-powered insights.

✨ Key Features

🎨 Interactive Visualization: Canvas-based network graph with drag & drop
🤖 AI Integration: OpenAI GPT-4 and Anthropic Claude support
🔒 Privacy First: All data stored locally in your browser
🎯 User-Specific API Keys: Each user manages their own AI provider keys
🌓 Dark/Light Theme: Beautiful color scheme in blue tonality
💾 Export/Import: JSON-based data portability
⚡ Real-time Updates: Instant visualization of changes
📊 Statistics Dashboard: Track categories, tasks, and tools

🚀 Quick Start

Prerequisites

Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
OpenAI or Anthropic API key (for AI features)

Installation

Clone the repository

git clone https://github.com/giorgiolovecchio/dashbo-plus.git
cd dashbo-plus

Open in browser

# Option 1: Direct file open
open index.html

# Option 2: Simple HTTP server
python3 -m http.server 8000
# Then visit http://localhost:8000

Deploy to Vercel (Optional)
```
npm install -g vercel
vercel
```

📖 User Guide

First Time Setup

Login Page
- Enter your email address
- Provide your API key (OpenAI or Anthropic)
- Select your AI provider
- Accept the privacy policy
- Click "Enter Dashboard"
Dashboard Navigation
- Drag nodes to reorganize
- Double-click to edit/delete
- Scroll to zoom in/out
- Press F to open filters
- Press S to search

Adding Elements

Categories: Main workflow areas (e.g., Development, Marketing)
Tasks: Specific activities within categories (e.g., Video Editing)
Tools: Applications and services used for tasks (e.g., Cursor, Figma)

Using AI Assistant

The AI assistant can help you:

Add new categories, tasks, or tools
Organize your workflow
Suggest improvements
Analyze your workflow structure

Example prompts:

"Add a Marketing category with social media tasks"
"Create video editing tools under Studio category"
"Suggest development tools for web projects"

🔧 Technical Details

Architecture

dashbo-plus/
├── index.html          # Login page
├── app.html           # Main dashboard
├── styles.css         # Unified styling (blue theme)
├── app.js             # Application logic
├── logo.jpg           # MediaMatter brand logo
├── vercel.json        # Vercel configuration
├── package.json       # Project metadata
└── README.md          # Documentation

Technology Stack

Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
Canvas: HTML5 Canvas 2D API for visualization
Physics: Custom force-directed graph engine
Storage: Browser localStorage (encrypted API keys)
AI: OpenAI GPT-4 / Anthropic Claude APIs
Deployment: Vercel-ready static site

Data Structure

{
  "center": {
    "id": "center",
    "label": "MY DASHBO+",
    "emoji": "⚡"
  },
  "categories": [
    {
      "id": "unique-id",
      "label": "Category Name",
      "emoji": "🎨",
      "color": "#3b82f6"
    }
  ],
  "tasks": [
    {
      "id": "unique-id",
      "label": "Task Name",
      "categoryId": "parent-category-id",
      "emoji": "◈"
    }
  ],
  "tools": [
    {
      "id": "unique-id",
      "label": "Tool Name",
      "taskId": "parent-task-id",
      "categoryId": "parent-category-id",
      "emoji": "⬡",
      "proficiency": 80,
      "usage": "daily"
    }
  ]
}

🔐 Privacy & Security

Data Storage

All workflow data stored in browser's localStorage
API keys encrypted with base64 (basic obfuscation)
No data sent to external servers (except AI APIs)

API Communication

Direct browser-to-AI-provider communication
No intermediary servers
Your data never touches our servers

Recommendations

Use unique API keys for this application
Regularly rotate your API keys
Review AI provider privacy policies:
- OpenAI Privacy Policy
- Anthropic Privacy Policy

🌐 Deployment

Deploy to Vercel

Install Vercel CLI
```
npm install -g vercel
```
Deploy
```
vercel
```
Configure
- Follow the prompts
- Choose default settings
- Your app will be live at https://your-project.vercel.app

Deploy to Netlify

Drag and drop the entire folder to Netlify Drop

Or use Netlify CLI:

npm install -g netlify-cli
netlify deploy

Deploy to GitHub Pages

Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/dashbo-plus.git
git push -u origin main

Enable GitHub Pages
- Go to repository Settings
- Navigate to Pages
- Select main branch as source
- Your site will be live at https://yourusername.github.io/dashbo-plus

🎨 Customization

Colors

The application uses a unified blue color scheme. To customize, edit styles.css:

:root {
    --primary-blue: #2563eb;
    --primary-blue-light: #3b82f6;
    --primary-blue-lighter: #60a5fa;
    --primary-blue-dark: #1e40af;
    --primary-blue-darker: #1e3a8a;
}

Branding

Replace logo.jpg with your own logo (recommended: 512x512px, circular crop).

🐛 Troubleshooting

AI Not Responding

✅ Verify your API key is correct
✅ Check internet connection
✅ Ensure you have API credits
✅ Try a different AI provider

Data Not Saving

✅ Check browser localStorage is enabled
✅ Don't use private/incognito mode
✅ Export backups regularly

Visualization Issues

✅ Reduce number of elements
✅ Use a modern browser
✅ Close unnecessary tabs
✅ Refresh the page

Login Issues

✅ Clear browser cache
✅ Check email format
✅ Verify API key format (OpenAI: sk-..., Claude: sk-ant-...)

📝 Changelog

Version 2.0.0 (2025-11-14)

✨ Added login page with email authentication
✨ User-specific API key management
✨ Privacy policy and checkbox
✨ Simplified blue color scheme
✨ Integrated MediaMatter branding
✨ Restructured for Vercel deployment
✨ Improved AI integration
✨ Enhanced security and privacy
🐛 Fixed multiple UI/UX issues
📚 Comprehensive documentation

Version 1.0.0

Initial release
Basic visualization features
AI integration
Export/Import functionality

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Use ES6+ JavaScript
Follow existing code style
Test on multiple browsers
Update documentation
Keep commits atomic and descriptive

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Giorgio Lovecchio

Email: giorgiolovecchio@gmail.com
Website: giorgiolovecchio.com
Company: MediaMatter

🙏 Acknowledgments

Design inspired by modern dashboard applications
AI integration best practices from OpenAI and Anthropic
Canvas visualization techniques from D3.js community
Physics engine inspired by force-directed graphs

📞 Support

🐛 Issues: GitHub Issues
💡 Discussions: GitHub Discussions
📧 Email: giorgiolovecchio@gmail.com

⭐ If you like MediaMatter Dashbo+, give it a star! ⭐

Created with ❤️ for developers and project managers

Powered by MediaMatter

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.gitignore		.gitignore
CHANGES.md		CHANGES.md
DEPLOYMENT.md		DEPLOYMENT.md
Dashbo+.html		Dashbo+.html
LICENSE		LICENSE
QUICK_START.md		QUICK_START.md
README (ITA).md		README (ITA).md
README.md		README.md
README_EN.md		README_EN.md
TESTING.md		TESTING.md
app.html		app.html
app.js		app.js
index.html		index.html
logo.jpg		logo.jpg
package.json		package.json
styles.css		styles.css
vercel.json		vercel.json

License

gignus79/Dashbo-plus

Folders and files

Latest commit

History

Repository files navigation