Getting Started

Welcome to Veltix! This guide will help you set up your first data visualization dashboard.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js 20.0.0 or higher
pnpm 9.0.0 or higher
Git for cloning the repository

Quick Start

Clone the Repository


git clone https://github.com/clovery/veltix.git
cd veltix

Install Dependencies


pnpm install

Start Development Server


pnpm dev

This will start all applications in the monorepo:

Web App: http://localhost:3000
API Server: http://localhost:3001
Documentation: http://localhost:3002

Create Your First Dashboard

Open http://localhost:3000 in your browser
Click “Create New Dashboard”
Add components from the component library
Configure data sources
Customize layout and styling

Project Structure

Understanding the project structure will help you navigate the codebase:


veltix/
├── apps/
│   ├── web/              # Main web application
│   │   ├── src/
│   │   │   ├── app/      # Next.js app router
│   │   │   ├── components/ # Web-specific components
│   │   │   └── lib/      # Utilities and configurations
│   │   └── package.json
│   ├── api/              # Backend API server
│   │   ├── src/
│   │   │   ├── resources/ # API endpoints
│   │   │   ├── services/  # Business logic
│   │   │   └── lib/      # Database and utilities
│   │   └── package.json
│   └── docs/             # Documentation site
│       └── src/
│           └── content/  # Documentation files
└── packages/
    ├── charts/           # Chart components
    │   ├── src/
    │   │   ├── bar/      # Bar chart components
    │   │   ├── line/     # Line chart components
    │   │   └── pie/      # Pie chart components
    │   └── package.json
    ├── ui/               # UI component library
    │   ├── src/          # shadcn/ui components
    │   └── package.json
    ├── pusher/           # Real-time data service
    │   ├── src/
    │   │   ├── client/   # WebSocket client
    │   │   └── server/   # WebSocket server
    │   └── package.json
    └── types/            # TypeScript definitions
        └── src/
            └── *.d.ts    # Type definitions

Core Concepts

1. Dashboard Structure

A Veltix dashboard consists of:

Layout: The canvas where components are placed
Components: Visual elements like charts, tables, and text
Data Sources: Connections to external data
Themes: Visual styling and color schemes

2. Component Types

Charts: Bar, line, pie, scatter, and more
Tables: Data tables with sorting and filtering
KPI Cards: Key performance indicators
Text & Images: Static content elements
Maps: Geographic visualizations

3. Data Sources

API Endpoints: RESTful APIs
Database: PostgreSQL, MySQL, etc.
Files: CSV, JSON, Excel
Cloud Services: Google Sheets, Airtable

Next Steps

Now that you have Veltix running, explore these resources:

Features - Learn about all available features
Tutorials - Follow step-by-step guides
API Reference - Complete API documentation
Examples - View sample dashboards

Troubleshooting

Common Issues

Port already in use


# Kill processes using the ports
lsof -ti:3000 | xargs kill -9
lsof -ti:3001 | xargs kill -9
lsof -ti:3002 | xargs kill -9

Dependencies not found


# Clear cache and reinstall
pnpm store prune
pnpm install

Build errors


# Clean and rebuild
pnpm clean
pnpm install
pnpm build

For more help, check our GitHub Issues or Discussions .