CareIQ: Unified Healthcare Command Center - @ Google AiStudio - Live Demo

Project Overview

The CareIQ Healthcare SaaS Dashboard is a responsive, high-fidelity application built for seamless patient and operational management within clinical environments. Utilizing React and Tailwind CSS, the application centralizes critical workflows—appointment scheduling, patient records, resource allocation, and clinical insights—into a single, intuitive interface, dramatically improving administrative efficiency and care coordination.

Technology Stack: React (TypeScript), Tailwind CSS, Context API (State Management), Recharts for Visualization 

My Role: Product Owner, Lead Front-End Developer, Data Workflow Architect

1. The Problem: Fragmented Data and Workflow Latency

Healthcare providers often struggle with legacy systems characterized by slow load times, non-responsive design, and fragmented patient data scattered across multiple modules (scheduling, billing, EMR). This fragmentation leads to three major bottlenecks:

• High Administrative Burden: Clinical staff waste critical time navigating multiple screens to find patient history, insurance details, or lab results.

• Delayed Decision-Making: Key performance indicators (KPIs) like average patient wait time, no-show rates, and resource utilization are not visible in real-time, preventing proactive management.

• Poor User Experience: Non-responsive design causes errors and frustration on tablets and mobile carts used by physicians and nurses during rounds.

The mandate was to consolidate all core operational data into a unified, real-time dashboard that is fast, secure, and mobile-friendly.

2. The Solution: A Real-Time, Role-Based Data Hub

CareIQ was designed to act as the single source of truth for all clinical and administrative staff, using a modular and responsive architecture.

• Unified Patient 360 View: Developed a persistent, deep-dive patient profile view that can be accessed from any page, instantly displaying allergies, active medications, risk scores, and recent vitals, eliminating the need to jump between EMR tabs.

• Real-Time Appointment & Resource Management: The central dashboard features an integrated appointment calendar with color-coded status indicators (Checked In, Waiting, In Progress), directly linked to resource availability (exam rooms, equipment).

• Clinical Intelligence Scorecards: Utilized Recharts to create visually compelling dashboards showing key metrics: Patient Throughput, Staff Utilization, and Revenue Cycle Health. These metrics are updated via secure API calls to provide immediate operational insights.

• Responsive Design with Tailwind: Used Tailwind’s utility-first classes and responsive breakpoints extensively to ensure the complex data grids, calendars, and side panels adapt flawlessly to desktop monitors, tablets, and mobile devices used in a dynamic clinical setting.

3. The Design Process: Prioritizing Clinical Workflow

The design methodology focused heavily on user empathy and minimizing Cognitive Load for high-pressure clinical roles.

• User Journey Mapping: Conducted extensive interviews with nurses, receptionists, and doctors to map their daily workflows, which directly informed the dashboard's layout—prioritizing appointments and immediate tasks on the left, and patient details on the right.

• Color and Contrast: Strict adherence to accessibility standards (WCAG 2.1 AA) and clinical best practices was maintained, using highly contrasting colors for urgent status indicators (e.g., critical lab results or high-risk patients) to ensure rapid triage.

• Single-Click Navigation: Designed all primary interactions (e.g., checking in a patient, opening a full chart) to require only a single click or tap, drastically reducing the friction inherent in typical hospital management software.

• React Context for Speed: Leveraged the React Context API for localized state management, ensuring that data updates (like a change in a patient’s room number) propagated instantly across multiple dashboard components without requiring full page refreshes.

4. The Final Product: Efficiency and Enhanced Patient Safety

The implementation of the CareIQ Dashboard resulted in immediate, quantifiable operational improvements for the client, reducing time spent on administrative tasks and elevating the standard of patient care.

• 25% Reduction in Patient Check-in Time, freeing up administrative staff.

• 18% Improvement in Exam Room Utilization due to real-time resource tracking.

• Significantly Enhanced Patient Safety by making critical allergy and risk information immediately visible across all touchpoints.

Hospital Throughput & Efficiency Dashboard: AI-Powered Resource Optimization - @ Google AiStudio - Live Demo

Project Overview

This initiative involved the development of a highly specialized, interactive dashboard that monitors and optimizes core hospital operational efficiency metrics. Built as a high-performance clone of a commercial Power BI environment, the application integrates Google Gemini to move beyond descriptive analytics and provide predictive, actionable insights for hospital administrators and clinical staff.

Technology Stack: React, Tailwind CSS, TypeScript, Recharts, Google Gemini API (for LLM insights) My Role: Full-Stack Developer, Data & AI Integration Specialist, UX Architect

1. The Problem: Operational Bottlenecks and Delayed Care

