InsightLens - AI-Powered Data Analysis Platform

Zeeshan Siddiqui

Completed work

AI Developer

Google Gemini

Netlify

React

Data

InsightLens - AI-Powered Data Analysis Platform

A modern, full-stack data analysis application that transforms CSV data into powerful insights using Google Gemini AI. Built with React, TypeScript, and Tailwind CSS.

🚀 Features

Smart Data Upload: Drag-and-drop CSV file upload with validation

Interactive Data Preview: Advanced filtering, sorting, and search capabilities

Statistical Analysis: Comprehensive statistical insights including distributions and correlations

Dynamic Charts: Multiple chart types (Bar, Line, Pie, Scatter) with customizable options

AI-Powered Insights: Ask questions about your data using Google Gemini AI

Responsive Design: Beautiful, mobile-friendly interface

Real-time Processing: All data processing happens locally in your browser

🛠️ Tech Stack

Frontend: React 18, TypeScript, Tailwind CSS

Charts: Chart.js with React Chart.js 2

AI Integration: Google Gemini AI

Build Tool: Vite

Deployment: Netlify

📋 Prerequisites

Node.js (version 16 or higher)

npm or yarn

Google Gemini AI API key

🔧 Installation

Clone the repository

git clone <your-repo-url>
cd insightlens

Install dependencies

npm install

Set up environment variables

Create a .env file in the root directory:

# Google Gemini AI Configuration
VITE_GEMINI_API_KEY=your_gemini_api_key_here

# Application Configuration
VITE_APP_NAME=InsightLens
VITE_APP_VERSION=1.0.0

# Development Configuration
VITE_DEV_MODE=true
VITE_DEBUG_ENABLED=false

# API Configuration
VITE_API_TIMEOUT=30000
VITE_MAX_FILE_SIZE=10485760

Get your Gemini API key

Visit Google AI Studio

Create a new API key

Add it to your .env file

Start the development server

npm run dev

The application will be available at http://localhost:5173

🚀 Usage

1. Upload Data

Drag and drop a CSV file or click to browse

Supported file size: up to 10MB

CSV files should have headers in the first row

2. Explore Your Data

Data Preview: View, search, filter, and sort your data

Statistics: Get comprehensive statistical analysis

Charts: Create interactive visualizations

AI Assistant: Ask questions about your data

3. Generate Insights

Use the AI Assistant to ask questions like:

"What are the main trends in this data?"

"What insights can you provide about the sales data?"

"Are there any correlations between these variables?"

📊 Supported Chart Types

Bar Charts: Compare categories and discrete data

Line Charts: Show trends and changes over time

Pie Charts: Display proportions and parts of a whole

Scatter Plots: Reveal correlations between variables

🔒 Privacy & Security

All data processing happens locally in your browser

No data is sent to external servers (except for AI queries)

CSV files are processed client-side for maximum privacy

🏗️ Build for Production

npm run build

The built files will be in the dist directory, ready for deployment.

🌐 Deployment

This project is configured for easy deployment on various platforms:

Netlify (Recommended)

Connect your GitHub repository to Netlify

Set build command: npm run build

Set publish directory: dist

Add environment variables in Netlify dashboard

Vercel

Import your GitHub repository

Vercel will auto-detect the Vite configuration

Add environment variables in Vercel dashboard

Other Platforms

The built files in dist can be deployed to any static hosting service.

🔧 Configuration

Environment Variables

Variable Description Default VITE_GEMINI_API_KEY Google Gemini AI API key Required VITE_APP_NAME Application name InsightLens VITE_APP_VERSION Application version 1.0.0 VITE_DEV_MODE Enable development features true VITE_DEBUG_ENABLED Enable debug logging false VITE_API_TIMEOUT API request timeout (ms) 30000 VITE_MAX_FILE_SIZE Maximum file size (bytes) 10485760

📁 Project Structure

src/
├── components/          # React components
│   ├── Charts.tsx      # Chart visualization component
│   ├── DataPreview.tsx # Data table with filtering/sorting
│   ├── FileUpload.tsx  # File upload interface
│   ├── Header.tsx      # Application header
│   ├── LLMQuery.tsx    # AI assistant interface
│   ├── Sidebar.tsx     # Navigation sidebar
│   └── Statistics.tsx  # Statistical analysis display
├── config/
│   └── env.ts          # Environment configuration
├── utils/
│   ├── csvParser.ts    # CSV parsing utilities
│   ├── geminiAI.ts     # Google Gemini AI integration
│   └── statistics.ts   # Statistical calculation functions
├── App.tsx             # Main application component
└── main.tsx            # Application entry point