DEV Community: Minh Long

[Boost]

Minh Long — Mon, 15 Jun 2026 15:23:57 +0000

June Solstice Game Jam Submission

Minh Long

Jun 14

🏃 SOLSTICE: Shift Time, Reshape the World (June Solstice Game Jam Entry)

#devchallenge #gamechallenge #gamedev

6 min read

🏃 SOLSTICE: Shift Time, Reshape the World (June Solstice Game Jam Entry)

Minh Long — Sun, 14 Jun 2026 16:04:50 +0000

This is a submission for the June Solstice Game Jam

Disclaimer: This project was built with Google Gemini throughout: game code, level design, debugging, and this writeup. I directed the concept, reviewed output, and iterated until it played fair; Gemini did the heavy lifting on implementation and polish.

What I Built

SOLSTICE is a browser puzzle platformer about the moment the year stops turning.

You play as the Sunkeeper. The longest day has frozen halfway between dawn and dusk. The only way forward is to shift time between Day and Night. That is not a visual filter. It rewires the level. Sun blocks hold you up in daylight and vanish at night. Moon blocks are ghost platforms until you flip to darkness. Water kills you under the sun and becomes walkable ice when the stars come out.

The campaign is five levels that teach the rules one beat at a time, ending at the great Solstice Shrine. After that you can drop into Endless Mode, where the game keeps serving new realms forever.

I built it for the solstice theme on purpose. Light and dark are not just palette swaps here. They are the puzzle. Every jump, every collectible, the exit asks you to read the world twice and pick the right phase of time.

You can try it inline below. For the best experience, play the standalone web version. Keyboard focus, audio, and the Gemini AI settings panel all behave more reliably outside the embed.

Play it now (recommended): https://longphanquangminh.github.io/SOLSTICE-jump/

No install. Click once on the canvas if the keyboard feels dead, then go.

Quick reference

Tile	Day	Night
`S` Sun block	Solid	Vanishes
`M` Moon block	Invisible	Solid (shift to reveal stairs)
`W` Water / Ice	Deadly water	Walkable ice
`#` Stone	Solid	Solid
`^` Spikes	Deadly	Deadly
`o` Sun mote	Collect	Collect
`E` Solstice Shrine	Exit	Exit

Controls: ←/→ or A/D to move · Space/W to jump · Shift/J/F to flip time · Enter to start · E for Endless Mode from the title screen · R to restart · M to mute

Video Demo

▶ Direct link: https://www.youtube.com/watch?v=u7lJvqdN9Y8

The clip walks through the core loop: run, jump, collect sun motes, hit Shift to flip the world, reach the Shrine. You will see the gold day palette snap into indigo night, moon stairs appearing out of nowhere, and a frozen river turning from hazard into a bridge.

Raw capture in the repo: jump.wmv

Code

longphanquangminh / SOLSTICE-jump

SOLSTICE — A Game of Light & Time

Play now: https://longphanquangminh.github.io/SOLSTICE-jump/

A browser-based 2D puzzle-platformer built for the DEV June Solstice Game Jam 2026. You are the Sunkeeper. On the longest day of the year, time has stalled between day and night. Use SHIFT TIME (Day ↔ Night) to reshape the world, collect sun motes, and light the Solstice Shrines to restore the cycle.

Demo

▶ YouTube — SOLSTICE gameplay

Original video file in the repo: jump.wmv

How to Play

Press SHIFT to flip time — the physical world changes with the light/dark phase:

Tile	Day	Night
`S` Sun-block	Solid	Vanishes
`M` Moon-block	Invisible / not standable	Solid (hidden stairs — SHIFT to reveal)
`W` Water / Ice	Deadly water	Walkable ice
`#` Stone	Solid in both phases	Solid in both phases
`^` Spikes	Always deadly	Always deadly
`o` Sun mote	Collectible	Collectible
`E` Solstice Shrine	Level exit

…

View on GitHub

Repo: https://github.com/longphanquangminh/SOLSTICE-jump

The whole game lives in a single index.html. Canvas 2D, fixed timestep physics, tile maps, WebAudio synth, the Gemini client, and the level validator all ship in one file so GitHub Pages can host it with zero build step.

SOLSTICE-jump/
├── index.html      # The entire game (HTML + CSS + JS)
├── jump.wmv        # Gameplay demo video
├── README.md
└── working-doc.md  # Dev notes

How I Built It

I started with one question: what if changing time changed geometry?

