DEV Community: Minh Long

🧩LOGIC SOLSTICE CIPHER - A Code-Breaking Ode to Alan Turing

Minh Long — Tue, 09 Jun 2026 16:48:18 +0000

This is a submission for the June Solstice Game Jam

A quick note on AI: I used an AI assistant while making this. It helped me shape the idea, write the code, and put together a first draft of this post. I read through everything, made my own edits, and did the testing and the deploy myself. Flagging it up front since DEV asks us to.

What I Built

SOLSTICE CIPHER is a small code breaking game about beating the sunset on the longest day of the year.

Here is the setup. You are standing at an observatory on June 21. A scrambled signal of colored light keeps pulsing over the horizon, six colors of the spectrum locked in some hidden order, and you have to figure out that order before the sun goes down. Every guess you make costs you an hour of daylight. The sun drops a little lower, the sky slides from midday blue into orange and then deep night, and the stars start coming out. Burn through all your daylight and you lose.

The part that tells you how close each guess was is not a plain hint box. I named it The Bombe, after the machine Alan Turing built to crack Enigma. If you get stuck, you can spend a Bombe Assist and let it work out one position for you.

🎮 Play it now (nothing to install, runs in the browser):

Heads up: CodePen does not load on every network. If it will not open for you, try a different network or a VPN, or just use the full screen version below.

Full screen:

longphanquangminh.github.io

It is built to be played on a laptop keyboard, so you can run the whole thing with the arrow keys and the number row. There are on screen buttons too if you are on your phone.

What I was going for was something you can understand in about five seconds but that still makes you think. I also wanted the June theme to live in how the game actually plays, instead of being pasted on top of something unrelated.

A few ways it ties back to the theme:

☀️ The solstice and the passage of time. Daylight is your resource. The sun, the sky color, and the stars all move based on how many guesses you have spent, and the longest day of the year hands you the most daylight to work with.
🌗 Light against darkness. That is literally how you win or lose. Crack the code and the beacon lights up. Run out of daylight and night takes over.
🧠 A nod to Alan Turing. June is his birth month, the whole game is built around breaking a code, and the feedback engine is his Bombe.
🏳️‍🌈 A nod to Pride too. The signal you are decoding is the six color spectrum, basically a rainbow. Turing was prosecuted for being gay, so decoding a rainbow in his name felt like the right thing for June.

Code

longphanquangminh / solstice-cipher

🌞 SOLSTICE CIPHER

Crack the light before the longest day ends.

A code-breaking deduction game about racing the dying light of the June solstice — and a love letter to Alan Turing.

▶ Play it now · Built for the DEV June Solstice Game Jam 2026

About

A scrambled light-signal pulses over the horizon: six colors of the spectrum locked in a hidden order. Your job is to decrypt the sequence before the sun sets.

Every guess burns one hour of daylight — the sun slides down its arc, the sky bleeds from noon-blue to golden dusk to indigo night, and the stars come out. Crack the code and the beacon fires; run out of light and darkness wins.

The machine that grades your guesses is The Bombe — the device Alan Turing designed to break the Enigma cipher.

Theme connection

Thread	In the game
☀️ Solstice

…

View on GitHub

How I Built It

The whole game is one HTML file. No engine, no framework, no build step, and nothing external except two Google Fonts. You open the file and it runs. Keeping it to a single file made it really easy to host and to share.

Here is what is inside:

HTML5 Canvas for the sky, the sun, the stars, the floating motes, the particles, and the screen shake
Plain DOM and CSS for the board, the HUD, and the animations
The Web Audio API for the little retro machine sounds (there are no audio files anywhere)
Vanilla JavaScript for the game logic

The deduction core. Underneath, this is basically Mastermind with repeated colors allowed. The Bombe scores each guess in two passes. First it counts the exact hits, then it goes back over the leftover colors and finds the ones that are right but sitting in the wrong slot.

function evaluate(guess, secret){
  let exact = 0, partial = 0;
  const sc = Array(6).fill(0), gc = Array(6).fill(0);
  for (let i = 0; i < guess.length; i++){
    if (guess[i] === secret[i]) exact++;           // right color, right slot
    else { sc[secret[i]]++; gc[guess[i]]++; }       // tally the misses
  }
  for (let k = 0; k < 6; k++) partial += Math.min(sc[k], gc[k]); // right color, wrong slot
  return { exact, partial };
}

Daylight as the clock. There is no real countdown. Your guesses are the clock. One number drives the entire mood: f = guessesUsed / maxGuesses. The sky is three color keyframes that I blend together based on f, and the sun rides a curve that drops faster as the light runs low.

const SKY = [
  [[42,140,255],[170,214,255]],  // noon
  [[255,138,71],[255,205,150]],  // golden dusk
  [[8,10,40],[26,22,58]],        // night
];
// ...
const sx = W * (0.5 + 0.42 * f);       // drift toward the western horizon
const sy = H * (0.17 + 0.62 * f * f);  // fall faster as the daylight fades

The stars only fade in once f gets past about 0.4, so dusk is what actually brings out the night sky as you get low on time.

The Bombe Assist. Pressing B spends one of your two charges. It picks a slot you have not solved yet (it leans toward one you currently have wrong), shows you the right color, and locks it in. It is a small tip of the hat to how the real Bombe ruled out possibilities to shrink the search. It also costs you points, so you actually have to decide whether it is worth it.

Making it feel good. Crack the code and you get bursts of particles in the spectrum colors plus a quick arpeggio. A wrong guess gets a low buzz, and the lose screen gives the canvas a shake.

A couple of decisions I am happy with:

It plays on the keyboard. Arrows to move, up and down or the number keys to set a color, Enter to decrypt, B for the Bombe. On a laptop you never reach for the mouse.
Every orb has a number from 1 to 6 printed on it, so you can play by number and not only by color. That makes it work for people who are colorblind.
Reusing that one f value for the sky, the sun, and the stars kept the whole atmosphere in sync with the stakes for almost no extra code.

It keeps going as long as you do. The codes grow from 4 to 5 to 6 symbols, your daylight scales from 10 to 12 to 14 guesses, and your score (level × 100 + daylight saved × 15 + Bombe charges held × 40) carries over from level to level until night finally wins.

Prize Category

🏅 Best Ode to Alan Turing

I went after this one on purpose, and I tried to work Turing into the game itself rather than just name dropping him.

The actual gameplay is code breaking. The thing that grades your guesses is named The Bombe, after the real machine he built against Enigma, and the Bombe Assist echoes how that machine ruled out dead ends to narrow things down.
The story around it leans on June being his birth month, with your deduction standing in as the light that holds off the dark.
The code you are cracking is the six color spectrum, a rainbow, on purpose. Turing was prosecuted for being gay and only pardoned long after he died. Decoding a rainbow under his name pulls the solstice, Pride, and computing history into one picture.

🌞 Thanks for playing, and happy solstice 🌞

[Boost]

Minh Long — Mon, 08 Jun 2026 15:38:45 +0000

June Solstice Game Jam Submission

Minh Long

Jun 8

☀ Solstice Cipher: Write Code, Break Ciphers, Restore Daylight

#devchallenge #gamechallenge #gamedev

5 min read

☀ Solstice Cipher: Write Code, Break Ciphers, Restore Daylight

Minh Long — Mon, 08 Jun 2026 15:38:32 +0000

This is a submission for the June Solstice Game Jam

Solstice Cipher is a browser puzzle game where you write real JavaScript to decrypt intercepted messages — inside a full Monaco Editor (the same engine that powers VS Code). Each solved cipher pushes back the night until the June 21 solstice breaks.

🎮 Play:

solstice-cipher-encrypt-coding-game.vercel.app

What I Built

The core loop is simple: read an intercepted transmission, implement decrypt(text) in a live code editor, hit Run decrypt(), and advance if the output matches.

There are 5 cipher levels, each tied to a phase of the solstice day:

Level	Phase	Cipher	Message
1	Pre-dawn	Caesar shift	HELLO WORLD
2	Sunrise	Atbash mirror	THE COOL
3	Morning	ROT13	PRIDE HUMAN
4	Midday	Vigenère (keyword PRIDE)	BE YOU
5	Longest Day	Caesar + word reverse	THE LIGHT SHINES

As you progress, a daylight bar fills from 15% to 100% — the sky literally brightens behind the UI. The narrative is set at Bletchley Park, June 1941, framing each puzzle as a transmission Alan Turing's team might have intercepted.

My intended goal: make a game where writing algorithms is the gameplay — not clicking tiles or guessing letters. The solstice theme isn't just decoration: every level is a step from darkness toward the longest day, and the final win screen lands on June 21 with Turing's own words.

Video Demo

The demo walks through:

