Plox Plox
A full social platform for pixel artists. No shortcuts.Eine echte Social-Plattform für Pixel-Künstler. Keine Kompromisse.
Full-stack monorepo: public gallery, challenge system, leaderboards, and a creative pixel canvas — two surfaces, one API, Docker Compose deployment. Full-Stack-Monorepo: öffentliche Galerie, Challenge-System, Leaderboards und kreativer Pixel-Canvas — zwei Oberflächen, eine API, Docker Compose.
// 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.
// approach // vorgehen
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.
// code // code
Role-mixed user factory with artwork lineage Rollengemischte User-Factory mit Artwork-Abstammung
typescript// packages/api/src/seed.ts
const ROLES = ['free', 'paid', 'student', 'moderator'] as const;
async function seedUsers(count: number) {
return Promise.all(
Array.from({ length: count }, async (_, i) => {
const user = await User.create({
username: `artist_${nanoid(6)}`,
role: ROLES[i % ROLES.length],
avatarSeed: crypto.randomUUID(),
});
// Each user gets 2–5 artworks — students inherit style from a mentor
const artworkCount = 2 + (i % 4);
await seedArtworks(user._id, artworkCount, {
inheritStyle: user.role === 'student',
});
return user;
})
);
}QA always has a realistic dataset — role distribution mirrors production ratios, and student artworks carry a style lineage so the gallery looks curated, not synthetic. QA hat immer einen realistischen Datensatz — Rollenverteilung spiegelt Produktionsverhältnisse wider, Student-Artworks tragen eine Stil-Abstammung.
Monorepo subdomain routing via Caddy Monorepo Subdomain-Routing via Caddy
text# caddy/Caddyfile — local subdomain routing
# Two surfaces, one API, zero port juggling
plox.localhost {
reverse_proxy localhost:3000 # Next.js public gallery
}
studio.plox.localhost {
reverse_proxy localhost:5173 # React studio app
}
api.plox.localhost {
reverse_proxy localhost:4000 # Express API (shared)
}One command spins up the full stack. Each surface runs independently — swapping the studio renderer or the gallery framework never touches the other. Ein Befehl startet den gesamten Stack. Jede Oberfläche läuft unabhängig — kein Port-Jonglieren, kein Namespace-Konflikt.
// 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.
// brand // marke
Audience
Zielgruppe
Independent pixel artists and hobbyist game devs, primarily 18–35. Passionate about the format. Frustrated by generic art platforms that treat pixel art as a filter, not a discipline.
Unabhängige Pixel-Künstler und Hobby-Game-Devs, vor allem 18–35. Begeistert von der Disziplin. Frustriert von generischen Kunstplattformen, die Pixel-Art wie einen Filter behandeln.
Positioning
Positionierung
The first platform built specifically FOR pixel artists — with community mechanics (challenges, leaderboards, rank bands) that reward craft, not just output.
Die erste Plattform, die speziell FÜR Pixel-Künstler gebaut wurde — mit Community-Mechanismen, die Handwerk belohnen, nicht nur Output.
Tone of Voice
Tonalität
Enthusiast and peer-level. Speaks the language of the community without condescension. Competitive energy balanced with creative encouragement.
Enthusiastisch und auf Augenhöhe. Spricht die Sprache der Community ohne Herablassung. Wettbewerbsgeist balanciert mit kreativer Ermutigung.
Visual Direction
Visual Direction
Dark canvas aesthetic echoing the studio environment. Monospace type for technical credibility. Accent colors referencing pixel palette conventions. Masonry layout for visual density.
Dunkle Canvas-Ästhetik, die das Studio-Umfeld widerspiegelt. Monospace-Type für technische Glaubwürdigkeit. Akzentfarben nach Pixel-Paletten-Konventionen. Masonry-Layout für visuelle Dichte.
// stack
- React
- Next.js
- Node.js
- Express
- MongoDB
- Docker