From there I worked iteratively with Gemini: describing mechanics, getting code back, playtesting, and sending fixes until the game felt right. Levels are ASCII grids. # is stone. S and M are phase locked blocks. W is water or ice depending on the sky. o is a sun mote. E is the Shrine. The parser pads uneven rows so a sloppy AI row never crashes the game.

Physics and feel

Movement uses coyote time and jump buffering because platformers live or die on forgiveness. Shifting phases runs through a trap check first. If the new phase would crush the player inside solid tile, the shift is denied with a little shake and a sour note. You are never soft locked by your own power.

Proving levels are fair

Early playtests caught a nasty bug: motes floating four tiles in the air when the jump apex only reaches about two. That felt like a secret rule instead of a skill check. With Gemini I rebuilt placement around three reachable patterns: a short hop, a climbable staircase, or a moon stair you only see after shifting to night.

Then we added a phase aware reachability search (BFS) that understands walk, step up, jump arcs, falls, and day/night toggles. Every campaign level, every sample realm, and every runtime Gemini output gets filtered through it before you play. If the Shrine is unreachable, the level is rejected. If a mote is unreachable, it gets stripped so 100% collection stays honest.

A greedy hold jump bot was also run against the campaign until it cleared all five levels including the finale. That caught missing player spawn markers and floating steps that looked cool but broke progression.

Campaign levels

I · First Light · learn SHIFT and the moon bridge
II · Meltwater · deadly water by day, frozen ice by night
III · Twilight Rhythm · alternating sun stone and moon stone
IV · Frostfall · every mechanic combined
V · The Longest Day · the finale; light the great Shrine

Beating the campaign unlocks Endless Solstice.

How Gemini was used to build the game

Gemini was not a one off feature bolted on at the end. It was the main development partner.

For the codebase, I described systems in plain language (physics, tile parsing, phase shift, WebAudio, UI) and iterated with Gemini until everything landed in one self contained index.html. Bug fixes, the reachability validator, the verification bot, and the Endless Mode pipeline all went through the same loop: prompt, generate, test, refine.

For campaign and sample levels, Gemini helped draft and revise ASCII maps against the jump limits and tile rules. I still validated every map with the in game BFS before shipping, which is how unreachable motes and missing spawn points got caught.

For this post, Gemini helped structure and polish the writeup so judges could actually follow the project.

How Gemini shows up inside the game

This is the second layer, and the one judges can play with directly.

Endless Mode uses a pluggable LevelManager with a clear fallback chain:

Ask Google Gemini to invent a brand new map at runtime (if the player enabled AI and supplied their own API key via the ✦ AI panel)
Pull from a shuffled pool of eight verified sample realms from the build
Echo a random known realm so loading never dead ends

So Gemini shows up twice: once as the dev tool that built SOLSTICE, and once as a live level designer players can turn on in Endless Mode.

The runtime path sends a detailed level design brief: tile legend, jump limits (about two tiles up, three across), staircase rules, mote counts, and a full JSON example of a real solvable level from the game. The model must answer with structured JSON via responseSchema, matching fields like name, sub, tip, startDay, and rows.

Implementation details judges might care about:

The client tries the official @google/genai SDK with streaming first, then falls back to raw REST if the CDN is blocked
AbortController plus a 30 second timeout so a slow network never freezes the run
API keys live in localStorage on the player's machine only. No key? Endless Mode still works on the built in pool. Runtime AI is a bonus layer, not a paywall
Every generated map passes the same reachability validator as campaign content before it hits the canvas
The HUD shows where the current realm came from (Gemini AI, Sample realm, or Echo)

Gemini is not generating flavor text off to the side. At build time it helped write the game. At runtime it can dream up the next lawful puzzle inside rules strict enough to reject bad output automatically.

Polish

Visuals are all procedural: gold sun motes, indigo night sky, star fields, phase crossfades, particle bursts on shift and collect. Audio is tiny synthesized bleeps so the file stays portable.

Prize Category

Best Google AI Usage

This category fits SOLSTICE on two levels.

Build time: Gemini helped write the full game: physics, rendering, audio, level data, the reachability validator, and the Endless Mode pipeline. I steered the design and kept iterating until every campaign level was provably solvable.

Runtime: Gemini is embedded in the playable product. Endless Mode can call the same model live to invent new maps, with structured JSON output, streaming, graceful fallback, and the same validator that rejects unfair levels.

That is end to end Google AI usage: from jam concept to shippable code to a feature players can switch on with their own API key.

Players opt in through the in game ✦ AI settings panel. The game never blocks if they skip runtime generation. Built in sample realms and echo fallback keep Endless Mode running either way.

