UX case study for NicaLink

NicaLink is dedicated to the history and culture of Nicaragua. The site publishes original articles and information about the country as a personal tribute. Featured work includes arcane translations such as “Tarrying in Nicaragua” / “Estancia en Nicaragua,” recreating a 19th-century gold-rush crossing with period sensibility.

The NicaLink logo is my own mark—not a stock asset. It started as a paper sketch, was traced and refined in Adobe Illustrator, and ships in the app as an SVG React component so the brand stays sharp across header, hero, and favicon surfaces.

Editorial sites often fight their own chrome: English-first routing on Spanish-default content, duplicated UI that drifts from a shared design system, or unsafe HTML rendering for rich article copy. Readers need calm reading, clear language switching, and trustworthy links—without the shell feeling like a different product on every page.

Spanish-primary readers exploring culture and history, English readers arriving via /en routes, and returning visitors following article series. Success looks like: Spanish URLs without a locale prefix, English under /en with matching logical pages, a header toggle that preserves the same page across languages, and article listings that stay readable on mobile and desktop.

Next.js App Router with mostly React Server Components; small client pieces for language toggle, theme, and shell interactions. Dart Sass and synced design tokens compose layout and UI modules; host-only SCSS and brand tokens live under src/styles/app/. Automated sync pulls layout, UI, styles, and icons from the TS Design System so NicaLink stays visually aligned with other Tulio Solorzano products.

Spanish canonical paths (/acerca-de, /articulos) with 308 redirects from legacy /about and /articles and stray /es prefixes. English uses /en plus English slugs. Article titles, descriptions, and paragraphs pass through an allow-list (sanitize-html + html-react-parser) so internal links can become Next.js Link without dangerouslySetInnerHTML. RootProviders wraps next-themes, toasts, and scroll restoration; template.tsx owns header/footer remount behavior.

A consumer-facing editorial app that feels consistent with the design system while keeping NicaLink-specific copy, routes, and articles under app-owned folders—ready for more translations and series without rewriting the shell.

Next.js App Router (Turbopack for dev and build), React Server and client components, TypeScript, Dart Sass with synced tokens plus host styles, TS Design System sync for layout/UI/icons, next-themes, locale JSON under src/locales/es and src/locales/en, structured articles.json per language, and App Router metadata (manifest, robots).