Intro — solstice + Turing context
Live gameplay — Caesar cipher in Monaco Editor, Run decrypt(), daylight advancing
Gemini AI hint streaming in with line-specific guidance
Suggest fix → Monaco diff view → Apply patch
Win screen — THE LIGHT SHINES

Code

longphanquangminh / solstice-cipher-encrypt-coding-game

Solstice Cipher ☀

A code-breaking puzzle game for the June Solstice Game Jam on DEV.

Write JavaScript decrypt() functions in a real Monaco Editor (VS Code's engine via @monaco-editor/react) to break ciphers before the June 21 solstice. Each solved level brings more daylight — honoring Alan Turing, Pride, and the passage from darkness to light.

Why this idea targets the prizes

Prize category	How the game fits
Overall theme	Solstice countdown, daylight progression, June 21 narrative
Best Ode to Alan Turing	Bletchley Park story, Caesar/Enigma-style ciphers, algorithms as gameplay
Best Google AI Usage	Optional Gemini 3.5 Flash hints via API

Quick start

cd solstice-cipher
npm install
npm run dev

Open http://localhost:5173

Optional: Gemini AI hints

Create .env in the project root:

VITE_GEMINI_API_KEY=your_google_ai_studio_key

Get a free key at Google AI Studio. Without it, static hints still work.

How to play

Read the intercepted ciphertext and…

View on GitHub

Key files if you want to dig in:

src/data/levels.ts — all 5 ciphers, starter code, solutions, narrative
src/components/GameScreen.tsx — main gameplay loop
src/components/CodeEditor.tsx — Monaco setup + custom Bletchley terminal theme
src/utils/gemini.ts — Gemini streaming hints + code fix generation
src/utils/analyzeCode.ts — local static analysis that feeds the AI context
src/utils/runUserCode.ts — in-browser decrypt() execution

How I Built It

Stack

React 19 + TypeScript + Vite — fast dev, static deploy, no backend
@monaco-editor/react — the entire gameplay UI lives in Monaco, not a fake textarea
@google/genai — official Google AI SDK for streaming hints
Motion — intro/win screen animations

Monaco as the game engine

The editor uses an uncontrolled pattern (defaultValue + ref) so typing feels native — no React re-render on every keystroke, which was critical for a smooth coding experience.

I defined a custom bletchley-terminal theme: phosphor green strings, hazard red keywords, dark CRT background. Line highlighting marks the exact lines Gemini flags as buggy.

For Suggest fix, I use Monaco's DiffEditor — red/green side-by-side diff — with Apply/Dismiss. Patches go through executeEdits so undo works naturally.

Running player code safely

Player code runs in-browser via new Function() with a strict contract: define decrypt(text), return a string. Output is normalized (uppercase, trimmed) before comparison. No network, no server — fully static.

// src/utils/runUserCode.ts — simplified
const fn = new Function(`
  ${code}
  if (typeof decrypt !== 'function') throw new Error('Define decrypt(text)');
  return decrypt(${JSON.stringify(encrypted)});
`)

Gemini AI — not a chatbot bolt-on

When VITE_GEMINI_API_KEY is set, Turing Assist activates via gemini-3.5-flash and generateContentStream.

Before any API call, the game runs local static analysis on the player's code:

Detects untouched starter template lines
Finds passthrough bugs (result += char without shifting)
Classifies run state: NOT_RUN, RUNTIME_ERROR, WRONG_OUTPUT, CORRECT
Picks a hint mode: GUIDE, DEBUG, or ERROR

That analysis is sent to Gemini along with numbered source code. The model returns hints that reference specific line numbers — never the full plaintext answer.

Suggest fix is a second Gemini call that returns a fenced code block. Multiple candidates are validated by actually running them against the encrypted input; the first working patch wins. If Gemini fails, a local diff engine compares starter vs solution line-by-line as fallback — the game works fully offline without an API key.

Visual design

Industrial brutalist CRT aesthetic: scanlines, telemetry chrome, Enigma rotor graphic, and a Pride stripe on the intro display. The --daylight CSS variable drives a dynamic sky gradient — the UI literally gets brighter as you solve puzzles.

Interesting decisions

AI as tutor, not spoiler — system prompts forbid revealing answers; hints are contextual to your broken code
Streaming hints — text appears token-by-token like a live terminal feed
Dual fallback chain — Gemini → local analysis → static per-level hints; no dead ends
Code fix validation — never apply a patch that doesn't produce the correct decrypt output

Prize Category

Best Ode to Alan Turing

This category is the heart of the project.

Setting: Bletchley Park, June 1941 — the same era Turing cracked Enigma
Mechanics: Gameplay is writing decryption algorithms — Caesar, Atbash, ROT13, Vigenère
Narrative: Each level references how Turing learned patterns, saw symmetry in code, and turned hidden truth into clarity
Win screen: Quotes Turing directly — "We can only see a short distance ahead, but we can see plenty there that needs to be done."
UI details: Enigma rotor, SYS / BP-1941 header, Bletchley telemetry framing

The game doesn't just mention Turing — it asks you to think like him: break ciphers by writing code.

Best Google AI Usage

Gemini is integrated as Turing Assist, a cryptography tutor that understands your current code state:

Feature	How Gemini is used
Smart hints	`generateContentStream` with system prompt + local code analysis → line-specific GUIDE/DEBUG/ERROR hints
Suggest fix	Second call returns a minimal patch; validated by running against ciphertext
Fallback	Local static analysis + offline hints when no API key — AI enhances, never blocks
SDK	Official `@google/genai` — not a raw fetch wrapper

The AI receives structured context (run status, detected issues, numbered code) rather than a generic "help me solve this puzzle" prompt. That makes hints feel like a pair programmer at Bletchley, not a spoiler bot.

Set VITE_GEMINI_API_KEY in .env (free key from Google AI Studio) to enable live AI. Without it, static hints still work.

Quick Start (for judges who want to run it locally)

git clone https://github.com/longphanquangminh/solstice-cipher-encrypt-coding-game.git
cd solstice-cipher
npm install
npm run dev

Optional — enable Gemini hints:

VITE_GEMINI_API_KEY=your_key_here

[Boost]

Minh Long — Mon, 25 May 2026 11:04:20 +0000

Gemma 4 Challenge: Build With Gemma 4 Submission

Minh Long

May 24

🎙️Interview Coach AI — Practice Mock Interviews Locally with Gemma 4 + Jan

#devchallenge #gemmachallenge #gemma

5 min read

🎙️Interview Coach AI — Practice Mock Interviews Locally with Gemma 4 + Jan

Minh Long — Sun, 24 May 2026 17:32:20 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

Interview Coach AI is a local-first mock interview web app. You work through a 10-module curriculum (self-intro, behavioral, technical, capstone mock), speak or type your answers to an AI recruiter, and get a full performance report when the session ends — radar scores, strengths, weaknesses, and written feedback.

The product loop is simple on purpose:

Pick a lesson on the practice hub
Start a Preparation session (guided flow, live transcript, real-time scores)
Review analytics and track progress in your browser

No cloud LLM bill for the core experience. The “brain” of the app is Gemma 4 running on your machine, wired through Jan’s local server and its OpenAPI/Swagger docs so you can inspect and test every call before the React app ever hits it.

Demo

Quick local demo (no deploy required):

git clone https://github.com/longphanquangminh/gemma-interview.git
cd gemma-interview
npm install
cp .env.example .env
npm run dev

1/ Open Jan → load gemma-4-E4B-it-IQ4_XS → start the local API server (default http://127.0.0.1:1337)
2/ Open Jan’s Swagger / API docs in the browser — confirm POST /v1/messages responds

Jan app:

LLM Swagger:

3/ Visit http://localhost:3000 → Open practice hub → Module 1 → Preparation → complete one question and open the report

That’s the whole contest story: Gemma on Jan, in your room, in your app.

Youtube video showcasing original version of the app (Please turn up the volume to hear clearly):

Code

longphanquangminh / gemma-interview

Interview Coach AI

General-purpose mock interview practice with an AI recruiter, structured curriculum, and evidence-based reports. Built for the Gemma 4 Challenge on DEV — Gemma 4 (or any OpenAI-compatible model) drives planning, turn-taking, live scoring, and post-session analytics.

Highlights

Area	Details
Curriculum	10 modules (self-intro → capstone mock), sequential unlock
Preparation	5-question flow, avatar + TTS, transcript, live scores, local LLM
Live interview	Full-screen Tavus video room; LLM report after end
App hub	Dashboard, profile, settings, session history (separate from marketing landing)

Quick start

Requirements: Node.js 18+, a Gemma 4 (or compatible) endpoint, optional Tavus key for live video.

npm install
cp .env.example .env
# LOCAL_AI_BASE_URL + LOCAL_AI_MODEL → your Gemma / LM Studio / AI Studio proxy
npm run dev

Marketing site: http://localhost:3000
Practice hub: http://localhost:3000/dashboard

Environment

Variable	Used for
`LOCAL_AI_BASE_URL`	OpenAI-compatible Messages API (Gemma)
`LOCAL_AI_MODEL`	Model id on that endpoint
`VITE_TAVUS_*`	Live interview mode only

See .env.example…

View on GitHub

Repository: github.com/longphanquangminh/gemma-interview

Gemma integration lives in one place:

src/services/aiService.ts   →  every prompt + parse + score calibration

The app sends a single user message per request to Jan:

POST http://127.0.0.1:1337/v1/messages
Content-Type: application/json

{
  "model": "gemma-4-E4B-it-IQ4_XS",
  "messages": [{ "role": "user", "content": "<structured prompt>" }]
}

Configure via .env:

LOCAL_AI_BASE_URL="http://127.0.0.1:1337"
LOCAL_AI_MODEL="gemma-4-E4B-it-IQ4_XS"

How I Used Gemma 4

Gemma 4 is not decoration in this project — it is the interviewer, the examiner, and the report writer.

Which model, and why

I run gemma-4-E4B-it-IQ4_XS through Jan locally — Gemma 4’s E4B edge variant with IQ4_XS quantization.

Gemma 4 variant	Why I did / didn’t choose it
E4B (edge, ~4B effective) — my pick	Fast enough for many calls per session (plan → 5× turn/score → report). IQ4_XS keeps RAM/VRAM modest so anyone can rehearse interviews on a normal laptop
2B-class	Even lighter, but I wanted a bit more headroom for strict JSON + multi-step turn format across a full mock
31B Dense	Best raw reasoning, overkill for this workflow and too heavy for “open Jan and practice tonight”
26B MoE	Strong middle ground, but I deliberately wanted to show the edge line can carry a full structured agent loop when prompts + code guards are designed for it

Intentional fit: Interview Coach is not open-ended chat. Every Gemma call has a fixed output shape (JSON plan, CLASSIFICATION / ACTION / SAY lines, score JSON). That lets E4B punch above its weight — and when the model drifts, applyTurnGuards() and parsers in aiService.ts keep the UX stable.

IQ4_XS: aggressive quant for speed and size. Trade-off is occasional sloppy JSON; I debug those cases in Jan Swagger first, then tighten prompts. For a practice app with 10+ inference steps per session, latency and accessibility mattered more than squeezing the last point of benchmark score from a 31B file.

Why Jan + Swagger mattered

Jan made the integration feel production-shaped instead of hacky:

Local server with an OpenAI-compatible /v1/messages endpoint
Swagger UI to prototype prompts, check payloads, and debug bad JSON before wiring the React UI
Same model id end-to-end — what works in Swagger is what the app calls

That loop — Swagger first, app second — saved hours. Gemma’s responses are only useful here because the contract is strict; Jan’s docs let me validate that contract in isolation.

What Gemma does in the app (every call)

Phase	`aiService` function	Gemma’s job
Start session	`generateInterviewPlan`	JSON plan: welcome + 5 interview questions (typed: intro, technical, behavioral, …)
Each answer	`processTurn`	Recruiter line + `CLASSIFICATION` / `ACTION` / `SAY` (follow-up, next, repeat, end)
Live feedback	`analyzeResponse`	Scores: clarity, confidence, professionalism
End session	`getSessionSummary`	Full report JSON: overall + dimensions + strengths + weaknesses

flowchart LR
  A[User answers] --> B[React app]
  B --> C[Jan local API]
  C --> D[Gemma 4 E4B]
  D --> C
  C --> B
  B --> E[Transcript + live scores]
  B --> F[Analytics report]

Why Gemma shines on this workload

Structured JSON — plans and reports must parse; E4B + tight prompts + parsers made this workable locally.
Turn protocol — line-based SAY: output is easier to guard in code than free-form chat.
Evidence-based scoring — rubric prompts plus calibration in TypeScript; Gemma supplies judgments, the app enforces fairness.
Privacy, cost, and speed — everything stays on your machine; E4B + IQ4_XS keeps sessions responsive enough to actually finish a module.

I’m impressed that Gemma 4 E4B can own a full agent loop on consumer hardware — plan → dialogue → score → summarize — without sending transcripts to a hosted API. That’s the point of the edge family, and this app is built to showcase it.

One request from the judges

If you try the repo, load gemma-4-E4B-it-IQ4_XS in Jan, hit Swagger once, then run Module 1 in the app. The story is edge Gemma + strict contracts + Jan, not a thin chat wrapper.

🚀LeadPilot – Your AI Staff Engineer in the Terminal

Minh Long — Mon, 16 Feb 2026 07:57:18 +0000

This is a submission for the GitHub Copilot CLI Challenge

Tagline:
“Because not everyone has a Staff Engineer reviewing their PR at 2AM.”

What I Built

LeadPilot is a tiny CLI that turns your local git diff into an actionable code review using GitHub Copilot CLI-right from your terminal.

Instead of waiting for PR reviews (or context-switching to a web UI), I wanted something I can run immediately while coding-especially for quick “sanity checks” before committing, pushing, or opening a PR.

What it does

One command: leadpilot review
Two review personas:
- Startup CTO Review (default): pragmatic, shipping-focused, highlights the biggest risk + one improvement
- FAANG Staff Engineer Review: stricter, architecture/scalability oriented, includes score + approval decision
Branch-aware diffs: compare against any git ref via --branch (e.g. --branch master, --branch origin/main)
Terminal-friendly output: clean, boxed formatting that’s easy to skim

If you’ve ever thought “I wish a senior engineer could look at this real quick”… LeadPilot is that, on-demand.

Why I built it

Code reviews are amazing… when you can get them.

But in real life:

You might be working solo, late at night, or in a small team.
Your teammate might be asleep (or in meetings) when you’re about to ship.
Sometimes you don’t need a full PR discussion-you just want a quick, high-signal check.

LeadPilot is designed for that moment: fast feedback, in the terminal, on the diff you’re already looking at.

How it works (high-level)

LeadPilot keeps the workflow intentionally simple:

It computes the diff you care about using git diff <branch> (default origin/main).
It wraps that diff in a prompt tailored to the persona you chose (startup or faang).
It asks GitHub Copilot CLI to review it via the copilot command (prompt-in, review-out).
It prints the result in a clean, boxed format so you can skim it quickly.

This approach makes it easy to use in any repo without extra setup beyond having git + copilot available.

Demo

Repo: https://github.com/longphanquangminh/leadpilot

Quick start (global install)

From the LeadPilot repo:

npm install
npm i -g .

Suggested walkthrough

1/ Open any git repository.
2/ Make a small change (uncommitted is fine).
3/ Run a pragmatic review against master:

leadpilot review --branch master

4/ Flip personas to get a stricter review:

leadpilot review --mode faang --branch master

5/ Show the boxed output and discuss whether you’d “ship it” or iterate.

What you guys should do in your trials

A diff that’s ~10–100 lines (enough to be interesting, small enough to review live)
The Startup CTO output (biggest risk + one improvement)
The FAANG output (score + approval decision)
A quick branch switch (--branch origin/main vs --branch master) to show it’s flexible

Screenshots:

My Experience with GitHub Copilot CLI

GitHub Copilot CLI was my “pair reviewer” while building LeadPilot:

It helped me iterate fast on prompts so each persona produces consistent, scannable sections (instead of a wall of text).
It was great for UX pressure-testing: what output is actually actionable in a terminal (and what’s just noise).
It made it easy to loop on edge cases (no diff, wrong refs, setup issues) because everything stays in the command line.

What I liked most is how natural it felt to keep everything in the terminal: edit → diff → review → refine.

What I learned

Constraints create clarity: forcing the Startup CTO persona to return “ship decision + biggest risk + one improvement” makes the review immediately usable.
Different personas are surprisingly helpful: the strict mode is great for architecture/design issues; the startup mode is great for “what could blow up in production tomorrow”.
Terminal output matters: boxing + consistent headings makes it feel like a real tool, not just AI text pasted into your console.

What I’d improve next

Async reviews for very large diffs or slower machines (queue the job, stream output, or provide a progress indicator).
More modes (e.g., “Security reviewer”, “Performance reviewer”, “DX reviewer”) while keeping outputs structured.
Context knobs (optionally include commit messages, file paths only, or a summary first).

🚀 Copilot CLI Plugin Marketplace - AI-Powered Productivity Hub

Minh Long — Mon, 16 Feb 2026 07:50:02 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I created a production-ready web application that transforms GitHub Copilot CLI into an accessible, user-friendly marketplace of AI-powered plugins. Instead of running commands in the terminal, users can now click beautifully designed cards and watch plugins execute in real-time with live output streaming.

🎯 The Problem I Solved

GitHub Copilot CLI is incredibly powerful but requires terminal familiarity. My marketplace makes these capabilities accessible to everyone with an intuitive web interface.

✨ Key Features

🎨 Beautiful Modern UI - SaaS-style design with smooth animations and terminal-style output display
⚡ Fast & Responsive - Built with Next.js 16 and TailwindCSS 4
🔌 4 Powerful Pre-built Plugins:
- 📄 Generate README - Create comprehensive project documentation
- 🔗 Summarize Git Commits - Analyze history and generate changelogs
- 🧪 Generate Test Cases - Create unit and integration test suites
- 🔍 Repository Review - Comprehensive code review and suggestions
🔒 Security First - No command injection vulnerabilities, whitelist validation
📦 Extensible - Add new plugins in 2 minutes with minimal code
🧪 Production Ready - Full TypeScript, comprehensive error handling, security hardened

💻 Technology Stack

Frontend: React 19 + TypeScript + TailwindCSS
Backend: Next.js 16 (App Router) + API Routes
Runtime: Node.js child_process
CLI: GitHub Copilot CLI
Database: None (plugins configured in code)

Demo

🎬 Live Project

Repository: GitHub - copilot-plugin-marketplace

📸 Screenshots

Homepage

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Copilot CLI Plugin Marketplace                    │
│                                                     │
│  Supercharge your workflow with                    │
│  AI-powered productivity plugins                   │
│                                                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐         │
│  │📄 README │  │🔗 Commits│  │🧪 Tests  │         │
│  │Generate  │  │Summarize │  │Generate  │         │
│  │[ Run ]   │  │[ Run ]   │  │[ Run ]   │         │
│  └──────────┘  └──────────┘  └──────────┘         │
│                                                     │
│  ┌──────────┐                                       │
│  │🔍 Review │                                       │
│  │Repository│                                       │
│  │[ Run ]   │                                       │
│  └──────────┘                                       │
└─────────────────────────────────────────────────────┘

Plugin Execution

Step 1: User clicks "Run Plugin"
Step 2: Loading spinner appears
Step 3: Copilot CLI executes prompt
Step 4: Results stream in real-time
Step 5: Terminal-style output displayed

Output Display

┌────────────────────────────────────┐
│ $ Plugin Output                    │
├────────────────────────────────────┤
│ # My Project README                │
│                                    │
│ A modern web application...        │
│                                    │
│ ## Installation                    │
│ npm install                        │
│ npm run dev                        │
│                                    │
│ ## Features                        │
│ - Feature 1                        │
│ - Feature 2                        │
│                                    │
│ [Scroll for more...]               │
└────────────────────────────────────┘

🚀 Getting Started (2 Minutes)

# Clone the repository
git clone https://github.com/longphanquangminh/copilot-plugin-marketplace.git
cd copilot-plugin-marketplace

# Install dependencies
npm install

# Start development server
npm run dev

Then open http://localhost:3000 and explore the marketplace!

📋 Requirements

Node.js 18+
GitHub Copilot CLI (copilot command available in PATH)
npm or yarn

My Experience with GitHub Copilot CLI

🎯 Why I Chose Copilot CLI

I wanted to build something that showcased the real power of GitHub Copilot CLI in a practical, business-ready application. Instead of a simple demo, I created a production-grade platform that makes AI-powered tools accessible to non-technical users.

💡 How I Used Copilot CLI

1. Direct Process Execution

The marketplace executes Copilot CLI commands directly:

const { exec } = require('child_process');

exec(`copilot prompt -m "${prompt}"`, (error, stdout) => {
  // Capture and display output in real-time
});

2. Custom Prompts for Each Plugin

Each plugin sends tailored prompts:

README Plugin: "Create a comprehensive README.md"
Commit Summarizer: "Analyze recent commits and create changelog"
Test Generator: "Generate comprehensive test cases"
Repository Review: "Perform detailed code review"

3. Real-Time Output Streaming

Users see results appear in a terminal-style interface as Copilot CLI processes the prompt.

🚀 Impact on Development Experience

Dramatically Improved:

✅ Accessibility: Non-terminal users can now leverage Copilot CLI
✅ User Experience: Beautiful, responsive interface with real-time feedback
✅ Scalability: Easy to add new plugins without modifying core code
✅ Safety: Robust error handling and security validation
✅ Speed: 2-minute startup, plugin execution in seconds

What Copilot CLI Enabled:

Documentation Generation - Copilot creates professional README files instantly
Changelog Creation - Analyzes git history and generates summaries
Test Case Creation - Suggests comprehensive test coverage
Code Review - Provides architectural and quality recommendations

🎓 Learning Journey

Building this project taught me:

How to safely integrate CLI tools into web applications
Best practices for process management and error handling
Creating extensible plugin architectures
Security hardening against command injection
Next.js App Router and modern React patterns

⚡ Performance & Scale

The marketplace is optimized for:

30-second timeout on executions (prevents hanging)
10MB output buffer (handles large outputs safely)
Real-time streaming (users see progress immediately)
Error resilience (graceful degradation on failures)

🔐 Security Considerations

I implemented multiple layers of protection:

Whitelist Validation - Only registered plugins can execute
No User Input - Prompts are hardcoded per plugin
Process Isolation - Child processes are contained
Buffer Limits - Prevents memory exhaustion
Error Containment - Safe error messages without data leakage

💬 Why This Matters

GitHub Copilot CLI is a game-changer for developers, but it lives in the terminal. By creating this marketplace, I've shown that:

Copilot CLI can power sophisticated web applications
AI tools don't need to be complex - they can be beautifully simple
Teams can standardize on AI-assisted workflows
Security and usability aren't mutually exclusive

📊 Project Highlights

Metric	Value
Build Time	<3 seconds
Dev Start	~5 seconds
Page Load	<500ms
TypeScript Coverage	100%
Security Issues	0 vulnerabilities
Plugins	4 pre-built + extensible
Documentation	5 comprehensive guides

🎯 Perfect For

🏆 Hackathon showcase
📚 Portfolio projects
👥 Team productivity tools
🔬 Learning modern web development
💼 Enterprise tool templates
🤖 AI/ML demonstrations

📚 Additional Resources

Full Project README - Complete documentation
Quick Start Guide - Get running in 2 minutes
Setup Instructions - Detailed installation guide
Usage Examples - Plugin usage scenarios
GitHub Repository

🙏 Special Thanks

GitHub Copilot CLI - The powerful backbone
Next.js - Modern web framework
TailwindCSS - Beautiful styling
React 19 - Latest React features

🎉 Closing Thoughts

This project demonstrates how GitHub Copilot CLI can be integrated into real-world applications to create tangible value. By combining security, usability, and powerful AI capabilities, we can build tools that help developers work smarter, not harder.

The marketplace is ready to use, extend, and deploy. Whether you're a developer looking to learn Next.js or a team seeking to streamline your workflow, this project provides a solid foundation.

Thanks for checking out my submission for the GitHub Copilot CLI Challenge! 🚀

Built with ❤️ using Next.js, TypeScript, TailwindCSS, and GitHub Copilot CLI

🍔 FoodSnap Tutor – Snap a meal, get a recipe (Gemini 2.5 Flash)

Minh Long — Mon, 15 Sep 2025 06:30:40 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

FoodSnap Tutor is a frontend-only app that turns any food photo into instant cooking guidance. Upload an image and the app:

Detects whether the image is food
Identifies the likely dish name (with alternatives when uncertain)
Generates a step-by-step recipe
Estimates nutrition per serving (calories, protein, carbs, fat)
Suggests a healthier variation and friendly moderation tips

Tech stack: React 19, TypeScript, Vite 6, Tailwind (CDN), and @google/genai calling Gemini 2.5 Flash. Everything runs in the browser — no backend required.

Demo

Live demo: https://foodsnap-tutor.vercel.app
Youtube video demo: https://youtu.be/criJO6OhDY0
Github repository: https://github.com/longphanquangminh/foodsnap-tutor
Screenshots:

✨ Upload screen:

✨ Analysis screen:

✨ Error screen:

How I Used Google AI Studio

I leveraged the @google/genai SDK to call Gemini 2.5 Flash with:

An inline image part (base64-encoded upload).
A structured prompt telling the model to reply in JSON.
A response schema so the SDK validates the output client-side.

import { GoogleGenAI, Type } from "@google/genai";

// Strict JSON schema
const schema = {
  type: Type.OBJECT,
  properties: {
    isFood: { type: Type.BOOLEAN },
    dishName: { type: Type.STRING },
    recipe: {
      type: Type.OBJECT,
      properties: {
        ingredients: { type: Type.ARRAY, items: { type: Type.STRING } },
        steps: { type: Type.ARRAY, items: { type: Type.STRING } }
      },
      required: ["ingredients", "steps"]
    },
    nutrition: {
      type: Type.OBJECT,
      properties: {
        calories: { type: Type.STRING },
        protein: { type: Type.STRING },
        carbs:    { type: Type.STRING },
        fat:      { type: Type.STRING }
      },
      required: ["calories", "protein", "carbs", "fat"]
    },
    healthierVariation: { type: Type.STRING },
    friendlyAdvice:     { type: Type.STRING }
  },
  required: ["isFood", "dishName", "recipe", "nutrition", "healthierVariation"]
};

// Convert upload to an image part
const fileToPart = async (file: File) => {
  const dataUrl = await new Promise<string>((res, rej) => {
    const r = new FileReader();
    r.readAsDataURL(file);
    r.onload = () => res(r.result as string);
    r.onerror = rej;
  });
  const [meta, data] = dataUrl.split(",");
  const mime = meta.match(/:(.*?);/)?.[1] ?? "image/jpeg";
  return { inlineData: { mimeType: mime, data } };
};

export async function analyzeFoodImage(image: File) {
  const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });
  const imagePart = await fileToPart(image);
  const prompt = "You are FoodSnap Tutor, an expert AI chef and nutritionist...";
  const res = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: { parts: [imagePart, { text: prompt }] },
    config: {
      responseMimeType: "application/json",
      responseSchema: schema
    }
  });
  return JSON.parse(res.text);
}