I am not submitting for Best Ode to Alan Turing this round. The theme here is solstice light and the turning of time rather than computing history.

Thanks for reading. If you try Endless Mode with Gemini enabled, tell me the weirdest lawful realm it conjured. I am curious which shift puzzle it thinks is clever.

Links

Play (recommended): https://longphanquangminh.github.io/SOLSTICE-jump/
CodePen: https://codepen.io/longphanquangminh/pen/YPNGYXZ
Repo: https://github.com/longphanquangminh/SOLSTICE-jump
Demo: https://www.youtube.com/watch?v=u7lJvqdN9Y8
Jam: https://dev.clauneck.workers.dev/challenges/june-game-jam-2026-06-03

🕹️ SOLSTICE: Hold the Light Until Dawn - A 3D Browser Game for the June Solstice Jam

Minh Long — Sun, 14 Jun 2026 15:42:11 +0000

This is a submission for the June Solstice Game Jam

On the June solstice the sun stays up longer than any other day of the year. Then it sets anyway. SOLSTICE is what happens after that: the longest night, one stone ring, and you holding the last flame.

Play SOLSTICE · no install, runs in the browser

What I Built

SOLSTICE is a 3D action survival game where daylight is not background flavor. It is the mechanic.

You are the Sunbearer, keeper of an ancient ring of standing stones. When the solstice sun goes down, shadow creatures crawl out to snuff your flame. You fight back with a glowing blade, dash through dark bolts, and vacuum up the light they drop when they break apart.

The whole run hangs on two meters:

Light is your health, your urgency, and your fuel. It ticks down over time and falls hard when something hits you. Let it hit zero and the night wins.

Dawn is how close you are to sunrise. It climbs as you survive and as you kill. Fill it to 100% and the sky actually changes: the solstice sun crests the stones, the shadows burn off, you win.

Your light is your life, your weapon, and the clock. When it runs out, the night wins.

I built this for the jam theme on purpose. Light, darkness, and time are not three separate ideas in the UI. They are one loop you feel in your hands: slash, dodge, collect, survive.

The arena is Stonehenge inspired. The real monument lines up with the solstice sunrise, so defending that ring felt right. The toughest wave and the Warden of the Long Night boss show up late, right before first light. Darkest before dawn is not just flavor text here.

Controls (laptop friendly, no gamepad needed):

Input	Action
`W` `A` `S` `D` or arrow keys	Move
`Space` or left click	Light Slash
`Shift`	Dash with brief invulnerability
`E`	Solar Flare, charged AoE ultimate
`Esc`	Pause

Three difficulties on the start screen: Acolyte (gentler), Sunbearer (default), Eclipse (two bosses, meaner spawns). You can swap difficulty from pause or the end screen if a run feels wrong.

Video Demo

Full run below: sunset, the swarm, the Warden, and the dawn break.

Playable build (single HTML file). You can try the CodePen embed below, but the web link is the best way to play: fullscreen, proper keyboard focus, and fewer iframe limits.

Play here (recommended): https://longphanquangminh.github.io/sunbearer/

Code

Whole game lives in one file. Repo:

longphanquangminh / sunbearer

SOLSTICE — Hold the Light

A browser-based 3D action-survival game built for the DEV June Solstice Game Jam (2026). You are the Sunbearer, last keeper of an ancient stone ring. As the solstice sun sets, shadow creatures pour from the dark — your Light is your health, your weapon fuel, and the clock. Survive the longest night and reach dawn.

Play now · Demo video

The hook

Your light is your life, your weapon, and the clock. When it runs out, the night wins.

Light drains over time and drops fast when enemies hit you. Slay shadows to collect light fragments and stay alive.
Dawn fills as you survive. Hit 100% and the solstice sun crests the horizon — you win.
The sky, fog, sun, and stars repaint in real time from sunset through midnight to golden dawn.

Controls

Input	Action
`W` `A` `S` `D` / Arrow keys

…

View on GitHub

