DEV Community: yousu.be

Sarah... Always Forget What She Said Before, So I build "PromiseKeeper" for Her

yousu.be — Mon, 05 Oct 2026 00:59:13 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built PromiseKeeper for that friend who always says “Sure, I’ll do it” and then forgets about it.
The idea is pretty simple: instead of manually creating a task, you just write what happened in a conversation.

For example:

“Sarah asked me to review her portfolio this weekend. I told her I’d do it by Sunday.”

PromiseKeeper picks out the important parts and saves them. Later, you can ask:

“What did I promise Sarah?”

And it reminds you.

Demo

https://promisekeeper-q0l3.onrender.com/

Code

https://github.com/splmdny/PromiseKeeper

How I Built It

The app is built with Next.js, MongoDB Atlas, Gemma 4 31B IT, DigitalOcean Serverless Inference, and Render.

This was actually my first time using both Gemma and DigitalOcean Serverless Inference, so I wanted to keep the implementation straightforward and focus on getting a working product rather than over-engineering it.

The interesting part is how the pieces work together:

Gemma 4 31B IT understands natural-language conversations and extracts promises into structured data.
MongoDB Atlas acts as the app's long-term memory for storing promises and their context.
DigitalOcean Serverless Inference provides access to Gemma without needing to manage my own GPU infrastructure.
Next.js API routes keep the AI and database operations on the server, so API keys aren't exposed to the browser.
Render handles the deployment, and getting the full-stack app online was surprisingly quick.

I intentionally kept the architecture simple so the AI is solving the actual problem instead of adding unnecessary complexity.

How It Works

The user flow is intentionally simple:

Tell PromiseKeeper what happened

The user writes something naturally, for example:

“Andi asked me to help choose his new laptop this weekend.”

Gemma extracts the promise

Gemma turns the message into structured information:

Person: Andi
Promise: Help choose a new laptop
Deadline: This weekend
Status: Open

Confirm and save

The user reviews the result and confirms it. The promise is then stored in MongoDB Atlas.

Ask your memory later

The user can come back and ask:

“What did I promise Andi?”

PromiseKeeper searches the user's saved promises and uses Gemma to generate an answer based on those memories.

Mark it complete

Once the promise is fulfilled, the user can mark it as completed.

So the whole loop is basically:

Write what happened → AI understands it → Save the promise → Ask about it later → Keep your promises

Why Does Open Innovation Matter?

For me, Gemma isn't just a chatbot added to the project. It's the part that makes PromiseKeeper useful.

Using an open-weight model gives me more flexibility in how and where the AI runs. I can use serverless inference today, but the application isn't fundamentally tied to one closed AI provider.

That makes it easier to experiment, self-host, or change the inference setup as the project grows.

My Agent Session

Building PromiseKeeper: an AI memory for commitments

You

Build a polished PromiseKeeper MVP: an AI memory for promises, using Next.js, MongoDB Atlas, and Gemma through DigitalOcean.

Agent

Implemented a complete PromiseKeeper MVP with a responsive dashboard, anonymous browser-scoped user IDs, editable promise extraction, MongoDB persistence, grounded memory questions, status updates, validation, rate limiting, health checks, and server-only environment variables.

You

Gemma returned HTTP 402 and asking memory failed.

Agent

Diagnosed HTTP 402 as DigitalOcean Serverless Inference billing or balance suspension. Added safe local fallbacks for extraction and grounded memory answers so the app remains usable while Gemma is unavailable.

You

Render could not save promises.

Agent

Improved MongoDB connection handling for Render with runtime environment lookup, bounded connection timeouts, retryable connection state, safe server logs, health diagnostics, and deployment documentation covering Render variables and MongoDB Atlas network access.

You

Update the UI: remove demo controls, restore placeholder-only Person and Deadline fields, and replace the header logo with the supplied pinky-promise hands image.

Agent

Removed demo controls, restored blank controlled inputs with muted placeholders, added the supplied local promise-hands.png asset, and updated the PromiseKeeper header logo. Lint, typecheck, and production build passed.

