EdTech · AI TutorLive

LearnAI Tutor

An interactive, modern educational web application designed to teach Data Science & Machine Learning fundamentals. Built around “Data Science, A Comprehensive Guide for Beginners” with 10 comprehensive lessons — combining theory, hands-on simulations, and an AI tutor on every page.

Open Live AppBack to Products

10

Comprehensive Lessons

10

Interactive Simulators

Gemini 2.5

AI Tutor Model

Light + Dark

Theme Modes

Try it now

Jump into LearnAI Tutor

The live app is up and running — lessons, simulators, and the AI tutor are ready when you are.

Open Live App

Core Purpose

Learn by doing, with an AI tutor at your side

The app provides an engaging, hands-on learning experience for beginners exploring data science concepts — combining theoretical knowledge with interactive simulations and AI-powered tutoring that's available on every single lesson.

Key Features

Everything inside the app

From a structured 10-lesson curriculum to live simulators and an AI tutor on every page.

📚 10 Comprehensive Lessons

Each lesson covers essential data science topics in a structured progression:

  1. 01Introduction to Data Science
  2. 02History & Evolution of Data Science
  3. 03Data Science vs. Traditional Analysis
  4. 04The Data Science Lifecycle
  5. 05Data Collection Methods
  6. 06Data Cleaning & Handling Missing Values
  7. 07Data Transformation & Scaling
  8. 08Data Visualization Techniques
  9. 09Machine Learning Model Training & Evaluation
  10. 10Model Deployment & Real-World Applications

🎮 Interactive Simulators

Every lesson includes a unique, hands-on playground simulator for experiential learning.

Timeline Simulator

Interactive timeline showing the evolution of data science

Industries Radar Chart

Explore data science applications across different industries

Format Matcher

Drag-and-drop interface to match data formats

Lifecycle Visualizer

Interactive walkthrough of the data science workflow

Data Collection Simulator

Hands-on data gathering experience

Missing Values Explorer

Learn data cleaning techniques interactively

Scaling Playground

Slider-driven tool to understand data normalization

Train/Test Split Overfit Explorer

Visual learning about model overfitting

Visualization Studio

Experiment with different chart types

Model Evaluation Dashboard

Understand model performance metrics

💬 AI Tutor Chat (Gemini 2.5 Flash)

  • Context-aware AI assistant available on every lesson
  • Per-lesson chat history persisted in local storage
  • Real-time responses powered by Google’s Gemini API
  • Helps clarify concepts, answer questions, and provide guidance

📝 Structured Learning Content

  • Clear Learning Objectives — defined goals for what students will learn
  • Concept Cards — well-organized explanations with core paragraphs, analogies, and code snippets with syntax highlighting
  • Key Formulas — mathematical expressions rendered with KaTeX for data science concepts
  • Glossary — definitions of key terminology
  • Real-World Examples — practical scenarios showing how concepts apply in industry
  • Key Takeaways — summarized core points for quick review

✅ Assessment & Practice

  • Interactive Quizzes — multiple-choice questions with explanations after each lesson
  • Open-Ended Practice Exercises — tasks with hints and expected answers for deeper learning
  • Progress Tracking — quiz scores and lesson completion saved in browser local storage

🎨 Theme & Accessibility

  • Light & Dark Mode — full-featured dark mode toggle in the top navigation bar
  • Smart Defaults — automatically detects OS preference on first visit
  • Persistent Theme — user’s choice saved in local storage
  • Responsive Design — three-column layout for desktop, collapsible sidebar and mobile drawer for tablets/phones
  • Mobile-Optimized — bottom chat button and adapted navigation on small screens

📊 Responsive UI Components

  • Sidebar Navigation — expandable/collapsible lesson selector with progress indicators
  • Lesson Progress — visual tracking of course completion percentage
  • Scroll Progress Bar — shows reading progress through lesson content
  • Card-Based Layout — modular, clean presentation of content sections
  • Code Blocks — syntax-highlighted code with one-click copy functionality
  • Callouts & Highlights — visual emphasis for important concepts

See it for yourself

Open the live app and try a lesson, a simulator, or chat with the AI tutor.

Open Live App

Technical Stack

Built with a modern, type-safe stack

TechnologyPurpose
React 19Frontend framework
TypeScriptType-safe code
ViteLightning-fast build tool
Tailwind CSS v4Utility-first styling with design tokens
RechartsInteractive data visualizations
KaTeXMathematical formula rendering
Framer MotionSmooth animations and micro-interactions
Express.jsBackend server
Google Gemini 2.5 FlashAI tutor power
Lucide ReactIcon library
dotenvEnvironment configuration

Data Persistence

  • Progress Tracking — lesson completion status stored in localStorage
  • Quiz Scores — per-lesson quiz results cached in browser
  • Chat History — tutor conversations maintained per lesson in localStorage
  • UI State — sidebar collapse and chat panel state saved for returning users

Developer Features

  • Structured Data-Driven Curriculum — all lessons defined as plain TypeScript objects in curriculum.ts, not JSX
  • Extensible Architecture — easy to add new lessons and playground types
  • Type Safety — full TypeScript coverage with strict types for lessons, quizzes, and playground specs
  • Development Server — hot-reload with npm run dev on port 3000
  • Production Build — esbuild bundling for optimized server deployment
  • Lint Verification — TypeScript type checking with npm run lint

Design System

  • Design Tokens — CSS variables in index.css for consistent colors, spacing, and typography
  • Dark Mode Support — Tailwind v4 custom dark variant implementation
  • Component Library — reusable UI primitives (Card, CodeBlock, Callout, ThemeToggle, Logo)

Perfect For

Who it’s built for

Beginner learnersSelf-paced studentsVisual learnersPractice-oriented studentsAI-assisted learners

Try LearnAI Tutor

Jump into the live app and start learning data science the hands-on way — lessons, simulators, and an AI tutor included.

Open Live AppBack to Products