Skip to content
← Back·2026 · Personal

Seberang

Guide + interactive tools for Indonesians planning to move or study abroad.

Role
Creator · Full-stack (solo)
Period
2026
Stack
React, TypeScript, Vite, Tailwind, Framer Motion, Firebase
Link
Visit ↗
  • React
  • TypeScript
  • Vite
  • Tailwind
  • Framer Motion
  • Firebase
seberang.web.id
01/04
  1. Seberang homepage — "Pindah ke luar negeri itu mungkin" hero with 21 destinations, 24-month roadmap, and visa-pathway stats
    Seberang homepage — "Pindah ke luar negeri itu mungkin" hero with 21 destinations, 24-month roadmap, and visa-pathway stats — mobile
  2. Seberang country comparison — Japan, Australia, and Germany side by side with best-value cues per row
    Seberang country comparison — Japan, Australia, and Germany side by side with best-value cues per row — mobile
  3. Seberang budget calculator — relocation cost estimate adapting to situation, with within/stretch/over status
    Seberang budget calculator — relocation cost estimate adapting to situation, with within/stretch/over status — mobile
  4. Seberang 24-month roadmap — staged checklist adapting to goal and destination, progress saved
    Seberang 24-month roadmap — staged checklist adapting to goal and destination, progress saved — mobile
Home — research, calculate, plan in one place

Overview

Seberang is a guide platform for Indonesians (WNI) planning to move abroad for work or study. Most people fail not from inability but from the wrong sequence — chasing documents before choosing a country, or saving without a real cost target. Seberang turns the whole journey into something plannable: compare 21 destinations, understand visa and permanent-residency pathways, estimate relocation cost for your exact situation, and follow a staged 24-month roadmap.

My role

Sole creator — product, design system, full-stack engineering, content, and SEO. Designed and built every surface end to end, from the brand system to the data model to deployment tooling.

Approach

  • React + TypeScript + Vite, Tailwind, and Framer Motion, on a strict in-house brand system (single typeface, fixed palette, one motion easing) — hand-built accessible components (listbox, radiogroup, dialog) rather than a UI kit
  • Three interactive tools sharing one data layer: a side-by-side comparison with objective best-value cues, a budget calculator with a transparent cost formula, and a goal/destination-aware 24-month roadmap
  • First-visit personalization that tailors country recommendations, with cross-device plan sync via Firebase (REST, no SDK) — save and resume on another device or share with a partner
  • Privacy-first analytics (GA4 gated behind cookie consent) and a content/SEO engine (/panduan guides) with Article + FAQ structured data and an llms.txt for AI answer engines
  • Pre-rendered routes for crawlers/social cards; Lighthouse accessibility 100 held as a hard constraint across every page

Outcome

A production-grade, brand-faithful SPA that takes a user from "is this even possible?" to a concrete, personalized plan — with the trust signals (sourced data, honest editorial ranking, clear disclaimers) a high-stakes life decision demands.