Environment wiring (Vite):

// vite.config.ts
import { defineConfig, loadEnv } from "vite";
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, ".", "");
  return {
    define: {
      "process.env.API_KEY": JSON.stringify(env.GEMINI_API_KEY)
    }
  };
});

# .env.local
GEMINI_API_KEY=ai-xxxxxxxxxxxxxxxx

Multimodal Features

Vision input: Users upload a dish photo that the SDK sends as inline image data.
Structured output: Gemini returns validated JSON (recipe, nutrition, advice) for deterministic UI rendering.
Single multimodal call: Image + text prompt → cohesive culinary analysis.
UX touches: Drag-and-drop upload, instant preview, animated results, retry flow.
Robustness: UI handles blocked content or JSON parse errors gracefully with friendly messages.

Notes
• Frontend-only: In production restrict the API key to allowed origins or proxy requests through a lightweight backend.
• Built with React + Vite + Tailwind for fast iteration and static deployment.

Thanks for reading! If you’d like to try it out or peek at the code, check the demo and repo links above. 🚀

🔭 Nocturne – A Blockchain Explorer for Midnight Network ⛓️

Minh Long — Mon, 08 Sep 2025 06:29:22 +0000

This is a submission for the Midnight Network "Privacy First" Challenge - Enhance the Ecosystem prompt