Prize Categories

Best Use of Gemma
Best Use of MongoDB Atlas
Best Use of DigitalOcean
Best Use of Render

So, I Built a Production-Minded Gemini App in Under 12 Hours, I Call It "PriceBack"

yousu.be — Sun, 06 Sep 2026 15:29:49 +0000

A few days ago, I had a simple thought:

“I know my groceries are getting more expensive… but what actually got more expensive?”

I definitely wasn't going to dig through months of receipts to find out.

So I built PriceBack.

It turns your old shopping receipts into a personal price history, so you can see what changed, what got more expensive, and even what quietly got smaller.

And I built the first working version in less than 12 hours with Google AI Studio.

How it works

The flow is pretty simple:

1. Upload a receipt
Take a photo or upload an old receipt. Old receipts are actually useful because they give PriceBack something historical to compare against.

2. Gemini reads it
It extracts the products, prices, quantities, brands, and package sizes.

3. You check the result
AI isn't always right, so nothing is blindly saved. You can edit the extracted products before confirming them.

4. PriceBack remembers
After a few receipts, you start getting an actual price history:

Eggs
March $4.19
June $4.55
September $4.89
↑ 16.7%

My favorite feature: Shrinkflation Detective

Price increases aren't always obvious.

Sometimes this:

8 oz — $4.49

quietly becomes:

7 oz — $4.49

Same price. Less product.

PriceBack compares package sizes and unit prices to catch those changes.

Same price. Less product. Caught.

You can also ask your receipts with Gemini AI

I added Ask PriceBack, where you can ask things like:

“What got more expensive?”

“Why did I spend more this month?”

“Where did I buy eggs cheapest?”

“Did anything get smaller?”

Instead of being a generic chatbot, the answers come from the shopping history you've added to your account.

Built with AI, but I still control the code

This was one of my favorite things about building with Google AI Studio.

I could get from idea → working application incredibly quickly, but I'm not stuck inside a no-code editor.

I can open the project, edit the code manually, change components, debug things, refactor it, and continue building normally.

AI helped me move much faster, but I still have control over what I'm building.

The app uses Gemini + Firebase Authentication + Firestore, with each user's receipts and price history kept separate.

Less than 12 hours later...

I went from:

“I wish I remembered how much this used to cost.”

to an app that can actually answer that question.

There's still plenty I want to improve, but that's also why I like having access to the actual code.

You can try the demo here:

PriceBack Live Demo

ClickMapper — A Keyboard-Driven Chrome Extension to Eliminate Repetitive Clicks for Content Moderators

yousu.be — Mon, 16 Feb 2026 07:36:06 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built ClickMapper, a Chrome extension designed to help content moderators and reviewers work faster by mapping clickable areas on a webpage and triggering actions using keyboard shortcuts.

I have experience working as a content moderator/reviewer, and one of the biggest pain points in that role is performing repetitive clicks in the same spots over and over again to review content. This becomes mentally exhausting and inefficient over long sessions. I realized it would be much more productive if these actions could be simplified with keyboard controls instead of constant mouse movement.

There are existing automation tools like AutoHotkey, but in many companies those tools are banned due to security concerns (malware risks, false positives, or policy restrictions). Additionally, those tools are often not beginner-friendly and require scripting knowledge. Because of that gap, I decided to build ClickMapper as a safe, browser-based moderator companion that works within company restrictions while remaining easy to use.

This project focuses on improving productivity, reducing repetitive strain, and making moderation workflows more efficient without requiring advanced technical setup.

Demo

Project Link: github.com/splmdny
[Update 2/22/26] Official Chrome Store Link: https://chromewebstore.google.com/detail/dnajkjbjlcbbibijanlpakkfkjgehka
Video Demo: https://youtu.be/s2wMHisA7O8
Screenshots:

My Experience with GitHub Copilot CLI

GitHub Copilot CLI played a major role in accelerating development. I used it to:

