DEV Community: Ujjwal Gupta

Price Pulse AI - Competitive Radar

Ujjwal Gupta — Sat, 17 Oct 2026 19:11:04 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

Beat Online Discounts & Keep Your Walk-in Customers

A 100% client-side, zero-server competitive pricing intelligence assistant designed specifically for brick-and-mortar retail shop owners.

What I Built

The Problem: Showrooming & Predatory E-Commerce Discounts

Every single day, independent offline store owners (clothing boutiques, electronics & mobile stores, kirana supermarkets, and footwear outlets) face the exact same frustrating scenario:
A customer walks into the physical store, tries on a jacket, inspects a phone, or asks about groceries, pulls out their smartphone, and says:

"I saw this ₹500 cheaper online on Amazon / Flipkart! Can you match the price?"

Most offline shopkeepers panic: they either give in and slash their hard-earned profit margins, or refuse and watch the customer walk straight out the door.

The Solution: PricePulse AI

PricePulse AI is a zero-server, privacy-first competitive intelligence dashboard running 100% inside the shopkeeper's web browser. In under 2 seconds, the store owner can paste any online product link and enter their current shop price.

PricePulse immediately analyzes the competitor listing and equips the shopkeeper with an In-Store Action Plan:

🎯 Risk to Shop (The Pulse Meter): An animated SVG gauge calculating an instant threat score (0–100) that categorizes whether the competitor move is a negligible online illusion or an aggressive flash sale requiring defensive action.
📊 Your Shop vs. Competitor (The Diff Matrix): A 4-card transition grid showing where physical retail beats e-commerce:
- Price Comparison: True delta percentage between in-store price and online listed price.
- Delivery vs. Instant Take-Home: Comparing courier delays (3–6 days) and hidden handling fees vs. immediate take-home tonight.
- In-Store Trial & Perks: Hands-on trial room fitting, audio testing, and personal service vs. online return friction.
- Trust & Warranty: Instant 1-to-1 in-store counter replacement vs. courier return hassles and lost parcels.
🗣️ Staff Counter-Script (Objection Handler): Word-for-word spoken dialogue for sales assistants to counter "I saw it cheaper online" objections confidently on the spot.
💬 WhatsApp Customer Broadcast: Engaging, high-converting messages with emojis tailored for the store's VIP broadcast list or WhatsApp Status.
📋 Shop Counter Signboard: High-impact text ready to print on an A4 sheet for checkout counters, fitting rooms, or chalkboard easels.
🎁 In-Store Margin Bundle & Playbook: Smart accessory add-ons and value shields that close walk-ins without sacrificing product margins.

Who Would Pay For It?

Independent Retail Store Owners: Boutique clothing shops, mobile/laptop retail stores, consumer electronics dealers, optical stores, and neighborhood kiranas.
Retail Store Managers & Franchises: Multi-branch retailers needing standardized staff counter-scripts so sales staff don't give unauthorized cash discounts.
Commercial Viability: As a $12/month or $99/year micro-SaaS, or bundled as a one-time digital kit for local retail associations. Because it runs 100% client-side, the operational hosting cost is $0.00, making gross margins near 100%.

Demo

Live Web App: https://ujjwalgupta2021.github.io/PricePulse-AI/ (Deployable to GitHub Pages with 0 server configuration)
Built-in Interactive Demos (Zero Setup Required): Clicking any demo button instantly simulates real retail defense scenarios without requiring an API key:
- 👕 Clothing Boutique: Arctic Expedition Parka vs. discount e-commerce apparel seller.
- 📱 Mobile & Electronics: Noise-Cancelling Wireless Headphones vs. online tech marketplace.
- 🛒 Supermarket / Kirana: Premium Basmati Rice & Oil Combo vs. quick-commerce delivery apps.
Theme Switcher: Full support for both Dark Glassmorphic Theme and clean, high-contrast Light Retail Theme.

Code

GitHub Repository: https://github.com/ujjwalgupta2021/PricePulse-AI
Core Architecture:
- index.html — Clean semantic structure, SVG gauge meters, and accessibility-first modal views.
- styles.css — Modern glassmorphism system with CSS custom properties, responsive grids, and dark/light modes.
- js/app.js — Application lifecycle, event orchestration, and markdown export engine.
- js/gemini.js — Direct HTTPS connection to Google Gemini Flash with automatic model negotiation and resilient JSON parsing.
- js/scraper.js — Client-side scraping bridge cascading across Jina Reader AI, AllOrigins, and URL slug anti-bot extractors.
- js/pulse-meter.js — High-performance SVG needle rotation and stroke-dashoffset animation.
- js/diff-matrix.js — High-contrast side-by-side transition cards comparing baseline vs. live page data.
- js/counter-attack.js — Multi-tab action plan generator with 1-click clipboard copy.
- js/storage.js — 100% client-side LocalStorage vault for private keys, preferences, and watchlist.

