DEV Community: Siti Aisyah Mat Zainal

📝 I Didn’t Watch Google Cloud NEXT ’26 Like a Developer but I Watched It Like Someone Trying to Survive

Siti Aisyah Mat Zainal — Thu, 23 Apr 2026 09:40:01 +0000

I didn’t open Google Cloud NEXT ’26 because I was excited.

I opened it because I was scared of being left behind.

Everywhere I looked — AI agents, automation, faster builds, smarter tools.

It didn’t feel like a conference.

It felt like the future… moving without me.

🧠 The Pressure No One Talks About

People say things like:

“This will change everything”
“This makes development easier”
“You can build 10x faster now”

But no one really says what it feels like on the other side.

Because when you’re still figuring things out…

it doesn’t feel like opportunity.

It feels like pressure.

Every announcement didn’t feel like innovation.

It felt like a reminder: you need to move faster.

⚙️ So I Tried Anyway

Instead of just watching, I decided to build something.

Not for a company.

Not for a demo.

Not for the internet.

Just for me.

A simple idea:

a small eCommerce-style page
product listing
admin page
some AI-generated content

Nothing fancy.

Just something real enough to matter.

🧰 What I Used (Inspired by NEXT ’26)

AI (Gemini-style prompting / content generation)
Firebase (for backend + storage)
Custom frontend (because design matters… a lot)

🖼️ [Build Snapshot]

Not perfect. Not scalable. But mine.

💔 The Part I Didn’t Expect

The AI responded instantly.

But I didn’t.

I paused more than I thought I would.

Re-read outputs.

Adjusted prompts.

Questioned decisions.

It wasn’t “build faster.”

It was:

“Wait… is this even right?”

🪞 The Truth I Had to Face

Google didn’t make me feel powerful.

It made me realise how much I still don’t understand.

And for a moment, that feeling was uncomfortable.

Because suddenly:

tools are faster than you
outputs are instant
expectations are higher

And you’re still… human.

🧠 What Most People Are Not Saying

Let me say the quiet parts out loud:

AI doesn’t remove complexity — it shifts it
Faster tools don’t mean better decisions
You can generate code instantly… but not judgment
Building something real still requires you

📊 [Dev Flow Shift]

Caption:

We didn’t remove steps. We rearranged them.

🌱 The Shift

At some point, I stopped trying to “keep up.”

And started asking a different question:

“What do I actually want to build?”

Not what’s trending.

Not what’s fastest.

Not what looks impressive.

Just… something meaningful.

I didn’t leave Google Cloud NEXT ’26 with a polished system.

I didn’t build anything revolutionary.

But I left with something quieter.

Something more important.

The decision to keep building —

even when it feels like everything else is moving faster than you.

📚 References

Google Cloud NEXT ’26 announcements & livestreams
Community submissions under the challenge tag

🦞I Let an AI Debug My Production Bug… and It Was Right

Siti Aisyah Mat Zainal — Wed, 22 Apr 2026 06:03:15 +0000

I spent 3 hours debugging a bug.

The AI solved it in 30 seconds.

That’s when I realized:

👉 We’re not debugging the same way anymore.

⚠️ The Bug That Didn’t Make Sense

I was working on a real feature:

Trading partner selection
Auto-populated buyer details
React + async API

Everything looked correct:

API response ✅
Backend logic ✅
No errors ❌

But…

👉 The dropdown randomly stopped working.

Not always.
Not consistently.
Just enough to be frustrating.

🧠 The Breaking Point

After hours of:

checking logs
watching network calls
re-reading code

I stopped and thought:

What if I could get help debugging this like how a senior developer would approach it?

So I built a small AI agent using OpenClaw to analyze the issue.

🤖 The Experiment: AI Debugging Agent

Instead of guessing, I gave the AI structured input.

Input:

{
  "issue": "Dropdown disabled after selecting trading partner",
  "apiResponse": "valid",
  "state": {
    "tradingPartnerIdNumber": "exists",
    "displayList": []
  },
  "effectDependencies": ["tradingPartnerIdNumber"]
}

