The latest articles on DEV Community by Shakro Abramishvili (@sonsaur). https://dev.to/sonsaur https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3863513%2F03413c49-bcc2-4378-aca9-cdf4de81fd11.png https://dev.to/sonsaur en Shakro Abramishvili Mon, 06 Apr 2026 08:56:20 +0000 https://dev.to/sonsaur/how-we-built-a-gaming-portal-with-8000-games-using-nextjs-and-38-language-translation-b18 https://dev.to/sonsaur/how-we-built-a-gaming-portal-with-8000-games-using-nextjs-and-38-language-translation-b18 <p>We recently relaunched Sonsaur.com, a free browser gaming portal with over 8,000 games. Here's the tech stack and interesting challenges we solved.</p> <h2> The Stack </h2> <ul> <li> <strong>Framework</strong>: Next.js 16 with App Router</li> <li> <strong>Database</strong>: Neon PostgreSQL with Prisma 7 ORM</li> <li> <strong>Hosting</strong>: DigitalOcean VPS + Cloudflare CDN</li> <li> <strong>Image CDN</strong>: Custom nginx-based CDN (img.sonsaur.com) serving pre-resized AVIF thumbnails</li> <li> <strong>Search</strong>: PostgreSQL trigram indexes (pg_trgm) for fuzzy game search</li> <li> <strong>AI Translation</strong>: Gemini API with 60-key rotation for rate limit management</li> <li> <strong>Process Manager</strong>: PM2 with auto-restart and memory limits</li> </ul> <h2> The Image CDN Challenge </h2> <p>With 8,000+ games, each needing thumbnails, image optimization was critical. We built a custom image pipeline:</p> <ol> <li>Original images stored as AVIF at 512px</li> <li>Pre-resized to 128px (~6KB) and 256px (~13KB) variants</li> <li>Served via dedicated nginx subdomain (img.sonsaur.com)</li> <li>Zero-JavaScript image components (plain `` tags for zero hydration cost)</li> </ol> <p>Result: 84% reduction in image payload for game cards.</p> <h2> Translating 8,000 Games into 38 Languages </h2> <p>This was the most interesting challenge. We needed to translate not just the UI (which is straightforward with next-intl) but also game-specific content: descriptions, how-to-play guides, tips, and FAQs.</p> <p>Our approach:</p> <ul> <li>60 Gemini API keys distributed across multiple projects</li> <li>Cron job running every 2 minutes, processing 60 games per batch (1 per key)</li> <li>Sequential processing to prevent Node.js streaming crashes</li> <li>2-minute key cooldown with 10-minute pause when all keys are exhausted</li> <li>Tier 1 rate limits: 1,500 requests per day per key per project</li> </ul> <p>At full capacity, we translate ~43,200 game pages per day across all languages.</p> <h2> Performance Results </h2> <ul> <li>Lighthouse: Performance 79, Accessibility 93, Best Practices 100, SEO 100</li> <li>First game load: under 3 seconds</li> <li>Subsequent navigations: near-instant (Next.js prefetching)</li> <li>Image CDN: 128px thumbnails average 6KB (vs 34KB originals)</li> </ul> <h2> What's Next </h2> <p>We're working on native Android and iOS apps, completing full translation coverage for all 38 languages, and continuously adding new games to the library.</p> <p>Check it out: <a href="https://sonsaur.com" rel="noopener noreferrer">sonsaur.com</a></p> <p>Happy to answer questions about any part of the stack. The combination of Next.js + Neon PostgreSQL + custom image CDN has been great for this use case.</p> nextjs gamedev javascript dotnet