InsightDash — Analytics Dashboard Builder

A full-stack analytics dashboard builder that lets users create custom dashboards by adding and arranging widgets on a drag-and-drop grid layout. Build line charts, bar charts, pie charts, funnel charts, KPI cards, and data tables — all powered by configurable data sources.

Tech Stack

Layer	Technology
Frontend	React 18, TypeScript, Vite
Styling	Tailwind CSS
Charts	Recharts
Grid Layout	react-grid-layout
Backend	FastAPI, SQLAlchemy
Database	PostgreSQL
Auth	JWT (PyJWT + passlib/bcrypt)
PDF Export	ReportLab
Testing	Vitest, React Testing Library, Playwright

Prerequisites

• Node.js >= 18
• Python >= 3.11
• PostgreSQL >= 14
• npm >= 9

Installation

1. Clone the repository

git clone <repository-url>
cd insightdash

2. Backend setup

cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt

3. Frontend setup

cd frontend
npm install

4. Database setup

Create a PostgreSQL database:

createdb insightdash

Run migrations:

cd backend
alembic upgrade head

Environment Variables

Copy the example environment file and configure it:

cp .env.example .env

Variable	Description	Default
DATABASE_URL	PostgreSQL connection string	postgresql://localhost:5432/insightdash
SECRET_KEY	JWT signing secret	change-me-in-production
CORS_ORIGINS	Allowed frontend origins (comma-separated)	http://localhost:5173,http://localhost:3000
ACCESS_TOKEN_EXPIRE_MINUTES	JWT token expiry	60

Running in Development

Start both servers in separate terminals:

Backend (runs on port 8000):

cd backend
source venv/bin/activate
uvicorn app.main:app --reload --port 8000

Frontend (runs on port 5173):

cd frontend
npm run dev

Open http://localhost:5173 in your browser.

Running in Production

Backend:

cd backend
uvicorn app.main:app --host 0.0.0.0 --port 8000 --workers 4

Frontend:

cd frontend
npm run build
npm run preview  # or serve the dist/ directory with your preferred static host

For Vercel deployment, point the build to the frontend/ directory with the npm run build command and dist as the output directory.

Project Structure

insightdash/
├── .env.example                  # Environment variable template
├── backend/
│   ├── requirements.txt          # Python dependencies
│   ├── app/
│   │   ├── core/
│   │   │   ├── config.py         # App configuration
│   │   │   ├── database.py       # SQLAlchemy engine & session
│   │   │   └── auth.py           # JWT authentication helpers
│   │   ├── models/
│   │   │   ├── user.py           # User model
│   │   │   ├── dashboard.py      # Dashboard model
│   │   │   ├── widget.py         # Widget model
│   │   │   ├── template.py       # Dashboard template model
│   │   │   └── share_token.py    # Share token model
│   │   ├── api/routes/
│   │   │   ├── auth.py           # Register/login endpoints
│   │   │   ├── widgets.py        # Widget CRUD
│   │   │   ├── templates.py      # Template gallery endpoints
│   │   │   └── share.py          # Public share endpoints
│   │   ├── services/
│   │   │   ├── auth_service.py   # Auth business logic
│   │   │   └── template_service.py
│   │   └── utils/
│   │       ├── pagination.py     # Pagination helpers
│   │       └── errors.py         # Error handling
│   └── tests/
├── frontend/
│   ├── src/
│   │   ├── api/client.ts         # API client
│   │   ├── contexts/AuthContext.tsx
│   │   ├── pages/
│   │   │   ├── DashboardListPage.tsx    # Dashboard grid with search
│   │   │   ├── DashboardEditorPage.tsx  # Drag-and-drop editor
│   │   │   ├── DashboardViewPage.tsx    # Read-only view
│   │   │   ├── TemplateGalleryPage.tsx  # Pre-built templates
│   │   │   ├── SharePage.tsx            # Public shared view
│   │   │   ├── DataSourcesPage.tsx      # Data source management
│   │   │   ├── LoginPage.tsx
│   │   │   ├── RegisterPage.tsx
│   │   │   └── LandingPage.tsx
│   │   ├── components/
│   │   │   ├── Layout.tsx
│   │   │   ├── Navigation.tsx
│   │   │   └── widgets/
│   │   │       ├── WidgetRenderer.tsx       # Dynamic widget renderer
│   │   │       ├── WidgetToolbar.tsx        # Sidebar widget picker
│   │   │       ├── ConfigurationPanel.tsx   # Widget config editor
│   │   │       ├── LineChartWidget.tsx
│   │   │       ├── BarChartWidget.tsx
│   │   │       ├── PieChartWidget.tsx
│   │   │       ├── FunnelChartWidget.tsx
│   │   │       ├── DataTableWidget.tsx
│   │   │       └── sample-data.ts           # Seed/sample data
│   │   └── types/
│   │       ├── index.ts
│   │       └── widget-config.ts
│   ├── tailwind.config.js
│   ├── vite.config.ts
│   └── playwright.config.ts

API Documentation

The backend exposes a REST API. Interactive docs are available at /docs (Swagger UI) when the server is running.

Key Endpoints

Method	Endpoint	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Login and receive JWT
GET	/api/dashboards	List user's dashboards
POST	/api/dashboards	Create a dashboard
GET	/api/dashboards/{id}	Get dashboard by ID
PUT	/api/dashboards/{id}	Update a dashboard
DELETE	/api/dashboards/{id}	Delete a dashboard
GET	/api/dashboards/{id}/export	Export dashboard as PDF
GET	/api/dashboards/shared/{token}	View shared dashboard (public)
POST	/api/widgets	Create a widget
PUT	/api/widgets/{id}	Update a widget
DELETE	/api/widgets/{id}	Delete a widget
GET	/api/templates	List dashboard templates
POST	/api/data-sources/{id}/upload	Upload CSV data source

Data Models

• Dashboard — id, title, description, layout_config (JSON), created_by, is_public, share_token, timestamps
• Widget — id, dashboard_id (FK), widget_type (line_chart | bar_chart | pie_chart | funnel_chart | kpi_card | data_table), title, data_config (JSON), position, dimensions, style_config (JSON)
• DataSource — id, name, type (csv_upload | manual | api_mock), config (JSON), sample_data (JSON)
• DashboardTemplate — id, name, description, thumbnail_url, layout_config (JSON), widget_configs (JSON)

Testing

Frontend unit tests

cd frontend
npx vitest run

Frontend E2E tests

cd frontend
npx playwright install
npx playwright test

Backend tests

cd backend
source venv/bin/activate
python -m pytest

License

MIT