DEV Community: Dang Tran

The Starwarden — browser platformer: collect starlights, fight murklings, beat the darkness

Dang Tran — Wed, 17 Jun 2026 05:22:01 +0000

This is a submission for the June Solstice Game Jam

What I Built

The Starwarden is a browser-based 2D side-scrolling platformer. You are the last Starwarden — a wizard carrying embers of the old light — in a world where a creeping shadow called the Murk has swallowed half the sky.
Each run takes you through four seasons (Spring → Summer → Fall → Winter):

The sky starts every season at 50% darkness
Darkness rises passively over time (~90 seconds to total night if you do nothing)
Collect starlights to push the meter back down
Murklings patrol the platforms; touch one and the sky gets darker
From Summer onward, purple Striker murklings shoot shadow bolts at range
Fireballs (Space) destroy enemies but briefly lock your movement during the attack animation
Clear all four seasons to win; hit 100% darkness and you lose The world is procedurally generated each season — floating platform staircases, parallax backgrounds that change with the season, and starlight spawns guaranteed to be reachable (a BFS reachability pass prunes impossible placements).
Please turn on the sound when you're playing :-)

Screenshots

Site

https://wizard-game-pi.vercel.app/

Code

sea2709 / wizard-game

The Starwarden

A 2D side-scrolling platformer built with Phaser 4, React 19, TypeScript, and Vite. Play as a wizard crossing a procedurally generated world through four seasons — collect starlights to push back the darkness, dodge or defeat murklings, and clear Spring through Winter to win.

AI / contributor reference: See AGENTS.md for architecture, game logic, world generation, assets, and conventions. Start there instead of reading the full codebase.

Quick start

npm install
npm run dev

Open http://localhost:8080. The game loads Story → Instructions → Game (MainMenu is registered but skipped on cold start).

Command	Description
`npm install`	Install dependencies
`npm run dev`	Development server with hot reload
`npm run build`	Production build in `dist/`

How to play

Each season starts with the sky at 50% darkness. Darkness rises passively over time (~90 seconds to reach 100% if you collect nothing). Collect starlights to…

View on GitHub

How I Built It

Stack

Layer	Choice
Game engine	Phaser 4
UI shell	React 19
Language	TypeScript
Bundler	Vite 6
Viewport	1280 × 960
World	6480 px wide procedural tile grid

Phaser handles gameplay, physics, and rendering; React mounts the canvas via a thin PhaserGame wrapper. Scenes emit current-scene-ready on an EventBus so React can track the active scene.

Architecture highlights

Procedural world (worldMap.ts)

Platforms are generated as connected climbable staircases separated by gaps, then pruned with a conservative walk/jump BFS so every remaining starlight spawn is actually collectible. The platforms are generated differently for every season for every play turn.

Season system (seasonConfig.ts)

Four seasons share the same passive darkness fill rate but ramp difficulty through Murkling speed, spawn rate, contact damage, and Striker presence (0 → 3 initial Strikers by Winter).

Depth sorting (elementsConfig.ts)

World entities sort by feet Y + layer offset so characters on lower platforms render in front — important for a stacked platform world.

What I built on

This project started from the official Phaser React TypeScript template (MIT). During the jam period (June 3–21, 2026) I replaced the template demo with original gameplay:

Story and Instructions scenes with narrative copy and animated previews
Full platformer movement, combat, and enemy AI (patrol + Striker ranged attacks)
Darkness/starlight HUD and full-screen overlay system
Four-season progression with seasonal parallax backgrounds and tree art
Procedural world generation with reachability guarantees
Run/lifetime stats persisted in localStorage

Pair - your personal stylist

Dang Tran — Sat, 23 May 2026 11:31:53 +0000

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

What I Built

Pair is a personal stylist in your pocket. You take a photo of something you already own — a jacket, a pair of jeans, whatever — and the app finds you a complementary piece from a catalogue of 44,000 products. Then it generates an editorial fashion photo showing both items styled together on a model, so you can actually see how the outfit looks before you buy anything.

