SafeT Pro+ IoT AI Dashboard: Unified Security & Operations Platform - @ Google AiStudio

Project Overview

SafeT Pro+ is a highly responsive, enterprise-grade IoT AI Dashboard built for comprehensive Security, Maintenance, and Facility Management (SMFM) operations. The platform aggregates massive real-time data streams from diverse IoT sensors, security cameras, and maintenance logs into a single, collaborative workspace. Its defining feature is the embedded Gemini AI Assistant, which proactively analyzes data to deliver actionable, predictive insights to operations teams.

Technology Stack: React (TypeScript), Tailwind CSS, Custom Real-time Data Visualization, Firebase/Firestore (as the assumed backend for collaboration), Google Gemini API integration. My Role: UX/UI Strategist, Data Integration Architect, AI Feature Prototyper.

1. The Problem: Operational Lag and Data Overload

Facility and security managers traditionally operate in a highly reactive environment marked by:

• Siloed Systems: Security footage, maintenance ticketing, and building environment controls often reside on separate, non-communicating systems, leading to delayed incident response and complex root cause analysis.

• Data Overload: The sheer volume of sensor data (HVAC, access control, leak detection) overwhelms human operators, making it difficult to distinguish genuine anomalies from noise.

• Inefficient Task Handoff: Lack of integrated communication tools forces teams to rely on radios or external apps, causing friction and errors during incident resolution and shift changes.

The challenge was to create a platform that not only centralized data but intelligently filtered and translated it into immediate, cooperative tasks.

2. The Solution: A Unified, AI-Augmented Command Center

SafeT Pro+ addresses operational friction by prioritizing unified context and predictive intelligence.

• Single Pane of Glass (SMFM): All operational domains—Real-time Analytics, Task Management, and Incident Response—are consolidated onto a single dashboard, allowing managers to instantly correlate a fire alarm (Security) with an air quality fault (Maintenance).

• Gemini AI Assistant: The core differentiator. The AI is trained on historical maintenance logs and sensor behavior. Users can query the AI (e.g., "Why is HVAC unit 3 trending hot?") and it provides context-aware diagnostics, suggests specific maintenance procedures, and even drafts incident reports.

• Integrated Collaboration: Built-in task and incident management tools allow operators to assign, track, and chat about specific events directly within the platform, eliminating reliance on external communication channels.

• Prioritized Intelligence: Alerts are tiered and auto-tagged by the AI, ensuring the team always focuses on high-risk, high-impact events first.

3. The Design Process: Actionable Insights & Mobile Readiness

The design methodology focused heavily on translating complex data into immediate action, recognizing that many users are mobile while on patrol.

• UX Research – Contextual Inquiry: Shadowed facility teams to understand the transition between stationary command centers and mobile field work. This validated the need for a mobile-first interface that maintains data density without sacrificing readability.

• Data Visualization Strategy: Collaborated with domain experts to define key performance indicators (KPIs) for each domain. Utilized interactive charts for trend analysis while reserving large, high-contrast indicators for critical, real-time status updates (e.g., door status, zone alerts).

• TypeScript & React Architecture: Leveraged TypeScript to enforce data integrity across complex streams and built the UI using modular React components, ensuring the entire dashboard is fast, scalable, and reusable across different client deployments.

• Tailwind for Responsiveness: Utilized Tailwind CSS to create a highly adaptive layout, ensuring that the same visual hierarchy and functionality are maintained whether the user is viewing the dashboard on a 4K command screen or a smartphone.

4. The Final Product: Enhanced Safety and Operational Predictability

SafeT Pro+ successfully transformed client operations from a reactive posture to a proactive and predictive management style, yielding significant operational savings.

• 30% Faster Incident Resolution: The integrated task management and AI-driven insights drastically reduced the time between alert and resolution.

• Improved Predictive Maintenance: The Gemini AI's ability to spot subtle sensor anomalies helped clients anticipate equipment failure, leading to a measured 18% decrease in unscheduled downtime.

