DEV Community: Mike

[Boost]

Mike — Sun, 09 Aug 2026 14:51:35 +0000

Mike

Aug 9

🏦 Vaya: an AI loan advisor that asks whether you can still afford to live

#showdev #ai #qoderhackathon #qodervietnam

4 min read

🏦 Vaya: an AI loan advisor that asks whether you can still afford to live

Mike — Sun, 09 Aug 2026 14:51:26 +0000

Every loan comparison site asks the same question: which bank has the lowest rate?

That question has almost nothing to do with whether the loan will ruin you.

A 6.2% loan you can barely service is worse than a 6.8% one that leaves you room to breathe. A rate that resets after twelve promotional months is not a 6.2% loan at all. And none of the twenty banks whose products you are comparing has any interest in telling you that.

So we built Vaya around the question people are actually asking, which is: if I take this, can I still live?

🔗 Live demo: vaya-project.vercel.app — no signup, nothing to install.

👨‍💻 Source code:

alibaba-hackathon-fsi / frontend-vaya

Vaya — AI Loan Advisor for Vietnam

Vaya is a conversational AI loan advisor that compares loan products across major Vietnamese banks. Users describe their borrowing needs in natural language — "I have a house and want to borrow 12 million for studying" — and the system collects what's missing through natural dialogue, then returns ranked recommendations with full financial transparency: monthly payments, DTI ratios, risk assessments, eligibility recovery steps, and cashflow survival analysis.

The platform is built on one architectural contract: a deterministic Decision Engine owns every number, and the LLM only talks. The engine (pure functions, zero LLM involvement) filters, prices, scores, and ranks. The AI layer extracts intent, converses with the customer, narrates pre-computed results, and answers policy questions via RAG — it never calculates, scores, ranks, or decides eligibility.

Target users: Vietnamese consumers evaluating loan options across multiple banks.

Core value proposition: Unbiased, explainable loan…

View on GitHub

What it does

Describe your situation in one sentence. No forms, no wizard. The homepage is a chat input, because that is the product. "Car loan ₫800M, income ₫30M/month" is enough to start.

It compares real products from 20+ Vietnamese banks. Rates, maximum amounts, terms, processing time, LTV caps — side by side, sortable, filterable, with the actual bank logos so you know who you are dealing with.

It simulates the repayment against your cashflow. Full amortisation, month by month. What you pay, what is interest, what is left. Charts you can hover, not a single number in a box.

It gives you a survival score. This is the part I would show you first. Vaya runs a Monte Carlo simulation over your income, expenses and existing debt, and tells you the probability that the loan pushes you underwater — plus DTI, PTI, LTV and disposable income, each with a plain-language explanation attached. If a loan is risky it does not just say "not suitable"; it suggests borrowing less, extending the term, increasing the down payment, or which expenses to cut to get back into safe territory.

It flips the market. There is a marketplace where you post an anonymous request and banks bid on it — the reverse of shopping across twenty websites. Every offer is displayed next to that bank's own public listed rate, because the gap between the two is the entire point. Banks see your amount, term and income band. They never see your name, phone or email.

It speaks three languages. English, Vietnamese, Chinese — everything, including the AI's explanations, not just the navigation.

And it has a proper dark mode, if you are the kind of person who checks. Toggle is in the navbar; right-click it to hand control back to your OS.

Screenshots

1/ The homepage hero (chat input front and centre -> product-centric)

2/ The survival score page — the most distinctive screen

3/ The marketplace with bank offers stacked against listed rates

4/ Bank screener

5/ Magic Bento

6/ AI chat

Video

Under the hood

Tech stack

Next.js 14 App Router, TypeScript
No Tailwind — a hand-written design system in a single stylesheet, ~5,500 lines, square corners and one brand green throughout
Custom SVG charts rather than a charting library, so the tooltips and the amortisation curves behave exactly as the product needs
Monte Carlo simulation in pure TypeScript for the survival score, running client-side
i18n via React context, ~600 keys per language, three sets kept strictly in sync
React Bits <MagicBento /> for the feature grid
Deployed on Vercel

A few things I enjoyed building more than expected: the reverse-auction board has no AI in it at all — it is a forum, and forums already work. The whole survival engine is pure functions, which meant the report generator could reuse it without a single API call. And retrofitting dark mode onto a 5,500-line stylesheet that three people were editing daily turned out to be the hardest CSS problem of the project, by a distance.

Where it came from

Vaya was built for the Alibaba Cloud FSI Hackathon by a team of four. Results are announced on 11 August, which means it is currently in that nice window where I can only improve the parts nobody is judging.

