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.

AIAir Monitor: AI Air Quality Monitoring Platform - @ Google AiStudio - Live Demo

Project Overview

AIAir Monitor is an advanced, AI-driven platform developed to provide governmental and industrial regulators with real-time, comprehensive monitoring and deep analysis of city-wide industrial emissions and ambient air quality (AQI). By centralizing vast datasets and leveraging the power of the Gemini API, the platform moves beyond simple reporting to generate detailed, actionable corrective action plans, transforming environmental policy from reactive to predictive.

Technology Stack: React (TypeScript), Tailwind CSS, D3.js (Visualization), Mapbox GL (Geospatial Mapping), Gemini API (Corrective Action Planning & Trend Analysis). 

My Role: Product Designer, AI Integration Lead, Data Visualization Architect.

1. The Problem: Data Fragmentation and Non-Actionable Insights

Environmental and industrial compliance teams face significant challenges in managing the sheer scale and complexity of air quality data:

• Data Fragmentation: Sensor readings (NOx, SO2, PM2.5, Ozone) often come from disparate sources (city sensors, industrial stacks) and require manual correlation to understand their source and impact.

• Slow Intervention: Identifying the root cause of an AQI spike often takes hours or days, allowing pollution events to peak before interventions can be implemented.

• Analysis Paralysis: Raw data is difficult for policymakers and city planners to translate into effective, enforceable policy changes. Simple alerts lack the context needed for immediate, high-impact decisions.

The core challenge was to design a platform that could instantaneously synthesize complex environmental data and provide expert-level, actionable recommendations.

2. The Solution: Predictive Modeling and AI Policy Generation

AIAir Monitor utilizes deep learning and the Gemini API to turn streams of raw pollutant data into a dynamic, city-wide environmental intelligence map.

• Real-Time Geospatial Visualization: A dynamic Mapbox interface displays real-time AQI heat maps and overlays industrial emission data, pinpointing specific facilities or traffic corridors responsible for pollutant spikes.

• Predictive Trend Analysis: AI algorithms identify emerging pollution trends (e.g., smog formation risk based on weather forecasts and industrial output patterns) up to 72 hours in advance.

• AI-Generated Corrective Action Plans (Gemini API): When a regulatory threshold is breached or predicted, the Gemini API is fed the historical data, current readings, weather conditions, and regulatory mandates. It instantly generates a prioritized, step-by-step recommendation report, such as:

  • Example Recommendation: "Temporarily reduce throughput at Plant A by 20% in the next 6 hours and reroute heavy goods vehicle traffic from Sector 4 to 9 between 06:00 and 10:00."

• Unified Data Storytelling: Complex multivariate data is simplified into clear, color-coded widgets and dynamic charts, ensuring rapid comprehension by non-technical stakeholders.

3. The Design Process: Transparency and Critical Hierarchy

The design process focused on ensuring the highest level of trust and operational clarity, especially given the platform's role in public safety and industrial compliance.

• UX Research – Decision Flow Mapping: We mapped the emergency response process to ensure critical alerts (e.g., PM2.5 exceeding dangerous levels) are presented immediately with one-click access to the AI-generated corrective plan.

• Data Visualization (D3.js): Custom visualizations were developed to clearly show the correlation between cause (industrial output, traffic) and effect (AQI spike), building user confidence in the AI’s root-cause analysis.

• Multi-Role Dashboarding: Designed separate, tailored views for different users: a High-Level Policy View (focusing on long-term trends and compliance) and an Operational View (focusing on real-time sensor data and immediate alerts).

• Mobile Responsiveness: Built on Tailwind CSS, the platform ensures regulators can receive and act upon critical alerts and plans instantly, even when away from the main command center.

4. The Final Product: Data-Driven Environmental Governance

AIAir Monitor successfully provides a critical tool for environmental management, transforming data into measurable improvements in air quality.

• 75% Faster Response Time: The AI-driven corrective plans allow regulatory action to be taken in minutes, not hours, significantly limiting the duration and severity of pollution events.

