A web-based data-analytics platform powered by Claude AI
Upload private datasets • Generate AI-powered visualizations • Share insights • Analyze data with ease
- Python 3.8+
- pip
- Git
- Anthropic API key (for Claude)
- Clone the repository
git clone https://github.com/MaLoskins/DynaDash.git
cd DynaDash- Create and activate a virtual environment
# For Windows
python -m venv venv
venv\Scripts\activate
# For macOS/Linux
python -m venv venv
source venv/bin/activate- Install dependencies
pip install -r requirements.txt- Configure environment variables
Create a .env file based on the provided .env.example:
cp .env.example .envEdit the .env file with your settings, especially your Anthropic API key (For the purposes of submission a preloaded key is provided in the submitted .env and .env.example):
# Flask settings
FLASK_APP=run.py
FLASK_ENV=development
SECRET_KEY=your_secret_key_here_change_in_production
# Database settings
DYNA_SQLITE_PATH=sqlite:///dynadash.db
# Server settings
HOST=127.0.0.1
PORT=5000
# Anthropic Claude API settings
ANTHROPIC_API_KEY=your_anthropic_api_key_here- Initialize the database
flask db init
flask db migrate -m "Initial migration"
flask db upgrade- Run the application
# Option 1
flask run
# Option 2
python run.py- Access the application
Open your browser and navigate to http://127.0.0.1:5000
- Overview
- Key Features
- Architecture
- Database Schema
- Screenshots
- Usage Guide
- API Documentation
- Technology Stack
- Project Structure
- Troubleshooting
- License
- Team
DynaDash ("Dynamic Dashboard") is an intelligent data visualization platform that combines the power of Claude AI with intuitive web interfaces. It allows users to upload datasets, automatically generate insightful visualizations, organize them in a personal gallery, and selectively share with collaborators.
|
|
|
|
|
|
DynaDash follows a modern web application architecture with a Python Flask backend, SQLite database, and browser-based frontend using Tailwind CSS and JavaScript.
- Data Upload: Users upload CSV or JSON data files through the web interface
- Processing: The backend validates and processes the data
- Claude AI Analysis: The Anthropic Claude API analyzes the data and generates visualizations
- Dashboard Creation: Interactive HTML/JS dashboards are created and stored
- Gallery Management: Users can view, organize, and share their visualizations
- Collaboration: Selected visualizations can be shared with other platform users
graph TD
%% Authentication flow
A[User Registers/Logs In] --> B[Dashboard Home]
%% Dataset flow
B --> C1[Upload CSV/JSON Dataset]
C1 --> D[DataProcessor Service]
D -- Real-time progress via Socket.IO --> B
D -- Saves metadata --> E[(SQLite Database)]
D -- Saves file --> F[File System]
%% Dashboard generation flow
B --> G[View Datasets]
G --> H[Select Dataset]
H --> I[Generate Dashboard]
I -- Dataset metadata + User prompts --> J[Claude Client Service]
J -- Real-time progress via Socket.IO --> I
J -- API Request --> K[Anthropic Claude API]
K -- Returns HTML Template --> J
J -- Saves template --> E
%% Dashboard viewing flow
B --> L[View My Dashboards]
L --> M[Select Dashboard]
M -- Load template from DB --> N[View Route]
N -- Fetch dataset from disk --> N
N -- Inject JSON data into template --> O[Render in iframe]
O --> P{User Actions}
P -- Toggle --> Q[Fullscreen Mode]
P -- Download --> R[HTML Export]
P -- Share --> S[Share Dashboard]
%% Sharing functionality
S -- Create Share Record --> E
S --> T[Other User's Dashboard List]
T --> M
style O fill:#c6c,stroke:#333,stroke-width:2px
style K fill:#77b,stroke:#229,stroke-width:2px
The database schema below illustrates how the data is organized and related within the DynaDash application:
erDiagram
User {
int id PK
string name
string email UK
string password_hash
datetime created_at
}
Dataset {
int id PK
int user_id FK
string filename
string original_filename
string file_path
string file_type
int n_rows
int n_columns
boolean is_public
datetime uploaded_at
}
Visualisation {
int id PK
int dataset_id FK
string title
string description
text spec
datetime created_at
}
Share {
int id PK
int owner_id FK
int target_id FK
string object_type
int object_id
datetime granted_at
}
User ||--o{ Dataset : "owns"
Dataset ||--o{ Visualisation : "has"
User ||--o{ Share : "shares as owner"
User ||--o{ Share : "receives as target"
This diagram shows the four main entities in the system and their relationships:
- User: Represents application users with authentication details
- Dataset: Contains uploaded data files and their metadata
- Visualisation: Stores AI-generated visualizations created from datasets
- Share: Manages access permissions between users for datasets and visualizations
The relationships include:
- One user can own many datasets (one-to-many)
- One dataset can have many visualizations (one-to-many)
- Users can share objects with other users through the Share entity
- The Share table tracks both the owner and the target user of each sharing action
Click to view application screenshots
- Visit the homepage and click "Register"
- Fill in your name, email, and password
- Submit the form to create your account
- Log in with your new credentials
- Navigate to the "Upload" page from the main menu
- Drag and drop a CSV or JSON file, or click to select a file
- Preview the data and click "Upload"
- Wait for the processing to complete
- Go to "My Datasets" and select the dataset you want to visualize
- Click "Generate Visualization"
- Provide a title and description for your dashboard
- Click "Generate" and wait for Claude AI to create your dashboard
- Once complete, you'll be redirected to view your new dashboard
- Browse your visualizations in the "My Dashboards" page
- Click on any visualization to view it
- Use the "Share" button to grant access to other users
- Select users to share with and confirm
- Shared users will see your visualizations in their "Shared With Me" section
- Click on any dashboard to view it in full detail
- Use interactive controls to filter and explore the data
- Switch to fullscreen mode for presentations
- Download the HTML dashboard for offline viewing or sharing
DynaDash provides a RESTful API for programmatic access to your data and visualizations.
Click to view API endpoints
POST /api/v1/login
POST /api/v1/logout
POST /api/v1/register
GET /api/v1/user
GET /api/v1/users
GET /api/v1/visualisations
GET /api/v1/shared-visualisations
GET /api/v1/visualisations/<id>
- Flask: Web framework
- SQLAlchemy: ORM for database operations
- Flask-SocketIO: Real-time communication
- Flask-Login: User authentication
- Flask-Migrate: Database migrations
- Flask-WTF: Form handling and validation
- HTML/CSS/JavaScript: Base web technologies
- Tailwind CSS: Styling and UI components
- jQuery: DOM manipulation and AJAX
- Socket.IO: Client-side WebSocket communication
- Chart.js/D3.js: Visualization libraries
- SQLite: Lightweight SQL database
- Alembic: Database migration engine
- Anthropic Claude API: AI model for data analysis and visualization generation
DynaDash/
├── app/ # Application package
│ ├── blueprints/ # Flask blueprints
│ │ ├── auth/ # Authentication routes
│ │ ├── data/ # Dataset management routes
│ │ └── visual/ # Visualization routes
│ ├── models.py # Database models
│ ├── services/ # Service classes
│ │ ├── claude_client.py # Anthropic Claude API client
│ │ └── data_processor.py # Dataset processing service
│ ├── static/ # Static files (CSS, JS, images)
│ ├── templates/ # Jinja2 templates
│ ├── __init__.py # Application factory
│ ├── cli.py # CLI commands
│ └── errors.py # Error handlers
├── migrations/ # Database migrations
├── tests/ # Test suite
│ ├── unit/ # Unit tests
│ └── integration/ # Integration tests
├── uploads/ # Uploaded datasets
├── .env.example # Example environment variables
├── .gitignore # Git ignore file
├── config.py # Application configuration
├── requirements.txt # Python dependencies
├── run.py # Application entry point
└── README.md # Project documentation
Common Issues and Solutions
Issue: ModuleNotFoundError: No module named 'flask'
Solution: Ensure you've activated your virtual environment and installed requirements:
source venv/bin/activate # or venv\Scripts\activate on Windows
pip install -r requirements.txtIssue: Database migration errors
Solution: Reset migrations and initialize again:
rm -rf migrations
flask db init
flask db migrate -m "Initial migration"
flask db upgradeIssue: Claude API errors
Solution: Verify your API key in the .env file and check your API usage limits.
Issue: File upload errors
Solution: Check that the uploads directory exists and has proper write permissions.
Issue: Socket.IO connection issues
Solution: Ensure you're not using an ad-blocker that might be blocking WebSocket connections.
This project is licensed under the MIT License - see the LICENSE file for details.
DynaDash was created by:
- Matthew Haskins - Claude integration & chart renderer
- Leo Chen - DB model & SQLite ops
- Jonas Liu - REST API & develop endpoints
- Ziyue Xu - Security & API gateway