Hospitals face intense pressure to maximize patient throughput and resource utilization while maintaining high care standards. Legacy reporting systems created several critical hurdles:

• Capacity Blind Spots: Key metrics like Bed Turnover Time and Emergency Room (ER) Wait Time were often aggregated too late, failing to alert staff to impending bottlenecks in real-time.

• Reactive Staffing: Managers made scheduling decisions based on historical averages rather than real-time demand, leading to inefficient staff-to-patient ratios and burnout during unexpected surges.

• Data Overload: Existing dashboards presented complex data without interpretation, forcing stressed staff to manually synthesize information to find the root cause of delays.

The need was for a system that could not only show what happened but also leverage AI to predict what will happen and suggest preemptive actions.

2. The Solution: Real-Time Intelligence and Predictive Guidance

The Hospital Operations Dashboard was engineered using React to ensure fast data visualization and an unparalleled level of interactivity. The core innovation was the integration of Gemini to provide contextual analysis directly within the UI.

• Unified Throughput View: The dashboard places key throughput metrics (e.g., Discharge Readiness Rate, Lab Test Turnaround Time) front and center, updating in real-time to reflect the current state of patient flow.

• AI-Driven Insights Card: A dedicated panel uses the Google Gemini API to analyze current operational data (e.g., high ER volume + low availability of cleaning staff) and generates natural language explanations and proactive recommendations (e.g., "Predicting 4-hour delay in next 6 admissions. Recommend immediate diversion of two floor nurses to assist with discharge paperwork.").

• Tailwind for Clinical Clarity: The UI, built with Tailwind CSS, uses a clean, low-stress color palette and large, high-contrast cards to ensure legibility and accessibility in high-pressure clinical environments.

• Interactive Capacity Modeling: Charts utilize Recharts to allow users to instantly filter capacity data by unit (ICU, Med-Surg, ER), forecasting resource needs for the next 4, 8, and 12 hours.

3. The Design Process: Integrating the Human-AI Loop

The design methodology focused on building trust in the AI's recommendations while delivering the most impactful metrics first.

• Metric Prioritization: Collaboration with hospital administrators identified ER Left Without Being Seen (LWBS) Rate and Patient Length of Stay (LOS) as the primary target metrics for immediate impact.

• UX for Trust: The Gemini insight card was designed to be transparent, always stating the underlying data it was analyzing. The design ensured that human decision-makers remained in control, using the AI only for guidance, not automation.

• Responsive Architecture: Built the application for robust performance on both desktop control centers and mobile devices used by charge nurses and house supervisors on the move.

• Visualizing the Constraint: Used flow-diagram-style charts to visualize patient movement through departments, making it visually obvious where the current system constraint or bottleneck lies, from admission to discharge.

4. The Final Product: Enhanced Patient Care and Efficiency

The Hospital Operations Dashboard successfully transformed raw data into an actionable command center. By providing instant access to throughput metrics and pairing them with predictive insights from Gemini, the application allowed managers to pre-emptively address staffing and bed capacity issues. The result was a measurable reduction in the average Patient Length of Stay by 11% and a corresponding 15% decrease in the LWBS rate in the Emergency Department, directly improving patient safety and operational margin.

AI Pizza: Gamifying AI Literacy Through Progressive Learning - @ Google AiStudio

Project Overview

AI Pizza – Learn AI Slice by Slice is a self-paced, gamified learning application designed to make foundational AI concepts accessible and engaging. It utilizes a central pizza metaphor where users build comprehensive knowledge by completing individual "slices," each representing a core AI domain (e.g., Machine Learning, NLP, Computer Vision). The platform is enhanced by the Google Gemini API for personalized, context-aware challenges and immediate feedback.

Technology Stack: React, Tailwind CSS, Google Gemini API (for customized content and feedback generation) My Role: UX/UI Designer, Content Strategist, Gamification Architect

1. The Problem: Overwhelming and Abstract Learning

The field of Artificial Intelligence is often perceived as too technical, vast, and intimidating for beginners. Existing educational resources frequently suffer from:

• High Friction Start: Learners face a steep knowledge curve, leading to high abandonment rates early in the process.

• Lack of Structure: Concepts are presented linearly without clear connections to the broader AI landscape.

• Low Engagement: Traditional text and video formats lack immediate interaction, resulting in passive learning.

The objective was to design a learning experience that is approachable, provides a clear map of the entire domain, and keeps users motivated through tangible progress.

2. The Solution: Structured Gamification and AI-Powered Feedback

AI Pizza breaks down the complex field into eight manageable, visually appealing "slices," making the learning goal tangible—the completion of a full pizza.

• The Pizza Metaphor: Each of the 8 slices (modules) represents a core skill, such as "Data Preprocessing" (The Dough) or "Deep Learning" (The Sauce). A central tracker visualizes the user’s progress toward "Baking the AI Pizza."