• Data-Driven Policy Enforcement: Provides irrefutable, contextualized data to support industrial compliance actions, improving regulatory effectiveness.

• Improved Public Health Outcomes: By enabling predictive intervention, the platform helps city officials proactively reduce citizen exposure to harmful pollutants.

Kontent Pro+: The AI-Powered Content Command Center - @ Google AiStudio

Project Overview

Kontent Pro+ is a unified SaaS platform designed to centralize and accelerate the end-to-end content creation lifecycle—from ideation and asset creation to final distribution and performance tracking. Utilizing React, TypeScript, and Tailwind CSS, the platform’s core differentiator is its integrated Gemini-powered image editing suite, which reduces the most tedious part of content production into natural language prompts.

Technology Stack: React (TypeScript), Tailwind CSS, Firebase/Firestore (Workflow & Collaboration), Gemini API (Image Generation/Editing) 

My Role: Product Manager, Full-Stack Developer, AI Integration Specialist

1. The Problem: Content Chaos and Creative Bottlenecks

Content creation agencies and independent creators face immense pressure to produce high-volume, high-quality content across diverse channels. This effort is hampered by:

• Tool Hopping: Creators must juggle separate platforms for project management (Asana/Trello), file storage (Drive/Dropbox), asset design (Photoshop/Canva), and analytics (Google Analytics).

• Asset Management Friction: Finding, resizing, and repurposing visual assets for different platforms (Instagram, LinkedIn, Blog) is manually intensive and time-consuming.

• Slow Feedback Loops: Collaboration is often messy, relying on email threads and conflicting file versions, leading to delays and missed deadlines.

The goal was to build a single, intelligent workspace that could cut production time by addressing the creative workflow fragmentation.

2. The Solution: Unified Workflow with Integrated AI Design

Kontent Pro+ delivers a cohesive environment where every stage of the content lifecycle is managed in one place, augmented by seamless artificial intelligence.

• Integrated Workflow & Collaboration: The core command center features Kanban boards and timeline views, allowing teams to track status, assign tasks, and manage dependencies, all while centralizing communication threads on the specific content piece.

• Real-Time Performance Dashboard: A dedicated analytics section pulls key engagement metrics from distribution channels, allowing creators to instantly compare the performance of different content types and adjust strategy proactively.

• Gemini-Powered Image Editor: We integrated the Gemini API directly into the asset management system. This allows users to:

  • Generate Assets: Create entirely new visuals from text prompts (e.g., "A minimalist, abstract background for a finance article").

  • Edit and Repurpose: Use natural language to instantly modify existing images (e.g., "Change the background color to emerald green and crop for Instagram Stories").

3. The Design Process: Focus on AI-Native User Experience

Our design philosophy centered on making complex AI tools feel like effortless, native features, rather than external integrations.

• UX Process - Mapping the Flow: We began with UX Research focused on pain points in visual asset creation. We found that manual resizing and background removal accounted for over 40% of the graphic design workflow time.

• Designing for Prompting: The image editor was designed with a simple, persistent prompt bar, replacing complex menus. This shift required us to define clear system instructions to the Gemini model to ensure reliable, high-quality output based on user commands.

• Single-Source-of-Truth Architecture: We utilized Firebase Firestore to ensure that every collaborator always accessed the latest version of a document or image, eliminating version control confusion and speeding up the review process.

4. The Final Product: Speed and Scalability for Creators

The launch of Kontent Pro+ provided content teams with a significant competitive advantage, drastically improving output speed and creative agility.

• 45% Reduction in Time Spent on Visual Asset Repurposing due to the integrated Gemini editor.

• 30% Faster Project Turnaround Time resulting from centralized workflows and real-time collaboration.

• Quantifiable ROI: Agencies reported a direct reduction in redundant SaaS subscription costs (e.g., separate project management and image editing tools).

The dashboard successfully delivers a content command center that is not only powerful and responsive but also truly intelligent.

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.