🧠 AI Output
Possible issue detected:

displayList is empty when useEffect runs.

This suggests a race condition.

Suggested fix:
Include displayList in dependencies.

🧩 What Was Actually Happening

The issue was a race condition.

The effect was running too early—before the data was ready.

Flow:
User selects trading partner
↓
useEffect runs immediately
↓
displayList not ready
↓
autofill fails
↓
UI becomes inconsistent

🛠️ The Fix

❌ Before

useEffect(() => {
  if (tradingPartnerIdNumber) {
    autofillBuyerDetails();
  }
}, [tradingPartnerIdNumber]);

✅ After

useEffect(() => {
  if (tradingPartnerIdNumber && displayList.length > 0) {
    autofillBuyerDetails();
  }
}, [tradingPartnerIdNumber, displayList]);

📊 Result
Dropdown works consistently
No more random failures
No backend changes needed

💡 What This Taught Me

Most Bugs Are Timing Problems

Not logic. Not syntax. Timing.

Debugging Is Pattern Recognition

And AI is surprisingly good at spotting patterns quickly.

Structured Debugging Works

Instead of guessing, breaking problems into inputs + analysis leads to faster solutions.

⚔️ Why OpenClaw Helped

Using OpenClaw made it possible to:

structure debugging input clearly
reuse the same approach for future issues
treat debugging like a repeatable system

Instead of a one-time answer, it becomes a workflow.

🚀 Final Thought

This started as a small UI bug.

But it changed how I think about debugging.

Instead of trial and error, we can move toward:

👉 systematic, assisted debugging

And this is probably just the beginning.

🌱 Green Habit Tracker

Siti Aisyah Mat Zainal — Fri, 17 Apr 2026 08:43:21 +0000

This is a submission for Weekend Challenge: Earth Day Edition

🌱 Green Habit Tracker: Turning Small Actions into Real Impact with AI

What I Built

Sustainability is something many people care about but in reality, it often feels overwhelming, abstract, or difficult to maintain consistently.

I built Green Habit Tracker, a mobile-first web app that makes eco-friendly living feel simple, motivating, and rewarding.

Instead of focusing on big lifestyle changes, the app encourages users to take small daily actions like:

Bringing a reusable bottle
Avoiding plastic straws
Turning off unused lights

Each action contributes to:

🌟 Points
🔥 Daily streaks
🌍 Measurable environmental impact

To make the experience more personal, the app uses Google Gemini to generate AI-powered eco tips based on the user’s actual completed habits, turning generic advice into meaningful, contextual guidance.

Demo

👉 Live Demo: https://greentrackerai.netlify.app/

🎥 Video Walkthrough: (will put it on 19/4 - video is still in progress)

Key Screens:

Onboarding & habit selection
Daily mission dashboard
Reward animations on completion
AI-powered eco insights
Environmental impact tracking

Code

🔗 GitHub Repository: https://github.com/aisyahz/-Green-Habit.git

How I Built It

🧩 Frontend

React (Vite) + TypeScript
Mobile-first layout with a responsive desktop showcase
Component-based architecture for scalability

🎨 UI/UX Design

Custom dark forest green theme inspired by nature
Glass-morphism cards and soft gradients for a premium feel
Clean typography and minimal icons (eco-focused)
Floating bottom navigation for mobile-native experience

⚙️ State & Logic

Local state + localStorage persistence
Habit tracking system:
- Users select eco habits
- Mark them as completed daily
- Earn points and build streaks
Impact calculation:
- Each habit contributes to estimated CO₂ reduction

🎮 Gamification

To make the experience engaging:

🎯 Points system for every completed habit
🔥 Daily streak tracking
🎉 Completion animations:
- “+10 pts” floating reward bubble
- Card scale + icon bounce interactions
📊 Progress visualization through charts and stats

🤖 Google Gemini Integration

One of the key features is AI-powered eco guidance using Google Gemini.

Instead of showing generic tips, the app:

Tracks completed habits
Sends them as context to Gemini
Generates personalized, encouraging eco advice

Example prompt:

“Based on these completed eco habits today: [list], give a short encouraging eco-friendly tip.”