If you want the longer story of how it was built — the product decisions, the tooling, what we got wrong — the team wrote it up here:

🐦 The full build thread on X
💼 Write-up on LinkedIn

I would like your eyes on it

Genuinely, not rhetorically — the demo is open and takes about two minutes:

vaya-project.vercel.app

Three things I am unsure about and would love to be argued with on:

Is the survival score legible to someone who is not a finance person? It is the most valuable thing in the product and the easiest thing to over-engineer into noise. Try it and tell me whether the number means anything to you.
Does the reverse-auction marketplace feel like something you would actually use, or like a mechanic that only makes sense to the people who built it?
Chat-first homepage — right call or annoying? We deliberately did not build a landing page with a "Get Started" button. Some people love it. Some people scroll looking for the marketing site.

Drop a comment with what broke, what confused you, or what you would cut. I will reply to all of them.

check it out

Mike — Thu, 06 Aug 2026 17:47:46 +0000

Frontend Challenge Perfect Landing Submission 🍲🥧

Mike

Aug 6

🥁 Mâm Cơm Landing Page: I built a Vietnamese dinner tray on a 3,000-year-old bronze drum

#devchallenge #frontendchallenge #webdev #javascript

9 min read

🥁 Mâm Cơm Landing Page: I built a Vietnamese dinner tray on a 3,000-year-old bronze drum

Mike — Thu, 06 Aug 2026 17:47:27 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

When the prompt said comfort food, I did not think of a dish. I thought of a shape.

Vietnamese has no word for "entrée." There is only cơm - rice - and everything laid around it. Every evening, in a hundred million homes, six or seven small dishes go onto one round tray and get eaten all at once, in any order, by everyone. We call it mâm cơm: the family rice tray. It is not a sequence of courses. It is a conversation.

And here is the thing I could not stop thinking about once I noticed it: Việt Nam's oldest surviving artefact is a Đông Sơn bronze drum, cast around 1000 BCE. Its face is a perfect disc of concentric life - a fourteen-rayed sun at dead centre, ringed by bands of Lạc herons, long boats, and dancers in feathered headdresses. Our most ordinary household object is a bamboo tray of exactly the same shape.

So I built the tray on the drum. Three thousand years apart, same circle.

The centrepiece

The tray is a lazy susan you can actually spin. Seven dishes orbit the drum face; choose one and the whole drum turns until that dish arrives at twelve o'clock, while each dish counter-rotates so the food never ends up upside down. The centre medallion names whatever is on top, and the panel beside it opens with a full-width close-up.

You can drag it, swipe it, click a dish, press the arrow keys, or use the two spin buttons. Because a lazy susan is a thing you push.

Under the hood it is just an ARIA tablist bent into a circle. Each dish is a role="tab", each card a role="tabpanel", with roving tabindex. It is the same widget pattern as a boring row of tabs - it just happens to be a bronze drum.

The rest of the page

A full-bleed photograph of a complete tray. The Con Rồng Cháu Tiên origin myth - children of a dragon and a fairy, a hundred sons, fifty to the mountains and fifty to the sea. A recipe for thịt kho trứng with a working servings scaler. The unwritten rules of the Vietnamese table.

It closes on the only greeting that matters: "Ăn cơm chưa?" - have you eaten rice yet? It is how we say hello. It is also how we say I was thinking about you, and are you all right, and there is still some in the pot. There is no way to translate it that does not come out sounding like love.

Under those words is a drawing of three generations around one tray, and the drum shows through behind them - both are gold on black, screen-blended, so the three-thousand-year-old artefact ends up as a halo behind a family eating dinner tonight. I did not plan that. The compositing did it, and it turned out to be the whole argument of the page.

Demo

🔗 Live:

🐉🪘 MÂM CƠM 🪘🐲

A Vietnamese dinner tray experience inspired by the Đông Sơn bronze drum.

Live Demo 🔥 - https://the-family-rice-tray.vercel.app

Try it with a keyboard. Try it with reduced motion on. Try it with JavaScript off - the tray steps aside and all seven dish cards render in full.

Video

Code

💻 Source: https://github.com/longphanquangminh/the-family-rice-tray

longphanquangminh / the-family-rice-tray

A love letter to mâm cơm, the Vietnamese family rice tray - seven dishes orbiting a Đông Sơn bronze drum. No framework, no build step.

Mâm Cơm — the Vietnamese family rice tray

A love letter to mâm cơm, the round tray of shared dishes at the centre of every Vietnamese home — laid out on the face of a Đông Sơn bronze drum.

Built for the DEV Frontend Challenge: Comfort Food Edition (Perfect Landing prompt).

Live: https://the-family-rice-tray.vercel.app

The idea

