How DegenGo works
Everything about the project — the game concept, every feature, the code architecture, the AI art pipeline, and exactly how it's deployed. Read top-to-bottom or jump around with the sidebar.
What is DegenGo?
DegenGo — Meme Wars is a location-based crypto game built on pump.fun's “GO” bounty marketplace (a “pay anyone to do anything” escrow platform on Solana). The tagline says it all: Tag the world. Stack SOL.
Players travel to real-world landmarks (Eiffel Tower, Burj Khalifa, Machu Picchu…), prove they're physically there, and claim a SOL bounty that was held in escrow. Think Pokémon GO, but the PokéStops are landmarks and the reward is cryptocurrency.
What makes DegenGo distinct:
- 6 crypto-meme factions (Pepe, Doge, Wojak, Bonk, Brett, Chad) with “Faction Wars”.
- Collectible, gacha-style Hunter Cards.
- A real, draggable 3D globe + a Google-Earth-style satellite map.
- Custom AI-generated meme mascots and landmark imagery.
The core game loop
- 1Connect & pick a meme. Link a wallet, choose a hunter tag and one of six factions.
- 2Find a LIVE bounty. Scan the 3D globe or flat map for a glowing drop. Each one escrows real SOL.
- 3Travel to the landmark. The game is location-based — you must physically get there.
- 4Prove it. Verify your GPS on-site and record a 30-second proof video at the spot.
- 5Submit — first valid wins. It's a race. The first accepted submission gets the escrow paid straight to their wallet, and war points to their faction.
What's real vs. demo
mock data in the browser. It's built so a real backend can slot in later — see the roadmap.What is real today: the full interactive UI, the 3D globe and satellite map, the AI-generated art, the simulated wallet/claim flow (saved to your browser), and a live production deployment on Railway with a provisioned Postgres database.
Glossary
- Bounty / Drop
- A reward attached to a landmark, claimable by tagging it.
- Tag
- Proving you're at a landmark to claim its bounty.
- Escrow
- SOL locked when a bounty is created, released to the winner.
- Faction
- A meme team you rep; your tags earn it war points.
- Hunter
- A player. Identified by a hunter tag (e.g. @gigatagger).
- Hunter Card
- A collectible character card that buffs your tags.
- War points
- Faction score; the top faction wins the season pool.
- pump.fun GO
- The real Solana bounty marketplace this concept builds on.
Bounties & rewards
A bounty is a landmark with: a SOL reward (0.5–3◎), a status (LIVE / PENDING / CLAIMED), a rarity tier, a live countdown, and a count of hunters racing for it.
Rarity controls how rare/valuable a drop is:
| Rarity | Drop rate | Vibe |
|---|---|---|
| Common | 62% | Small, frequent drops |
| Rare | 26% | Solid mid-tier |
| Epic | 9% | Big landmarks |
| Legendary | 3% | Eiffel, Burj Khalifa — 3◎ |
All 12 demo bounties live in lib/data.ts as the BOUNTIES array (place, country, lat/lng, reward, status, rarity, countdown).
Factions & Faction Wars
At sign-up you pick one of six meme factions. Every bounty you tag funnels war points to your faction. A territory-control bar shows who's winning, and the top faction at season end splits a 500◎ prize pool.
The six: Pepe Legion, Doge Pack, Bonk Squad, Chad Order, Brett Boys, Wojak Union. Scores update live as the feed claims bounties (see state management).
Hunter Cards
Collectible, gacha-style character cards. Each has a rarity, three stats (speed, stealth, luck) and a faction perk (e.g. “+25% SOL on Legendary tags”). On the landing page they flip on click and you can “rip a pack” to spotlight a random pull. Defined as CARDS in lib/data.ts.
Leaderboard & live feed
The leaderboard ranks top hunters by claims, SOL earned and streak. The live feed shows real-time activity (“@BonkZilla tagged Osaka 🚀”). In the demo it's driven by a timer that pushes a new randomized event every ~2.6s and bumps the relevant faction's score — your own claims appear there instantly.
Pages & routes
/— the marketing landing page (hero + 3D globe, bounty board, faction wars, hunter cards, how-it-works, leaderboard)./explore— the full-screen Explorer app: the real interactive globe + satellite map./docs— this documentation.
The 3D globe
Built with react-globe.gl (a React wrapper around three.js). It's a real WebGL globe you can drag to spin and scroll to zoom.
- Satellite earth texture + topology bump map from
public/textures/. - A green atmosphere glow and a starfield background.
- Each bounty is an HTML mascot pin with its SOL price tag, plus a glowing dot and a pulsing ring for LIVE drops.
- Pins on the far side of the planet are hidden by a custom occlusion check (dot-product of the pin vs. camera direction each frame).
- Clicking a pin (or sidebar card) flies the camera to it.
react-globe.gl uses window at import, so it can't be server-rendered. We isolate it in Globe3DImpl.tsx and load that only on the client via next/dynamic({ ssr: false }) from Globe3D.tsx — which also makes the ref to the globe work so the camera/zoom controls function.The flat satellite map
The “FLAT” mode is a real slippy map built with leaflet. It has two styles:
- SAT — Esri World Imagery satellite tiles + place/road label overlays (free, no API key).
- GAME — a stylized CartoDB dark basemap.
Bounties become mascot markers (Leaflet divIcon). Selecting one flies the map to it. Lives in FlatMap.tsx, loaded client-side to avoid the same SSR window issue.
The Explorer & the “dive”
/explore (in Explorer.tsx) is the full-screen app:
- A left bounty board sidebar with search, the live feed, and filters.
- A center stage that toggles between GLOBE and FLAT.
- A right detail panel: reward + ≈USD, “hunters on the way”, the 3-step how-to-claim, coordinates, “Verify my location” (uses the real browser Geolocation API + a haversine distance check), and “Open in Google Maps”.
Meme mascots (AI art pipeline)
The mascots and landmark photos are AI-generated via fal.ai and committed into public/generated/. The mascots are reference-guided so they actually resemble the real memes:
- 1Download references. Real meme images in
public/refs/— Pepe/Doge/Wojak from Wikipedia, Bonk/Brett/Gigachad from CoinGecko token logos. - 2Upload to fal storage. So fal's models can fetch them.
- 3Restyle with nano-banana. fal's
nano-banana/edit(a Gemini image model) turns each reference into a consistent 3D collectible toy, keeping its identity — far better than image-to-image, which duplicated subjects. - 4Cut out the background. fal's
rembgmakes them transparent PNGs.
Landmark aerials + the app icon come from scripts/gen.mjs (flux schnell). Re-run the mascots with node --env-file=.env.local scripts/gen-mascots.mjs.
Tech stack
Project structure
app/
layout.tsx → fonts, <AppShell> (global providers + modals)
page.tsx → landing page
explore/page.tsx → the Explorer
docs/page.tsx → this page
globals.css → theme, neon utilities, globe/map pin styles
components/
Hero, Nav, Footer, BountyBoard, Factions, Cards,
Leaderboard, Feed, HowItWorks, GlobeFab → landing
Explorer, FlatMap, BountyDetail → /explore
Globe3D + Globe3DImpl → the 3D globe
GameProvider → global game state
Onboard, CommandPalette, Toasts, Avatars → shared UI
lib/data.ts → all mock data + helpers
scripts/ → fal.ai image generation
public/
generated/ → AI mascots, landmarks, icon
textures/ → earth textures for the globeState management
All game state lives in one React context, GameProvider.tsx, wrapped around every page by AppShell. It holds: wallet connection, hunter tag, faction, balance, claimed bounties, faction scores, the live feed and toasts — and persists your session to localStorage.
Key actions any component can call via the useGame() hook:
const { connected, hunter, faction, balance,
claimed, scores, feed,
claim, finishOnboard, disconnect,
toast, setOnboardOpen } = useGame();claim(bounty) credits your balance, marks the bounty tagged, adds faction points and pushes a feed event. In the detail panel, Verify my location reads your real GPS and only claims if you're within 250m — otherwise it tells you how far off you are.
The data layer
lib/data.ts is the single source of truth for the demo: FACTIONS, BOUNTIES, LEADERBOARD, CARDS, feed templates, plus helpers like mascotSrc(), landmarkSrc() and fmtNum() (a locale-safe number formatter that avoids server/client hydration mismatches).
Deployment (Railway)
The app is live in production on Railway:
- Workspace
My Projects→ projectdegengo, with awebservice (Next.js) and aPostgresservice. webis connected to the GitHub repogn-inconcepts/DegenGo— so every push tomainauto-deploys.- Build = Railpack auto-detect →
npm install→npm run build→npm start.
next from 14.2.5 → 14.2.35. Keep dependencies patched. Also: this app is deployed from GitHub (not railway up) and .env*.local (your fal key) is git-ignored and never pushed.Database
A managed Postgres is provisioned and its connection string is already injected into the web service as a reference variable:
DATABASE_URL = ${{ Postgres.DATABASE_URL }}It's live but not yet used — the app still reads mock data. Wiring it up is the next milestone.
Roadmap to a real product
- 1Database layer. Add Prisma/Drizzle + a schema (
bounties,hunters,claims,factions,feed), migrate against the live Postgres, seed from the current mock data. - 2API + realtime. Replace mock reads with API routes; add WebSocket/SSE for the live feed and 'hunters on the way'.
- 3Wallet auth. Sign-in by signing a nonce with a Solana wallet (Phantom) — no passwords.
- 4On-chain escrow. Integrate the real pump.fun GO bounties (or a custom Solana escrow program). This handles real money and needs audits.
- 5Geo + proof + anti-cheat. Enforced GPS, the 30-second proof video, and human/ML moderation to stop spoofing.
- 6Legal & safety. ToS, geo-restrictions, and KYC/AML review — it's real-money and gambling-adjacent.
FAQ
Disclaimer
Made with Claude Code · DegenGo — Meme Wars