• Standardized Security Protocol: Unified reporting and collaboration tools ensured all teams followed a consistent, documented protocol for every incident, enhancing regulatory compliance and accountability.

ParkingPro+ IoT AI Dashboard: Operational Intelligence Platform - @ Google AiStudio - Live Demo

Project Overview

ParkingPro+ is a responsive, SaaS-based IoT AI dashboard designed for facility managers and operators. It provides a single pane of glass view for complex operational data, including carpark occupancy, detailed building utilization, and the real-time health status of thousands of interconnected IoT sensors and devices. The platform shifts operations from reactive monitoring to proactive, predictive resource management.

Technology Stack: React (TypeScript), Tailwind CSS, Custom Data Visualization Libraries, Real-time WebSocket integration. 

My Role: UX Architect, Full-Stack Prototyper, Data Modeling & Visualization Lead.

1. The Problem: Operational Blind Spots and Reactive Management

Operators managing large, multi-site infrastructures faced three critical challenges:

• Data Silos & Fragmentation: Occupancy data (carpark, offices) was separate from device health data (sensors, cameras, access points), making it impossible to correlate maintenance issues with operational impact.

• Reactive Maintenance: Device failures were often only discovered when a user reported a broken sensor or payment machine, leading to long periods of downtime and revenue loss.

• Poor Resource Allocation: Without real-time, aggregated capacity insights, staff scheduling, security patrols, and maintenance routes were inefficiently planned, increasing overhead costs.

The core challenge was to build a system that made vast streams of sensor data reliable, immediate, and actionable for both field staff and executive management.

2. The Solution: Unified Health Monitoring and Predictive Insights

ParkingPro+ delivers an integrated view by prioritizing data integrity and operational context.

• Unified Health Status: A critical dashboard widget shows the aggregated health status of the entire IoT network (e.g., 98% online). Managers can drill down to see devices flagged by AI as at-risk (displaying anomalous behavior like high temperature or erratic readings) before outright failure.

• Capacity & Utilization Map: Provides a live, geospatial overview of all assets (e.g., Carpark A is at 92% capacity, Building 4 is 30% occupied), allowing management to dynamically shift pricing or allocate staff based on need.

• TypeScript Data Reliability: The use of TypeScript was essential for defining strict data schemas for complex IoT payloads, ensuring data reliability and reducing runtime errors when integrating multiple real-time data streams.

• Actionable Alerts: Alerts are tiered—Critical, Warning, Informational—and automatically linked to suggested maintenance protocols, accelerating resolution time.

3. The Design Process: Focus on Glanceability and Field Use

The design process emphasized practical usability across diverse operating environments and device types.

• UX Research – Field Interviews: Conducted structured interviews with maintenance and security staff to understand their workflow while on patrol. This informed the need for a hyper-efficient, mobile-first design.

• Atomic Design with React: Developed a library of reusable, type-safe React components (e.g., Occupancy Card, Device Health Indicator) to ensure consistency and speed up development across new features.

• Tailwind for Responsiveness: Utilized Tailwind CSS extensively to create an adaptive layout that renders perfectly on command center desktops, mobile phones for field technicians, and wall-mounted tablets. The visual hierarchy changes dynamically based on viewport size, always prioritizing critical status information.

• Data Hierarchy & Color-Coding: Employed a strict color-coding system (Green=Optimal, Yellow=Warning, Red=Critical) and used bold, easily scannable typography to ensure the dashboard remained glanceable even in low-light environments.

4. The Final Product: Measurable Efficiency Gains

ParkingPro+ has successfully standardized operational management across client portfolios, delivering tangible efficiency improvements.

• 90% Reduction in Reactive Maintenance: Proactive alerts based on device anomalies allowed teams to replace or repair components before critical failure, minimizing user impact.

• Optimized Space Usage: The real-time capacity insights enabled dynamic pricing adjustments and staff allocation, resulting in a 15% measured increase in overall carpark utilization during peak hours.

