EduCare: AI EdTech Command Center for Personalized Learning - @ Google AiStudio - Live Demo

Project Overview

The EduCare AI Edtech SaaS Dashboard was developed to serve as the central intelligence hub for an adaptive learning platform. Built with React, TypeScript, and Tailwind CSS, the dashboard provides students, educators, and administrators with a 360-degree view of learning progression, behavioral habits, and AI-driven insights, replacing static reports with dynamic, actionable data visualizations.

Technology Stack: React (with TypeScript), Tailwind CSS, D3.js/Recharts, Internal AI Model API Integration 

My Role: Lead Front-End Architect, Data Visualization Specialist, UX/UI Designer

1. The Problem: Generic Learning Paths and Data Overload

In the modern education landscape, educators are drowning in raw data (quiz scores, time spent, assignment completion) without the tools to convert it into personalized learning strategies. The core challenges were:

• Lack of Contextual Insight: Existing systems provided grades but failed to identify the root cause of low performance (e.g., a specific knowledge gap, time management issues, or engagement fatigue).

• Inefficient Teacher Intervention: Teachers spent excessive time manually cross-referencing disparate data points, delaying timely intervention for at-risk students.

• Low Student Self-Efficacy: Students lacked a clear, digestible view of their own progress and next best steps, leading to passive consumption rather than proactive engagement.

The mandate was to leverage AI to distill complex learning data into three clear outputs: performance, predictive risk, and personalized tasks.

2. The Solution: Predictive and Prescriptive Learning Intelligence

The EduCare dashboard was architected as a fast, responsive Single Page Application (SPA) designed for multi-stakeholder use (Student, Teacher, Admin).

• AI-Driven Mastery Scoring: Implemented rich visualizations (e.g., radar charts and sunburst diagrams) to map performance against specific competencies, showcasing not just what a student scored, but their current Mastery Level and identified Knowledge Gaps.

• Study Habit Analysis: Integrated custom charts to visualize behavioral data (time-on-task, study session consistency, content consumption patterns), allowing the AI to flag potential burnout or disengagement early.

• Predictive Risk Flagging: A prominent KPI card uses the AI model's output to assign a "Performance Risk Index," enabling teachers to instantly view and filter students who are statistically likely to fall behind in the next assessment.

• Adaptive Recommendation Engine: The dashboard serves up the AI’s prescriptive recommendations (e.g., "Review Module 3.2 on Supply Chain Fundamentals" or "Schedule 15 minutes of spaced repetition practice"), turning data analysis into an actionable to-do list.

3. The Design Process: The 360-Degree User Perspective

Our design methodology focused on delivering specialized data views for each user group while maintaining a consistent design system (facilitated by Tailwind CSS).

• Persona-Specific Dashboards:

  • Student View: Focused on motivation and clear next steps ("What should I do now?").

  • Teacher View: Focused on class-wide segmentation and intervention ("Who needs help and why?").

  • Admin View: Focused on longitudinal course efficacy and platform usage metrics.

• Data Translation: We employed TypeScript for strict data typing to ensure the mathematical accuracy of all performance metrics. A key design challenge was translating complex statistical scores (like the "Z-Score of Engagement") into simple, intuitive visual elements.

• Mobile-First Responsiveness: Given the high likelihood of student access via tablets and phones, the Tailwind CSS framework was critical in ensuring the dense data visualizations remained clean, legible, and fully responsive across all device breakpoints.

4. The Final Product: A Lift in Engagement and Performance

The EduCare AI Dashboard successfully centralized and personalized the learning experience. The tool provided clarity to students about their learning journey and efficiency to educators, shifting intervention from reactive grading to proactive coaching. Within the pilot program, data showed a:

• 15% Increase in Student Platform Engagement due to clearer, personalized goals.

• 12% Lift in Average Module Completion Rates for at-risk student groups.

• 20% Reduction in Teacher Preparation Time spent analyzing individual performance reports.

