DEV Community: yousu.be

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/