Beacon Health Consultancy

Year

2026

Role

UI Designer & Developer

About the Project

A full-stack website for a public-health research organization, covering projects, team, publications, trainings, blogs and an FAQ. I designed and built it with Next.js 16 (App Router), React 19, TypeScript and Tailwind CSS 4, in five languages.

Visit Beacon ↗

5-language i18n

English, Amharic, German, French and Spanish, with locale-prefixed routing through Next.js middleware, a language switcher that keeps the current path and query parameters, and localized content and metadata for every page.

Content system & API

A PostgreSQL-backed content system with REST API routes (/api/blogs, /api/publications) for full CRUD. Payloads are validated with Zod, and write endpoints are protected by token-based authentication.

Admin dashboard

A protected dashboard with route-level auth guards, a BlockNote rich-text blog editor, image and file upload pickers, and publication management grouped by year.

SEO & AEO

Technical SEO and answer-engine optimization: JSON-LD structured data (Organization, BreadcrumbList, Article with abstract, FAQPage), per-locale canonical and hreflang tags, a dynamic sitemap and robots.txt, including a fix for a canonical/hreflang bug.

Interactive features

An interactive world map of project locations (react-simple-maps), text-to-speech article playback, bookmarking, search, sort, filter and pagination, with skeleton loading states.