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+popLayoutgrid/list reflow with spring physics Sticky composite header with zero layout shift during mobile scroll
GitHub: https://github.com/Mohmd-H-BH
Happy to talk through the RTL work or the Tailwind v4 setup. Feedback appreciated.