This makes the experience:

More relevant
More human
More motivating

Prize Categories

🏆 Best Use of Google Gemini

This project uses Gemini to:

Generate personalized sustainability tips
Adapt responses based on real user behavior
Provide contextual encouragement instead of static content

Why I Built This

Many sustainability apps focus on tracking or data, but I wanted to focus on something different:

Making eco-friendly living feel achievable and rewarding.

By combining:

small daily habits
visual progress
and AI-driven encouragement

the goal is to help users feel:

less overwhelmed
more consistent
and more connected to their impact

What I Learned

How to design a gamified user experience that feels rewarding without being complex
How to integrate AI meaningfully, not just as a feature, but as part of the user journey
The importance of micro-interactions (animations, feedback) in making an app feel alive
How to balance simple logic with strong UX storytelling in a short hackathon timeframe

Final Thoughts

Green Habit Tracker is a simple idea:

Small habits, done consistently, can lead to meaningful change.

With the help of AI, those habits become not just actions
but a guided, encouraging journey toward a more sustainable lifestyle 🌍✨

Pour Decisions: An April Fools Anti-Game About Futile Effort

Siti Aisyah Mat Zainal — Thu, 02 Apr 2026 07:08:56 +0000

This is a submission for the DEV April Fools Challenge

What I Built

Pour Decisions — an interactive anti-game where you try to pour tea into a teapot… that absolutely refuses to cooperate.

It starts like a calm, elegant tea ritual.
Soft colors. Peaceful vibe. Simple task.

Then the teapot moves.

Then it runs.

Then it judges you.

The entire experience is designed to feel:

Almost doable
Slightly unfair
Increasingly ridiculous

There is no real “win”.

Only effort.
And regret.

Demo

🌐 Live Demo: https://pourdecision.netlify.app/

Try it yourself… if you think you can beat a teapot.

Code

💻 GitHub Repo: https://github.com/aisyahz/Pour-Decision

How I Built It

This project is a mix of UI playfulness, real-time interaction, and just enough chaos to make users question their life choices.

Tech Stack
React 19 (functional components + hooks)
Vite for fast dev/build
TypeScript
Tailwind CSS 4 for styling
motion/react for smooth, physics-based animations
Lucide React for icons
canvas-confetti for the fake “victory”
Key Technical Ideas
🫖 Teapot Avoidance Logic

The teapot constantly tracks the cursor position and moves away when you get close.

Global mousemove listener
Distance-based reaction
Increasing difficulty (aka frustration scaling)
☕ Pouring System

Click and hold = pouring tea.

State-driven pouring (isPouring)
Interval loop updates progress + triggers effects
Tea stream rendered via SVG/Canvas component
🔊 Procedural Audio (no files!)

Used the Web Audio API to generate sound in real-time:

OscillatorNode
GainNode

So the pouring sound is actually synthesized, not imported.

🎬 Animation System

Using motion/react:

Spring-based transitions (for smooth but playful movement)
AnimatePresence for UI elements appearing/disappearing
Teapot movement feels slightly alive (and annoying)
🧠 State & “Frustration Engine”

Tracked things like:

Mouse position
Pouring state
Progress
Hidden “frustration level”

As frustration increases:

Teapot reacts faster
UI becomes less trustworthy
Success becomes… questionable
🎨 Design Language

Theme: Elegant Frustration

Soft tea-inspired palette (porcelain, tea-brown, warm tones)
Serif typography → feels calm & refined
But behavior → chaotic, uncooperative, slightly evil

The contrast is the joke.

Prize Category

🏆 Community Favorite

Because this is:

Highly relatable (we’ve all fought UI like this)
Shareable (“I lost to a teapot” energy)
Simple concept, but strong emotional reaction (frustration + laughter)

Also… I think everyone deserves to experience being outplayed by a teapot at least once.

Final Thoughts

This project is basically a tribute to:

forms that almost submit
buttons that move away
bugs that disappear when you debug
and systems that almost work

You did everything right.
Productivity: 0%.

If you tried it…
be honest:

