Back to the window

Backend engineer

Metaline

My first Web3 job: a game hub, a forum and a blockchain data viewer

BuiltJan–Mar 2024

Video in the works

Metaline

A walk through the game hub and forum.

About the project

Metaline built blockchain products: Nexus, a hub for blockchain games; X Forum, a community; a portal for grant rounds; and Xviewer, a viewer for blockchain data. The team later became TermiX.

Metaline was my first Web3 job, from January 2024. The team was building several products in one codebase: Nexus, a hub for blockchain games; X Forum, a community; a portal for IP grant rounds; and Xviewer, a viewer for on-chain data. The same team later became TermiX.

I worked across the backend and the screens: sign-up and login, APIs for posts, games and reviews, Supabase data, and pages for the hub, the forum and the viewer.

Under the hood

Game hub
Game pages, featured and all-games sliders, news and articles, from Supabase.
X Forum
Communities, topics and posts, with around 16 API routes.
Grants
Active rounds, all rounds, proposals and delegations.
Xviewer
A data table with sorting, filters and paging, and dark mode.
Login
bcrypt passwords and a 48-hour JWT cookie, written by hand.

Design

X Forum and the game hub, for MetalineDesigned by Metaline's designer. I wrote the code for it.Open in Figma →
X Forum and the game hub, for MetalineDesigned by Metaline's designer. I wrote the code for it.Open in Figma

What I did

  • Built the X Forum and game hub screens from the Metaline designer's Figma designs
  • Forum pages: communities, topics, cards, navigation
  • Connected the game hub to Supabase: game pages, sliders, news and articles
  • Grant round views: active rounds, all rounds, proposals and delegations
  • Sign-up and login (bcrypt and a 48-hour JWT cookie), plus about 16 API routes for posts, communities, games and reviews
  • One shared database client for three apps, and readable URLs instead of IDs
  • A small tRPC API deployed to Vercel
  • The Xviewer table: sorting, filters, paging and dark mode

What was new

  • My first job on a monorepo with several apps
  • First time with Supabase, tRPC, and writing auth myself

Problems I hit, and how I fixed them

  1. The build failed because a types file sat where Next.js expects pages.

    Fix Moved it.

  2. The game sliders threw errors and broke the layout.

    Fix List keys, a correctly named component, and slides per row based on the number of games.

  3. The tRPC server wouldn't deploy on Vercel.

    Fix Moved the entry point, bundled it, and added a rewrite.

Screenshots

Screenshots in the works

Real screens from Metaline go here.