What I Built

Nocturne — Midnight Explorer is a privacy-first block explorer for the Midnight Network testnet.

It solves two problems:

Visibility – Developers need an easy way to inspect blocks, extrinsics and events on the new privacy chain without spinning up their own node or indexer.
Privacy & Security – Traditional explorers embed analytics and permissive CSPs. Nocturne ships with a strict, developer-friendly setup that respects user privacy out-of-the-box.

Key points:

Live data via @polkadot/api WebSocket, no 3rd-party indexer required.
Built with Next.js 15 App Router + TypeScript + Tailwind.
Dark theme, responsive, zero external fonts/analytics.

Demo ✨

GitHub: https://github.com/longphanquangminh/midnight-explorer
Live demo: https://midnight-explorer-sand.vercel.app

Screen	Preview
Home – Latest blocks & txs
Block list with paging
Transaction detail

How I Used Midnight's Technology

Midnight Explorer connects directly to the Midnight RPC endpoint.

It uses methods such as:

chain_getBlockHash → to get block hashes
chain_getBlock → to fetch full block details
chain_getHeader → to check block headers and metadata

By calling these RPC endpoints, the explorer can dynamically list new blocks and transactions without needing a centralized backend.

This demonstrates how to integrate with Midnight’s Substrate-based architecture while keeping everything privacy-first and user-friendly.