• High Field Adoption: The clean, responsive interface (powered by Tailwind) ensured rapid acceptance and reliable use by on-the-ground maintenance and security teams.

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.

AI-Powered WCAG Compliance Verifier: Automated Accessibility Risk Mitigation - @ Google AiStudio - Live Demo

Project Overview

The Accessibility WCAG AI Verifier is a dynamic, interactive application that leverages advanced Vision AI models to analyze digital interfaces (live sites or screenshots) against WCAG 2.1/2.2 standards. It provides a comprehensive compliance score, identifies complex issues often missed by static scanners, and delivers prioritized, actionable recommendations.

Technology Stack: React (with TypeScript), Tailwind CSS, Vision AI/LLM Integration (Gemini API), Recharts for scoring visualization. My Role: Solution Architect, AI Integration Specialist, Lead Front-End Developer

1. The Problem: The High Cost of Manual Accessibility Auditing

Achieving and maintaining WCAG (Web Content Accessibility Guidelines) compliance is mandatory for many organizations, yet the process is a significant bottleneck:

• Low Automation Capture: Traditional automated tools only catch 30-40% of WCAG issues (primarily structural errors), leaving critical contextual and visual failures (like tab-order logic or complex contrast ratios) to be manually identified by expensive auditors.

• Legal & Reputational Risk: The delay in manual audits leaves organizations exposed to high-cost ADA/Section 508 lawsuits and severely impacts brand reputation due to poor user experience for people with disabilities.

• Vague Remediation: When issues are found, the feedback is often technical and non-prescriptive, leaving development teams unsure of the precise fix.

The goal was to create a fast, intelligent layer of automated auditing that moves beyond simple code scanning to contextual visual interpretation.

2. The Solution: Contextual Analysis via Vision AI

The solution integrates a Vision AI model capable of "seeing" and interpreting an interface like a human expert, then reasoning about its compliance against the WCAG criteria.

• Holistic Compliance Scoring: Generates a real-time Compliance Score (e.g., out of 100), segmented by WCAG success criteria (Perceivable, Operable, Understandable, Robust).

• Screenshot Analysis: Uniquely processes static screenshots to catch visual-only issues like inadequate color contrast in overlays, incorrect spacing, and cluttered layouts—problems traditional code scanners cannot identify.

• Prioritized, Actionable Feedback: The LLM component generates specific, developer-friendly recommendations (e.g., "Adjust the Z-index of the modal overlay" or "Add alt text describing the chart's purpose"), directly linked to the relevant WCAG 2.2 criteria.

• Interactive Dashboard: Provides a clear visual summary (using Recharts) of the most frequent failures by category, enabling CX and Product teams to focus remediation efforts on high-impact areas.

3. The Design Process: Mapping Visuals to WCAG Criteria

The design focused on accuracy, speed, and prescriptive guidance, translating complex legal standards into clear, technical actions.

• AI Prompt Engineering: Extensive prompt refinement was required to train the Vision model to map visual observations (e.g., "The button text is light grey on a white background") to the specific technical failure (e.g., "WCAG 1.4.3 Contrast Minimum failure").

• The Remediation Hierarchy: We defined a clear hierarchy for the AI-generated recommendations, prioritizing Level A and critical Level AA issues first, ensuring that the development team's efforts immediately addressed the highest legal and usability risks.

• User Flow: The interface was streamlined into a simple 3-step process: 1. Upload Image/URL → 2. Run AI Analysis → 3. View Score & Export Remediation Plan, integrating the complex AI processing transparently behind a smooth user experience.

• TypeScript Data Integrity: Utilized TypeScript to ensure that the structured output from the LLM (issue ID, severity, description, fix recommendation) was consistently typed and reliable before being rendered to the dashboard.

4. The Final Product: Speed, Savings, and Reduced Risk

