Skip to content
Agung Smaraputra
All Projects

Bored Collection

Unity WebGL game gallery with Docker deployment

Next.jsNext.js 15ReactReact 19TypeScriptTailwind CSSMotionDockerGitHub ActionsVitestPlaywright

Overview

Bored Collection is a game gallery that hosts browser-playable Unity WebGL games. Each game has a dedicated detail page with screenshots, trailers, and metadata. The site uses JSON-LD VideoGame schema markup to improve search engine visibility for individual game pages.

I built this as a personal project to showcase games published under Artanode Studios, deployed via Docker with a GitHub Actions CI/CD pipeline pushing to GitHub Container Registry.

Challenge

Unity WebGL games need a hosting platform with per-game detail pages, proper metadata, and fast load times. The gallery needed to serve WebGL builds directly in-browser while providing SEO-friendly pages with structured data for each game.

Approach

Built on Next.js 15 with React 19, the site uses static generation for game pages. Each game entry includes screenshots, trailers, and JSON-LD VideoGame schema for search engines. Tailwind CSS handles styling, and Motion provides page transitions. The deployment pipeline uses Docker with GitHub Actions for CI/CD, pushing container images to GitHub Container Registry.

Tech Stack

Layer Technology
Framework Next.js 15
Frontend React 19, TypeScript
Styling Tailwind CSS
Animation Motion
Testing Vitest, Playwright
Deployment Docker, GitHub Actions, GHCR

Key Implementation Details

  • Browser-playable Unity WebGL games with per-game detail pages
  • JSON-LD VideoGame schema markup for search engine visibility
  • Docker deployment with GitHub Actions CI/CD to GitHub Container Registry
  • Static generation for fast page loads
  • Unit testing with Vitest and E2E testing with Playwright

Outcome

Bored Collection is live and hosts Artanode Studios games in a browser-playable format with proper SEO markup.