- #nextjs
- #typescript
- #tailwind
- #i18n
Estacion 33
Bilingual landing site for a faith-based community center.
- year
- 2025
- status
- active
$ cat ./case-study
$ cat ./case-study/problem
Problem
A bilingual community center needed a real web presence — service times, events, and contact info readable on a phone in both Spanish and English. They were getting by on social posts, which meant first-time visitors had no reliable way to verify a service was happening this week.
$ cat ./case-study/approach
Approach
Next.js App Router on Vercel with a flat Spanish/English content tree. Picked App Router over a CMS because the volunteer team only edits copy a few times a year — keeping content in versioned files made the site cheap to maintain and impossible to break with a bad admin click. Tailwind for the design system so every touch feels consistent without writing custom CSS.
$ cat ./case-study/stack
Stack notes
i18n via route segments (/es/... and /en/...) — clean URLs, real per-locale OG metadata for share previews, and the language toggle is just a Link, not a state hack. Vercel preview deploys per branch so the client could approve copy changes from their phone before they went live.
$ cat ./case-study/what-broke
What broke
Spanish copy ran longer than English in almost every section, and the hero CTA wrapped ugly on mobile in Spanish only. Switched the hero buttons from fixed text width to a flex layout that breaks the verb onto its own line in tight viewports, so both locales degrade gracefully instead of one looking polished and the other looking broken.
$ cat ./case-study/next-time
What I'd do differently
I would have set up the i18n routing from day one instead of bolting it on after the English version felt done. Half a day to retrofit, ten minutes to do up front. Lesson logged.
Mobile-first marketing site for Estacion 33. Built with Next.js + TypeScript, deployed to a custom domain. Sections include events, contact, and a Spanish/English toggle.
$ next
Pawfect Strolls
Booking site for a dog-walking service.