• Gemini-Enhanced Challenges: The Gemini API is used to dynamically generate Slice Challenges (e.g., a short coding problem, a real-world scenario analysis, or a conceptual quiz) based on the specific slice content the user just finished. This ensures active recall and personalized difficulty.

• Progressive Difficulty: Modules are designed to sequentially unlock, ensuring users master fundamentals before advancing to complex topics, providing a clear "Skill Tree" structure.

• Immediate Contextual Feedback: Using Gemini, feedback on challenge submissions is detailed, encouraging, and provides immediate guidance on why an answer was correct or incorrect, mirroring a one-on-one tutoring experience.

3. My Design Process: Mapping Concepts to Visuals

The design process was driven by the principle of reducing cognitive load through visual metaphor and reward systems.

• UX Research: Metaphor Testing: Initial user interviews confirmed the pizza analogy was clear and motivating, transforming an abstract goal (learning AI) into a concrete, desirable object (a completed pizza).

• Wireframing for Flow: Focus was placed on the "Slice Selection Screen" and the "Slice Completion Reward" loop to maximize feelings of accomplishment after finishing a module.

• Aesthetic & UI/UX: Utilized a vibrant, clean design (Tailwind CSS) to create a sense of fun and approachability. The dark mode was chosen to reduce eye strain during extended learning sessions. Data visualization was minimal, focusing instead on the metaphorical progress tracker.

• Content Structuring: Collaborated with domain experts to map complex topics (e.g., neural networks) into simple, easily digestible bite-sized lessons for each slice.

4. The Final Product: A Complete Recipe for AI Fluency

AI Pizza successfully translates a complex technical curriculum into a rewarding, highly visual, and navigable learning journey. By leveraging the Gemini API for personalized, dynamic challenges, the platform has demonstrated higher user retention and faster completion rates compared to traditional courseware. The final product is a fun, effective, and unique solution for anyone looking to achieve AI fluency, slice by slice.

AI Pantry Chef: Reducing Waste with Smart, Contextual Recipes - @ Google AiStudio

Project Overview

The AI Pantry Chef (Powered by Gemini API) is a modern web application designed to combat household food waste and inspire creative cooking. Users input a list of ingredients they currently have on hand, and the platform instantly generates delicious, feasible recipes, dramatically reducing the need for last-minute grocery trips.

My Role: UX Designer, Prompt Engineer, Full-Stack Developer (with a focus on API integration)

1. The Problem: Food Waste and Culinary Fatigue

Household food waste is a massive environmental and financial burden. Users often:

• Struggle with Leftovers: Ingredients bought for a specific meal often languish in the fridge until they spoil because the user lacks inspiration for their next use.

• Experience Recipe Lock-In: Most recipe apps require users to search by dish name, not by available ingredients, forcing users to buy more items rather than use what they have.

• Face Cognitive Load: The effort required to manually search for recipes that perfectly match 3-5 random ingredients is high, leading to decision paralysis and ordering takeout instead.

The core challenge was to create an intelligent system that turns available ingredients into an inspiring list of concrete, actionable recipes.

2. The Solution: Contextual and Creative Recipe Generation

The AI Pantry Chef transforms the cooking process by leveraging advanced generative AI (Gemini API) to provide highly customized and practical culinary solutions.

• Ingredient-First Generation: Users simply list their available ingredients (e.g., "chicken breast, wilted spinach, can of chickpeas, soy sauce"). The app immediately processes this list to generate 3-5 unique recipes utilizing only those components.

• Smart Substitution & Variation: The application has a "flexibility" setting. Using the Gemini API's capacity for complex reasoning, it can offer sensible substitutions or variations (e.g., suggesting miso paste instead of soy sauce if the user indicates they have it but didn't list it).