The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.

The app is a full-stack TypeScript project — Vite + React on the frontend, Hono on Node.js on the backend. The interesting part is the AI pipeline: I send the uploaded image to Gemma 4, which returns structured JSON — category, gender, style tags, dominant colour. Then I query MongoDB with a $match + $sample aggregation to pull 30 random candidates from the right complementary category, and send those to Gemma 4 again to pick the best pairing. Finally, Gemini 2.5 Flash generates the editorial look image.

Upload a photo

The app finds a match

Generate an editorial image of both items on a model

Demo

pair-vite.vercel.app

Code

sea2709 / pair

Pair.

A clothing pairing app — upload a photo of one piece you own, get a complementary match from a curated catalogue, then see both styled together in an AI-generated editorial image.

The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.

How it works

Upload a photo of a top, bottom, shoes, or accessory — optionally add a hint if the photo contains multiple pieces
Analyze — Gemma 4 identifies the piece: category, gender, style, palette
Confirm — review the AI's interpretation; re-analyse with a corrected hint if needed
Match — a complementary item is randomly sampled from the catalogue, then Gemma 4 picks the best fit
Lookbook — Gemini generates a fashion editorial photo of both pieces styled on a model

Stack

Layer	Tech
Frontend	Vite + React + TypeScript + Tailwind CSS v4
Backend	Hono on Node.js
AI	Google GenAI SDK (Gemma 4

…

View on GitHub

How I Used Gemma 4

Gemma 4 (gemma-4-31b-it) is used for two tasks where we need text output from a structured prompt:

Clothing analysis — given an image, return a JSON object with category, gender, style, colors, etc.
Match selection — given 30 product candidates from MongoDB, pick the best one and return a JSON object with the index, match score, and stylist note.

Notion Bookmarks Manager

Dang Tran — Sun, 29 Mar 2026 14:53:58 +0000

This is a submission for the Notion MCP Challenge

What I Built

The web content I browse every day is part of my personal knowledge base — but finding something I read weeks ago is frustratingly hard. I built this Chrome extension to solve that: it saves any page I bookmark directly to Notion, uses AI to generate a summary of the page content, and lets me search across everything I've saved using natural language.

Video Demo

Show us the code

sea2709 / notion-bookmark-manager

Notion Bookmark Manager

A Chrome extension that saves browser tabs to your Notion workspace, with folder organization, notes, AI-generated summaries, and AI-powered search.

Features

Save bookmarks — Save the current tab to a Notion database with a title, URL, and optional notes
Folder tree — Organize bookmarks into nested folders synced from Notion
AI summaries — Optionally generate a page summary using Gemini AI based on a custom prompt
Browse bookmarks — View all your bookmarks grouped by folder in a collapsible tree
Search — Search your Notion bookmarks using natural language via Gemini AI and the Notion MCP

Architecture

Chrome Extension (Manifest V3)
├── popup/          UI for saving, browsing, and searching bookmarks
├── background/     Service worker — routes messages between popup and server
├── shared/         Shared types, constants, and chrome.storage helpers
└── dist/           Built output (load this directory in Chrome)
Local Server (Express)
└── server/         Handles all Notion API

…

View on GitHub

How I Used Notion MCP

MCP (Model Context Protocol) is used only in the searchBookmark function in server/notion-api.ts. It is not used anywhere else — all other Notion operations (create bookmark, fetch folders, etc.) go through the @notionhq/client SDK directly.

How it works

User presses Enter in search
→ popup sends SEARCH_BOOKMARKS message
→ service worker calls POST /call { tool: "search_bookmarks" }
→ server calls searchBookmark()
→ searchBookmark() connects to Notion MCP via npx mcp-remote
→ Gemini AI uses the MCP tools to query Notion
→ AI response text returned to popup

The three components involved (MCP Client, mcpToTool adapter, Gemini)

1.MCP Client (@modelcontextprotocol/sdk)

const notionClient = new McpClient({ name: "notion-client", version: "1.0.0" });
const transport = new StdioClientTransport({
  command: "npx",
  args: ["-y", "mcp-remote", "https://mcp.notion.com/mcp"],
  env: { NOTION_TOKEN: process.env.NOTION_API_KEY },
});
await notionClient.connect(transport);

The MCP client spawns npx mcp-remote as a child process (stdio transport), which acts as a proxy connecting to Notion's official MCP server at https://mcp.notion.com/mcp. This exposes Notion's capabilities (search pages, read content, etc.) as MCP tools.

2.mcpToTool adapter (@google/genai)

config: {
  tools: [mcpToTool(notionClient)],
}

mcpToTool wraps the MCP client so that Gemini can discover and call Notion's MCP tools automatically — Gemini decides which Notion tools to invoke based on the prompt.

3.Gemini as the orchestrator

const prompt = `Search for pages under the database with the ID ${databaseId} mentioning '${keyword}'`;
const response = await ai.models.generateContent({
  model: process.env.GEMINI_MODEL ?? "gemini-2.5-flash",
  contents: prompt,
  config: { tools: [mcpToTool(notionClient)] },
});

Gemini receives the natural language prompt and autonomously calls Notion MCP tools to find relevant pages, then summarizes the results into a text response.

Why MCP for search vs. the SDK for everything else?
The Notion SDK's search() API only matches page titles — it cannot search page body content. Notion's MCP server exposes richer capabilities including content-level search. By routing the query through Gemini + MCP, the search can find bookmarks by their AI-generated summary text, not just the title.

Apparel Shopping - Chatbot

Dang Tran — Mon, 09 Feb 2026 04:08:41 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

A apparel shopping site with 2 pages (homepage and product details page) and a chatbot assistanting customers looking for products via conversation.

Demo

https://apparel-web.vercel.app/
Source code: https://bitbucket.org/hdang2709/apparel/src/main/

How I Used Algolia Agent Studio

I set up an application in Alogolia, create a new index and use the apparel sample dataset which has 2000 items.

I configure searchable attributes and related facets.

title
description
product_type
color
categories
price
tags

Leverage InstantSearch.js widget to build the UI including a chat widget.

Why Fast Retrieval Matters

The built-in chat widget in InstantSearch.js is very convenient. From the basic coding perspective, all you need are an agent ID and a container element to render to widget to build a chat interface that interacts with a generative AI assistant built with Algolia Agent Studio. And you can focus on constructing constructions and tools for the AI Agent.
Algolia Studio also provides all conversations lists on the site with insights about how the response conducted (Reasoning and Tool used), which is very helpful to configure the Tools and setting up search attributes.

Apparel Shopping

Dang Tran — Mon, 09 Feb 2026 03:09:10 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences

What I Built

A apparel shopping site with 2 pages (homepage and product details page) and a chatbot assistanting customers looking for products via conversation.

Demo

https://apparel-web.vercel.app/
Source code: https://bitbucket.org/hdang2709/apparel/src/main/

How I Used Algolia Agent Studio

I set up an application in Alogolia, create a new index and use the apparel sample dataset which has 2000 items.

I configure searchable attributes and related facets.

title
description
product_type
color
categories
price
tags

Leverage InstantSearch.js widget to build the UI for list products, refinement, search box, auto complete, chat, etc.

With a traditional shopping site, customers use existing filter widgets to find their products. I added a tweak to let customers using a prompt to filter products by leveraging Generative AI in Algolia Agent Studio. I set up 2 agents, one for the chat and one for the filter functionality. The 2 agents are pretty similar, but the filter agent will not response with follow up questions to clarify some details.

Why Fast Retrieval Matters

Algolia agent can form a query based on the user's prompt or conversation. The query is flexible depending on the indexed data, configurable search attributes.