DEV Community: cutieyunny-tech

The Justice Stabilizer: Postgres as the Brain of Agentic Cognitive Forensics

cutieyunny-tech — Thu, 23 Oct 2025 08:46:09 +0000

This is a submission for the Agentic Postgres Challenge with Tiger Data

What I Built
The Justice Stabilizer (TJS) is a novel Agentic AI framework designed to solve the problem of unreliable eyewitness testimony—the leading cause of wrongful convictions. My inspiration was the realization that human memory is a 'poor camera' under stress.

TJS transforms the process by replacing flawed memory recall with verifiable, objective cognitive evidence. The system works by forcing the witness into a state of Cognitive Suction—eliminating emotional and sensory distractions (known as Flame Suction) to ensure they focus only on rational structures of the suspect's face.

I used Agentic Postgres to create a Cognitive Memory Vault that manages not just the facts of the case, but the mental pattern of the witness. This allows investigators to query the system based on how the witness's mind worked, which is the key to verifiable evidence.

Demo

Codepen Demo Link
https://codepen.io/nad-Yunny/pen/LEGdvZG

How I Used Agentic Postgres
Postgres is the central nervous system of TJS, acting as the logic engine that allows the AI Agents to reason, secure, and compare cognitive evidence. I leveraged three key Agentic features:

Vector Embeddings for Semantic Cognitive Search

Jargon TJS: Cognitive Suction Pattern Analysis.

Postgres Use: I used the pgvector extension to enable semantic search on the witness's mental focus patterns. When the Witness Data Stream is processed, the AI generates a detailed text summary of the rational focus (the Cognitive Suction pattern). This text is converted into a vector embedding and saved in a dedicated Postgres column.

Creativity: This allows the investigator to query: "Find all past witnesses who were mentally distracted by complex colors," even if they haven't explicitly mentioned the distraction. Postgres searches for semantically similar gaze patterns across all cases, validating current testimony based on underlying cognitive reality.

Postgres Triggers for Autonomous AI Agent Activation

Jargon TJS: Flame Suction Processing.

Postgres Use: I utilized Postgres Triggers to manage the Agentic workflow. When a new batch of witness data is completed and entered into the Forensics Log, a Postgres Trigger immediately fires an external function (via Tiger CLI integration) to launch the Cognitive Analysis Agent.

Creativity: This creates an autonomous, event-driven pipeline. The database itself dictates when the analysis of Flame Suction metrics (external noise/distraction) must begin, ensuring that the AI processing is tied directly to the data transaction's integrity.

Advanced Indexing for Ethical Friction and ZK Proof

Jargon TJS: Ethical Friction (Zero-Knowledge Proof).

Postgres Use: TJS must ethically protect the sensitive raw mental data. To enforce the Ethical Friction mandate, Postgres stores only the final Certified Reliability Score (CRS) alongside a Zero-Knowledge Proof (ZK Proof) hash. We use specialized indexing to ensure the court can only query the CRS Score and the final validated fact, not the raw, sensitive cognitive data. This uses the database layer to enforce ethical boundaries.

Overall Experience
Building TJS with Agentic Postgres was transformative. I learned that Postgres is far more than a simple storage layer; it is a powerful reasoning engine capable of managing complex AI workflows.

What Worked Well: The combined power of Postgres Triggers and pgvector was exceptional. The Triggers created a reliable event queue, and the vector search immediately provided a way to perform semantic verification—a capability traditional SQL databases could never offer.

What Surprised Me: I was surprised by how much simpler the architecture became by letting Postgres handle the orchestration. Instead of relying on complex message queues, the database became the single, secure, and performant command center for every step of the Agentic analysis, truly making it the brain of the system.