• Recipe Structure Generation: Generated recipes are returned with a clean, structured JSON format (utilizing the API's structured output features), ensuring consistent formatting across ingredients, instructions, and estimated cooking time for an optimal user experience.

• Low-Friction UI: The design is optimized for mobile-first interaction, making ingredient entry fast and the display of the final recipe easy to follow in a kitchen environment.

3. My Design Process: Focusing on AI Reliability and Trust

The design process revolved around ensuring the AI felt like a helpful, reliable chef rather than a random suggestion engine.

• UX Research Methods:

  • User Interviews: Revealed that trust and accuracy were the most crucial factors. Users wanted recipes that were guaranteed to work and didn't require them to guess at quantities.

  • Prompt Engineering: Developed a robust system prompt for the Gemini API, instructing it to act as a world-class chef, to always include estimated quantities, and to avoid suggesting ingredients the user explicitly excluded.

• Design & Prototyping:

  • Structured Output: Key focus was placed on receiving and displaying structured JSON data from the AI rather than free-form text. This standardized the recipe card layout, improving readability and perceived professionalism.

  • Input Flexibility: Included features like Image Upload (Vision Model Integration) as a future phase, allowing users to take a photo of their fridge contents instead of manually typing, further reducing friction.

  • "Minimal Effort" Recipe Filter: Introduced a filtering option to prioritize recipes with fewer steps and shorter prep times, addressing the user pain point of cognitive overload.

4. The Final Product: Culinary Discovery and Zero Waste

The AI Pantry Chef provides a delightful and highly functional solution to common cooking dilemmas. By harnessing the creative and reasoning power of the Gemini API, the application empowers users to reduce food waste, save money, and discover unexpected culinary combinations using ingredients they already own. This project demonstrates successful integration of cutting-edge generative AI into a practical, everyday utility with a clear social benefit.

CineAI: A Modern Entertainment Booking Experience - @ Google AiStudio - Live Demo

Project Overview

CineAI is a responsive React application that redefines the entertainment booking experience. Inspired by platforms like BookMyShow, it allows users to browse movies, events, and sports, view detailed information, and simulate a seamless seat selection process. The platform's standout feature is an integrated AI-powered chat assistant that provides personalized recommendations and instant information.

My Role: UX Designer, Front-End Developer, and Product Designer (as a solo project)

1. The Problem: Information Overload & The Static Experience

Traditional entertainment booking websites often present a static, overwhelming grid of content. Users have to sift through endless lists to find something they might be interested in, and the process of finding specific information or recommendations can be clunky and slow. The key challenge was to address this by creating a dynamic, interactive, and intelligent platform that personalizes the booking journey and makes finding the perfect entertainment simple and enjoyable.

2. The Solution: An AI-Powered, User-Centric Platform

The solution was to build a modern web application that combines a beautiful user interface with the power of artificial intelligence. Key features include:

• AI-Powered Chat Assistant: The core of CineAI is a conversational AI assistant. Users can ask questions like, "What are the top-rated action movies playing this weekend?" or "What's a good movie for a family with young kids?" The AI provides instant, relevant, and personalized recommendations, transforming a tedious search into a fluid conversation.

• Seamless Browsing Experience: The platform features a clean, responsive design with clear categories for movies, events, and sports. Users can easily browse through content carousels, and a quick click or tap reveals detailed information about each title, including synopses, cast details, and trailers.

• Interactive Seat Selection: To simulate a real-world booking experience, I created a simulated seat selection module. Users can select their preferred seats on a virtual theater map, providing a preview of the booking process.

• Responsive Design: The application is built to be fully responsive, ensuring a consistent and high-quality experience across all devices, from desktops to mobile phones.

3. My Design Process: Focusing on Intuitive Interaction

My design process was centered on making the AI chat assistant feel like a natural part of the booking experience, not just a gimmick.

• UX Research: I conducted a competitive analysis of entertainment booking platforms and conversational AI interfaces. I paid close attention to the way users ask questions and the types of information they seek, which helped me design a conversational flow that feels intuitive and helpful. I also studied the most effective visual design patterns for presenting a large amount of content in a digestible, engaging way.

• Information Architecture: I designed a simple, flat information architecture that prioritizes quick access to core features. The AI chat is persistent and always available, acting as a shortcut to any information the user needs.

• Prototyping & Visual Design: I began with low-fidelity wireframes to map out the user flow, particularly for the AI chat and the seat selection process. The visual design focuses on a clean, dark theme with vibrant, eye-catching posters. I used React for its powerful component-based architecture, which allowed me to build modular UI elements for the content cards, the chat bubble, and the interactive seating chart, ensuring a scalable and consistent design.

4. The Final Product: A Glimpse into the Future of Booking

The final product is a modern, responsive, and intelligent application that showcases how AI can be seamlessly integrated into a traditional booking process. CineAI is a testament to the idea that technology should simplify and personalize the user experience. It demonstrates a forward-thinking approach to product design and development, proving that AI is not just a feature but a powerful tool for creating truly delightful and efficient digital experiences.

Key Learnings & Outcomes:

• The Power of Conversational AI: The project demonstrated that AI can be a powerful tool for enhancing user experience, transforming a static search into a dynamic, personalized conversation.

• Integration is Key: The seamless integration of the AI chat assistant into the main UI was crucial for its success, making it feel like a natural part of the application rather than an add-on.

• Building for the Future: CineAI is a glimpse into the future of entertainment booking, where technology anticipates user needs and provides a smarter, more efficient, and more enjoyable experience.