The WCAG AI Verifier transformed the client's quality assurance process, dramatically accelerating the path to compliance. By intelligently automating the detection of contextual and visual issues, the tool provides the analytical depth of a human audit at machine speed. This resulted in a measurable 75% reduction in average audit turnaround time, a 40% decrease in overall remediation cost, and a demonstrably stronger posture against legal accessibility challenges.

RevDeck: Real-Time Sales & eCommerce Analytics Dashboard - @ Google AiStudio - Live Demo

Project Overview

RevDeck is a high-performance, responsive SaaS and eCommerce analytics dashboard designed to transform raw business metrics into actionable revenue intelligence. Developed using React, TypeScript, and Tailwind CSS, the application replicates a modern UI prototype, focusing on speed, visual clarity, and data integrity to empower sales analysts, marketing managers, and executives.

Technology Stack: React (with TypeScript), Tailwind CSS, Recharts (Data Visualization Library), Single Page Application (SPA) Architecture 

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

1. The Problem: Data Fragmentation and Decision Lag

The client's existing process relied on static weekly reports and siloed data sources (CRM, marketing platform, ERP), leading to several critical inefficiencies:

• Decision Lag: Insights were historical, meaning key performance indicators (KPIs) like conversion rates or inventory levels were several days old, making real-time intervention impossible.

• Siloed Views: Analysts could not easily correlate marketing spend with customer lifetime value (LTV) or instantly link campaign performance to recent order volume.

• Poor User Experience: Legacy interfaces were slow, non-responsive, and visually overwhelming, increasing the time required for decision-makers to extract value from the data.

The objective was to create a unified, real-time command center that could support rapid, data-driven revenue operations.

2. The Solution: Modular, High-Fidelity Data Visualization

RevDeck was architected as a modular component library that provides various levels of data granularity, from high-level summary cards to detailed transaction tables.

• Summary Cards for Instant KPIs: The top section features immediate, up-to-date metrics (e.g., Total Revenue, New Customers, Conversion Rate) with clear percentage change indicators, enabling executives to grasp the business health at a glance.

• Rich Charting Components: Leveraged Recharts to implement complex data visualizations, including:

  • Revenue Trend Line Charts: Visualize performance over time.

  • Geographic Sales Heatmaps: Identify regional demand centers.

  • Funnel and Cohort Analysis: Track customer drop-off and retention.

• Responsive Recent Orders Table: Implemented a highly performant and sortable table view for granular data (recent orders, customer details), ensuring the dense information remains legible and usable on various screen sizes.

• Data Integrity with TypeScript: The entire component structure was strictly typed using TypeScript to enforce a contract between the data API and the UI, eliminating common runtime errors associated with inconsistent data structures.

3. The Design Process: Prototype Replication & Utility-First Development

The design process prioritized replicating the high-fidelity UI prototype accurately while ensuring maximum performance and responsiveness.

• Component-Driven Development (CDD): We broke down the prototype into reusable components (e.g., StatCard, LineChartWrapper, DataTable), accelerating development and ensuring visual consistency across the dashboard.

• Tailwind CSS for Velocity: Tailwind's utility-first approach allowed for rapid styling and iteration, enabling the creation of complex layouts (like multi-column grids and overlapping cards) and seamless responsiveness across desktop and tablet devices without writing extensive custom CSS.

• Readability and Hierarchy: Applied color theory and font weight hierarchies to direct the user's eye, ensuring the most important metrics (e.g., negative changes or high-value figures) stood out clearly.

4. The Final Product: Accelerated Insights and ROI

The implementation of the RevDeck Dashboard successfully transitioned the client's operations from reactive reporting to proactive revenue management.

• 95% Reduction in Data Retrieval Time (Time from platform login to key insight).

• Improved Campaign Optimization: Marketing teams leveraged real-time data to adjust budget allocations mid-campaign, resulting in a 9% increase in campaign Return on Investment (ROI).

• Enhanced Forecasting Accuracy: Sales teams now have a clearer, more immediate picture of pipeline health, improving quarterly revenue forecasting accuracy by 6%.