As I mentioned before, Midnight is Substrate-based, so I connected directly to the public testnet RPC:

import { ApiPromise, WsProvider } from "@polkadot/api";

const api = await ApiPromise.create({
  provider: new WsProvider("wss://rpc.testnet-02.midnight.network")
});

Blocks: api.rpc.chain.getBlock(hash) and header queries.
Transactions: Iterated extrinsics + system.events to derive success / failure.
Tip height: api.rpc.chain.getFinalizedHead() → header.number.

Because the Polkadot API loads WASM crypto that calls WebAssembly.instantiate, I extended the Content-Security-Policy with 'wasm-unsafe-eval' to keep things locked down yet functional.

Developer Experience Improvements

No need for manual RPC calls: Developers can quickly inspect blocks without using curl or custom scripts.
Improved debugging: When building dApps on Midnight, seeing live transaction details in the explorer helps troubleshoot faster.
Open source & extendable: The codebase is kept simple so other developers can fork it and add features like search, account pages, or charts.

Pain Point	Nocturne’s Solution
Hard to explore live data without indexer	Direct node connection, lazy loaded singleton API
CSP errors with WASM	Pre-configured strict CSP allowing only what Polkadot needs
Pagination UX	“Next” and “Previous” buttons with offset cursors
Boilerplate	Scaffolded project with Tailwind, linting, TypeScript, ready-to-deploy

Set Up Instructions / Tutorial

1. Clone & install

git clone https://github.com/YOUR_GH_ORG/midnight-explorer.git
cd midnight-explorer
npm install

2. Configure environment

Create .env.local:

# optional – uses public RPC if omitted
NEXT_PUBLIC_RPC_URL=wss://rpc.testnet-02.midnight.network

# reserved for future indexer
NEXT_PUBLIC_INDEXER_URL=

3. Run locally

npm run dev
# http://localhost:3000

Watch the terminal for:

Connecting to Midnight RPC at wss://...

4. Build for production

npm run build     # Turbopack compile
npm start         # Next.js server on port 3000

5. Deploy to Vercel

Import the repo → Framework preset Next.js.
Add the env vars above.
Click Deploy – done!

Future Improvements

While Midnight Explorer already provides basic block and transaction browsing, there are many directions to expand and improve the user experience:

Full transaction details: Show event logs, method calls, gas usage, and execution status for every transaction.
Internal transactions: Support viewing internal calls (similar to RoninChain Explorer), so developers can trace contract-to-contract interactions and hidden flows inside a block.
Rich search functionality: Enable search by block number, transaction hash, or account address.
Account pages: Display balances, recent transactions, and contract code for each account.
Charts and statistics: Add dashboards with real-time metrics like block time, TPS, gas consumption, and transaction volume.
Better UX for developers: Include copy-to-clipboard buttons for hashes/addresses, human-readable method names, and ABI decoding for contract calls.
Privacy-first features: Integrate Midnight’s unique privacy tech so that sensitive data can be hidden while still showing useful metadata (e.g., zk-proofs, shielded transactions).

The long-term goal is to evolve Midnight Explorer into a comprehensive block explorer, making it as powerful as established explorers like Etherscan or RoninChain Explorer, but optimized for Midnight’s privacy-first ecosystem.

DEV username: @minhlong2605

Thanks for reading & happy hacking on Midnight! 🌑🚀

AI Agent for real-time startup funding & stock market monitoring

Minh Long — Mon, 01 Sep 2025 06:51:48 +0000

This is a submission for the AI Agents Challenge powered by n8n and Bright Data

What I Built

I built an AI Agent for real-time startup funding & stock market monitoring.
The agent continuously scrapes funding announcements, investment news, and stock-related articles from trusted sources using Bright Data.
It then:

Normalizes the data (startup name, funding round, amount, investor, location).
Stores results in a structured database.
Sends instant alerts when new investment or stock news is detected.

This solves the problem of information overload for investors, founders, and analysts—delivering curated, actionable insights in real time.

Demo

👉 Demo Link

The demo showcases:

News scraping with Bright Data.
AI-powered classification (e.g., Seed / Series A / IPO news).
Slack/Telegram notifications when a new funding round is published.
Historical record stored in Supabase for querying.

n8n Workflow

The core workflow is built in n8n. It runs every 30 minutes, scrapes investment/stock news, stores the data, and pushes alerts.

