Independent product design
Establishing the page hierarchy, visual language and Persian RTL experience without a supplied design.
Immigration.
A world of possibilities.
An independently designed immigration information platform connecting countries, migration pathways and CMS-powered publishing — from concept to frontend and content infrastructure.
- Role
- Independent Design, Frontend & CMS Development
- Period
- c. 2022
- Ownership
- Independent project
- Focus
- Independent product design, geographic discovery & CMS architecture
Immigration Platform / original interface
01 / Context & ownership
One idea.
An entire platform.
A self-designed immigration information platform built end to end: country discovery, interactive mapping, five migration-method templates, editorial publishing and a custom Sanity CMS. The foundation is reusable for client projects; demo articles and guides contain sample content.
Owned the entire personal project, from concept, information architecture and UI design to frontend implementation. Built country discovery, all five migration-method route groups, editorial templates and responsive React screens. Configured the Sanity CMS content models, GROQ data access and country/mapping integrations.
Project context. Independently built as a portfolio product, not commissioned by a client. Country records used real data; example articles and migration guides in the demo are placeholders. The reusable site and CMS infrastructure is implemented, while client-specific, verified advisory content remains a publishing requirement.
02 / Challenges
From scratch.
Built to scale.
Geographic data
Bringing country discovery, interactive mapping and complementary country information together.
CMS architecture
Modeling countries, articles and five migration pathways as reusable Sanity content types.
Dynamic page system
Reusing templates across country details, migration-method listings and editorial content.
03 / Technology & implementation
Built with structure.
A categorized, period-accurate stack. Where useful, the implementation map connects the frontend with the project’s actual platform and data sources.
Technology map
Technologies actually used in the archived project, grouped by responsibility. Only relevant categories appear.
14entries
4
Core stack
The foundation the frontend runs on.
Framework
UI runtime
Language
Styling
In this project
Hover, focus, or tap a technology to see how it was used.
5
Interface & experience
Libraries and assets shaping what people see and feel.
UI libraries
Typography
In this project
Hover, focus, or tap a technology to see how it was used.
5
Data & tools
Integrations and tools used in the development workflow.
Data & API
CMS
In this project
Hover, focus, or tap a technology to see how it was used.
Reusable content & data flow
Sanity Studio v2
Countries, posts, migration types and author/content schemas queried with GROQ.
External data services
REST Countries, FlagCDN and university listings used for supplementary country information.
Next.js 12 · Pages Router
Server-rendered GROQ content, dynamic [slug] routes and client-side requests for selected country details.
Country directoryCountry detail pagesMigration templatesBlog templatesMapbox views
Data sources feed distinct modules. The source confirms the content architecture, but the demo migration and blog copy is example content. Production content review and search metadata remain a client-launch task.
04 / Page system
More than a map.
05 / Reflection
From idea to
working foundation.
An end-to-end, independently designed and implemented platform foundation with functional frontend routes, geographic discovery and CMS-driven publishing templates. It can be tailored for client use by populating reviewed content and completing production hardening; the original demo contains sample articles and migration guides.
06 / Country discovery
A geographic entry point, not just a list.
The product connects a world-map landing view to a country directory and country-specific detail pages. Each surface reuses structured data instead of becoming an isolated static page.
- 01
Mapbox provides the visual entry point for exploring places.
- 02
The directory reads country records from Sanity and shows recognizable flag imagery.
- 03
Dynamic country pages combine CMS fields, live country-data requests and relevant migration-pathway links.
07 / Reusable service templates
Five pathways. One publishing system.
Investment, study, work, marriage and birth each have a dedicated Sanity document schema and Next.js listing/detail route. That provides a reusable service-content foundation for a future client deployment without hardcoding every guide.
- 01
The same route patterns support category listings and slug-based detail pages.
- 02
Content editors can author rich text, images and metadata fields in Sanity rather than changing JSX.
- 03
The demo entries are examples: replacing them with professionally reviewed, location-specific content is part of client onboarding.
InvestmentStudyWorkMarriageBirth
The screenshot gallery shows historical demonstration content; it is not verified legal or immigration advice.
08 / CMS & publishing architecture
A product designed to be populated.
I configured the Sanity Studio as the content backend, modeled countries, migration types, posts and supporting entities, and connected the Pages Router frontend through GROQ and Portable Text.
- 01
Independent Sanity Studio v2 with country, post, migration-method, author, category and rich-content schemas.
- 02
GROQ-powered server-rendered listing and detail pages; reusable blog, tag and category layouts.
- 03
Existing SEO foundations include SSR, meaningful headings, breadcrumbs and fa-IR/RTL HTML configuration. A full per-page metadata, canonical, structured-data and sitemap pass would be part of production hardening.
Built foundation / Client adaptation
Built to be adapted.
This was a self-directed portfolio product, but its page templates, CMS models and integrations form a working starting point for a client-specific immigration information website. That is not the same as claiming the demo is a vetted or production-certified advice service.
Implemented foundation
- Designed and developed the RTL frontend without supplied UI designs.
- Country directory, dynamic details and Mapbox geographic experience.
- Five migration-method content models with listing and detail templates.
- Sanity publishing schemas, GROQ queries, blog and rich-content layouts.
Before a client launch
- Replace example articles and immigration guidance with reviewed client content.
- Complete per-page SEO metadata, canonical rules, structured data and sitemap.
- Run production accessibility, performance, responsive and integration QA.
- Verify live third-party API reliability, privacy and operational requirements.