Vietnamese has no word for entrée. There is only cơm — rice — and everything laid around it. Every evening six or seven small dishes go onto one round tray and are eaten all at once, in any order, by everyone.

Việt Nam's oldest surviving artefact is a Đông Sơn bronze drum, cast around 1000 BCE: a perfect disc of concentric life with a fourteen-rayed sun at its centre. Our most ordinary household object is a bamboo tray of exactly the same shape.

So the tray is built on the…

View on GitHub

Journey

Design

I wanted the page to look Vietnamese without looking like a tourist poster, so I went to primary sources: lacquerware red (#8B0C1C), leaf gold, jade, and unbleached rice-paper cream; a Lý-dynasty dragon and the Ngọc Lũ drum as ornament rather than decoration.

Both ornaments are gold line art on pure black, composited with mix-blend-mode: screen - the black drops straight out and only the gold survives, over any red I put behind it. One asset, reusable at any opacity, on any background.

That trick has a sharp edge. The assets are quantised to a 12-colour palette, and I have to snap every near-black palette entry to true black, because screen(x, near-black) still lightens the backdrop - which paints the asset's bounding box as a visible rectangle over flat colour. One ornament came back with a "black" of rgb(5,5,4) across 92% of the frame and drew a faint grey box on the page.

On using photographs at all

Half this challenge has "zero images" or "pure CSS, no photography" in the title, and I understand the appeal - drawing food in CSS is a genuine flex. But I kept coming back to the fact that this is a comfort food brief. Comfort food is a sensory argument. So I went the other way deliberately: a full-bleed photograph of a whole laid tray, and a large close-up of every single dish. If someone scrolls this page and does not get hungry, the page has failed, no matter how clean the markup is.

That commitment created most of the interesting problems.

The maths

Placing seven dishes on a circle in pure CSS was the fun part. Each dish carries its own --a angle and uses the individual transform properties, which apply in a guaranteed order - translate → rotate → transform:

.dish {
  translate: -50% -50%;              /* centre it */
  rotate: var(--a);                  /* aim down its ray */
  transform: translateY(-189.5%);    /* walk out along that ray */
}

Because the orbit is a percentage of the dish, and the dish is a percentage of the tray, the whole widget scales from 320px to 560px with zero media queries. JS sets exactly one custom property - --ring-rot - and CSS does the rest. Two levels of counter-rotation keep every bowl upright.

The same trick pays off again for the shadows. Each dish sits in a frame already rotated by --a, so a plain 0 -2px offset already points away from the centre for every dish - one declaration gives you seven radial shadows, as if a single lamp hung over the middle of the table. No per-dish maths.

The contrast bug axe cannot see

My first pass put the feast headline on top of the photograph with a gradient scrim behind it. Every automated checker passed, because axe-core cannot evaluate text sitting on an image - it has no idea what pixels are behind the glyphs.

So I wrote a Playwright script that hides the text, screenshots the composited background, samples every pixel in each text run's bounding box, and computes the worst-case WCAG ratio against the real text colour:

kicker over photo    worst 1.77:1  (needs 4.5)  FAIL
headline over photo  worst 2.49:1  (needs 3.0)  FAIL

1.77:1 for gold-on-rice. Invisible to tooling, obvious once measured. I darkened the scrim and it got worse - because the text block was 589px tall and simply reached further up the photo than any tasteful gradient could cover.

The honest fix was structural, not cosmetic: stop putting copy on the photograph. The image now gets the entire frame and the copy sits in a solid band beneath it, which guarantees contrast and shows more food. Those same four measurements now read 9.95:1 and 14.89:1.

A false positive I fixed anyway

Later, axe flagged the plaque button at 3.24:1. My pixel sampling said 6.63:1 - and my sampling was right. I had put the gold fill on an absolutely-positioned sibling of the label, so axe walked up the DOM, found the bronze rule instead, and reported a failure that does not exist.

I restructured anyway: the background moved onto the element that actually contains the text. A judge running axe would have seen that red line and had no way to know it was wrong.

Four bugs that looked fine and measured wrong

Rotating a square grows its bounding box by up to √2, silently adding 49px of horizontal scroll on mobile. Nothing visibly overflowed; the page was just wider than the screen.
min-block-size: 92svh on a hero does not account for a sticky header, so the hero always overhung the fold by exactly the header's height. calc(100svh - 4.5rem) fixed it.
aspect-ratio together with min-block-size let a box solve for width instead of height and blew out 374px.
offsetHeight rounds to whole pixels, reporting an 804.42px panel as 804 - leaving half a pixel of jump behind. getBoundingClientRect().height with Math.ceil took it to 0.00px.

And one test that passed while the UI was broken

My mobile nav clipped its last label to "Nếp Nh", but my assertion only tested document.scrollWidth - and the nav's own overflow-x: auto hid the problem from it. Any scroll container can mask a clipped layout from a document-level check. The suite now asserts nav.scrollWidth <= nav.clientWidth too.

Writing the suite properly also found a real reflow failure at 320px that I had previously waved away as "old phones": the dish strip wrapped to two rows and fell below the fold. 320px is the width WCAG reflow is specified at, so it got fixed.

A layout that never jumps

Each dish carries a different amount of copy, so switching dishes resized the panel and - with align-items: center - dragged the drum up and down with it:

1440px:  panel 713→738px  (25px spread)  →  drum moves 13px
1100px:  panel 723→768px  (45px spread)  →  drum moves 23px

The spread depends on viewport width, so a hard-coded min-height is wrong at every size but one. The fix measures the tallest panel at runtime and pins it on all of them, re-measuring on resize and on document.fonts.ready - web fonts swap in after first paint and change every text metric.

Making the tray physical

Adding drag-to-spin took about forty lines and broke two things I did not expect.

setPointerCapture on pointerdown kills clicks. Capture retargets the eventual click to the capturing element, so tapping a dish never reached that dish's button. Capture has to wait until the pointer has actually travelled past a dead zone.

The browser runs its own gestures first. Pressing on a dish photo starts a native image drag; sweeping across the tray starts a text selection. Either one hijacks the pointer stream. That is why the second and later spins felt stuck while the first felt fine - the fix is draggable="false" and user-select: none, and it is invisible to synthetic test input, so I had to find it by inspecting state rather than behaviour.

What I didn't ship

I prototyped tilting the tray 40° in CSS 3D so it would read as an object on a table. The maths worked - the drum foreshortened to a 1.78 aspect while the dishes stayed at 1.0, correctly billboarded.

I threw it away. Under a 3D transform the circular overflow: hidden crop on each dish stopped clipping, the gold selection ring vanished, and every photo went soft from being rasterised flat and re-projected. All three are fixable with enough work - but a mâm cơm is seen from above, and a drum face is a flat disc. Tilting turned "same circle, three thousand years apart" into a generic dinner table. It was a worse idea rendered better.

Deep links

Landing on /#manners did not work, for two reasons stacked on top of each other. scroll-behavior: smooth turns a fragment jump into a long animation across a 9,500px page that the reader cancels the instant they touch the wheel. And lazy images plus the measured panel height keep adding pixels above the target after the browser has already scrolled.

Then the real culprit: on F5, history.scrollRestoration restores the old position after the fragment jump and wins. Ironically my own "never yank the page out from under the reader" guard then saw the position change and politely gave up. When the URL carries a hash, the hash is the intent - so restoration gets switched off.

Accessibility

First-class constraint, not a pass at the end:

Full keyboard tablist, plus 44×44 spin controls and page-level arrow keys that stand down inside inputs, on other controls, and when the tray is off screen
:focus-visible rings that follow the circular shape rather than the square hit area - which is why the plaque button needs two elements, since clip-path crops an outline
prefers-reduced-motion kills every spin, transition and momentum glide; prefers-contrast: more drops the decorative blend layers
Vietnamese phrases marked lang="vi" so screen readers pronounce them properly instead of mangling them as English
Progressive enhancement via a <noscript> stylesheet
0 axe-core violations (WCAG 2.1 A/AA + best-practice) at 1440px and 390px

All of it runs from tools/verify.py in the repo: axe, the pixel-sampled contrast check, layout-stability assertions, every spin affordance, deep links with throttled images, and responsive integrity across 14 widths.

Stack

Hand-written HTML, CSS and about 260 lines of vanilla JavaScript. No framework, no build step, one file plus images. The only external request is Google Fonts. Every below-fold image is lazy-loaded; the gold ornaments are 12-colour PNGs; the whole thing is 4.2 MB, almost all of it photography.

A quick note on AI: I used AI to help draft this write-up. I reviewed and edited it before publishing.

Thanks for reading. Ăn cơm chưa? 🍚

[Boost]

Mike — Mon, 15 Jun 2026 15:23:57 +0000

June Solstice Game Jam Submission

Mike

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)

Mike — 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.to/challenges/june-game-jam-2026-06-03

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

Mike — 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.

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

Mike — 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]

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

June Solstice Game Jam Submission

Mike

Jun 8

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

#devchallenge #gamechallenge #gamedev

5 min read

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

Mike — 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]

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

Gemma 4 Challenge: Build With Gemma 4 Submission

Mike

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

Mike — 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.