Trigger: Cron Node (every 30m)
Bright Data Verified Node: Scrape financial/startup sources
Function Node: Parse + classify news
Supabase Node: Save to investment_alerts table
Slack/Telegram Node: Alert user on new deals

🔗 Workflow JSON on GitHub Gist

Technical Implementation

System Instructions:
- Extract relevant entities (company, funding round, amount, investor).
- Filter only startup funding or stock-related events.
- Categorize severity/importance.
Model Choice: OpenAI GPT-4 mini (n8n OpenAI node).
Memory: No long-term memory needed, but history is stored in Supabase for querying.
Tools used:
- Bright Data Verified Node (scraping)
- Supabase (free Postgres DB with REST API)
- n8n Function Node (data cleaning)
- Slack/Telegram (notification)

Bright Data Verified Node

Bright Data provides reliable, real-time scraping of news and financial data sources.
In my workflow, the Bright Data node fetches startup funding announcements and stock-related articles.

Example JSON returned:

{
  "title": "FinTechX raises $20M Series A led by Sequoia",
  "url": "https://news.example.com/fintechx-seriesa",
  "date": "2025-08-31T12:00:00Z",
  "category": "funding"
}

This output is parsed, classified, and stored into Supabase.

Journey

At first, I tried connecting multiple news APIs, but they had rate limits and lacked coverage for private startup deals.
By leveraging Bright Data, I was able to scrape diverse sources reliably.
Challenges included:

Normalizing inconsistent data (dates, company names, funding formats).
Avoiding duplicate entries in the DB.
Designing a lightweight schema that works for both startup funding and stock alerts.

I learned how powerful n8n + Bright Data are together: low-code workflow automation + enterprise-grade data pipelines.
The best part? I can extend this agent to cover M&A, IPOs, or crypto markets next. 🚀

👉 That’s my submission! Thanks to n8n & Bright Data for making real-time AI agents possible.

Real-Time Donation Leaderboard with AI Predictions: Powered by Redis 8

Minh Long — Mon, 11 Aug 2025 06:53:52 +0000

This is a submission for the Redis AI Challenge: Real-Time AI Innovators.

What I Built

I created a Real-Time Donation Leaderboard that combines the power of Redis 8 with OpenAI to deliver instant donation tracking, live leaderboards, and AI-powered predictions. This full-stack TypeScript application demonstrates how Redis can serve as the backbone for real-time applications while enabling intelligent insights through AI integration.

Key Features:

⚡ Real-time donation tracking with instant leaderboard updates
🏆 Live leaderboard with automatic polling every 3 seconds
🤖 AI-powered predictions for rising donors and daily totals
📊 Comprehensive analytics with donation patterns and trends
🎨 Modern responsive UI with smooth animations
🔒 Production-ready with security, error handling, and health checks

Demo

🔗 Links

GitHub Repo: https://github.com/longphanquangminh/leaderboard-donation

📱 Screenshots

Main leaderboard interface

Donation form in action

AI predictions panel

Mobile responsive design

Real-time updates in progress

How I Used Redis 8

Redis 8 serves as the complete real-time data layer for this application, leveraging multiple Redis data structures and features:

🏗️ Core Redis Architecture

1. Sorted Sets for Leaderboard Rankings

// Real-time leaderboard updates using Redis Sorted Sets
// Increment donor's total amount atomically
multi.zIncrBy('leaderboard', donation.amount, donation.donorId);

// Get top donors with scores (descending order)
const results = await this.client.zRangeWithScores('leaderboard', 0, limit - 1, {
  REV: true,
});

2. Streams for Event Sourcing

// Track all donation events with Redis Streams
multi.xAdd('donations:stream', '*', {
  donorId: donation.donorId,
  donorName: donation.donorName,
  amount: donation.amount.toString(),
  message: donation.message || '',
  timestamp: donation.timestamp.toString(),
});

// Retrieve recent donations for AI analysis
const streamData = await this.client.xRange('donations:stream', '-', '+');

3. Hash Maps for Donor Information

// Store donor name mapping efficiently
multi.hSet('donor:names', donation.donorId, donation.donorName);

// Get donor names for leaderboard display
const donorIds = results.map(item => item.value);
const names = await this.client.hmGet('donor:names', donorIds);

4. Atomic Multi-Operations

// Use Redis multi for atomic operations
const multi = this.client.multi();

// Add to streams for event history
multi.xAdd('donations:stream', '*', donationData);

// Update leaderboard (sorted set)
multi.zIncrBy('leaderboard', donation.amount, donation.donorId);

// Store donor name mapping
multi.hSet('donor:names', donation.donorId, donation.donorName);

// Execute all commands atomically
await multi.exec();

🚀 Real-Time Performance Benefits

Connection Management with Retry Logic:

this.client = createClient({
  username: process.env.REDIS_USERNAME || 'default',
  password: process.env.REDIS_PASSWORD || '',
  socket: {
    host: process.env.REDIS_URL || 'localhost',
    port: parseInt(process.env.REDIS_PORT || '6379'),
    reconnectStrategy: retries => Math.min(retries * 50, 500),
  },
});

Health Monitoring:

async ping(): Promise<boolean> {
  try {
    await this.ensureConnection();
    const result = await this.client.ping();
    return result === 'PONG';
  } catch (error) {
    console.error('Redis ping failed:', error);
    return false;
  }
}

🤖 AI Integration with Redis

Redis serves as the intelligent data pipeline for AI predictions:

async generatePredictions(): Promise<PredictionData> {
  // Get current leaderboard and recent donations from Redis
  const [leaderboard, recentDonations, totalDonations] = await Promise.all([
    redisService.getLeaderboard(20),
    redisService.getRecentDonations(24),
    redisService.getTotalDonations(),
  ]);

  // Prepare data for AI analysis
  const donationTrends = this.analyzeDonationTrends(recentDonations);
  const leaderboardData = leaderboard.slice(0, 10);

  // Generate AI predictions using OpenAI
  const completion = await this.openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [
      {
        role: 'system',
        content: 'You are an AI analyst specializing in donation pattern analysis and predictions.',
      },
      {
        role: 'user',
        content: this.buildPredictionPrompt(leaderboardData, donationTrends, totalDonations),
      },
    ],
    temperature: 0.3,
    max_tokens: 1000,
  });
}

📊 Data Analysis from Redis Streams

private analyzeDonationTrends(donations: Donation[]): any {
  const hourlyTrends: { [hour: string]: number } = {};
  const donorActivity: { [donorId: string]: { count: number; total: number; recent: number } } = {};

  const now = Date.now();
  const oneHour = 60 * 60 * 1000;

  donations.forEach(donation => {
    const hour = Math.floor(donation.timestamp / oneHour);
    hourlyTrends[hour] = (hourlyTrends[hour] || 0) + donation.amount;

    if (!donorActivity[donation.donorId]) {
      donorActivity[donation.donorId] = { count: 0, total: 0, recent: 0 };
    }

    donorActivity[donation.donorId].count++;
    donorActivity[donation.donorId].total += donation.amount;

    // Count recent activity (last 6 hours)
    if (now - donation.timestamp < 6 * oneHour) {
      donorActivity[donation.donorId].recent += donation.amount;
    }
  });

  return { hourlyTrends, donorActivity };
}

Technical Architecture

🏗️ Full Stack Implementation

Backend: Node.js + Express + TypeScript

RESTful API with comprehensive error handling
Redis integration with connection pooling
OpenAI API integration for predictions
Security middleware (Helmet, CORS)
Health monitoring and graceful shutdown

Frontend: React 18 + TypeScript + Vite

Real-time polling every 3 seconds
Responsive design with SCSS
Smooth animations and loading states
Error boundaries and user feedback
Accessibility-compliant interface

Database: Redis as primary data store

Sorted Sets for rankings
Streams for event history
Hash Maps for metadata
Atomic operations for consistency

🔧 Key Technical Decisions

Why Redis Over Traditional Databases?

Performance: In-memory operations for instant leaderboard updates
Real-time: Native support for live data structures
Simplicity: Single data store for multiple use cases
AI-Ready: Fast data aggregation for ML pipelines

Actual Redis Data Model

leaderboard (Sorted Set)
├── john_doe → 1500.00
├── jane_smith → 1200.50
└── bob_johnson → 950.25

donations:stream (Stream)
├── 1691234567890-0: {donorId: "john_doe", donorName: "John Doe", amount: "25.00", ...}
├── 1691234567891-0: {donorId: "jane_smith", donorName: "Jane Smith", amount: "50.00", ...}
└── 1691234567892-0: {donorId: "john_doe", donorName: "John Doe", amount: "75.00", ...}

donor:names (Hash)
├── "john_doe" → "John Doe"
├── "jane_smith" → "Jane Smith"
└── "bob_johnson" → "Bob Johnson"

