DEV Community: Long Phan

🚀LeadPilot – Your AI Staff Engineer in the Terminal

Long Phan — 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

Long Phan — 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)

Long Phan — 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 ⛓️

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

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

What I Built

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

It solves two problems:

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

Key points:

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

Demo ✨

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

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

How I Used Midnight's Technology

Midnight Explorer connects directly to the Midnight RPC endpoint.

It uses methods such as:

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

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

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

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

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

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

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

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

Developer Experience Improvements

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

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

Set Up Instructions / Tutorial

1. Clone & install

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

2. Configure environment

Create .env.local:

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

# reserved for future indexer
NEXT_PUBLIC_INDEXER_URL=

3. Run locally

npm run dev
# http://localhost:3000

Watch the terminal for:

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

4. Build for production

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

5. Deploy to Vercel

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

Future Improvements

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

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

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

DEV username: @minhlong2605

Thanks for reading & happy hacking on Midnight! 🌑🚀

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

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

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

What I Built

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

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

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

Demo

👉 Demo Link

The demo showcases:

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

n8n Workflow

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

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

🔗 Workflow JSON on GitHub Gist

Technical Implementation

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

Bright Data Verified Node

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

Example JSON returned:

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

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

Journey

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

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

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

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

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

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

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

What I Built

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

Key Features:

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

Demo

🔗 Links

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

📱 Screenshots

Main leaderboard interface

Donation form in action

AI predictions panel

Mobile responsive design

Real-time updates in progress

How I Used Redis 8

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

🏗️ Core Redis Architecture

1. Sorted Sets for Leaderboard Rankings

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

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

2. Streams for Event Sourcing

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

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

3. Hash Maps for Donor Information

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

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

4. Atomic Multi-Operations

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

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

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

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

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

🚀 Real-Time Performance Benefits

Connection Management with Retry Logic:

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

Health Monitoring:

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

🤖 AI Integration with Redis

Redis serves as the intelligent data pipeline for AI predictions:

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

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

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

📊 Data Analysis from Redis Streams

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

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

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

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

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

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

  return { hourlyTrends, donorActivity };
}

Technical Architecture

🏗️ Full Stack Implementation

Backend: Node.js + Express + TypeScript

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

Frontend: React 18 + TypeScript + Vite

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

Database: Redis as primary data store

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

🔧 Key Technical Decisions

Why Redis Over Traditional Databases?

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

Actual Redis Data Model

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

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

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

🚀 Performance Optimizations

Connection Management with Retry Logic

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

Atomic Multi-Operations

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

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

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

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

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

Efficient Data Retrieval

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

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

AI-Powered Features

🤖 Intelligent Predictions

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

Real AI Implementation

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

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

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

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

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

Data Analysis Pipeline

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

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

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

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

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

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

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

AI Prompt Engineering

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

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

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

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

🧠 Fallback Intelligence

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

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

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

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

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

Prediction Validation

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

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

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

  return { risingStars, dailyTotal };
}

Real-World Impact

📈 Technical Benefits

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

🎯 Use Cases

This architecture is perfect for:

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

🔮 Future Enhancements

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

Getting Started

🚀 Quick Setup

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

# Run automated setup
./setup.sh

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

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

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

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

🔧 Configuration

Backend (.env):

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

Frontend (.env):

VITE_API_URL=http://localhost:3001

📚 API Implementation

Donation Submission

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

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

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

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

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

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

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

Leaderboard Retrieval

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

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

    const leaderboard = await redisService.getLeaderboard(limit);

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

Statistics Calculation

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

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

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

Conclusion

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

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

🏆 Why This Matters

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

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

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

Real-Time Job Recommender with Bright Data MCP

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

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

What I Built

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

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

📽️ Demo

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

How I Used Bright Data's Infrastructure

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

Here's how MCP enhanced the system:

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

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

Performance Improvements

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

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

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

Features

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

Tech Stack

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

What's Next

Some future directions I’m excited about:

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

Acknowledgements

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

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

🔐 Build & Run Your Own TOTP Generator in Under 5 Minutes — with Amazon Q Developer

Long Phan — Mon, 12 May 2025 06:14:30 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

Context

We all know that Multi-Factor Authentication (MFA) is essential for securing our accounts. But let’s be honest—how many times have you felt frustrated opening your phone, launching the authenticator app, and copying the OTP code every time you're logging in somewhere on your work computer or laptop?

