DEV Community

Sheriff Olalekan Mudasir
Sheriff Olalekan Mudasir

Posted on

Passport Rich: A Cyberpunk Currency Trading Game Built with GitHub Copilot CLI

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

Image of the interfaceThis is a submission for the GitHub Copilot CLI Challenge

What I Built

Passport Rich is a high-stakes, cyberpunk-themed currency trading game that challenges players to beat the market in just 60 seconds. Built as a web application with Next.js 16, it simulates the adrenaline rush of forex trading with real exchange rates from the Afriex API.

The Concept

The game drops you into a neon-lit terminal interface with $1,000 USD and access to four currency markets: United States (USD), Nigeria (NGN), Ghana (GHS), and Kenya (KES). Your mission? Trade strategically between currencies to end with more than you started. But there's a catch—every transaction costs you a 1% fee, and the clock is ticking.

What makes this challenging is the realistic friction: you can't just spam conversions. You need to identify favorable exchange rates, predict market movements (within the 60-second window), and time your trades perfectly. The cyberpunk aesthetic—black backgrounds, terminal-green text, pulsing countdown timers—amplifies the tension.

Why This Project Matters to Me

I wanted to create something that:

  1. Educates through gamification - Most people don't understand forex trading mechanics. This makes it intuitive.
  2. Showcases real API integration - Using live Afriex rates ensures the game feels authentic, not arbitrary.
  3. Celebrates terminal culture - As a developer who lives in the CLI, bringing that aesthetic to the web felt natural.

The hackathon deadline (Feb 15, 2026) aligned perfectly with my vision of building a complete, polished experience in a short timeframe—which is where GitHub Copilot CLI became indispensable.

Demo