🚀 Performance Optimizations

Connection Management with Retry Logic

this.client = createClient({
  username: process.env.REDIS_USERNAME || 'default',
  password: process.env.REDIS_PASSWORD || '',
  socket: {
    host: process.env.REDIS_URL || 'localhost',
    port: parseInt(process.env.REDIS_PORT || '6379'),
    reconnectStrategy: retries => Math.min(retries * 50, 500),
  },
});

Atomic Multi-Operations

// Use Redis multi for atomic operations
const multi = this.client.multi();

// Add to streams for event history
multi.xAdd('donations:stream', '*', {
  donorId: donation.donorId,
  donorName: donation.donorName,
  amount: donation.amount.toString(),
  message: donation.message || '',
  timestamp: donation.timestamp.toString(),
});

// Update leaderboard (sorted set)
multi.zIncrBy('leaderboard', donation.amount, donation.donorId);

// Store donor name mapping
multi.hSet('donor:names', donation.donorId, donation.donorName);

// Execute all commands atomically
await multi.exec();

Efficient Data Retrieval

// Get leaderboard with scores in one operation
const results = await this.client.zRangeWithScores('leaderboard', 0, limit - 1, {
  REV: true,
});

// Batch get donor names
const donorIds = results.map(item => item.value);
const names = await this.client.hmGet('donor:names', donorIds);

AI-Powered Features

🤖 Intelligent Predictions

The application uses OpenAI GPT-3.5-turbo to analyze donation patterns and generate predictions:

Real AI Implementation

async generatePredictions(): Promise<PredictionData> {
  try {
    // Get current leaderboard and recent donations from Redis
    const [leaderboard, recentDonations, totalDonations] = await Promise.all([
      redisService.getLeaderboard(20),
      redisService.getRecentDonations(24),
      redisService.getTotalDonations(),
    ]);

    // Prepare data for AI analysis
    const donationTrends = this.analyzeDonationTrends(recentDonations);
    const leaderboardData = leaderboard.slice(0, 10);

    // Generate AI predictions using OpenAI
    const completion = await this.openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: 'You are an AI analyst specializing in donation pattern analysis and predictions.',
        },
        {
          role: 'user',
          content: this.buildPredictionPrompt(leaderboardData, donationTrends, totalDonations),
        },
      ],
      temperature: 0.3,
      max_tokens: 1000,
    });

    const response = completion.choices[0]?.message?.content;
    const predictions = JSON.parse(response);

    return this.validateAndEnhancePredictions(predictions, leaderboard, totalDonations);
  } catch (error) {
    console.error('AI prediction error:', error);
    return this.generateFallbackPredictions();
  }
}

Data Analysis Pipeline

private analyzeDonationTrends(donations: Donation[]): any {
  const hourlyTrends: { [hour: string]: number } = {};
  const donorActivity: { [donorId: string]: { count: number; total: number; recent: number } } = {};

  const now = Date.now();
  const oneHour = 60 * 60 * 1000;

  donations.forEach(donation => {
    const hour = Math.floor(donation.timestamp / oneHour);
    hourlyTrends[hour] = (hourlyTrends[hour] || 0) + donation.amount;

    if (!donorActivity[donation.donorId]) {
      donorActivity[donation.donorId] = { count: 0, total: 0, recent: 0 };
    }

    donorActivity[donation.donorId].count++;
    donorActivity[donation.donorId].total += donation.amount;

    // Count recent activity (last 6 hours)
    if (now - donation.timestamp < 6 * oneHour) {
      donorActivity[donation.donorId].recent += donation.amount;
    }
  });

  return {
    hourlyTrends,
    donorActivity,
    totalDonations: donations.length,
    totalAmount: donations.reduce((sum, d) => sum + d.amount, 0),
  };
}

AI Prompt Engineering

private buildPredictionPrompt(leaderboard: LeaderboardEntry[], trends: any, totalDonations: number): string {
  return `
Analyze the following donation data and provide predictions in JSON format:

CURRENT LEADERBOARD:
${leaderboard.map(entry => `${entry.rank}. ${entry.donorName}: $${entry.totalAmount}`).join('\n')}

DONATION TRENDS:
- Total donations today: $${totalDonations}
- Recent donor activity: ${JSON.stringify(trends.donorActivity, null, 2)}
- Hourly trends: ${JSON.stringify(trends.hourlyTrends, null, 2)}

Please provide predictions in this EXACT JSON format:
{
  "risingStars": [
    {
      "donorId": "donor_id",
      "donorName": "Donor Name", 
      "currentAmount": 100,
      "predictedGrowth": 25.5,
      "confidence": 0.75
    }
  ],
  "dailyTotal": {
    "currentTotal": ${totalDonations},
    "predictedTotal": estimated_end_of_day_total,
    "confidence": 0.8,
    "timeRemaining": "X hours remaining"
  }
}
`;
}

🧠 Fallback Intelligence

When OpenAI is unavailable, the system uses Redis-based heuristics:

private async generateFallbackPredictions(): Promise<PredictionData> {
  const [leaderboard, totalDonations] = await Promise.all([
    redisService.getLeaderboard(10),
    redisService.getTotalDonations(),
  ]);

  // Simple heuristic-based predictions
  const risingStars = leaderboard
    .slice(3, 8) // Pick middle-ranking donors as potential rising stars
    .map(entry => ({
      donorId: entry.donorId,
      donorName: entry.donorName,
      currentAmount: entry.totalAmount,
      predictedGrowth: Math.random() * 50 + 10, // Random growth between 10-60
      confidence: 0.5,
    }));

  const currentHour = new Date().getHours();
  const hoursRemaining = 24 - currentHour;
  const growthFactor = 1 + (Math.random() * 0.4 + 0.1); // 10-50% growth

  return {
    risingStars,
    dailyTotal: {
      currentTotal: totalDonations,
      predictedTotal: Math.round(totalDonations * growthFactor),
      confidence: 0.6,
      timeRemaining: `${hoursRemaining} hours remaining`,
    },
  };
}

Prediction Validation

private validateAndEnhancePredictions(
  predictions: any,
  leaderboard: LeaderboardEntry[],
  totalDonations: number,
): PredictionData {
  // Ensure rising stars exist and are valid
  const risingStars = (predictions.risingStars || [])
    .filter((star: any) => star.donorId && star.donorName)
    .slice(0, 5)
    .map((star: any) => ({
      donorId: star.donorId,
      donorName: star.donorName,
      currentAmount: Math.max(0, star.currentAmount || 0),
      predictedGrowth: Math.max(0, Math.min(1000, star.predictedGrowth || 0)),
      confidence: Math.max(0.1, Math.min(0.9, star.confidence || 0.5)),
    }));

  // Validate daily total prediction
  const currentHour = new Date().getHours();
  const hoursRemaining = 24 - currentHour;

  const dailyTotal = {
    currentTotal: totalDonations,
    predictedTotal: Math.max(totalDonations, predictions.dailyTotal?.predictedTotal || totalDonations * 1.2),
    confidence: Math.max(0.1, Math.min(0.9, predictions.dailyTotal?.confidence || 0.6)),
    timeRemaining: `${hoursRemaining} hours remaining`,
  };

  return { risingStars, dailyTotal };
}

Real-World Impact

📈 Technical Benefits

Response Time: Fast in-memory Redis operations
Data Consistency: Atomic multi-operations ensure data integrity
Scalability: Redis can handle high concurrent loads
Memory Efficiency: Optimized data structures for leaderboard use case
Real-time Updates: 3-second polling provides near real-time experience

🎯 Use Cases

This architecture is perfect for:

Charity Fundraising: Real-time donation tracking and leaderboards
Gaming Leaderboards: Live player rankings and achievements
Sales Competitions: Team performance tracking and motivation
Social Media: Trending content and engagement rankings
E-commerce: Real-time inventory and sales tracking

🔮 Future Enhancements

WebSocket Integration: Replace polling with real-time push notifications
Redis Pub/Sub: Instant updates to all connected clients
Advanced Analytics: More sophisticated trend analysis
Machine Learning: Custom prediction models trained on historical data
Geographic Analytics: Location-based donation insights
Mobile App: Native mobile applications with push notifications

Getting Started

🚀 Quick Setup

# Clone the repository
git clone [your-repo-url]
cd leaderboard-donation

# Run automated setup
./setup.sh

# Configure environment variables
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

# Start the application
# Terminal 1: Backend
cd backend && npm run dev

# Terminal 2: Frontend  
cd frontend && npm run dev

# Optional: Seed test data
cd backend && npm run seed

🔧 Configuration

Backend (.env):