Worse, what if your phone is de*d, lost, or simply not nearby? You’re locked out.

That’s why I built this project: a TOTP (Time-based One-Time Password) generator tool available as both a command-line interface and a lightweight frontend.

It lets you instantly generate TOTP codes from a saved secret—no phone required.

What I Built

I built a TOTP (Time-based One-Time Password) generator tool that runs on both the command line and a simple frontend web interface. This tool solves the problem of securely generating one-time passwords commonly used in 2FA (Two-Factor Authentication) systems.

⚙️ CLI tool: Instantly generates TOTP codes from a shared secret via terminal. It supports auto-copying the generated code using the clipboard.

🌐 Frontend demo: A minimal web interface that visualizes the TOTP flow and shows the code updating every 30 seconds.

This tool is lightweight and designed for developers who frequently work with authentication flows, or for testing their 2FA setup during app development.

Demo

🌍︎ Live page: https://longphanquangminh.github.io/totp-generator-project/web

After asking Amazon Q Developer to build the application and generate an initial flow diagram, I took the time to deepen my understanding of how TOTP works. I then created my own visual explanation to solidify and share that understanding (with a demo secret key, so it's just fine like that):

📊 My custom TOTP flow diagram (made with Excalidraw): Link

🔑 Extracting a TOTP Secret Key from a GitHub QR Code
This screenshot shows how I used my CLI tool to scan a QR code (e.g., from GitHub's 2FA setup) and retrieve the base32 secret key.

When scanning a QR code with my Samsung phone (just once), you can extract the secret key from the QR's value, which typically follows this format: otpauth://[OTP_type]/[issuer]:[user_identity]?secret=[secret_key]&issuer=[issuer]

For example, if the value is: otpauth://totp/GitHub:longphanquangminh?secret=ggg&issuer=GitHub => Then the secret_key would be ggg

🖥️📱 Matching OTPs on Both CLI and Web UI
To demonstrate accuracy, I used the same TOTP secret in both the CLI and web tool. As shown below, both generated the same OTP codes, just like a real authenticator app would:

Code Repository

🔗 GitHub Repo: https://github.com/longphanquangminh/totp-generator-project

/cli – Node.js terminal utility with clipboard integration.
/web – Frontend TOTP display tool with diagram and styling.

How I Used Amazon Q Developer

Amazon Q Developer played a huge role in helping me build and polish this tool quickly. Here’s how I used it:

🧠 Idea to Execution — Powered by Amazon Q

Logged into Amazon Q Developer via q login from my terminal.
Opened Q Chat via q chat to brainstorm implementation details and flow.
Prompted Q: How do I implement a TOTP generator CLI tool in Node.js that auto-copies the result to clipboard? → Q provided sample code using otplib and clipboardy. But in this case, after doing some research, I decided to use otpauth instead of otplib because it's newer and offers more flexible customization of the algorithm and time settings.
Used Q to help draw a simple diagram explaining the TOTP flow (time + secret → HMAC → OTP).
Asked Q to help improve the CLI experience (formatting, error handling, feedback, timer).
Switched to the frontend: I asked Q to style the TOTP web page, make it responsive, and implement the 30-second countdown bar.
Completed both tools in a much shorter time than building from scratch.

🚀 With the help of Amazon Q, I built both the CLI tool and the frontend app in literally under 5 minutes.

💡 Tips for Using Amazon Q Developer

Be clear and specific in your prompts.
Ask for architecture and visual explanations too—not just code.
Iterate with Q! Ask it to improve or adapt to your stack.

Disclaimer

This tool was built for educational purposes and as a submission for the Amazon Q Developer “Quack The Code” Challenge. Please use it responsibly. Personally, I believe if you're using a work or company-issued computer — especially as a software engineer — it's acceptable to store TOTP secrets locally for convenience, as long as your device is secured. Relying solely on a phone with many apps also carries potential risks.

👨‍💻 Built by longphanquangminh and Amazon Q Developer

Implementing authorization for a Web3-based CMS

Long Phan — Mon, 05 May 2025 06:54:25 +0000

This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

What I Built

I built a Web3-based CMS (Content Management System) designed for managing decentralized content like collections, banners, presale campaigns, and other on-chain/off-chain data. The CMS provides an admin dashboard where team members can log in using their crypto wallets and manage the platform’s content in a more structured and user-friendly way.

The key problem it solves is the lack of permission control in many Web3 tools. Typically, dApps allow wallet login but don’t differentiate between users. In my CMS, I introduced fine-grained access control so that different roles (e.g., admin, content editor, viewer/analyst) have access only to the features relevant to them. This improves security, collaboration, and overall project maintainability — especially in teams working on Web3 marketplaces, launchpads, or NFT collections.

By combining decentralized login with centralized permission logic, the CMS balances Web3 principles with real-world admin needs.

Demo

Live page: https://web3-cms-app.vercel.app
Theoretical Authorization Workflow: Mermaid link - supported by Tempo 😂

Project Repo

Github repository: https://github.com/longphanquangminh/web3-cms-fe

My Journey

When I started building a Web3 CMS, one of the core features I knew I needed was authorization. Since the app relies on wallet-based authentication, I couldn’t use traditional username/password systems or standard backend session management. Instead, I had to find a way to manage access control in a decentralized environment — where users log in with wallets and identities aren't stored in a typical user table.

I used Tempo to quickly generate the UI, so I could focus on implementing authorization and integrating with services like Permit.io and Web3Auth.

To solve the wallet login part, I integrated Web3Auth, which provides a seamless wallet-based login experience. I chose to keep the social login options (like Google or Facebook) out of view via CSS, so users interact with the app purely through wallet connections. Web3Auth still handles the heavy lifting behind the scenes and gives me a consistent way to identify users — whether they connect through MetaMask or other supported wallets.

My goal was to support roles like "admin", "editor", and "viewer", and ensure that each role had access to the appropriate parts of the CMS. For example, only admins should be able to manage collections or settings, while editors might only be able to modify content. It sounds simple, but handling this securely and flexibly in a Web3 setup required some research.

I faced a few challenges along the way:

Mapping wallet addresses to roles without a central user database.
Enforcing access rules on both frontend and backend (especially when much of the logic lives client-side).
Keeping the system flexible enough to add more roles or change rules without constantly redeploying code.

Using Permit.io for Authorization

After evaluating a few options, I decided to use Permit.io to handle authorization. What I liked about Permit.io was that it gave me a way to define roles, resources, and actions externally — separate from my app logic. This separation made it easier to manage permissions over time and adapt as my CMS evolved.

I used Permit.io’s CLI to:

Define resource (like content) and actions (read, update, delete, create).
Create roles (admin, editor, viewer) and associate them with policies.
Assign policies to wallet addresses based on user roles.

On the app side, I integrated Permit.io’s SDK to check whether a user is authorized before allowing them to perform certain actions. For example, when a user submits a form to update content, I run a permission check to ensure they're allowed to update the content resource before proceeding.

This made the authorization logic easy to follow and more secure, since decisions were centralized and clearly defined. It also helped me avoid scattering hardcoded role checks throughout the app.

What I Learned

Working on this helped me understand the importance of clean separation between authentication and authorization — especially in a decentralized context. Web3 introduces new identity patterns, and pairing them with a permission management system like Permit.io helped me build a more scalable and maintainable CMS.

If you're building a dApp or Web3 admin tool that requires role-based access control, I recommend considering a similar setup. Having a proper authorization layer early on can save a lot of headaches as your app grows.

🎮 Robot Recognition Game: Deploying the game to the web with Alibaba Cloud has never been easier

Long Phan — Mon, 28 Apr 2025 06:58:44 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

I developed a fun and engaging robot-themed game where players are shown images of different robots along with their names. The challenge is for users to memorize the robots and their corresponding names. Once they've had enough time, they must correctly identify the robot by name to progress to the next level. The game tests both memory and recognition skills in a playful and interactive way.

Demo

Live page: http://game.robotrecognition.xyz
Replacement page (for backup purposes only): https://robot-recognition-web-game.vercel.app
Github repository: https://github.com/longphanquangminh/robot-recognition-web-game

🎯 The opening screen of the game application:

🎯 The robot name memorization stage at the level:

🎯 The step to choose the correct character name that matches the provided image:

🎯 Game Over – Better Luck Next Time:

🎯 Leaderboard – Showcasing Players with Top Memory Skills:

Alibaba Cloud Services Implementation

Elastic Compute Service (ECS)

My Robot Recognition Game is hosted on Alibaba Cloud's ECS, providing several key benefits:

Performance : ECS instances deliver consistent, low-latency performance crucial for my memory-based game mechanics
Scalability : Easy vertical and horizontal scaling capabilities to handle increased user load
Cost-Effective : Pay-as-you-go pricing model ideal for my game's hosting needs
Reliability : High availability with 99.975% SLA ensuring stable game access

Integration

Deploy directly via Alibaba Cloud ECS Console
Use static build from Vite (npm run build)
Manage instance through Alibaba Cloud dashboard

Benefits

Simplified deployment process
Excellent uptime metrics
Global accessibility with low latency
Cost-effective hosting solution

Challenges & Solutions

Initial setup learning curve
Resolved through comprehensive documentation
Fine-tuned server configurations for optimal performance

Object Storage Service (OSS)

My Robot Recognition Game leverages Alibaba Cloud's Object Storage Service (OSS) for storing and serving image assets, providing several key benefits:

Performance: OSS ensures fast and reliable access to robot images, critical for seamless game rendering during memorization and guessing stages
Scalability: Automatically scales to handle growing numbers of image assets as the game expands with new levels or robot types
Cost-Effective: Pay-as-you-go pricing model aligns with the game’s asset storage needs, minimizing costs for static content.
Global Accessibility: OSS’s distributed architecture enables low-latency image delivery to players worldwide

Integration

Configured an OSS bucket via the Alibaba Cloud OSS Console to store robot image files
Uploaded image assets (e.g., PNG files for robots) using the OSS web interface or SDK, ensuring proper naming conventions for easy retrieval
Integrated OSS URLs into the game’s frontend (built with Vite) to dynamically load images during gameplay
Set appropriate access permissions (public read-only) to allow secure image access without exposing sensitive data.

Benefits

Simplified asset management with a centralized storage solution
High reliability and uptime for image assets, ensuring consistent gameplay
Reduced load on the hosting server by offloading static content to OSS
Low-latency image loading for players across different regions

Challenges & Solutions

Initial learning curve in configuring OSS bucket settings and permissions
Resolved by leveraging Alibaba Cloud’s detailed OSS documentation and tutorials
Optimized image file sizes before uploading to OSS to balance quality and loading speed
Implemented error handling in the frontend to gracefully manage any temporary OSS access issues

Content Delivery Network (CDN)

Alibaba Cloud’s CDN powers the delivery of images for my Robot Recognition Game, ensuring players get fast, seamless access to visuals no matter where they are. It’s been a game-changer for keeping load times snappy and the experience smooth.

Integration

Purchase: Activate the CDN service through Alibaba Cloud’s CDN Console with a few clicks to get started.
Configure: Add the game’s domain to the CDN, set up caching rules for images (like PNGs and JPEGs), and link it to my ECS instance or Object Storage Service (OSS) as the origin server.
Use: Test the accelerated domain to confirm images load quickly from nearby edge nodes, then roll it out for players.

Benefits

Dead-simple setup with a clean console to manage everything.
Images load crazy fast thanks to over 3,200 global edge nodes.
Saves bandwidth costs by caching images closer to players.
Built-in protections like HTTPS and DDoS defense keep things secure.

Domain Name Service (DNS)

Alibaba Cloud’s DNS service keeps the domain for my Robot Recognition Game running smoothly, ensuring players can access it without hiccups. It’s been a solid choice for managing domain resolution with minimal fuss.

Integration

Purchase: Head to Alibaba Cloud’s Domain Name Registration page, search for a domain name, and pick an available one that fits the game
Configure: Set up DNS records (like A or CNAME) in the DNS management panel to link it to my ECS instance
Use: Activate the domain, test it to confirm it’s resolving correctly, and watch it route traffic to the game

Benefits

Super straightforward to manage everything in one clean dashboard
Fast resolution times keep the game accessible no matter where players are
Built-in security perks, like DDoS protection, add peace of mind
Pricing is clear and doesn’t break the bank 💰

Price Calculator

Alibaba Cloud’s Price Calculator has been a clutch tool for practicing budget planning for my Robot Recognition Game. It lets me estimate costs for services like ECS, DNS, and CDN before locking in, so I can experiment with different setups and keep expenses in check.

Benefits

Super intuitive interface to mix and match services for cost estimates.
Breaks down pricing clearly, so I know exactly what I’m paying for.
Saves time by letting me tweak configurations without digging through docs.
Includes a share function to export estimates as a link or file, making it easy to discuss plans with the team.

Game Development Highlights

📌 Advanced State Management: Implemented a robust state machine pattern using TypeScript enums (Idle, Preview, Guess, GameOver) for clear game flow control.

📌 Dynamic Difficulty Scaling: Created an engaging progression system that:

Starts with ~3 robots at level 1 (based on the number of robots in defined data)
Incrementally adds more robots
Implements Fisher-Yates shuffle for true randomization

📌 Progressive UI/UX: Custom progress bar component providing:

Visual countdown feedback
Smooth animations
Responsive design

📌 Persistent Leaderboard System: Implemented local storage-based leaderboard featuring:

Persistent score tracking
Automatic sorting
Clean data structure

📌 Smart Scoring Algorithm: Designed an engaging scoring system with:

Level-based point multiplication
Automatic difficulty progression
Balanced reward structure

These technical implementations create an engaging, challenging, and fair gaming experience while maintaining clean, maintainable code architecture.

Github Milestone Motivator: An innovative idea from Pulumi intriguing challenge 🏆

Long Phan — Mon, 07 Apr 2025 06:57:17 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

Managing GitHub milestones can be a tedious task, especially when it comes to tracking progress and keeping teams motivated. The "GitHub Milestone Motivator" is a creative solution built with Pulumi and the GitHub API to automate this process. It tracks milestone progress across repositories, posts encouraging comments on open issues (e.g., "Halfway there at 50%!") when progress hits key thresholds (25%, 50%, 75%, 100%), and assigns a "Milestone Star" label when a milestone is fully completed. Using Pulumi’s Automation API, this tool simplifies repository management and boosts team morale with minimal effort.

Live Demo Link

Demo link:

https://github.com/demo-longphan/frontend (my tested repo before publishing this submission)
https://github.com/demo-longphan/smart-contract

Project Repo

Github repository: https://github.com/longphanquangminh/creative-pulumi-github-contest (Including complete README documentation)

My Journey

Before proceeding with the implementation, I drafted a business logic diagram as follows:

Explaination: When the program is executed, it will scan all the repositories defined by the user. For each repository, it will check its milestones, and within each milestone, it will examine the related issues. There are two possible scenarios:

If the milestone is not completed yet, the program will check the progress percentage. Based on the percentage (25%, 50%, 75%, or 100%), it will display an encouraging message accordingly.
If the milestone is 100% complete, a congratulatory comment will be added by the manager to the representative issue (the last issue) to celebrate the team’s success.

This isn’t just my story — it’s an instruction manual for anyone on a similar journey. To apply these lessons effectively in a management context, follow the steps below:

👣 Step 1: Create a milestone in the repository (Go to Repo -> click Issues -> click Milestone tag to create.

👣 Step 2: Once the milestone is created, start working on the project. There will be tasks/issues — when creating them, make sure to tag them with the corresponding milestone.

👣 Step 3: After creating an issue/task, typically following the SDLC (Software Development Life Cycle), we will start coding or fixing bugs for those features. Once completed, we simply close the issue and move on to the next one.
In this demo, I will only create one issue.

👣 Step 4: Run "npm run dev" and wait for the result.

As you can see in the image, the comment has been created and a label has been assigned to highlight the issue and boost the morale of software engineers.
With this setup, managers no longer need to manually go through each step via the UI — the tool already contains the necessary logic. Just by running a single command, it will execute everything automatically.

While building the "GitHub Milestone Motivator" with Pulumi, I hit a roadblock: the GitHub Provider doesn’t support IssueComment. I wanted to post motivational messages on issues to track milestone progress, so I turned to Octokit to fill the gap. Integrating Octokit let me add comments like "Halfway there at 50%!" directly to issues, bypassing Pulumi’s limitation. The challenge was finding a clean way to weave this into my workflow, but once I got it working, I learned how powerful it is to combine Pulumi’s infrastructure management with Octokit’s flexibility for dynamic GitHub interactions.

Using Pulumi with GitHub

In the "GitHub Milestone Motivator," I used Pulumi to declaratively manage GitHub repositories and create the "Milestone Star" label when a milestone hits 100%. By leveraging Pulumi’s Automation API, I automated resource provisioning in a repeatable, code-driven way. This was beneficial because it ensured consistent setup across runs, simplified tracking of infrastructure state, and let me focus on the logic rather than manual API calls. While Pulumi couldn’t handle issue comments due to the missing IssueComment resource, its strength in managing static resources paired perfectly with Octokit for dynamic actions.

📣 Dev Community shared this on X – 3,770+ views as of April 2025: https://x.com/ThePracticalDev/status/1911621746974679521

SSS Portfolio: A Developer’s Digital Showcase ✨

Long Phan — Mon, 24 Mar 2025 05:58:58 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

SSS (stands for Super-Simple-Sample) Portfolio is my personal developer portfolio, built using 10 components from Kendo React to create a sleek and interactive experience.

It includes the following sections:

Intro: A dynamic opening with animations featuring my name and position.
About: A brief introduction to who I am.
Skills: A showcase of my technical expertise.
Projects: Highlights of my key development work.
Contact: A simple way to reach out to me.

This portfolio reflects my skills and design approach while leveraging Kendo React to deliver a smooth UI.

Demo

Live page: https://new-contest-portfolio.vercel.app
Github repository: https://github.com/longphanquangminh/new-contest-portfolio

🎉 Intro:

When hovering over the image, it animates with a pixel effect and displays my position:

🎉 Popup message:
When scrolling down, a pop-up message appears, allowing users to interact with me on LinkedIn without needing to scroll all the way to the Contact section. Users can close the pop-up by clicking the icon on the right.

🎉 About and Skills:
There will be a slight animation for the progress bars when scrolling to them.

🎉 Projects:
Header for Projects section:

The project cards will have a sticky effect and stack on top of each other. Recruiters can view project details and access either the live site or the documentation (similar to a whitepaper).

🎉 Contact and Footer:
This section only includes the contact area with a remix-style effect, a slider for interactive playground purposes, and a footer to display additional information about the project and the technologies used.

KendoReact Experience

I built a sleek portfolio by experiencing and leveraging the following 10 free high-quality components from Kendo React:
🧩 AppBar: Used for navigation at the top of the page.
🧩 Avatar: Displays my profile picture in the pop-up message section.
🧩 Badge + BadgeContainer: Used to attach a badge to the avatar—I added a blue checkmark to indicate that I’m a verified applicant.
🧩 Button: Navigation buttons placed in the AppBar.
🧩 FloatingActionButton: Used for other buttons on the page. I know that a Floating Action Button is typically a fixed-position CTA button to keep it accessible throughout the user experience, but since it has a clean UI and a large, clear design, I used it as a button with a position: relative value in different sections of my portfolio.
🧩 Typography: Displays text on the page.
🧩 SvgIcon + Kendo React icon set: Enhances the visual appeal of interactive elements on the page.
🧩 ProgressBar: Shows my proficiency levels for different skills—this is a creative way to use a ProgressBar beyond just indicating loading states.
🧩 Fade animation: Adds a dynamic effect to my name in the contact section near the footer—this idea was inspired by remix music videos from my country (or maybe from other places too, I guess).
🧩 Slider: Adjusts the scrolling speed of the text mentioned above—I treated it as a mini playground for users to experiment with.

I originally planned to use the Pie Chart component to display my LeetCode stats from API response, but since it’s a premium component and to save time, I decided to skip it for now.

AIm to Impress

My idea is to use AI to learn about my data/information and integrate a live chat section with this AI so that recruiters can chat as if they were talking directly to me. They could ask what I’m capable of, what roles I’m suitable for, my weaknesses, and how I solve specific problems—helping them gain accurate and quick insights about me.

However, due to time constraints (since I found out about the challenge quite late), I didn’t integrate AI into this project and am not applying for this award.

Delightfully Designed

I’m not applying for this category since I only leveraged the UI and logic of the components to build this portfolio without using the theme. My main goal is to win the "Prompt Winner" award 🏆

Thank you for reading my post! If you have any thoughts or feedback about the project, feel free to leave a comment below. I’m always open to suggestions and eager to learn from talented developers/engineers to enhance my value.

P/s: We don’t need to know who created the design system or how long it has existed. As long as the UI is well-designed (and logically structured), we, as FE Engineers, will create the most outstanding products.

I don’t chase perfection, it follows me – Long Phan

🚀 This blog was highlighted on X by Dev Community: https://x.com/The_React_Dev/status/1904931099626647768