Skip to content

Kodelack47/data-analysis-db

Repository files navigation

🎯 Plug-N-Learn: Data Analysis Dashboard

A full-stack interactive data analysis platform built with React, TypeScript, and Tailwind CSS. Users can upload CSV files, explore data through dynamic visualizations, and receive AI-powered insights through a built-in chat interface.

🔗 Live Demo: data-analysis-dashboard-ousmanatunkara.vercel.app


🚀 About This Project

This project was built during a 3-month software engineering fellowship where I worked as part of a collaborative team to design, develop, and deploy a production-grade data analysis tool. My contributions spanned the full development lifecycle — from setting up the project structure and building React components to deploying the final application on Vercel with a live production URL.

This was one of my first experiences working with TypeScript at a professional level, and it solidified my understanding of component-based architecture, state management, and real-world deployment pipelines.


✨ Features

  • 📁 CSV File Upload — Drag and drop any CSV file for instant data parsing
  • 📊 Interactive Charts — Bar, line, and pie charts built with Recharts
  • 🔍 Data Table — Searchable, sortable data display with responsive UI
  • 🤖 AI-Powered Insights — Chat interface that analyzes uploaded data and answers questions
  • 📈 Automated Trend Detection — Automatically generates meaningful insights from data
  • 💾 Data Export — Export processed data and visualizations
  • 📱 Responsive Design — Works across desktop and mobile devices

🛠 Tech Stack

Category Technology
Frontend React, TypeScript, Tailwind CSS
Charts Recharts
UI Components shadcn/ui
Build Tool Vite
Deployment Vercel
Version Control Git & GitHub

🧠 What I Learned

  • Building and composing reusable React components at scale
  • Working with TypeScript types and interfaces for data structures
  • Processing and transforming raw CSV data in JavaScript
  • Integrating AI APIs and handling async responses
  • Deploying a production application from GitHub to Vercel
  • Writing clean, organized code in a collaborative environment

📦 Getting Started

# Clone the repo
git clone https://github.com/Kodelack47/data-analysis-dashboard-ousmanatunkara.git

# Navigate into the project
cd data-analysis-dashboard-ousmanatunkara

# Install dependencies
npm install

# Start the development server
npm run dev

# Open in browser
# Go to http://localhost:5173

📁 Project Structure

src/
├── components/
│   ├── DataUpload.tsx       # File upload area
│   ├── DataTable.tsx        # Sortable data table
│   ├── ChartSection.tsx     # Dynamic chart rendering
│   ├── InsightsPanel.tsx    # Automated data insights
│   ├── ChatInterface.tsx    # AI chat feature
│   └── Dashboard.tsx        # Main dashboard layout
├── utils/
│   └── dataAnalysis.ts      # Data processing functions
└── types/
    └── data.ts              # TypeScript type definitions

🙋‍♂️ Author

Ousmana Tunkara Full Stack Engineer | AI Evaluator | CS Student at WGU

About

An interactive data analysis tool that allows users to upload CSV files, visualize data using dynamic charts, and receive AI-powered insights. Built with React, TypeScript, and Tailwind CSS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages