Plox Plox
A full social platform for pixel artists. No shortcuts.Eine echte Social-Plattform für Pixel-Künstler. Keine Kompromisse.
// challenge // ausgangslage
Building a complete social platform for a niche creative community — gallery discovery, competitive challenges, a leaderboard, a real drawing tool — without any off-the-shelf template. Every interaction had to feel native to how pixel artists actually think and work. Eine vollständige Social-Plattform für eine kreative Nischen-Community bauen: Galerie, Challenges, Leaderboard und echtes Zeichentool — ohne generisches Template. Jede Interaktion musste sich so anfühlen, wie Pixel-Künstler tatsächlich arbeiten.
// thinking // denkprozess
The first question wasn't 'what framework?' — it was 'how do pixel artists discover each other?' That answer shaped everything. Public surface (Next.js): SEO-first, server-rendered for discovery and sharing. Studio app (React): no-index, session-based, optimized for the creative workspace. One monorepo, shared types, single Express API. Caddy handled local subdomain routing. Docker Compose tied the whole stack together with isolated service boundaries. The seed script generates role-mixed users with real artwork lineage so QA always has a realistic dataset.
Die erste Frage war nicht 'welches Framework?' — sondern 'wie entdecken Pixel-Künstler einander?' Diese Antwort hat alles geprägt. Public-Oberfläche (Next.js): SEO-first, server-gerendert für Discovery und Sharing. Studio-App (React): no-index, session-basiert, für den kreativen Workspace optimiert. Ein Monorepo, geteilte Types, eine API.
// outcome // ergebnis
Production-ready platform: role-based users (free/paid/student/moderator), masonry gallery with animated GIF previews, challenge leaderboards with rank bands, full sharing system with short codes, and a custom admin moderation panel. Produktionsreife Plattform: rollenbasierte Nutzer, Masonry-Galerie mit animierten GIF-Previews, Challenge-Leaderboards, Sharing-System mit Short-Codes und benutzerdefiniertem Moderations-Panel.
// stack
- React
- Next.js
- Node.js
- Express
- MongoDB
- Docker