Did you actually think you could win? 😭

Choose Your Burnout

Siti Aisyah Mat Zainal — Thu, 02 Apr 2026 06:25:15 +0000

This is a submission for the DEV April Fools Challenge

Choose Your Burnout
The inevitable simulation of modern work culture.
What I Built

I built a game that solves absolutely nothing.

Choose Your Burnout is a dark, choice-based simulation where every path leads to the same destination: a slow, optimized collapse.

You start by selecting your career:

The Corporate Labyrinth
The Disruptive Alchemist (Startup)
The Freelance Mirage
The Academic Basement
The Gig Economy Engine

From there, you make decisions that trade:

Sanity
Sleep
Energy

…for:

Money
Ego
and the illusion of progress

There is no winning state.

Only different versions of “this seemed like a good idea at the time.”

Demo

🔗 Live Demo:
[👉https://ai.studio/apps/321d42d6-cfd6-4624-89dc-ed8934b60f87?fullscreenApplet=true]

Code

🔗 GitHub Repository:
[👉 https://github.com/aisyahz/Choose-Your-BurnOut.git]

How I Built It

This project is powered by:

React + Vite – for fast iteration and a clean component structure
Tailwind CSS – for brutalist, high-contrast UI control
Framer Motion (motion/react) – for cinematic transitions, glitches, and subtle tension
SVG + layered rendering – to build the “Digital Mask” face system
The Burnout Engine

At the center of the experience is a reactive face:

A pseudo-3D Digital Mask that evolves based on your stats.

Sleep ↓ → eyes droop and blink irregularly
Sanity ↓ → asymmetry, glitches, red flickers
Energy ↓ → head tilts, movement slows
Ego ↑ → forced, unsettling smile
Money ↓ → structural fragmentation

It doesn’t just display stats.
It becomes them.

Key Features
🧠 The Burnout Engine

A living, degrading face that reacts to every decision.

🧭 Thematic Career Paths

Each path has its own visual and psychological identity:

Corporate → structured, grid-like, suffocating
Startup → chaotic, pulsing, unstable
Freelance → fragmented, isolated
Academic → slow decay, heavy inertia
Gig → fast, repetitive, algorithm-driven
🧪 Premium Glitch Aesthetic

A sculpted dark UI with:

chromatic aberration
flickering overlays
system logs
subtle instability

Everything feels… almost under control.

📸 The Screenshot Weapon

At the end, you receive a final report:

A dramatic “digital eulogy” of your decisions.

Designed to be shared.
Designed to hurt.

The Vibe

Polished.
Cold.
Slightly accusatory.

It looks like a productivity tool.
It behaves like a breakdown.

Why I Built This

I wanted to explore a simple idea:

What if we treated burnout like a system…
and optimized it?

Not to fix it.
Just to measure it. Beautifully.

Prize Category
🎯 Community Favorite

This project is designed to be:

instantly understandable
visually memorable
screenshot-worthy
painfully relatable
Final Line

“You did everything right.”
Productivity: 0%

Hashtags

ChooseYourBurnout #GameDev #IndieGame #UIUX #BurnoutEngine #DigitalArt #WebDev

One security alert changed how I think about dependencies

Siti Aisyah Mat Zainal — Wed, 01 Apr 2026 02:46:40 +0000

In 2026, we saw something that many developers don’t expect to deal with early in their career:

👉 A supply chain attack on a popular npm package.

This package is widely used for making HTTP requests — something almost every frontend project depends on.

⚠️ What happened?

A malicious version was briefly published to npm.

For projects using:

"package-name": "^x.x.x"

npm could automatically install a newer version — including the compromised one — during npm install.

That means:

👉 You don’t need to change your code
👉 You don’t need to update anything manually
👉 Just installing dependencies could pull in malicious code

🧠 What I learned

This incident made me realize:

Dependency management is security

Using ^ feels harmless… until it isn’t.

Auto-upgrading dependencies can introduce:

breaking changes
vulnerabilities
or even malicious code

Not all “vulnerabilities” are equal

After running npm audit, there were many warnings.

But the real question is:

👉 Which ones actually matter?

Some are dev-only tools
Some are indirect dependencies
Some have no real runtime impact

Understanding context is more important than blindly fixing everything.

Don’t rush to “fix everything”

It’s tempting to run:

npm audit fix

But in real projects:

it may introduce breaking changes
it may conflict with production versions
it may override controlled dependencies

Sometimes the correct action is:
👉 do nothing — and escalate properly

Align with production, not assumptions

Instead of upgrading to the “latest version”, the safer move was:

👉 Pin to a known safe version already used in production

🛡️ Final takeaway

Security isn’t just about backend or infrastructure.

Sometimes it’s as simple as:

👉 a single line in package.json

"dependency": "^x.x.x"
💡 As developers, we should:
Be careful with version ranges (^, ~)
Understand what our dependencies actually do
Treat npm install as a potential risk surface
Think before upgrading — not just react
🚀 Personal note

This was one of those moments where I realized:

Being a developer is not just about writing code…
It’s about understanding the system, the risks, and the impact of small decisions.

SoftwareEngineering #WebDevelopment #FrontendDeveloper #JavaScript #ReactJS #NodeJS

My SV Was Right Again… And I Finally Get It

Siti Aisyah Mat Zainal — Mon, 30 Mar 2026 04:01:35 +0000

I had one of those moments today.

The kind where you think you're solving the requirement…
but your senior is actually thinking 3 steps ahead.

At first, I was focused on:

👉 “Can we do this feature or not?”

Simple.

User deletes a Workgroup → system reassigns everything to default.
Done. Works. Ship it. 🚀

Then my SV raised a concern.

Not about implementation.
But about impact.

😶 The moment it hit me

What if the user made a mistake?

They delete a Workgroup…
everything silently moves to default…

Then later:

“Eh… can I revert back?”

And suddenly you realize:

❌ No history
❌ No undo
❌ No tracking
❌ No easy recovery

💥 The real problem

👉 We allowed a destructive action without a safety net

😭 Who handles it next?

Not the system.

👉 Support team
👉 Developer (me 🥲)
👉 SV

User:

“Can help fix my data?”

Me:

“...let me open DB manually”

🧠 That’s when it clicked

Being a developer is not just:

👉 Can we build this?

It’s:

👉 Should we build this?

🔥 Why this matters (real world)

Big systems don’t allow silent data movement.

Because:

data ownership matters
audit trail matters
mistakes are expensive
users don’t always realize impact
🎯 What I learned today

There are always options:

Option A — Safe

Block deletion if in use

Option B — Convenient

Auto reassign (risky)

Option C — Thoughtful

Allow it, but:

show impact
warn user
track changes
🧠 The real upgrade

Today I didn’t learn new code.

I learned how to think like:

👉 system owner
👉 not just developer

🙌 Final thought

Your senior isn’t blocking you.

They’re protecting the system
from problems you haven’t seen yet.

And yeah…

My SV was right. Again 😂🔥

Before the Code, There Was Curiosity - The Mind of a Woman Developer

Siti Aisyah Mat Zainal — Tue, 10 Mar 2026 16:04:00 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Show us your Art

🌌 Live Interactive Experience

Explore the installation here:

👉 https://womenmind.netlify.app

This piece is designed to be experienced interactively.

Users navigate a living neural constellation where each node represents a cognitive force that shapes how developers think and create.

The journey begins with curiosity and expands into a constellation of ideas, ultimately connecting modern developer mindsets to the pioneers who helped shape computing history.

The artwork combines:

• interactive constellations

• neural network metaphors

• cinematic motion

• generative particle systems

The goal is to transform abstract developer traits into something visual, explorable, and alive.

Inspiration

Technology history is filled with brilliant pioneers whose contributions shaped modern computing. Many of these innovators—like Ada Lovelace, Grace Hopper, and others—pushed the boundaries of what technology could become.

This project was inspired by a question:

What if we could visualize the mindset behind innovation itself?

Instead of representing developers through resumes or technical skills, I wanted to represent the cognitive forces that drive innovation:

• curiosity that sparks discovery

• creativity that imagines new possibilities

• logic that structures ideas into systems

• empathy that keeps technology human-centered

• collaboration that turns ideas into reality

By visualizing these forces as a living constellation, the experience becomes less about individual achievement and more about shared lineage and collective progress in technology.

The constellation metaphor also reflects how ideas travel through time—how today's developers are influenced by the pioneers who came before them.

My Code

The full source code for this project is available here:

🔗 GitHub Repository

https://github.com/aisyahz/women-mind-developer

Key technologies used:

• Next.js 15 (App Router)

• React 19

• TypeScript

• Framer Motion for cinematic animation

• SVG + Canvas rendering for constellation visualization

• Tailwind CSS for styling

Core component:

NeuralConstellation.tsx

This component orchestrates the constellation system, including:

• dynamic node rendering

• orbital particle systems

• neural thread connections

• curiosity-triggered expansion animation

• insight shard discovery system

The project focuses on combining interactive storytelling with modern web animation techniques to create an experience closer to digital art than traditional UI.

A cinematic interactive constellation exploring curiosity, creativity, and the shared lineage of women in technology.

wecoded

frontend

webdev

javascript

showdev

One Sentence From My Senior Engineer Changed How I Think About Software

Siti Aisyah Mat Zainal — Mon, 09 Mar 2026 03:36:02 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

One Sentence From My Senior Engineer Changed How I Think About Software

When I first started working as a developer, my knowledge was everywhere.

Some notes were in notebooks.
Some were in sticky notes.
Some were in screenshots.
Some were buried inside ChatGPT conversations.

And when I needed to remember how something worked… I had to search through chaos.

At the time, I thought this was normal. I was learning fast, solving problems, writing code, fixing bugs. I believed the important part was simply getting things to work.

Then one small comment from my senior engineer changed how I think about development.

The Moment I Realized Something Was Missing

One day my senior reviewed how I tracked development information and said something simple:

“Your notes are scattered.”

It wasn’t criticism in a harsh way. It was more like an observation from someone who had spent 20 years designing systems and architectures.

I started paying attention to how she worked.

Everything she did had structure.

Documentation.
Functional specifications.
Technical notes.
System flow explanations.

When she needed to revisit something months later, she didn’t search randomly.

She knew exactly where the information lived.

That moment made me realize something important.

Being a developer is not just about writing code.

It’s about building systems that your future self and your team can understand.

Learning to Think Like an Engineer

As a junior developer, most of my energy went into solving immediate problems:

• Why is this API failing?
• Why is the database returning this value?
• Why is this UI component breaking?

But experienced engineers think differently.

They think about:

• traceability
• documentation
• architecture decisions
• long-term maintainability

I started reorganizing everything.

Instead of scattered notes, I began structuring information by:

Development tasks
System flows
Backend services
Frontend behaviors
Database logic

Even ideas from debugging sessions or conversations with colleagues were captured and categorized.

Slowly, things started to change.

When I returned to a problem weeks later, I could understand it immediately.

A Quiet Skill Many Developers Ignore

Something I noticed while working in tech is that documentation is often underestimated.

Many developers focus only on writing code.

But good documentation does something powerful.

It turns knowledge into something shareable and reusable.

It helps teammates understand decisions.

It helps future developers maintain systems.

And most importantly, it helps you grow faster, because you can see patterns in your own learning.

What This Means for Underrepresented Developers

For many of us entering tech without traditional guidance, we often learn through trial and error.

We pick up skills piece by piece.

But mentorship — even small moments of guidance — can change everything.

One sentence from a senior engineer made me rethink how I approach my entire workflow.

Not because she gave a lecture.

But because she demonstrated what experience looks like in practice.

The Lesson I Carry Forward

Today, I still make mistakes.

I still get stuck debugging.

I still ask questions.

But one thing changed permanently.

I no longer see development as just writing code.

I see it as building systems of knowledge.

And sometimes the biggest growth in your career doesn't come from a complex algorithm or a new framework.

Sometimes it comes from a simple moment when someone more experienced quietly shows you a better way to think.

And you decide to learn from it.

If you're early in your developer journey, here's something I wish someone told me earlier:

Write code, yes.

But also write down why the code exists.

Your future self will thank you.

[Boost]

Siti Aisyah Mat Zainal — Fri, 06 Mar 2026 14:39:19 +0000

Join the Notion MCP Challenge: $1,500 in Prizes!

Jess Lee for The DEV Team ・ Mar 4

#notionchallenge #devchallenge #mcp #ai

[Boost]

Siti Aisyah Mat Zainal — Fri, 06 Mar 2026 08:20:23 +0000

🐾FurEver Care AI — Turning Pet Health Observations into Vet-Ready Timelines with Notion + AI

Siti Aisyah Mat Zainal ・ Mar 6

#notionchallenge #ai #mcp #devchallenge

🐾FurEver Care AI — Turning Pet Health Observations into Vet-Ready Timelines with Notion + AI

Siti Aisyah Mat Zainal — Fri, 06 Mar 2026 08:00:28 +0000

This is a submission for the Notion MCP Challenge

Quick Summary

FurEver Care AI is an AI-assisted pet health observation system built with Next.js, Notion, and Google Genkit + Gemini.

The system helps caregivers:

• record daily health observations
• detect wellness patterns
• generate structured veterinary summaries

By turning simple daily notes into structured Notion records, the system helps veterinarians understand symptom timelines more clearly.

What I Built

This project continues from my previous FurEver Log challenge entry.

In this version, I expanded the idea into a full system that combines:

• structured observation logging
• AI pattern analysis
• veterinary briefing tools

The goal is simple: help caregivers capture daily observations, organize them in Notion, and generate vet-ready summaries automatically.

The Problem

When a pet becomes sick, something unexpected happens.

You become a full-time observer.

You start noticing things you never paid attention to before:

• How much they eat
• Whether they still play
• If they used the litter box
• How long they stay inside it
• Whether their breathing feels faster
• If their energy feels “different”

But when the veterinarian asks questions like:

“When did the appetite change?”
“How many times did vomiting occur?”
“Has the energy been declining over the last few days?”

Many caregivers struggle to answer accurately.

Not because they don't care.

But because stress makes memory unreliable.

Information ends up scattered across:

• chat messages
• photos
• notes apps
• memory
• vet receipts

Reconstructing the timeline becomes incredibly difficult.

The Inspiration

This project was inspired by caring for my cat Abu.

When Abu got sick, I started writing small daily observations:

• appetite
• energy
• vomiting
• medications
• vet notes

But those records were scattered everywhere.

And when things became serious, I realized something painful:

The most important information about Abu's health was the hardest to organize.

So I built FurEver Care AI.

A system that helps caregivers turn everyday care observations into structured health timelines and vet communication tools.

What FurEver Care AI Does

FurEver Care AI is a Notion-powered health observation system for pet caregivers.

It transforms daily observations into structured health records and AI-assisted insights.

Features
🫀 Vitals Tracking

A real-time heart rate timer allows caregivers to tap along with their pet’s pulse to automatically calculate BPM.

This allows monitoring heart rate changes without needing special equipment.

🚽 Bathroom Monitoring

Daily tracking for important health signals:

• Poo presence
• Pee frequency
• Time spent in litter box
• Straining or accidents

These are often early indicators of illness but are rarely documented consistently.

📓 Daily Health Logs

Caregivers record:

• appetite level
• energy level
• symptoms
• medications
• observations
• notes

Each entry becomes a timestamped health record inside Notion.

🧠 AI Risk Assessment

Using Google Genkit + Gemini, the system evaluates each log and assigns a status:

• Normal
• Monitor
• Urgent

This helps caregivers quickly understand when a pattern might require attention.

Important note:

The AI does not diagnose illness or recommend treatment.
It only organizes observations.

📊 Trend Detection

The system compares recent logs and identifies patterns like:

• declining appetite
• persistent vomiting
• energy drops

These patterns appear as AI observations for the caregiver.

📈 Health Trend Visualizer

One challenge with daily observations is that patterns are difficult to see in plain text.

A small appetite change today may not feel important.

But across several days, a pattern might emerge.

To help detect gradual changes, I added a Health Trend Visualizer.

The chart maps:

• appetite levels
• energy levels

across recent logs.

If a specific pet is selected (for example Abu), the system switches to a Pet-Specific Trend View showing recovery or decline over time.

If no pet filter is applied, the chart shows a global overview of recent observations.

This turns simple logs into visual wellness trajectories.

📄 Vet Brief Generator

Before a veterinary visit, caregivers can generate a structured briefing document containing:

• symptom timeline
• observation patterns
• medication history
• AI-generated questions to ask the vet

The brief can also be exported as a professional PDF for clinic visits.

🤍 Care Moments

Illness monitoring can be emotionally exhausting.

So the app also allows recording small care moments, such as:

• extra cuddle time
• quiet companionship
• comfort routines

Because caregiving isn’t only clinical.

It’s emotional.

Screenshots
Daily Health Log

AI Insights Dashboard

Health Trend Visualizer

Vet Assistant

Live Demo

You can test the application here:

Demo:
https://furever-careai.netlify.app/

Try the following flow:

1️⃣ Record a Daily Health Log
2️⃣ View the record syncing to Notion
3️⃣ Run AI wellness analysis
4️⃣ View the health trend chart
5️⃣ Generate a Vet Brief
6️⃣ Export the summary as PDF

Video Demo

demo

jumpshare.com

Suggested walkthrough:

Record a Daily Health Log

Show the entry syncing into Notion

Run AI wellness analysis

Show trend visualization

Generate a Vet Brief

Export the report as PDF

Repository

GitHub:

https://github.com/aisyahz/FurEver-Care-AI--Pet-Health-Copilot-

The project includes:

• Notion API integration
• Genkit AI workflows
• real-time observation logging
• wellness trend visualization
• vet briefing generation
• PDF export

System Architecture

The system follows a simple architecture:

Caregiver Input (Next.js UI)
↓
API Routes
↓
Notion Database (Source of Truth)
↓
AI Analysis (Genkit + Gemini)
↓
Insights Dashboard + Vet Brief

This keeps the caregiver in control of the raw data while AI assists with interpretation.

How I Used Notion MCP

Notion MCP enables AI agents to interact directly with structured Notion databases.

In this project, Notion serves as the source of truth for all health records.

Using MCP, the AI agent can:

• read Daily Health Logs
• analyze recent entries
• tag records as Normal / Monitor / Urgent
• generate follow-up caregiving tasks
• create structured Vet Visit Briefs

All outputs are written back into Notion, keeping the system transparent and editable.

This makes the system human-in-the-loop rather than AI-controlled.

Challenges I Faced

One challenge was ensuring the Notion database remained the single source of truth.

Because AI observations are written back into the same database, the schema had to be carefully designed so that:

• caregiver inputs remain editable
• AI fields remain distinguishable
• system metadata does not interfere with manual records

Another challenge involved managing AI rate limits when generating vet summaries and analysis.

To avoid excessive API usage, the system analyzes only the most relevant recent health logs.

Why Notion Works So Well Here

Notion provides:

• structured databases
• flexible schema design
• relational data
• API access
• AI workflow compatibility

This makes it ideal for human-centered caregiving systems.

Instead of replacing human judgment, the system:

• organizes observations
• highlights patterns
• improves communication with professionals

The Bigger Goal

This project isn't about replacing veterinary care.

It's about solving a quieter problem:

When someone is caring for a sick animal, the hardest part is remembering everything accurately.

FurEver Care AI helps caregivers turn daily observations into reliable timelines, allowing veterinarians to focus on treatment instead of reconstructing history.

And maybe, just maybe, it helps caregivers feel a little less overwhelmed.

Inspired by Abu

FurEver Care AI was inspired by caring for a cat named Abu.

Abu reminded me that careful observation, patience, and presence matter more than perfect records.

This project simply tries to make those observations easier to keep.

If it helps even one caregiver communicate their pet's condition more clearly to a veterinarian, then it has already served its purpose.