This project, The Justice Stabilizer, is being submitted as an Architectural Concept. I used Codepen to demonstrate Cognitive Suction (the AI's capability) and pgvector search to prove the ability of Agentic Postgres to perform semantic searches on mental patterns. Due to data privacy concerns, the project is not deployed on Tiger Cloud, but all its core features are designed to function using Tiger CLI and pgvector.

Neuro-Fin Agent (NFA) platform

cutieyunny-tech — Sat, 18 Oct 2025 06:01:30 +0000

This is a submission for the Auth0 for AI Agents Challenge

What I Built
I built the Neuro-Fin Agent (NFA) platform, a multi-agent system designed to provide executive function support for financial management, securely authenticated by Auth0.

The NFA tackles the problem of impulsive spending, especially through Buy Now, Pay Later (BNPL) services, which critically impacts users facing challenges like ADHD or high Burnout (a key finding from my prior research).

The core of the application is a secure UI where two specialized AI Agents operate:

Impulsivity Detection Agent (IDA): A simulated agent that constantly flags transactions exhibiting high-risk patterns.

Behavioral Nudge Agent (BNA): When a risk is flagged, this agent delivers a personalized psychological intervention (nudge), such as a "Wait 24 Hours" contract pop-up, designed to introduce friction and prevent impulsive actions.

The platform's frontend focuses on demonstrating the secure login, the risk dashboard, and the critical BNA intervention flow.

Demo

https://codepen.io/nad-Yunny/pen/GgoyrOv

Key Interaction Flow Demonstrated on CodePen:

Secure Login Simulation: A button demonstrating the initiation of the Auth0 Universal Login flow.

Dashboard View: The main UI showing the user's "Impulsivity Risk Score" (set to HIGH by the IDA agent).

BNA Intervention (Critical Demo Point): A button/simulated action triggers a full-screen "STOP & THINK" modal, representing the BNA agent successfully intercepting a high-risk BNPL action based on a valid Auth0 token for that user.

How I Used Auth0 for AI Agents
I leveraged Auth0 to solve the critical identity and security issues involved in managing sensitive financial and behavioral data, crucial for the trust required for an AI Financial Guardian.

User Authentication and Identity (Securing the Human)

Universal Login: Implemented the standard Auth0 Universal Login flow for the human user, ensuring a secure, standards-compliant entry point.

Role-Based Access Control (RBAC): Although the full backend isn't in CodePen, the UI design clearly reflects two roles: the Financial_Owner and a Trusted_Guardian (a family member/therapist). This RBAC logic, managed by Auth0, is vital for allowing secure monitoring access without compromising the owner's primary control.

Securing Agent Access (Machine-to-Machine)

Simulated M2M Flow: The Impulsivity Detection Agent (IDA) is a non-human service that needs to communicate securely with the application's API (to log spending data) and with the BNA agent.

Agent Identity: The architecture requires the IDA to use Auth0's Client Credentials Flow (Machine-to-Machine) to obtain an access token. This token grants the IDA a secure, verifiable identity, ensuring our backend API only accepts data from the authorized AI agent, not a rogue third party. The CodePen's interaction logic depends on the successful completion of this Auth0 process (simulated) to execute the BNA nudge.

Lessons Learned and Takeaways
Challenges

The primary challenge in conceptualizing this project was marrying the real-time nature of impulsivity detection with the overhead of secure authentication. I had to design the architecture to ensure that the AI Agent's token validation and subsequent action (the BNA intervention) were near-instantaneous. A fractional delay can mean the difference between preventing an impulse purchase and merely reporting it afterward.

Key Learnings

AI Agents Require First-Class Identity: The most significant takeaway is that AI agents are autonomous users, and they must be treated as such. Auth0's Machine-to-Machine flow is the ideal solution because it provides a dedicated, auditable identity for the IDA, which is crucial when dealing with sensitive financial data.

Security Enables Innovation: By abstracting the complex authentication and authorization rules to Auth0, I could focus the core logic of the application on the Behavioral Nudge Agent (BNA), proving that robust security is the enabler of innovative, high-trust AI applications, not a roadblock.

Advice for Other Developers

If your AI agent performs critical, irreversible actions (like sending funds, or in this case, stopping a transaction), do not rely on static API keys. Implement Asynchronous Authorization (a core Auth0 feature) to introduce a human-in-the-loop step for truly sensitive actions. Always treat your agents' secrets and access scopes as seriously as your users' passwords.

Meta-Shield: The Protector Ghosts

cutieyunny-tech — Sat, 18 Oct 2025 05:48:37 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built
I built Meta-Shield: The Protector Ghosts, a polished, functional landing page for a hypothetical Halloween-themed NFT collection.

The theme chosen is a dark, modern twist on the spooky season: "Empathetic Haunting." The NFT characters are not merely monsters but Protector Ghosts, symbolizing defense against social issues like bullying and online grooming (drawing inspiration from my academic background). The aesthetic uses a deep purple, burnt orange, and black color palette to create a high-contrast, atmospheric look that perfectly captures the modern Halloween spirit while driving commercial urgency.

The primary technical goal was to demonstrate strong frontend fundamentals through responsive design, functional JavaScript, and immersive interactive effects.

Demo

[Link to Live CodePen/Hosting Demo Here] !

https://codepen.io/nad-Yunny/pen/vELpgZg

Journey
Process & Key Technical Features

My development process focused on achieving a high-quality user experience that blends spooky aesthetics with necessary e-commerce functionality:

Immersive Hero Section: I used pure CSS @keyframes and background manipulation to create a subtle, dark ambient movement (simulating fog or a restless spirit) in the background. This establishes an immediate immersive mood without relying on heavy video or libraries, ensuring fast loading times.

Functional Countdown Timer: The core of the page's urgency is the live, working JavaScript countdown timer. I used vanilla JS to handle date objects and state updates every second, ensuring the time remaining until the drop is displayed accurately, which is crucial for any Perfect Landing page.

Interactive 3D Tilt Cards: I am particularly proud of the 3D Tilt effect applied to the NFT preview cards. This was achieved using vanilla JavaScript mousemove events combined with CSS transform: perspective() and rotateX/Y. This technique adds a premium, interactive touch that enhances user engagement and demonstrates advanced CSS/JS coordination without relying on external tilt libraries.

Key Learning

I learned a lot about optimizing CSS animations for performance. By limiting the animation properties primarily to transform and opacity (which are better for GPU acceleration), I ensured that the subtle background movement and the complex card tilts remain smooth, even on less powerful devices, maintaining a professional feel.

Next Steps

To take this project further, I would integrate a basic client-side API simulation to dynamically fetch the NFT metadata and prices, and build a simple "Connect Wallet" modal to simulate the actual minting process, enhancing the functional realism.

Licensing: This code is licensed under the MIT License.

Jack-O'-Lantern 3D Interactive

cutieyunny-tech — Sat, 18 Oct 2025 05:40:52 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

🎃 Inspiration
I was inspired by the quintessential Halloween image: a glowing Jack-O'-Lantern on a dark night. However, I wanted to move beyond simple 2D representation. The core challenge was to achieve a sense of depth and realistic lighting—specifically the rough texture of the pumpkin skin and the flickering candle glow—using primarily pure CSS. This project aims to demonstrate that immersive 3D effects are highly achievable without heavy external libraries.

🎨 Demo

[Link to Live CodePen Demo Here] !

https://codepen.io/nad-Yunny/pen/yyepgMQ

✨ Journey
Process & Technical Challenges

The biggest hurdle was generating a realistic 3D depth and organic pumpkin texture without relying on WebGL or image files. I tackled this by:

Pseudo-3D Lighting: I used the pseudo-elements (:before and :after) on the main pumpkin div and layered on 12 different box-shadow properties. Each layer was designed with varying blur and color tones to simulate the pumpkin's ridges and complex spherical shape, creating a convincing illusion of depth.

Realistic Candle Flickering: This is the element I'm most proud of. I used a custom @keyframes animation to cycle through irregular changes in CSS filter: brightness() and opacity. This technique accurately mimics the random, subtle flicker of a real candle flame, establishing a deeply spooky atmosphere.

JavaScript Usage

I used a minimal sprinkle of JavaScript, solely for a mousemove function. This subtly alters the pumpkin's transform: rotateY() perspective when the user moves their cursor, which serves the singular purpose of showcasing the robustness of the CSS-only 3D construction.

Key Learnings

I gained a deeper appreciation for the expressive power of CSS filter properties. Learning how filter: drop-shadow() can be manipulated to simulate the actual light radiating outward from the carved eyes and mouth was a critical breakthrough for achieving realism.

Next Steps

I plan to integrate a ghostly, blurred element floating in the background using the backdrop-filter property to enhance the haunted atmosphere. I also want to connect the core flickering animation to a central CSS variable to make managing the overall project's mood simpler.

Licensing: This code is licensed under the MIT License.

The Extended Universe of University Threshold: Lumu & The Dragon

cutieyunny-tech — Mon, 06 Oct 2025 11:45:47 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Open Source Reflections

🌀 The Extended Universe of University Threshold: Lumu & The Dragon

I joined Hacktoberfest 2025 not as a developer, but as a world-builder.
My “open source” is storytelling — an evolving universe that anyone can remix, interpret, or extend.

In my previous submission, I wrote University Threshold, a story blending mystery, hallucination, and moral tension in a fictional academic world. Now, I’m extending that universe through Lumu & The Dragon — a surreal fable that exists in the same world, but through a different lens.

This time, I imagine a crossover between two worlds:
🌙 A psychological mystery rooted in academia.
🐉 A fantastical realm of dragons and hidden truths.

Through this expansion, I learned that open source isn’t only code — it’s the courage to share your imagination publicly, letting others see your process, flaws, and sparks. Each remix, each reader’s interpretation, adds to the world-building.

Hacktoberfest made me realize that open collaboration applies to stories too — when others add their own dragons, thresholds, or riddles, the narrative becomes alive beyond the author.

👉 Read it here: https://codepen.io/nad-Yunny/pen/LEGxaEX

💡 Written for Hacktoberfest 2025 Writing Challenge
💻 #Writing #OpenSource #Hacktoberfest #CreativeCoding #Storytelling

University Threshold

cutieyunny-tech — Mon, 06 Oct 2025 11:40:41 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Contribution Chronicles

🪞 Introduction

This year, I joined Hacktoberfest 2025 with a twist — instead of pushing code to a GitHub repo, I contributed a creative HTML storytelling project for the Hacktoberfest Writing Challenge.
My goal was to prove that minimal code can still carry powerful emotion and narrative depth.

That’s how “University Threshold” was born — a short HTML-based mystery about perception, truth, and silence.

🧠 About the Project

“University Threshold” explores a cold case buried beneath academic prestige.
The story follows a part-time cleaner who once was a student, returning to the same university years after a supposed murder took place.

But was there ever a murder? Or was it all a hallucination born from guilt, ambition, and institutional silence?
As the narrative unfolds, the reader crosses the “threshold” between truth and illusion — where money, power, and memory collide.

🔗 View on CodePen: https://codepen.io/nad-Yunny/pen/ZYQLwyp

💡 My Hacktoberfest Contribution

For my Hacktoberfest contribution, I used HTML and CSS as my storytelling medium — crafting psychological tension using structure and minimal visual elements.

I treated

s like memory fragments,

s like dialogue whispers, and used fading transitions to mimic the distortion of trauma.

This is my way of showing that writing and code can merge, and that contributions to Hacktoberfest don’t have to be technical — they can be emotional systems built in code.

🧩 What I Learned

Hacktoberfest taught me that:
• 🧠 Open source isn’t limited to code — it’s about sharing creativity and perspective.
• ✨ Minimalism is expressive. You don’t need complex engines to build meaning.
• 💬 Community feedback matters. Sharing drafts and versions on Discord helped shape this project into something sharper and more cohesive.

🔮 Reflection

“University Threshold” became more than just a story — it became a way for me to explore how truth gets buried under bureaucracy, how silence becomes currency, and how creative coding can challenge perception.

For me, this was both a writing exercise and a Hacktoberfest contribution — merging narrative, psychology, and open-source spirit into one simple HTML file.

“Truth doesn’t vanish. It’s archived.”

University Threshold

cutieyunny-tech — Mon, 06 Oct 2025 11:32:38 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Maintainer Spotlight

💡 What I Created

My project: University Threshold

I’m submitting this piece as part of the hackathon’s creative writing category — a narrative experiment blending storytelling and interactivity.
Instead of a static text, I wanted to see what happens when a story reads you back — when your choices reveal not just the mystery, but also the mind behind it.

“University Threshold” follows a university cleaner who stumbles upon a staged murder and a deeper cover-up.
Every choice you make leads you closer to either the truth — or your own hallucination.
It’s my take on how writing can become playable, and how narrative design and creative writing can merge into something new.

📖 You can read (and play) it here: https://codepen.io/nad-Yunny/pen/ZYQLwyp

It’s an experimental story-based HTML project built on [CodePen link], combining mystery, dual endings, and psychological tension.

WritingHackathon #InteractiveFiction #CreativeWriting #NarrativeDesign #GameWriting #IndieStorytelling

🌟 Student Super-App Concept from a Malaysian Uni Alum

cutieyunny-tech — Fri, 19 Sep 2025 02:05:29 +0000

🌟 Student Super-App Concept from a Malaysian Uni Alum

I’m excited to share a prototype I’ve been developing: One App, Many Modes—a single platform that brings together every aspect of campus life:

• Inclusive Learning – neurodivergent-friendly reading tools, text-to-speech, gentle eye-break reminders.
• Smart Library – real-time room booking and instant book loans.
• Global Events Hub – discover and enroll in uni events in one tap.
• Counselling & Well-Being – private appointment booking and 24/7 helplines.
• Mobility & Transport – shuttle info, bike/scooter rentals, AR navigation.
• Dining & Open Spaces – digital student card payments, live crowd meter, maps of free outdoor study spots.
• Sports Facilities – request and receive approvals digitally.
• Smart-Glasses Mode – hands-free overlay for navigation and schedules.

This started as a personal service-design experiment inspired by my time at APU Asia Pacific University of Technology and Innovation (APU / APIIT) , showing how Malaysian universities can re-imagine the student experience with inclusive technology.

🔗 https://lnkd.in/gpFhp3Xq

I’d love feedback:
– Which feature would benefit students most?
– How could this idea support other campuses?

ServiceDesign #EdTech #StudentExperience #InclusiveDesign #Innovation #Malaysia

🚀 One App, Many Modes—Now Clearly Marked

cutieyunny-tech — Fri, 19 Sep 2025 01:43:13 +0000

🚀 One App, Many Modes—Now Clearly Marked

I’ve just rolled out a fresh update to my Smart Glasses + Smart Library + Neurodivergent Reading Assistant prototype.

🔹 What’s New
A Mode Differentiator: a clear badge that instantly shows whether you’re in
Reading, Room Booking, or Book Loans mode.
No more wondering where you are—just glance at the badge.

🔹 All-in-One Experience
👓 Smart-Glasses Simulation – Heads-up display for a future wearable view.
📖 Neurodivergent Reading Assistant – Adjustable fonts, focus line, summarization, text-to-speech.
🏫 Real-Time Room Booking – Instant discussion-room reservations with live updates.
📚 Smart Book Loans – Search, borrow, and get a QR confirmation for self-checkout.
👀 Eye-Break Reminder – Gentle 20-minute prompt to blink and look away.

🔗 Try the Demo

https://lnkd.in/gzfJj4Bk

💡 Why it matters
Neurodivergent students often juggle multiple interfaces and face sensory overload.
This prototype shows how mode clarity + unified design can reduce cognitive load and make studying—and borrowing books—friction-free.

🙏 Feedback Wanted
What additional modes or accessibility features would you like to see?
I’d love to hear from educators, librarians, UX designers, and students.

EdTech #Accessibility #Neurodiversity #SmartGlasses #LibraryInnovation #InclusiveDesign #UX #AI #EyeHealth

University navigation game for neurodivergent players

cutieyunny-tech — Wed, 17 Sep 2025 04:45:07 +0000

💡 Coding meets neurodiversity + AI

Built a uni navigation game for neurodivergent players:
• Walk, fly, or e-hail across campus 🏫
• Complete missions with realistic hurdles (forgotten logins, missing forms!)
• AI predicts risks & guides players without overwhelming them 🤖
• “Before → During → After” mission stages simulate real workflows

HTML/JS/CSS in-browser prototype ✅
Goal? Test how AI personalization can reduce friction for neurodivergent users—research meets gameplay.

Sometimes building a game is the fastest way to prototype human-centered AI.

Here is the link:
https://codepen.io/nad-Yunny/pen/qEbWNLO

Neurodiversity #AI #GameDev #HumanCenteredDesign #HTML5 #OpenWorld

🎮 Fun Fact from My AR Mini-Game Experiment

cutieyunny-tech — Tue, 16 Sep 2025 02:56:10 +0000

🎮 Fun Fact from My AR Mini-Game Experiment!

I’ve been blending Montessori-style “learning by doing” 🧩 with 3D LEGO-inspired construction 🏗️ in my AR mini-game prototype:
• Players stitch shapes together to form platforms or collectible containers.
• Then they stack, rotate, and combine pieces in 3D—engaging logic, spatial reasoning, and creativity simultaneously.
• Subtle hints appear only when stuck, keeping the experience self-directed and exploratory 🌟.
• Each level progressively increases complexity, encouraging experimentation without overwhelming the player.

💡 Why it’s exciting for me: This method bridges kinesthetic intuition and engineering-style problem solving, making gameplay a hands-on learning journey, not just a digital experience.

AR #GameDesign #Montessori #LearningByDoing #3DDesign #Creativity #UserExperience

🚀 Montessori-Inspired AR Mini-Game Prototype: Learning by Doing + LEGO 3D + Shape Stitching

cutieyunny-tech — Tue, 16 Sep 2025 02:49:55 +0000

🚀 Montessori-Inspired AR Mini-Game Prototype: Learning by Doing + LEGO 3D + Shape Stitching

Hey devs & creators! 👋

I’ve been experimenting with an AR mini-game prototype that combines:
1. Montessori-inspired “learning by doing”
• No lengthy tutorials. Players explore, experiment, and learn mechanics directly.
• Encourages curiosity, trial-and-error, and problem-solving.
2. Shape Stitching + LEGO 3D Construction
• Players connect geometric pieces to complete platforms or pathways.
• Stack, rotate, and combine pieces to build multi-layer structures.
• Develops spatial reasoning, pattern recognition, and engineering skills.
3. Interactive AR Elements
• A robot collects items across the player-built structures.
• Immediate feedback shows success/failure, encouraging iterative learning.
4. Modular & Flexible Prototype
• Single HTML file with drag-and-drop, validation, and robot movement logic.
• Designed for quick experimentation and AR prototyping in Adobe Aero.

Key takeaways:
• Learning by doing can be applied in digital/AR experiences to support both creative and analytical skills.
• Modular design allows easy expansion for more levels or complexity.
• Montessori-style interaction encourages engagement without overwhelming guidance.

I’d love to hear your thoughts—especially on how educational AR experiences can be made more intuitive and enjoyable while still teaching critical spatial and problem-solving skills.

https://codepen.io/nad-Yunny/pen/LEpwmeO

AR #MontessoriLearning #GameDesign #EducationTech #CreativeLearning #LEGO3D #ShapeStitching #Prototyping #AdobeAero #UX #LearningByDoing