PORT=3001
REDIS_URL=redis://your-redis-host:6379
REDIS_PASSWORD=your-redis-password
OPENAI_API_KEY=your-openai-api-key

Frontend (.env):

VITE_API_URL=http://localhost:3001

📚 API Implementation

Donation Submission

async submitDonation(req: Request, res: Response): Promise<void> {
  try {
    const { donorName, amount, message }: DonationRequest = req.body;

    // Validation
    if (!donorName || typeof donorName !== 'string' || donorName.trim().length === 0) {
      res.status(400).json({ error: 'Donor name is required' });
      return;
    }

    if (!amount || typeof amount !== 'number' || amount <= 0) {
      res.status(400).json({ error: 'Valid donation amount is required' });
      return;
    }

    if (amount > 10000) {
      res.status(400).json({ error: 'Donation amount cannot exceed $10,000' });
      return;
    }

    // Create donation object
    const donation: Donation = {
      id: uuidv4(),
      donorId: donorName.toLowerCase().replace(/\s+/g, '_'),
      donorName: donorName.trim(),
      amount: Math.round(amount * 100) / 100, // Round to 2 decimal places
      message: message?.trim(),
      timestamp: Date.now(),
    };

    // Save to Redis
    await redisService.addDonation(donation);

    res.status(201).json({
      success: true,
      donation: {
        id: donation.id,
        donorName: donation.donorName,
        amount: donation.amount,
        message: donation.message,
        timestamp: donation.timestamp,
      },
    });
  } catch (error) {
    console.error('Error submitting donation:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

Leaderboard Retrieval

async getLeaderboard(req: Request, res: Response): Promise<void> {
  try {
    const limit = parseInt(req.query.limit as string) || 10;

    if (limit > 50) {
      res.status(400).json({ error: 'Limit cannot exceed 50' });
      return;
    }

    const leaderboard = await redisService.getLeaderboard(limit);

    res.json({
      success: true,
      leaderboard,
      timestamp: Date.now(),
    });
  } catch (error) {
    console.error('Error fetching leaderboard:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

Statistics Calculation

async getStats(req: Request, res: Response): Promise<void> {
  try {
    const [totalDonations, recentDonations] = await Promise.all([
      redisService.getTotalDonations(),
      redisService.getRecentDonations(24),
    ]);

    const stats = {
      totalDonations,
      donationsToday: recentDonations.length,
      averageDonation:
        recentDonations.length > 0
          ? recentDonations.reduce((sum, d) => sum + d.amount, 0) / recentDonations.length
          : 0,
    };

    res.json({
      success: true,
      stats,
      timestamp: Date.now(),
    });
  } catch (error) {
    console.error('Error fetching stats:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

Conclusion

This project demonstrates how Redis 8 can serve as a complete real-time data platform, enabling both high-performance applications and intelligent AI integrations. By leveraging Redis's diverse data structures and combining them with OpenAI's predictive capabilities, we've created a system that's not just fast and reliable, but also intelligent and insightful.

The combination of Redis's sub-millisecond performance with AI-powered predictions creates a new category of applications that are both reactive and predictive - responding instantly to user actions while providing intelligent insights about future trends.

🏆 Why This Matters

In today's real-time world, users expect instant feedback and intelligent insights. This project shows how Redis 8 makes it possible to deliver both, creating applications that are not just fast, but smart.

Redis isn't just a cache anymore - it's an intelligent real-time data platform.

Built with ❤️ using Redis 8, OpenAI, TypeScript, React, and Node.js

Real-Time Job Recommender with Bright Data MCP

Minh Long — Mon, 26 May 2025 06:25:56 +0000

This is a submission for the Bright Data AI Web Access Hackathon

What I Built

I built a Real-Time Job Recommender system that empowers users to search for jobs using natural language queries and receive up-to-date job listings from across the web. Powered by LLMs and Bright Data’s Model Context Protocol (MCP), this AI agent autonomously navigates job websites, retrieves structured data in real time, and matches results based on intent rather than keywords.

This project solves the issue of outdated or irrelevant job recommendations by enabling live, intelligent search through current listings on the open web.

📽️ Demo

🔗 GitHub Repository: https://github.com/longphanquangminh/llm-job-suggestor

How I Used Bright Data's Infrastructure

right Data’s Model Context Protocol (MCP) was essential to building an autonomous AI agent that can operate on the live web.

Here's how MCP enhanced the system:

Discover: The agent locates relevant job listings across multiple platforms and job boards.
Access: MCP enables seamless access to modern, JavaScript-heavy job sites.
Extract: The agent retrieves structured data—job titles, companies, locations, requirements—in real time.
Interact: The system mimics human interaction with dynamic interfaces (e.g., pagination, filters) and adapts to changes in website structure.

MCP acts as a control layer for AI agents, providing real-time interaction with external web contexts. This allowed my job recommender to function as a self-sufficient explorer of the web, without preloaded data or brittle scrapers.

Performance Improvements

Using real-time web access via MCP led to substantial improvements over traditional approaches:

Live results: Users receive job opportunities that are currently available—not days or weeks old.
Richer understanding: LLMs analyze complete job descriptions, not just titles or summaries.
Semantic search: Vector search ensures the results match the user’s intent, even with fuzzy or casual phrasing.
Dynamic adaptability: The system can adapt to layout changes or new websites without reprogramming extractors.

Compared to static datasets or basic keyword scraping, this approach is significantly more intelligent, flexible, and responsive.

Features

✅ Real-time job discovery from multiple online sources
✅ Natural language job search (e.g., “remote backend roles in fintech”)
✅ LLM-based classification, summarization, and sentiment scoring
✅ Vector-based semantic search using OpenAI embeddings
✅ Gradio-powered interactive dashboard
✅ Filtering by industry, experience level, job type, and location
✅ Scheduled crawling to keep the dataset fresh and relevant

Tech Stack

Python 3.11
Bright Data MCP
OpenAI + LangChain
Chroma (Vector DB)
Gradio (Web UI)
Pandas and SQLite for lightweight data storage

What's Next

Some future directions I’m excited about:

Personalized job recommendations based on resume data
Real-time salary benchmarking
Company culture analysis using scraped reviews
Auto-application tools for integrated platforms
User profiles with alerts and saved searches

Acknowledgements

Shoutout to Bright Data for creating the infrastructure to empower agents to explore and interact with the web in real time. If you're building anything with AI agents or live web data, MCP is a game-changer.

Want to connect or collaborate? Reach out—I’d love to hear your thoughts 😊

DEV Community: Minh Long

🧩LOGIC SOLSTICE CIPHER - A Code-Breaking Ode to Alan Turing

What I Built

Code

longphanquangminh / solstice-cipher

🌞 SOLSTICE CIPHER

Crack the light before the longest day ends.

About

Theme connection

How I Built It

Prize Category

[Boost]

☀ Solstice Cipher: Write Code, Break Ciphers, Restore Daylight

☀ Solstice Cipher: Write Code, Break Ciphers, Restore Daylight

What I Built

Video Demo

Code

longphanquangminh / solstice-cipher-encrypt-coding-game

Solstice Cipher ☀

Why this idea targets the prizes

Quick start

Optional: Gemini AI hints

How to play

How I Built It

Stack

Monaco as the game engine

Running player code safely

Gemini AI — not a chatbot bolt-on

Visual design

Interesting decisions

Prize Category

Best Ode to Alan Turing

Best Google AI Usage

Quick Start (for judges who want to run it locally)

Tags

[Boost]

🎙️Interview Coach AI — Practice Mock Interviews Locally with Gemma 4 + Jan

🎙️Interview Coach AI — Practice Mock Interviews Locally with Gemma 4 + Jan

What I Built

Demo

Code

longphanquangminh / gemma-interview

Interview Coach AI

Highlights

Quick start

Environment

How I Used Gemma 4

Which model, and why

Why Jan + Swagger mattered

What Gemma does in the app (every call)

Why Gemma shines on this workload

One request from the judges

🚀LeadPilot – Your AI Staff Engineer in the Terminal

What I Built

What it does

Why I built it

How it works (high-level)

Demo

Quick start (global install)

Suggested walkthrough

What you guys should do in your trials

My Experience with GitHub Copilot CLI

What I learned

What I’d improve next

🚀 Copilot CLI Plugin Marketplace - AI-Powered Productivity Hub

What I Built

🎯 The Problem I Solved

✨ Key Features

💻 Technology Stack

Demo

🎬 Live Project

📸 Screenshots

Homepage

Plugin Execution

Output Display

🚀 Getting Started (2 Minutes)

📋 Requirements

My Experience with GitHub Copilot CLI

🎯 Why I Chose Copilot CLI

💡 How I Used Copilot CLI