Sofieru
A bilingual home for VTuber Eru: latest videos, a fanart gallery and a cozy admin panel to run it all.
Visit the site ↗- ROLEFull-stack · design, code, deploy
- YEAR2026
- STACKNext.js 16 · TypeScript · Tailwind · GSAP · Prisma · PostgreSQL · Auth.js · Cloudflare R2 · Docker
- JavaScript77%
- TypeScript16.5%
- CSS3.3%
- Shell1.7%
- Other1.5%
A castle in the forest, under a starry sky
Sofieru is an indie VTuber: a shy guardian mage who keeps the secrets of other worlds. Eru needed one place where fans could catch the newest streams, read the character's story, browse fanart and find how to reach out, in English and in Vietnamese.
I built the whole thing as a personal project for a friend: the night-sky look, the site itself, a small admin panel so Eru can run it without me, and the pipeline that ships it.
Calm on the outside, a small CMS inside
The public site is a Next.js 16 app with routes for /en and /vi; first-time visitors land on their browser's language. The latest videos come straight from the channel's public feed, so there is no API key to manage, and the night sky drifts with GSAP while respecting reduced-motion settings.
Behind it, an admin panel with roles lets Eru and the mods upload fanart to Cloudflare R2, credit artists, edit social links and see a log of every change. Data lives in PostgreSQL through Prisma, and images are resized on the fly before they reach the gallery.
made for Eru!
Deploys that fit on a tiny server
The production box has a single CPU and 1 GB of memory, too small to build the app without hurting the live site. So every push runs lint, typecheck and a build in GitHub Actions, packs a Docker image there, and the server only pulls it and restarts, applying database migrations on start.
What I took away: keep the visitor side quiet and the owner side simple. Eru updates the site on her own, and a deploy is a push.