The latest articles on DEV Community by Mohmd-H-BH (@mhbh). https://dev.to/mhbh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F578576%2Fb2ac159e-927e-4550-9933-cb7f698248c1.png https://dev.to/mhbh en Mohmd-H-BH Tue, 01 Sep 2026 14:30:45 +0000 https://dev.to/mhbh/bilingual-ltrrtl-neo-brutalist-vpn-comparison-app-nextjs-16-react-19-tailwind-v4-ag3 https://dev.to/mhbh/bilingual-ltrrtl-neo-brutalist-vpn-comparison-app-nextjs-16-react-19-tailwind-v4-ag3 <p><strong>Title (88 chars):</strong> Bilingual (LTR/RTL) neo-brutalist VPN comparison app — Next.js 16 + React 19 + Tailwind v4</p> <p><strong>Flair:</strong> r/reactjs → "Show /r/reactjs" · r/webdev → "Showoff Saturday" (applied in the Saturday megathread)</p> <p><strong>Body:</strong></p> <p>I built <strong>ShieldCompare</strong>, a VPN comparison matrix. The reason it exists: VPN review sites are affiliate-driven, so this one has no affiliate links and reshuffles the provider order on every visit. But mostly I want to share the front-end build.</p> <p><strong>Stack</strong></p> <ul> <li>Next.js 16 (App Router) / React 19</li> <li>Tailwind CSS v4</li> <li>Framer Motion 13 for layout transitions</li> <li>Fully client-side filtering over a static JSON dataset of 48 providers — sub-millisecond updates, no API round-trips</li> </ul> <p><strong>Parts that were interesting to build</strong></p> <ul> <li> <strong>True LTR/RTL parity:</strong> switching to Arabic swaps to the Cairo typeface and inverts every hard shadow (<code>8px 8px</code> → <code>-8px 8px</code>) plus the spring push/hover transforms along the X axis</li> <li> <strong>Neo-brutalist design system:</strong> 6 swappable contrast palettes via CSS custom properties, persisted in <code>localStorage</code> </li> <li> <code>AnimatePresence</code> + <code>popLayout</code> grid/list reflow with spring physics</li> <li><p>Sticky composite header with zero layout shift during mobile scroll</p></li> <li><p>Live: <a href="https://shieldcompare.mobanihani.dev" rel="noopener noreferrer">https://shieldcompare.mobanihani.dev</a></p></li> <li><p>GitHub: <a href="https://github.com/Mohmd-H-BH" rel="noopener noreferrer">https://github.com/Mohmd-H-BH</a></p></li> </ul> <p>Happy to talk through the RTL work or the Tailwind v4 setup. Feedback appreciated.</p> webdev react vpn ai