DEV Community

Cover image for Bilingual (LTR/RTL) neo-brutalist VPN comparison app — Next.js 16 + React 19 + Tailwind v4
Mohmd-H-BH
Mohmd-H-BH

Posted on

Bilingual (LTR/RTL) neo-brutalist VPN comparison app — Next.js 16 + React 19 + Tailwind v4

#webdev #react #vpn #ai

Title (88 chars): Bilingual (LTR/RTL) neo-brutalist VPN comparison app — Next.js 16 + React 19 + Tailwind v4

Flair: r/reactjs → "Show /r/reactjs" · r/webdev → "Showoff Saturday" (applied in the Saturday megathread)

Body:

I built ShieldCompare, 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.

Stack

  • Next.js 16 (App Router) / React 19
  • Tailwind CSS v4
  • Framer Motion 13 for layout transitions
  • Fully client-side filtering over a static JSON dataset of 48 providers — sub-millisecond updates, no API round-trips

Parts that were interesting to build

  • True LTR/RTL parity: switching to Arabic swaps to the Cairo typeface and inverts every hard shadow (8px 8px → -8px 8px) plus the spring push/hover transforms along the X axis
  • Neo-brutalist design system: 6 swappable contrast palettes via CSS custom properties, persisted in localStorage
  • AnimatePresence + popLayout grid/list reflow with spring physics

  • Sticky composite header with zero layout shift during mobile scroll

  • Live: https://shieldcompare.mobanihani.dev

  • GitHub: https://github.com/Mohmd-H-BH

Happy to talk through the RTL work or the Tailwind v4 setup. Feedback appreciated.

Top comments (0)