How I Built It

1. Pure Open-Innovation & Client-Side Agent Harness

PricePulse AI was built without any backend servers, Python microservices, or node daemons. The entire application runs directly inside the client's browser as a zero-server agent harness:

Vanilla HTML5 & CSS3: No bloated CSS frameworks or heavyweight JavaScript bundles; initial load takes < 150ms.
Client-Side Scraping Bridge: Directly reads competitor product listings using Jina Reader AI (https://r.jina.ai/), AllOrigins proxy, and an intelligent URL slug parser with Amazon/Flipkart anti-bot detection.
Open-Weight & Model-Agnostic Architecture: Built around the open HTTP standard for generative inference. While it pairs natively with Google Gemini Flash for speed (<600ms), its modular schema engine is compatible with open-weight models (including Google Gemma 2B/9B, Llama 3, and Mistral via local WebLLM or Ollama proxies).

2. Google Gemini Flash Integration with Dynamic Model Auto-Negotiation

PricePulse connects directly to Google AI Studio's Gemini Flash REST API (generativelanguage.googleapis.com/v1beta):

Automated Catalog Discovery: The engine queries ModelService.ListModels to dynamically discover supported models on the user's key (gemini-1.5-flash, gemini-2.0-flash, gemini-3.8-flash) without requiring confusing manual dropdown configuration.
Strict Schema Steering: Uses official system instructions with JSON response constraints to ensure high-fidelity retail defense outputs.
Resilient JSON Parser: Employs regex { ... } substring recovery to gracefully extract valid data even if the model outputs conversational text.
Fail-Safe Retail Intelligence Shield: If the AI API experiences network disconnects or quota rate limits, PricePulse automatically activates an offline synthesized retail audit using the real URL, extracted product title, and store baseline, ensuring 0% crash rate.

Why Does Open Innovation Matter?

Zero Recurring Overhead for Mom-and-Pop Retailers:

Most commercial retail software costs $50–$200/month because of cloud servers, databases, and middleman APIs. By utilizing open web standards, free-tier client-side AI, and static hosting, offline store owners can access enterprise-grade competitive intelligence without paying hefty SaaS subscriptions.
Absolute Privacy of Store Margins & Wholesale Pricing:

Local shopkeepers will never upload their private wholesale margins, supplier costs, or pricing baseline to a closed, centralized cloud database where competitor algorithms could scrape or exploit it. In PricePulse AI, every price check and API key stays sealed in the browser's local sandbox (localStorage).
No Vendor Lock-In:

The application does not depend on a single proprietary backend. If an API endpoint changes, the open architecture adapts dynamically or runs client-side simulation.

My Agent Session

This project was developed with Google Antigravity AI as an advanced agentic coding partner.

Key milestones achieved during the session:

Designed and refined the Retail Defense Pivot: Transitioned technical e-commerce scraping jargon into actionable spoken dialogue for offline retail shopkeepers.
Engineered the High-Speed Connection & Auto-Negotiation Engine: Eliminated slow sequential pinging and built dynamic Google Gemini catalog discovery.
Solved Anti-Bot Interception for Amazon.in: Built smart URL slug parsers to extract real product names directly from /product-name/dp/ASIN links even when target sites throw robot checks.
Enhanced Typography & Accessibility: Designed a high-contrast Light Theme alongside the Dark Mode to guarantee clear visibility under bright store counter lighting.

Prize Categories

Primary Track: Side Hustle (Hacktoberfest Open-Source AI Challenge Week 2)
Partner Categories:
- Best Use of AI / Gemini API
- Zero-Server Open-Source Web Application

Built with ❤️ for the Hacktoberfest 2026 Week 2 DEV Challenge — Side Hustle!

🍀 FloraFind & Grounded

Ujjwal Gupta — Tue, 06 Oct 2026 21:04:38 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

FloraFind & Grounded is a gamified single-page web application (SPA) designed to solve a universal developer problem: terminal fatigue, continuous debugging burn-out, and excessive screen time. Built specifically for Week 1 of the Hacktoberfest 2026 DEV Challenge ("Touch Grass"), this project turns stepping away from the desk into an interactive, rewarding outdoor quest.

🌟 Key Highlights:

🌿 "Screen-Time Detox" Quest Engine:
- Generates real-world outdoor challenges ("Inspect Sidewalk Chlorophyll", "Locate 3-Leaf Hardware Redundancy", "Deep Canopy Sunlight Audit").
- Category filtering (Quick 5-Min, Flora Scavenger, Deep Forest Debug).
- Logs outdoor uptime minutes, Grass XP points, and levels upon completion.
🤖 Cloud Open Innovation AI Identifier ("FloraFind"):
- Accepts both natural language plant descriptions and direct leaf photo uploads via camera/file picker.
- Communicates with Google AI Studio open-weight models (Gemma 2 and Gemini Flash).
- Compiles plants into hilarious developer-centric botanical specifications (Hardware Redundancy, Photosynthesis SLA, Developer Patch Notes).
- Features an Interactive Percentage Loader with dynamic 6-step ticker and anti-freeze timeouts.
- Includes an Offline Simulator Fallback mode if no API key is provided or network is offline.
📊 Outdoor Uptime & Streak Dashboard:
- Tracks total outdoor minutes, active daily streaks, quests completed, and plant scans logged.
- Unlockable Developer Grass Badges (Seedling Debugger, Touch Grass Protocol, Solar Streak, Quantum Photosynthesis).
- Light & Dark mode theme engine with dynamic toggle.
- 100% persisted locally in browser LocalStorage.
🔒 Privacy-First Client Architecture:
- No hardcoded API keys. User keys are stored only in the browser's LocalStorage.
- Direct HTTPS requests to Google AI Studio with zero intermediary backend servers.

Demo

🚀 Live Application Demo:

https://florafind-and-grounded.vercel.app/

🎮 How to Use & Run the Project

Option A: Try the Live Web App Online (Easiest)

Open https://florafind-and-grounded.vercel.app/ in any desktop or mobile browser.
Accept real-world outdoor challenges on the Screen-Time Detox Board to log outdoor uptime minutes and earn Grass XP.
Switch to the FloraFind AI Compiler, type a plant description or upload a photo, and click Run Gemma AI Analysis.
(Optional) Click the Key Settings (🔑) icon in the header to enter your free Google AI Studio API key. If no key is provided, the app automatically runs in Offline Simulator Mode with realistic mock data!

Option B: Run Locally on Your System

Because FloraFind & Grounded is a 100% pure client-side static application, no Node.js packages, build tools, or backend servers are needed!

Clone the Repository:

   git clone https://github.com/ujjwalgupta2021/FloraFind-and-Grounded.git
   cd FloraFind-and-Grounded

Launch in Your Browser:
- Simply double-click index.html to open it directly in any web browser.
- Or serve it locally using any static web server:
```
 # Python 3:
 python -m http.server 8000

 # Node serve:
 npx serve .
```

Navigate to http://localhost:8000 in your browser.

Code

💻 GitHub Repository:

https://github.com/ujjwalgupta2021/FloraFind-and-Grounded

├── index.html   # Main SPA layout, quest board, AI analyzer UI, theme engine & modal
├── style.css    # Custom scrollbars, glassmorphism, animations & theme overrides
├── app.js       # App state engine, Google AI Studio integration, AbortController timeouts
└── README.md    # Official DEV Challenge submission document

How I Built It

🧠 Open-Source & Open-Weight AI Architecture

This application is built around Google AI Studio's open model endpoints, featuring Google's Gemma open-weight series (gemma-2-27b-it, gemma-2-9b-it) and fast multimodal models (gemini-2.0-flash, gemini-1.5-flash).

Automated Connection & Model Securer:
- When a user inputs an API key, the app calls ModelService.ListModels (https://generativelanguage.googleapis.com/v1beta/models) to discover authorized models.
- It runs an automated priority candidate test sweep to lock in a guaranteed 200 OK connection without requiring users to navigate complex dropdown settings.
AbortController Timeout Engine:
- Built a custom fetchWithTimeout() wrapper with an optimal 19-second master deadline and 19-second direct fetch budget.
- Prevents browser requests from hanging indefinitely on slow or unresponsive endpoints.
Frontend Stack:
- Core: Vanilla HTML5, Modern Modular JavaScript (ES6+)
- Styling: Tailwind CSS (Play CDN) + Vanilla CSS Glassmorphism & Keyframe Animations
- Icons: Lucide Icons
- State Persistence: Browser LocalStorage

Why Does Open Innovation Matter?

Open innovation and open-weight models (such as Google's Gemma family) are fundamental to the future of software development:

Transparency & Sovereignty: Open-weight models give developers full visibility into model behavior and parameter architectures, removing black-box dependency on proprietary closed APIs.
Client-Side Privacy Architecture: Open endpoints allow applications like FloraFind to construct direct, peer-to-endpoint calls straight from the user's browser, enabling privacy-first architectures where user keys and personal data stay client-side.
Unlocking Creative Developer Tooling: Open innovation allows developers to build specialized, niche AI experiences—like compiling real-world plants into hilarious developer SLA patch notes—without prohibitive licensing or API lock-in constraints.

My Agent Session

This application was planned, architected, and built with the assistance of an autonomous agent swarm using Antigravity 2.0.

Prize Categories

🏆 Grand Prize / Open Innovation Track: Best application leveraging open-weight AI models (Google Gemma / AI Studio).
🌿 Touch Grass Week 1 Theme Track: Best project encouraging physical outdoor interaction, screen-time detox, and real-world exploration.

Built with 💚 for the Hacktoberfest 2026 Week 1 DEV Challenge — Go Touch Grass!

Study Buddy — Pomodoro, Flashcards & Quiz in One Beautiful App 🦉

Ujjwal Gupta — Mon, 05 Oct 2026 11:24:12 +0000

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

What I Built

StudyBuddy is a browser-based productivity + learning app I built for my friend — a college student who was juggling exam prep across three different tools: a phone timer for Pomodoro, a notes app for flashcards, and a Google Form quiz a teacher shared. Every session, they'd context-switch between apps, lose focus, and end up doomscrolling between switches.

StudyBuddy collapses all three into one beautiful, distraction-free dark-mode app that lives entirely in the browser — no login, no account, no backend.

Features

⏱️ Pomodoro Timer

Animated circular ring timer with a gradient stroke that depletes in real time
Three modes: Focus, Short Break, Long Break — fully configurable
Session dot tracker (dots turn green as sessions complete)
Sound alerts via the Web Audio API — no external files
Auto-start next session toggle
Keyboard shortcuts: Space to start/pause, R to reset

🃏 Flashcards

Create cards with a question (front) and answer (back)
Silky smooth 3D flip animation on click or Space
Navigate with arrow buttons or ← → keys
Optional deck/tag label per card
After flipping: rate each card as Hard / OK / Easy for self-paced spaced repetition
Full card list with per-card delete; all data persists via localStorage

🧠 Quiz Mode

Build custom multiple-choice questions (up to 4 options each)
Mark the correct answer with a ✓ toggle right in the builder
Per-question countdown timer (configurable 5–300 s) with urgent pulsing at ≤5 s
Shuffle toggle for randomised question order
Live score counter during the quiz
Results screen: animated progress bar, score %, emoji feedback, and a full per-question review showing what you got wrong and what the right answer was

Who it's for

Friends who were burning hours every week just managing study tools. Now they open one tab, set a 25-minute Pomodoro, reviews flashcards during the break, and takes a self-quiz at the end. Zero friction, zero context switching.

Demo

🔗 Live Demo: ujjwalgupta2021.github.io/StudyBuddy/

To run locally: clone the repo and open index.html directly in your browser — no build step, no npm install, no server required.

git clone https://github.com/ujjwalgupta2021/StudyBuddy.git
cd StudyBuddy
# Open index.html in your browser
start index.html        # Windows
open index.html         # macOS
xdg-open index.html     # Linux

Code

🔗 GitHub Repository: github.com/ujjwalgupta2021/StudyBuddy

The project is vanilla HTML + CSS + JS — three files, zero dependencies, zero build tooling.

File	Role
`index.html`	Semantic structure, ARIA labels, all three tab panels
`style.css`	Dark glassmorphism design system — custom tokens, animations, responsive grid
`app.js`	All logic: timer engine, flashcard state, quiz engine, localStorage persistence

Architecture

graph TD
    A["index.html\nStructure + ARIA"] --> B["app.js\nAll Logic"]
    B --> C["Pomodoro Engine\nsetInterval + Web Audio"]
    B --> D["Flashcard Manager\nlocalStorage CRUD"]
    B --> E["Quiz Engine\nTimer + Scoring"]
    A --> F["style.css\nDesign System"]
    F --> G["CSS Custom Properties\nDark theme tokens"]
    F --> H["CSS Grid Layouts\nPomodoro · FC · Quiz"]
    B --> I["localStorage\nPersists sessions, cards, score"]

Highlights worth looking at

Circular timer ring — pure SVG with a stroke-dashoffset that ticks down in sync with setInterval:

const CIRCUMFERENCE = 2 * Math.PI * 98; // 615.75px
function updateRing(fraction) {
  const offset = CIRCUMFERENCE * (1 - fraction);
  document.getElementById('ring-fill').style.strokeDashoffset = offset;
}

3D card flip — CSS perspective + rotateY with backface-visibility: hidden, zero JS for the animation:

.fc-inner {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
}
.fc-inner.flipped { transform: rotateY(180deg); }

Sound alerts with no audio files — Web Audio API oscillator, generated on the fly:

function playBeep(freq = 800, vol = 0.3, dur = 0.3) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.frequency.value = freq;
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
  osc.start();
  osc.stop(audioCtx.currentTime + dur);
}

How I Built It

I built StudyBuddy with Antigravity IDE — an open agentic coding assistant powered by Google DeepMind's Gemini models. The entire session was a dialogue: I described features, the agent scaffolded the HTML, generated the CSS design system, wrote the JavaScript logic modules, and I reviewed and iterated in real time.

The workflow was:

Described the three feature areas — the agent planned the tab structure and data model
Design pass — prompted for a dark glassmorphism aesthetic; the agent authored the full CSS custom-property token system
Feature implementation — timer engine, flashcard CRUD, quiz state machine — all built iteratively with me reviewing and adjusting
Polish — fixed layout gaps (the Pomodoro right-side empty space issue), resolved CSS linter warnings (appearance vendor prefix compatibility), tuned responsive breakpoints

The agent also caught and fixed a real CSS issue mid-session: -moz-appearance: textfield without the standard appearance: textfield companion — a cross-browser compatibility gap that linters flag.

Open-source AI stack:

🤖 Antigravity IDE — agentic coding assistant (Google DeepMind / Gemini)
🌐 Google Fonts (Outfit typeface) — the only external resource
🔊 Web Audio API — browser-native, no library

Why Does Open Innovation Matter?

StudyBuddy is intentionally dependency-free. No React, no bundler, no CDN-hosted UI kit. That was only possible because an open AI agent understood my constraints ("pure HTML/CSS/JS, runs by opening a file") and worked within them — rather than defaulting to whatever popular framework its training data skewed toward.

A closed, black-box API can generate code, but it can't be audited, customised, or run offline. With an open-weight model:

No data leaves the machine — flashcard content and study patterns stay private
No account walls — the app works offline, on any device, forever
No forced upgrades — the code I ship today still works in ten years, no deprecated API keys

Open innovation made it possible to build a tool that is genuinely for a person, not a product for a company. That difference matters when you're building for a friend rather than for a market.

My Agent Session

The full pair-programming session with the Antigravity agent — including the design decisions, the Pomodoro layout fix, and the CSS compatibility conversation — was conducted live in the IDE. Key moments:

Chose stroke-dashoffset SVG ring over <canvas> for better CSS composability
Debated max-width constraints vs. CSS Grid for the Pomodoro layout (Grid won — no empty right-side space)
The agent proactively flagged the -moz-appearance / appearance cross-browser issue without being asked

Prize Categories

🏆 Hacktoberfest Weekend Challenge — Build for a Friend
🌐 Open Source — zero-dependency, MIT-licensed, pure web standards
🎨 Best Design / UI — dark glassmorphism, micro-animations, 3D card flip, animated ring timer

Built with ❤️ for anyone who wants to ace their exams.

Study Buddy — Pomodoro, Flashcards & Quiz in One Beautiful App 🦉

Ujjwal Gupta — Sun, 04 Oct 2026 19:43:31 +0000

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

What I Built

StudyBuddy collapses all three into one beautiful, distraction-free dark-mode app that lives entirely in the browser — no login, no account, no backend.

Features

⏱️ Pomodoro Timer

Animated circular ring timer with a gradient stroke that depletes in real time
Three modes: Focus, Short Break, Long Break — fully configurable
Session dot tracker (dots turn green as sessions complete)
Sound alerts via the Web Audio API — no external files
Auto-start next session toggle
Keyboard shortcuts: Space to start/pause, R to reset

🃏 Flashcards

Create cards with a question (front) and answer (back)
Silky smooth 3D flip animation on click or Space
Navigate with arrow buttons or ← → keys
Optional deck/tag label per card
After flipping: rate each card as Hard / OK / Easy for self-paced spaced repetition
Full card list with per-card delete; all data persists via localStorage

🧠 Quiz Mode

Build custom multiple-choice questions (up to 4 options each)
Mark the correct answer with a ✓ toggle right in the builder
Per-question countdown timer (configurable 5–300 s) with urgent pulsing at ≤5 s
Shuffle toggle for randomised question order
Live score counter during the quiz
Results screen: animated progress bar, score %, emoji feedback, and a full per-question review showing what you got wrong and what the right answer was

Who it's for

Demo

🔗 Live Demo: ujjwalgupta2021.github.io/StudyBuddy/

To run locally: clone the repo and open index.html directly in your browser — no build step, no npm install, no server required.

git clone https://github.com/ujjwalgupta2021/StudyBuddy.git
cd StudyBuddy
# Open index.html in your browser
start index.html        # Windows
open index.html         # macOS
xdg-open index.html     # Linux

Code

🔗 GitHub Repository: github.com/ujjwalgupta2021/StudyBuddy

The project is vanilla HTML + CSS + JS — three files, zero dependencies, zero build tooling.

File	Role
`index.html`	Semantic structure, ARIA labels, all three tab panels
`style.css`	Dark glassmorphism design system — custom tokens, animations, responsive grid
`app.js`	All logic: timer engine, flashcard state, quiz engine, localStorage persistence

Architecture

graph TD
    A["index.html\nStructure + ARIA"] --> B["app.js\nAll Logic"]
    B --> C["Pomodoro Engine\nsetInterval + Web Audio"]
    B --> D["Flashcard Manager\nlocalStorage CRUD"]
    B --> E["Quiz Engine\nTimer + Scoring"]
    A --> F["style.css\nDesign System"]
    F --> G["CSS Custom Properties\nDark theme tokens"]
    F --> H["CSS Grid Layouts\nPomodoro · FC · Quiz"]
    B --> I["localStorage\nPersists sessions, cards, score"]

Highlights worth looking at

Circular timer ring — pure SVG with a stroke-dashoffset that ticks down in sync with setInterval:

const CIRCUMFERENCE = 2 * Math.PI * 98; // 615.75px
function updateRing(fraction) {
  const offset = CIRCUMFERENCE * (1 - fraction);
  document.getElementById('ring-fill').style.strokeDashoffset = offset;
}

3D card flip — CSS perspective + rotateY with backface-visibility: hidden, zero JS for the animation:

.fc-inner {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
}
.fc-inner.flipped { transform: rotateY(180deg); }

Sound alerts with no audio files — Web Audio API oscillator, generated on the fly:

function playBeep(freq = 800, vol = 0.3, dur = 0.3) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.frequency.value = freq;
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
  osc.start();
  osc.stop(audioCtx.currentTime + dur);
}

How I Built It

The workflow was:

Described the three feature areas — the agent planned the tab structure and data model
Design pass — prompted for a dark glassmorphism aesthetic; the agent authored the full CSS custom-property token system
Feature implementation — timer engine, flashcard CRUD, quiz state machine — all built iteratively with me reviewing and adjusting
Polish — fixed layout gaps (the Pomodoro right-side empty space issue), resolved CSS linter warnings (appearance vendor prefix compatibility), tuned responsive breakpoints

Open-source AI stack:

🤖 Antigravity IDE — agentic coding assistant (Google DeepMind / Gemini)
🌐 Google Fonts (Outfit typeface) — the only external resource
🔊 Web Audio API — browser-native, no library

Why Does Open Innovation Matter?

A closed, black-box API can generate code, but it can't be audited, customised, or run offline. With an open-weight model:

No data leaves the machine — flashcard content and study patterns stay private
No account walls — the app works offline, on any device, forever
No forced upgrades — the code I ship today still works in ten years, no deprecated API keys

Open innovation made it possible to build a tool that is genuinely for a person, not a product for a company. That difference matters when you're building for a friend rather than for a market.

My Agent Session

Chose stroke-dashoffset SVG ring over <canvas> for better CSS composability
Debated max-width constraints vs. CSS Grid for the Pomodoro layout (Grid won — no empty right-side space)
The agent proactively flagged the -moz-appearance / appearance cross-browser issue without being asked

Prize Categories

🏆 Hacktoberfest Weekend Challenge — Build for a Friend
🌐 Open Source — zero-dependency, MIT-licensed, pure web standards
🎨 Best Design / UI — dark glassmorphism, micro-animations, 3D card flip, animated ring timer

Built with ❤️ for anyone who wants to ace their exams.