Clone and serve locally if you want to poke around (needs HTTP, not file://):

git clone https://github.com/longphanquangminh/sunbearer.git
cd sunbearer
npx serve .

How I Built It

I gave myself a hard constraint: one self contained HTML file, no bundler, no downloaded assets, host it anywhere. Open the page, play. That shaped every decision after it.

Stack in short:

Three.js r160 over WebGL, loaded with a native importmap from jsDelivr
UnrealBloomPass for glow on the blade, orbs, and dawn light
Web Audio only: every sound is synthesized at runtime, zero audio files
Procedural canvas textures for the ground and particles
No external models or image assets

Three.js comes in clean with an import map, no build step:

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>

Postprocessing loads dynamically inside try/catch. If bloom fails on a weird GPU, the game still renders instead of dying on a black screen.

The sky is the progress bar

The Dawn meter does more than fill a UI bar. One value, dawn from 0 to 1, drives keyframe blending across sky color, fog, sun angle and intensity, ambient light, hemisphere light, and star opacity. You start at hot sunset, sink into violet dusk and deep midnight, then break into gold when you win. You can read how close sunrise is by looking up, not only by checking HUD numbers.

const SKY = [
  // p,    sky,      fog,      sun,    sunInt, amb, hemi, stars
  [0.00, 0xE8743B, 0x6e3a2e, 0xffb060, 1.5, 0.55, 0.60, 0.0],
  [0.50, 0x0c1230, 0x0a1026, 0x6a78c0, 0.35, 0.32, 0.35, 1.0],
  [1.00, 0xFFC56B, 0x9a6a3e, 0xffe0a0, 1.7, 0.70, 0.85, 0.0],
];

function updateDay() {
  const p = dawn / dawnMax;
  const [a, b, t] = segment(SKY, p);
  scene.background.lerpColors(a.sky, b.sky, t);
  scene.fog.color.lerpColors(a.fog, b.fog, t);
  sun.intensity = lerp(a.sunInt, b.sunInt, t);
  stars.opacity = lerp(a.stars, b.stars, t);
}

Combat and waves

Melee uses arc hit detection: range plus facing angle, knockback, combo multiplier on chained kills. Enemies are shades, fast wisps, ranged casters that make you move, and the Warden boss on a wave director that ramps up over the night.

Difficulty is a thin multiplier layer at run start: enemy HP, damage, speed, spawn rate, light drain, dawn duration, orb drops, enemy cap. Three distinct feels from one codebase without forking logic everywhere.

Performance on a laptop

Capped device pixel ratio, recycled sprite particle pool, blob shadows on most things with one real shadow casting sun, hard enemy cap. It should stay smooth on a normal laptop without asking for a gaming rig.

The design change that actually mattered

Early builds had separate HP and a survival timer. Too noisy. Merging them into Light made every choice sharper: dash away and let the meter tick, or push in for fragments that refill you. Tuning that drain vs reward loop took the most iteration, which is why I added selectable difficulty instead of pretending one balance fits everyone.

Prize Category

Submitting for Best Google AI Usage.

Google Gemini helped across the whole project, not just this writeup. I used it to generate and iterate on the game code (Three.js setup, combat, wave logic, sky pipeline, Web Audio synthesis), debug issues, and tune balance. I also used it to draft and polish this DEV submission so the theme and technical choices are easy to follow.

My role was directing the design (light as health, solstice theme, single file constraint), reviewing what Gemini produced, playtesting, and cutting or fixing what did not feel right in actual runs. The final game is a back and forth between my intent and Gemini's output, not something I typed out line by line solo.

Disclaimer: This project used Google Gemini for both game development and this blog post. I am noting that openly for transparency and because it fits the jam's Google AI prize category.

Hold the light until dawn. 🌅

If you try it, I would love your high score and honest feedback in the comments. Happy solstice, whichever hemisphere you are in.

Fancy formatted version of this writeup: longphanquangminh.github.io/sunbearer/post

#DEVChallenge #gamedev #javascript #threejs #webgl

🧩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 Gemini 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.

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! 🌑🚀

DEV Community: Minh Long

[Boost]

🏃 SOLSTICE: Shift Time, Reshape the World (June Solstice Game Jam Entry)

🏃 SOLSTICE: Shift Time, Reshape the World (June Solstice Game Jam Entry)

What I Built

Quick reference

Video Demo

Code

longphanquangminh / SOLSTICE-jump

SOLSTICE — A Game of Light & Time

Demo

How to Play

How I Built It

Physics and feel

Proving levels are fair

Campaign levels

How Gemini was used to build the game

How Gemini shows up inside the game

Polish

Prize Category

Best Google AI Usage

🕹️ SOLSTICE: Hold the Light Until Dawn - A 3D Browser Game for the June Solstice Jam

What I Built

Video Demo

Code

longphanquangminh / sunbearer

SOLSTICE — Hold the Light

The hook

Controls

How I Built It

The sky is the progress bar

Combat and waves

Performance on a laptop

The design change that actually mattered

Prize Category

🧩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