Generate Chrome Extension Manifest v3 structure
Scaffold content scripts and background logic
Quickly prototype DOM-mapping and event-handling functions
Debug permission issues and refine code patterns
Explore alternative implementation approaches through prompt-driven iteration

The biggest impact was speed. Instead of spending time searching documentation or writing boilerplate manually, I could describe what I wanted in natural language and iterate rapidly. It felt like having a pair-programming assistant that understood both the architecture and the intent behind the feature.

However, from my experience, Copilot still requires manual adjustment—especially when creating UI that is truly usable and favorable for the builder’s specific needs. While it can generate good starting points, refining layout, interaction details, and overall user experience still depends on human decisions and iteration.

Copilot CLI also helped reduce context switching, allowing me to stay focused on solving the actual workflow problem for moderators rather than getting stuck on setup details.

Overall, it significantly improved productivity and made experimentation much easier throughout the build process.

Who’s That Pokémon? – The Twist!

yousu.be — Mon, 15 Sep 2025 07:06:01 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

*Who’s That Pokémon? *– The Twist! is a fun and challenging Pokémon quiz game built with React, TypeScript, and the Google Gemini API.

Can you guess the Pokémon from its silhouette? Careful—the silhouette might not be the Pokémon you think it is!

Demo

GitHub repo: WhosThatPokemon repo
Google AI studio: WhosThatPokemon
Image:

How I Used Google AI Studio

I leveraged Google Gemini API with multimodal inputs to create the core twist mechanic:

gemini-2.5-flash-image-preview → for morphing Pokémon, reshaping one into another’s silhouette.
gemini-2.5-flash → for progressive AI clue generation.

The app sends multiple modalities (text instructions + Pokémon images) to Gemini:

Text Prompt → Explains the morphing rules (e.g., “Take source Pokémon’s colors/texture and apply to silhouette shape”).
Image 1 → Source Pokémon (for colors and texture).
Image 2 → Target Pokémon silhouette (for shape).

Output: Gemini processes them together to generate a unique AI morphed Pokémon—a perfect example of multimodality in action.

Multimodal Features

Image + Text Fusion → Combines text prompts with Pokémon images for morphing.
AI-Generated Silhouette Morphing → Creates unpredictable twists in gameplay.
Progressive AI Clue System → AI adapts hints based on player performance.
Downloadable Artwork → Save and share AI-generated Pokémon creations.

Team

Yusup Almadani
Github : https://github.com/splmdny
Website : https://splmdny.vercel.app/

FitThat.Me – AI-Powered Virtual Try-On

yousu.be — Mon, 15 Sep 2025 06:45:12 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

FitThat.Me is an AI-powered virtual dressing room that helps you try on clothes anytime, anywhere — no changing room required.

Upload a full-body photo of yourself.
Add images of clothing items.
Instantly see how the outfit fits your style.

This app solves the hassle of online shopping uncertainty and makes it easier for users to visualize outfits before purchase. Whether you’re at home, commuting, or traveling, you can try on clothes on-the-go.

Demo

Web deploy: https://fitthatme.netlify.app/ (I'm still fixed it, free tier - out of quota)
GitHub repo: FitThat.Me repo
Google AI studio: FitThat.Me
Image:

How I Used Google AI Studio

I leveraged Google AI Studio with the Gemini 2.5 multimodal APIs to build the try-on experience:

Gemini 2.5 Flash Image Preview → for image editing & composition, merging clothing onto the user’s uploaded photo.
Imagen 4.0 Generate 001 → for generating placeholder product images (in case users don’t have high-quality clothing photos).

These APIs made it possible to handle realistic image overlays while keeping the system lightweight and responsive.

Multimodal Features

Image Understanding → Detects user body shape and clothing alignment.
Image Editing & Composition → Fits clothes naturally onto uploaded photos.
AI-Generated Clothing Previews → Fills in missing product visuals with AI-generated placeholders.

Together, these multimodal features create a personalized, interactive fitting experience that enhances confidence in styling choices and online shopping.

Team

Yusup Almadani
Github : https://github.com/splmdny
Website : https://splmdny.vercel.app/