🎮 Xpedition

Showcase your craziest gameplays. Earn badges. Push games beyond their limits.

Xpedition is a community platform where gamers share their wildest, most out-of-the-box playthroughs and compete to complete custom achievements created by other players. Pull off the achievement, submit your proof, and earn a tiered badge for your profile.

Built with Vercel v0 for the H0 – Hack the Zero Stack Hackathon.

🔗 Live demo: Xpedition

---

✨ What it does

Xpedition turns standout gameplay moments into a badge-driven achievement economy:

• 📹 Share clips — Upload your craziest gameplay moments (video, images, or PDF proof) or link out to YouTube/Twitch.
• 🏆 Custom achievements — Verified creators design their own challenges ("achievements") for any game, each with a difficulty tier.
• 🎖️ Earn tiered badges — Submit proof that you completed an achievement; once approved, you earn its badge. Tiers range Bronze → Silver → Gold → Platinum → Diamond → Legend, each worth escalating points.
• 📊 Leaderboards — Compete on a global leaderboard ranked by total badge points.
• 👤 Profiles — Every user has a public profile showing earned badges, tiers, and stats.
• 💬 Community — Comment on clips and achievements, and discover what other players are pulling off.
• 🛡️ Moderation & roles — A full role system (User → Verified Creator → Moderator → Admin) with creator applications, content review queues, reports, warnings, temp/permanent bans, and an admin dashboard.

🧩 Roles

Role	Can do
User	Upload clips, submit proof for achievements, earn badges, comment
Verified Creator	Everything above + create games & custom achievements, review submissions
Moderator	Handle reports, warn/ban users, review applications
Admin	Full control — manage users, games, clips, achievements, and roles

Users apply to become Creators or Moderators through an in-app application flow that staff review.

---

🛠️ How it was built

Xpedition was built with Vercel v0 as a Next.js (App Router) app in TypeScript, using React Server Components for data-heavy pages and Route Handlers for the API layer.

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router), React 19, TypeScript
UI	Tailwind CSS, shadcn/ui, lucide-react icons
API	Next.js Route Handlers (/app/api/*)
Database	PostgreSQL on Amazon Aurora, queried via node-postgres (pg)
DB auth	AWS IAM — no DB password; @aws-sdk/rds-signer mints short-lived tokens, federated through Vercel OIDC
Media storage	Vercel Blob (clips, images, proof PDFs)
Auth	JWT sessions (jose) in httpOnly cookies + bcryptjs password hashing
Analytics	Vercel Analytics
Hosting	Vercel serverless

Security-first database access

Rather than embedding a database password, the app authenticates to Aurora using AWS IAM. At runtime, Vercel's OIDC integration federates AWS credentials, and @aws-sdk/rds-signer generates short-lived (~15 min) IAM auth tokens used as the Postgres password — so no long-lived DB secret ever exists in the codebase.

---

🏗️ Architecture

Flow at a glance:

1. The browser loads pages rendered by React Server Components and calls Route Handlers for actions.
2. Auth is verified via a JWT stored in an httpOnly cookie; passwords are bcrypt-hashed.
3. Media uploads go to Vercel Blob, which returns a URL stored in Postgres.
4. The app connects to Aurora PostgreSQL over a pg pool, authenticating with IAM tokens issued through Vercel OIDC → AWS IAM (RDS Signer).

---

📁 Project structure

app/
  api/            # Route Handlers (auth, clips, achievements, badges, mod, admin, …)
  (pages)/        # RSC pages: clips, games, achievements, leaderboards,
                  # dashboard, creator, mod, admin, profiles, settings
components/       # UI + shadcn/ui components
lib/
  db.ts           # pg pool + AWS IAM (RDS Signer) auth
  auth.ts         # JWT sessions, bcrypt, role helpers
  types.ts        # Domain models (User, Game, Achievement, Submission, Badge, …)
scripts/          # SQL migrations (schema, badge wallet, community features, …)

Data model (core tables)

users · games · achievements · submissions · user_badges · comments · reports · mod_actions · badge_awards · role_applications · creator_applications

---

🚀 Getting Started

Prerequisites

• Node.js 20+
• pnpm (project uses a pnpm-lock.yaml)
• A PostgreSQL database (Amazon Aurora, or any Postgres for local dev)

1. Install

pnpm install

2. Configure environment

Create a .env.local file in the project root:

# Aurora / PostgreSQL (the Aurora integration provides these with an AWS_APG_ prefix)
AWS_APG_PGHOST=your-aurora-endpoint
AWS_APG_PGPORT=5432
AWS_APG_PGUSER=your-db-user
AWS_APG_PGDATABASE=your-db-name
AWS_APG_AWS_REGION=your-aws-region
AWS_APG_AWS_ROLE_ARN=arn:aws:iam::...:role/...

# Auth
JWT_SECRET=a-long-random-secret

# Vercel Blob (auto-set on Vercel; needed locally for uploads)
BLOB_READ_WRITE_TOKEN=your-blob-token

💡 On Vercel, the Aurora and Blob integrations inject most of these for you.

3. Set up the database

Run the SQL migrations in scripts/ against your database (in numeric order), or use the included helper:

node run-migrations.js

4. Run the dev server

pnpm dev

Open http://localhost:3000.

---

🧗 Challenges weAI ran into

Deciding on the right data model and the achievement/badge mechanics that would feel engaging, wiring up secure IAM-based database access, handling media uploads, and squashing bugs along the way (v0 helped a lot here).

🏅 What I'm proud of

Finally building the platform I'd wanted to exist for a long time — a home for out-of-the-box gameplay.

📚 What we learned

Vibe Coding and fixing bugs using multiple AIs

🔮 What's next

Launching publicly to gather real user feedback, plus a roadmap of new features. (Nah that's a lie, I probably won't even open it again)

---

---

_{Built with v0 for the H0 – Hack the Zero Stack Hackathon · Deployed on Vercel}