InsightHub

A modern data intelligence platform built with Next.js 16, FastAPI, TypeScript, and Tailwind CSS. This full-stack application combines interactive data visualization with AI-powered document retrieval for comprehensive data analysis.

Features

• Cycle metrics analysis with interactive Plotly charts
• Record/measurement data visualization and querying
• RAG-powered chatbot for document retrieval
• Save and load chart configurations
• User authentication with JWT and Google OAuth
• Todo task management
• Dark mode support
• Export data to Excel format

Project Structure

InsightHub/
├── backend/
│   ├── app/
│   │   ├── main.py                # FastAPI application entry
│   │   ├── api/
│   │   │   ├── deps.py            # Dependency injection (DB, Auth)
│   │   │   └── v1/
│   │   │       ├── api.py         # Router aggregation
│   │   │       └── endpoints/     # API route handlers
│   │   │           ├── auth.py    # Authentication endpoints
│   │   │           ├── chat.py    # RAG chatbot endpoints
│   │   │           ├── cycle.py   # Cycle metrics
│   │   │           ├── record.py  # Record data
│   │   │           ├── chart.py   # Chart save/load
│   │   │           └── todos.py   # Todo management
│   │   ├── core/
│   │   │   ├── config.py          # Settings & environment
│   │   │   ├── security.py        # JWT token handling
│   │   │   └── google_oauth.py    # Google OAuth handler
│   │   ├── db/
│   │   │   ├── session.py         # Database session
│   │   │   └── base.py            # SQLAlchemy base
│   │   ├── models/                # SQLAlchemy ORM models
│   │   ├── schemas/               # Pydantic request/response schemas
│   │   └── crud/                  # CRUD operations
│   ├── utils.py                   # Data loading utilities
│   ├── build_db.py                # Database initialization
│   ├── get_embeddings.py          # ChromaDB embeddings generation
│   └── requirements.txt           # Python dependencies
│
├── frontend/
│   ├── app/                       # Next.js app router
│   │   ├── layout.tsx             # Root layout with AuthProvider
│   │   ├── page.tsx               # Home page
│   │   ├── login/page.tsx         # Login page
│   │   ├── register/page.tsx      # Registration page
│   │   ├── chat/page.tsx          # RAG chatbot interface
│   │   ├── cycle/page.tsx         # Cycle analytics
│   │   ├── record/page.tsx        # Record analysis
│   │   ├── data-query/page.tsx    # Data query interface
│   │   ├── todos/page.tsx         # Todo management
│   │   └── globals.css            # Global styles
│   ├── components/
│   │   ├── layout/
│   │   │   └── Navbar.tsx         # Navigation component
│   │   ├── auth/
│   │   │   ├── ProtectedRoute.tsx # Auth guard wrapper
│   │   │   └── GoogleSignInButton.tsx
│   │   ├── ui/
│   │   │   └── Modal.tsx          # Reusable modal
│   │   └── todos/                 # Todo components
│   │       ├── TodoList.tsx
│   │       ├── TodoItem.tsx
│   │       └── AddTodoForm.tsx
│   ├── services/                  # API service layer
│   │   ├── authService.ts         # Auth API calls
│   │   ├── chatService.ts         # Chat & RAG API calls
│   │   ├── cycleService.ts        # Cycle analytics API calls
│   │   ├── recordService.ts       # Record analysis API calls
│   │   └── todoService.ts         # Todo API calls
│   ├── contexts/
│   │   └── AuthContext.tsx        # Global auth state
│   ├── types/                     # TypeScript type definitions
│   │   ├── auth.ts
│   │   ├── todo.ts
│   │   └── cycle.ts
│   ├── lib/
│   │   └── api/
│   │       ├── config.ts          # API configuration
│   │       └── client.ts          # Fetch wrapper with auth
│   ├── package.json
│   └── .env.local.example         # Environment template
│
└── README.md

Getting Started

Prerequisites

• Node.js 20+
• Python 3.10+
• PostgreSQL database
• OpenAI API key (for RAG chatbot)
• Google OAuth credentials (optional, for social login)

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment and install dependencies:

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

3. Copy the environment file and configure:

cp .env.example .env

4. Configure the .env file with your credentials:

DATABASE_URL=postgresql+psycopg2://user:password@localhost:5432/insighthub
SECRET_KEY=your-secret-key-here
OPENAI_API_KEY=your-openai-api-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

5. Initialize the database:

python build_db.py

6. Generate embeddings for RAG (optional):

python get_embeddings.py

7. Run the backend server:

uvicorn app.main:app --reload --port 8000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Copy the environment file and configure:

cp .env.local.example .env.local

4. Run the development server:

npm run dev

5. Open http://localhost:3031 with your browser to see the result.

API Endpoints

Authentication (/api/v1/auth)

• POST /register - User registration
• POST /login - Email/password login
• GET /me - Get current user info
• GET /google - Initiate Google OAuth
• GET /google/callback - OAuth callback

Chat & RAG (/api/v1/chat)

• POST /ask - Send message to RAG chatbot
• POST /sessions - Save chat session
• GET /sessions - List saved chats
• GET /sessions/{session_id} - Get specific chat
• DELETE /sessions/{session_id} - Delete chat

Cycle Metrics (/api/v1/cycle)

• GET /experiments - List available experiments
• GET /cell_ids - Get cell IDs by experiment
• GET /metrics - Available metrics for visualization
• POST /datapoints - Query cycle data for charting

Records (/api/v1/record)

• GET /experiments - List record experiments
• GET /cell_ids - Get cell IDs
• GET /step_types - Available step types
• POST /datapoints - Query record datapoints

Charts (/api/v1/charts)

• POST / - Save chart configuration
• GET / - List user's charts
• GET /my - List user's and public charts
• GET /{chart_id} - Get chart by ID

Todos (/api/v1/todos)

• GET / - Get all todos
• POST / - Create a new todo
• GET /{todo_id} - Get a specific todo
• PUT /{todo_id} - Update a todo
• DELETE /{todo_id} - Delete a todo

Architecture

Service Layer Pattern

All API calls are centralized in the services/ directory, providing:

• Consistent error handling
• Authentication token injection
• Easy mocking for testing

Component Organization

Components are organized by feature:

• components/auth/ - Authentication components
• components/layout/ - Layout components
• components/todos/ - Todo feature components
• components/ui/ - Reusable UI components

Type Safety

TypeScript interfaces in types/ ensure type safety across the frontend and provide excellent IDE support.

API Client

A custom fetchApi wrapper in lib/api/client.ts provides:

• Automatic JWT token injection
• Consistent error handling
• Type-safe responses

RAG Pipeline

The chatbot uses LangChain with ChromaDB for retrieval-augmented generation:

• Document embeddings stored in ChromaDB
• GPT-4o-mini for response generation
• Context-aware document retrieval

Tech Stack

Frontend

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• UI Library: React 19
• Styling: Tailwind CSS 4
• Charts: Plotly.js (react-plotly.js)
• State: React Context

Backend

• Framework: FastAPI
• Language: Python 3
• Database: PostgreSQL
• ORM: SQLAlchemy
• Validation: Pydantic
• Auth: JWT + Google OAuth
• AI/ML: LangChain + ChromaDB + OpenAI

Data Processing

• Analytics: DuckDB
• Data Format: Parquet files
• Processing: Pandas, PyArrow

Learn More

• Next.js Documentation
• FastAPI Documentation
• TypeScript Documentation
• Tailwind CSS Documentation
• LangChain Documentation
• Plotly Documentation