The latest articles on Forem by Alex Chen (@tryonfy). https://forem.com/tryonfy 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%2F3862077%2Fb3e111c5-ceb4-4acf-9159-7461bd03b255.png https://forem.com/tryonfy en Alex Chen Fri, 17 Apr 2026 16:08:12 +0000 https://forem.com/tryonfy/building-a-multi-language-pokemon-fansite-with-nextjs-16-enjakozh-4en8 https://forem.com/tryonfy/building-a-multi-language-pokemon-fansite-with-nextjs-16-enjakozh-4en8 <p>I recently launched <a href="https://pokopiahabitats.com" rel="noopener noreferrer">Pokopia Habitats</a> — a complete game guide for Pokémon Pokopia. Sharing the build because the multi-language static-site setup had a few non-obvious wins worth documenting.</p> <h2> Stack </h2> <ul> <li> <strong>Next.js 16</strong> with App Router</li> <li> <strong>Static HTML Export</strong> (output: "export") — full SSG, no server</li> <li> <strong>Cloudflare Pages</strong> — free tier, auto-build on GitHub push</li> <li><strong>Tailwind 4 + TypeScript</strong></li> <li>4 locales: en (default), ja, ko, zh</li> </ul> <h2> Scale </h2> <ul> <li>212 habitats</li> <li>303 Pokémon</li> <li>282 materials</li> <li>105 crafting + 20 cooking recipes</li> <li>33 guides</li> <li>~11.6K URLs in sitemap</li> </ul> <h2> Multi-language without i18n routing complexity </h2> <p>Most Next.js i18n tutorials push you toward next-i18next or middleware-based locale detection. For a static export, both are overkill. What worked:</p> <ol> <li>Locale dicts in src/dictionaries/{en,ja,ko,zh}.json</li> <li>Route each locale as a separate [locale] segment</li> <li>generateStaticParams emits all (habitat × locale) combos at build time</li> <li>HtmlLangUpdater client component sets on the fly</li> </ol> <p>Every page gets statically rendered per locale, which Cloudflare CDNs love. Build time: ~4 min for ~11K pages.</p> <h2> Asset trick: external → own CDN </h2> <p>The Pokémon company assets (serebii.net area images, pokemon.com background images) were hot-linked initially. Ran into browser cache issues + the obvious "please don't hot-link" etiquette. Solution: a small Cloudflare R2 worker that fetches on first request, caches, and serves from our own CDN.</p> <h2> What's the site for? </h2> <p>Pokemon Pokopia has a ton of hidden data — habitat unlock conditions, material drop rates, cross-language item names — scattered across 7+ fan sites. <a href="https://pokopiahabitats.com" rel="noopener noreferrer">Pokopia Habitats</a> consolidates it and is the only site covering all four languages (en/ja/ko/zh) with cross-referenced item names.</p> <p>If you're playing on the Japanese or Korean version, the Pokédex at <a href="https://pokopiahabitats.com/pokemon" rel="noopener noreferrer">pokopiahabitats.com/pokemon</a> shows names in every language — useful when a Japanese wiki is your only reference.</p> <h2> What I'd do differently </h2> <ul> <li>Pre-build a subset of pages first, lazy-generate the long tail via ISR-at-build-time</li> <li>Use next/image unoptimized mode earlier — SSG + remote images is a classic footgun</li> <li>Dict keys should be typed (currently Record) — typed-i18n next time</li> </ul> <p>Happy to answer questions about the build if anyone is doing similar fansite work.</p> nextjs showdev sideprojects webdev Alex Chen Sun, 05 Apr 2026 13:03:32 +0000 https://forem.com/tryonfy/building-an-ai-virtual-try-on-product-what-i-learned-1bfp https://forem.com/tryonfy/building-an-ai-virtual-try-on-product-what-i-learned-1bfp <p>I've been working on <a href="https://tryonfy.com" rel="noopener noreferrer">TryOnfy</a>, an AI-powered virtual try-on platform that lets users preview clothing, hairstyles, and accessories on their own photos. Here's what I've learned building it.</p> <h2> The Problem </h2> <p>Return rates in online fashion are brutal — around 30%. The #1 reason? "It didn't look like I expected." Customers can't visualize how something will actually look on <em>them</em>, so they either don't buy (lost revenue) or buy and return (lost margin).</p> <h2> The AI Pipeline </h2> <p>Our try-on system works in three stages:</p> <h3> 1. Body Parsing </h3> <p>We detect pose keypoints and segment the person into regions (face, torso, arms, legs, background). This tells the model <em>where</em> to place the garment and <em>how</em> to deform it.</p> <h3> 2. Garment Warping </h3> <p>The target clothing item gets geometrically transformed to match the person's pose.</p> <h3> 3. Diffusion-Based Rendering </h3> <p>A fine-tuned diffusion model generates the final composite, handling realistic fabric texture, proper lighting, skin tone preservation, and edge blending.</p> <h2> Challenges We Hit </h2> <p><strong>Speed vs. quality tradeoff</strong>: Full diffusion inference is slow. We optimized with model distillation and caching to get results in seconds, not minutes.</p> <p><strong>Hair try-on is harder than clothing</strong>: Hair interacts with face shape, skin tone, and lighting in complex ways.</p> <p><strong>Accessories need precision</strong>: Glasses and jewelry require pixel-level accuracy around facial features.</p> <h2> Results </h2> <p>Users can now upload one photo and try on any item in under 10 seconds. We offer a free tier (10 credits) and a $9.90/month subscription for unlimited access.</p> <p>Check it out at <a href="https://tryonfy.com" rel="noopener noreferrer">tryonfy.com</a> if you're curious.</p> <h2> What's Next </h2> <p>We're exploring video try-on, multi-item compositing, and API for e-commerce integrations.</p> <p>If you're working on similar computer vision problems, I'd love to exchange notes.</p> aiwebdev