What is VizBoard?
VizBoard is a modern data visualization platform that enables users to connect multiple PostgreSQL databases, create interactive dashboards, and visualize data through dynamic tables and customizable charts. Built with Next.js 15 and React 19, VizBoard provides an intuitive interface to explore and analyze your data in real-time.VizBoard is built with modern web technologies including Next.js 15 App Router, Server Components, and React 19 for optimal performance.
Key Features
Multi-Database Support
Connect to multiple PostgreSQL databases simultaneously with secure AES-256-GCM encryption for credentials.
Interactive Dashboards
Create dynamic dashboards with drag-and-drop widget organization and real-time data updates.
Powerful Visualizations
Build data tables, bar charts, line graphs, and area charts with grouping and aggregation capabilities.
Secure Authentication
User authentication with NextAuth.js supporting email/password and OAuth providers (Google, GitHub).
Core Capabilities
User Management
- Authentication: Secure registration and login with NextAuth.js
- Session Management: Persistent sessions with JWT tokens
- User Profiles: Customizable profiles with avatar support
- OAuth Integration: Sign in with Google or GitHub
Project Management
- Create Projects: Organize your visualizations by project with title and description
- Public/Private Projects: Control visibility with shareable URLs for public projects
- Project Deletion: Secure deletion with confirmation to prevent accidental data loss
- Auto-introspection: Automatic database schema detection for valid connections
Database Connections
- PostgreSQL Support: Full support for PostgreSQL databases (version 15+)
- Secure Storage: Database credentials encrypted with AES-256-GCM encryption
- Schema Introspection: Automatic discovery of tables, columns, and data types
- Connection Validation: Test connections before saving to ensure reliability
- Multiple Connections: Connect multiple databases to a single project for cross-database analysis
Visualization Widgets
VizBoard provides several widget types for data visualization:Data Tables
- Simple DataTables: Display one or multiple tables from the same database connection
- Integrated DataTables: Compare and combine data from multiple database connections
- Interactive Features: Sorting, filtering, and pagination powered by TanStack Table
Charts
- Bar Charts: Visualize categorical data with grouped bars and aggregations
- Line Charts: Track trends and changes over time
- Area Charts: Show cumulative data and filled areas under the line
- Dynamic Configuration: Select tables, columns, X/Y axes, and aggregation functions (sum/average)
- Multiple Series: Compare multiple data series on the same chart
User Interface
- Theme Support: Switch between light and dark themes with persistence
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Drag & Drop: Reorganize widgets on your dashboard with intuitive drag-and-drop
- Modal Dialogs: Clean configuration interfaces powered by Radix UI
- Toast Notifications: Real-time feedback for user actions with Sonner
- Accessible Components: Built with Radix UI for WCAG compliance
Technology Stack
VizBoard is built with cutting-edge web technologies:| Technology | Purpose |
|---|---|
| Next.js 15 | React framework with App Router and Server Components |
| React 19 | Modern UI library with latest features |
| TypeScript | Type-safe development with IntelliSense |
| Prisma | Type-safe ORM for PostgreSQL database management |
| NextAuth.js | Authentication and session management |
| Tailwind CSS | Utility-first CSS framework for rapid styling |
| Recharts | Composable charting library for data visualization |
| TanStack Table | Headless table library for interactive data tables |
| Knex.js | Query builder for external database connections |
| Radix UI | Accessible, unstyled UI component primitives |
| Zustand | Lightweight state management |
| SWR | React hooks for data fetching and caching |
| Zod | TypeScript-first schema validation |
Security Features
VizBoard takes security seriously:- Encrypted Credentials: All external database connection credentials are stored using AES-256-GCM encryption
- Secure Authentication: Password hashing with bcrypt and JWT tokens for session management
- Input Validation: All user inputs validated with Zod schemas before processing
- Environment Variables: Sensitive configuration separated from code
- Connection Ownership: Users can only access their own projects and database connections
- SQL Injection Protection: Parameterized queries using Prisma and Knex.js
Use Cases
VizBoard is perfect for:Business Intelligence
Connect to your production databases and create real-time dashboards for:- Sales performance tracking
- Customer analytics
- Inventory management
- Financial reporting
Data Analysis
Explore and analyze data across multiple databases:- Cross-database comparisons
- Trend analysis over time
- Data quality monitoring
- Ad-hoc queries and exploration
Team Collaboration
Share insights with your team:- Public project URLs for stakeholder access
- Standardized dashboards for consistent reporting
- Self-service analytics for non-technical users
Development & Testing
Monitor and debug your applications:- Database health monitoring
- API request tracking
- Performance metrics visualization
- Test data validation
Architecture
VizBoard uses a modern, scalable architecture:- Frontend: Next.js 15 with App Router for server-side rendering and client-side navigation
- Backend: Next.js Server Actions for type-safe API endpoints
- Database: PostgreSQL for application data (users, projects, widgets, connections)
- External Databases: Dynamic connections to user-specified PostgreSQL databases
- Authentication: NextAuth.js with JWT tokens and session management
- State Management: Zustand for global state, SWR for server state caching
- Styling: Tailwind CSS 4 with CSS variables for theming
What’s Next?
Installation
Set up VizBoard with Docker, configure environment variables, and run database migrations
Quickstart
Create your first dashboard in 5 minutes with our step-by-step guide