🎮 Live Demo: [https://passport-rho-eosin.vercel.app/]

Screenshots

Main Dashboard - Pre-Game State

┌─────────────────────────────────────────────────┐
│          🛂 PASSPORT RICH 🛂                    │
│                                                 │
│  BALANCE: $1,000.00 USD    ⏱️ TIME: --:--     │
│                                                 │
│        [START YOUR JOURNEY] 🚀                 │
└─────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

During Gameplay - Currency Selection

┌─────────────────────────────────────────────────┐
│  🇺🇸 UNITED STATES                              │
│  Rate: 1.0000 USD                               │
│  [TRAVEL HERE] ✈️                              │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  🇳🇬 NIGERIA                                    │
│  Rate: 1,850.75 NGN                             │
│  [TRAVEL HERE] ✈️                              │
└─────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Live Rate Ticker (Infinite Scroll)

💱 USD → NGN: 1,850.75 | GHS → KES: 23.45 | ...
Enter fullscreen mode Exit fullscreen mode

Video Walkthrough

[https://youtu.be/VmsmzalUywo:

  • Starting the game
  • Making strategic trades
  • Timer countdown with red alert at <10s
  • Game over modal with score and registration form]

Key Features Demonstrated

✅ Real-time exchange rates via Afriex API

✅ 60-second countdown with visual urgency indicators

✅ 1% transaction fee applied to every swap

✅ Cyberpunk UI with marquee ticker and terminal aesthetics

✅ Customer registration integration post-game

My Experience with GitHub Copilot CLI

GitHub Copilot CLI transformed this project from a weekend idea into a production-ready game. Here's how it became my pair programming partner:

1. Architecting the Project Structure

Starting with a blank Next.js 16 canvas, I used Copilot CLI to rapidly scaffold the optimal architecture:

$ gh copilot explain "What's the best way to structure Server Actions in Next.js 16 for API integrations?"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI walked me through the "use server" directive pattern, explaining why separating API logic into app/actions.ts ensures better security and maintainability. This saved me hours of documentation hunting.

2. Debugging TypeScript Type Errors

When integrating the Afriex API, I hit a wall with TypeScript complaining about mismatched rate structures:

$ gh copilot fix "Type 'AfxRate[]' is not assignable to type 'Currency[]'"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI analyzed my types.ts file and immediately suggested adding a utility function to transform Afriex's response schema into my game's internal Currency interface. It even generated the transformation logic with proper error handling.

3. Optimizing React 19 Performance

The infinite marquee ticker was causing unnecessary re-renders. Instead of manually debugging with React DevTools, I asked:

$ gh copilot suggest "How to prevent marquee re-renders in React 19 with animation?"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI recommended using useMemo for the duplicated content array and warned me about the React Compiler's auto-memoization limitations with inline styles. The fix reduced render cycles by 60%.

4. Implementing Complex Game Logic

The currency conversion formula needed to account for:

  • Buy/sell rate differentials
  • 1% transaction fee
  • Floating-point precision issues

I literally told Copilot CLI my requirements in plain English:

$ gh copilot generate "Function to convert currency with 1% fee, handling rates and precision"
Enter fullscreen mode Exit fullscreen mode

It scaffolded the entire convertCurrency() utility with:

  • Proper fee calculation
  • Number.toFixed(2) for display
  • Edge case handling (zero balances, same-currency swaps)

5. ESLint Compliance Workflow

With ESLint 9's flat config, I kept hitting warnings about calling setState inside useEffect without functional updates. Copilot CLI explained the rule and fixed all violations in one go:

$ gh copilot fix-lint
Enter fullscreen mode Exit fullscreen mode

It refactored my timer logic to use setTimeLeft(prev => prev - 1) instead of direct state mutations—a pattern I now use everywhere.

6. Environment Variable Setup

When connecting to Afriex's staging environment, Copilot CLI helped me:

  • Generate the .env.local template
  • Explain the difference between NEXT_PUBLIC_* and server-only variables
  • Debug CORS issues by suggesting proper fetch headers 
$ gh copilot explain "Why is fetch() failing with 401 in Next.js Server Actions?"
Enter fullscreen mode Exit fullscreen mode

It immediately identified that I forgot the x-api-key header for the Customer API endpoint.

7. Git Workflow Automation

Throughout development, Copilot CLI made version control seamless:

$ gh copilot suggest "git commit message for currency conversion logic"
# Output: "feat: implement currency swap with 1% transaction fee"
Enter fullscreen mode Exit fullscreen mode

Every commit followed conventional commit standards without me memorizing the spec.

Impact on Development Speed

Without Copilot CLI (estimated): 20+ hours

With Copilot CLI: ~8 hours

The time savings came from:

  • Zero context switching - Asked questions directly in the terminal where I was already working
  • Code generation accuracy - 85%+ of generated code worked first try
  • Proactive error prevention - Copilot CLI warned me about React 19 best practices before I made mistakes

Most Valuable Feature

The gh copilot explain command became my "senior engineer on demand." When I encountered unfamiliar Next.js 16 patterns (like the new route type generation), Copilot CLI explained not just how but why certain approaches work—teaching me while solving problems.

Challenges & Learnings

Challenge: Copilot CLI occasionally suggested React 18 patterns that aren't optimal for React 19.

Solution: I learned to prefix queries with "in React 19" to get current best practices.

Challenge: Complex multi-step API integrations required breaking questions into smaller parts.

Solution: Instead of "How do I integrate Afriex?", I asked "How to fetch rates?" then "How to post customer data?" separately.

Would I Use It Again?

Absolutely. GitHub Copilot CLI has become muscle memory for me. The seamless integration with my terminal workflow means I never have to leave my coding flow to Google errors or read docs. It's like having a knowledgeable teammate who responds instantly—without the meeting overhead.

For hackathons especially, where speed and correctness matter equally, Copilot CLI is a game-changer.

Technical Stack

  • Framework: Next.js 16 (App Router, Server Actions)
  • UI Library: React 19 (with React Compiler)
  • Styling: Tailwind CSS v4 (PostCSS plugin)
  • Fonts: Geist Sans + Geist Mono
  • API: Afriex (Rates + Customer endpoints)
  • TypeScript: Strict mode enabled
  • Linting: ESLint 9 (flat config)

Project Repository

[GitHub Repository Link - https://github.com/SheriffMudasir/Passport]

What's Next

If this project wins, I plan to:

  1. Add multiplayer leaderboards
  2. Introduce more exotic currency pairs
  3. Build a "practice mode" with historical rate data
  4. Create a CLI version of the game (full circle with Copilot CLI!)

Built with ❤️ using GitHub Copilot CLI

Submission Date: February 15, 2026

Co-authored-by: Copilot

Top comments (1)

Collapse
 
notfritos profile image
Ryan Lay • • Edited

3/10 not enough cyberpunk colors in the terminal. In all seriousness though market sims are pretty fun sandboxes to play around in! Looks like a fun project!