Real-Time Supply Chain Command Center: Predictive Analytics Dashboard - @ Google AiStudio

Project Overview

This project involved developing a high-performance, interactive analytics dashboard—replicating the visual sophistication and data density of commercial tools like Power BI—specifically tailored for global supply chain management. The application provides end-to-end visibility, anomaly detection, and AI-powered prescriptive insights to mitigate bottlenecks and optimize logistics costs.

Technology Stack: React (with TypeScript), Tailwind CSS, Gemini API (for prescriptive modeling and risk scoring), Recharts (for data visualization) My Role: Lead Front-End Architect, Data Visualization Specialist, AI Integration & UX Design

1. The Problem: Data Fragmentation and Decision Latency

Traditional supply chain reporting relies on static, daily, or weekly reports, leading to delayed decision-making. Operational teams faced three main challenges:

• Lagging Indicators: Data was retrospective, meaning bottlenecks (e.g., customs delays, inventory shortages) were only identified after they occurred, leading to high expedited shipping costs.

• Low Interactivity: Existing platforms were slow to filter and query, preventing users from quickly drilling down into specific regions, suppliers, or product SKUs.

• Lack of Foresight: Analysts spent excessive time manually correlating disparate metrics (weather data, geopolitical news, carrier performance) to forecast risk, a task unsuited for human processing speed.

The core challenge was to transform passive data viewing into active, real-time operational control.

2. The Solution: Real-Time, Prescriptive Analytics

The Supply Chain Command Center Dashboard was built to provide superior performance and integrate deep AI intelligence directly into the user workflow.

• Custom Power BI Replication: Engineered a highly performant front-end using React and TypeScript to handle massive data sets and complex visualizations (Sankey diagrams, heatmaps, geo-spatial tracking) with zero noticeable rendering lag.

• Gemini Predictive Risk Score: Instead of generic alerts, the Gemini API analyzes live telemetry, global news feeds, and historical patterns to generate a "Shipment Risk Score" (0-100) for all in-transit inventory, predicting the probability of delay or loss within the next 72 hours.

• Prescriptive Recommendations: The AI feature includes a natural language summary that offers prescriptive actions for high-risk shipments (e.g., "Recommend shifting Supplier X components from Port A to Port B due to predicted labor strike activity").

• Tailwind UI Flexibility: Utilizing Tailwind CSS allowed for a highly responsive, modular design, letting users save customized views and pin essential KPI cards (e.g., OTIF: On-Time, In-Full rate) based on their specific roles (e.g., procurement vs. logistics).

3. My Design Process: Actionability Over Density

The design methodology focused on synthesizing complex data into actionable steps, prioritizing a modern, customizable aesthetic.

• UX Research: Role-Based Dashboards: Conducted interviews with supply chain managers and operational staff to map specific information requirements by role, which informed the creation of distinct, interchangeable widget sets.

• Data Hierarchy & Visual Language: Established a clear visual hierarchy where the most important metric (Risk Score) is prominent, followed by geographical context (map) and then granular detail (tables). Used a consistent, intuitive color palette (Green for efficiency, Yellow for moderate risk, Red for critical) to communicate status at a glance.

• Interactivity & Performance: Optimized data fetching and rendering logic (using memoization and debouncing in React) to ensure filters and drill-downs executed sub-second response times, crucial for real-time operations.

• Information Design: Used the Recharts library to build custom, highly readable charts that dynamically update the visual context based on user-defined filters, mimicking the smooth interaction of enterprise BI tools.

4. The Final Product: Optimized Logistics and Cost Savings

The Supply Chain Command Center Dashboard delivered an enterprise-grade analytics experience with the agility of a custom application. It provided logistics teams with the predictive power needed to move from reactive mitigation to proactive optimization, leading to an estimated 15% reduction in expedited shipping costs and a significant improvement in on-time delivery metrics during the pilot phase. The product sets a new standard for performance and intelligence in supply chain visibility.