UNIVERSE 07

Arabic-first static tourism directory with an interactive SVG map, country theming, and rich landmark pages (Next.js Export).

Next.js (App Router) • React • Tailwind CSS • Static Export (output: 'export') • d3-geo • topojson-client • world-atlas • Local JSON/CSV Dataset

ArabTourismPlatform

Arabic-first static tourism directory with an interactive SVG map, country theming, and rich landmark pages (Next.js Export).

Arab Tourism Platform is a modern Arabic-first tourism directory built with Next.js (App Router), React, and Tailwind CSS. It provides a country → landmarks browsing flow, an interactive SVG map of the Arab world (d3-geo + topojson + world-atlas), and detailed landmark pages including long narrative text, sources, coordinates, and image-search suggestions. The project is fully static-export ready (outputs an /out folder) and can be deployed to shared hosting like InfinityFree with no backend—data is shipped locally as JSON/CSV and generated into static pages.

My role

UI/UX implementation, components system, static routing, SVG map integration, theming system, and data utilities for JSON/CSV.

Focus

Performance-friendly static architecture, clean responsive UI, scalable dataset-driven pages, and map usability on mobile (hover/focus/tap).

Key points

Arabic-first UI, country → landmarks directory, interactive SVG map (d3-geo/topojson), per-country theming via CSS variables, and rich landmark pages (narrative + sources + coordinates). Fully static export to /out for shared hosting.

Next.js (App Router)ReactTailwind CSSStatic Export (output: 'export')d3-geotopojson-clientworld-atlasLocal JSON/CSV Dataset

Case study

Problem & constraints

Tourism directories become heavy when they rely on backend queries for every page. The project needed a fast tourism website that works on shared hosting.

Solution & decisions

Built a static-export architecture: dataset-driven pages (countries/landmarks) + interactive SVG map + long landmark pages with sources and coordinates.

Outcome & results

Fast browsing, easy deployment on shared hosting, and scalable content structure for adding more landmarks without backend complexity.

Role

UI/UX + static routing + map integration + dataset utilities.

Stack

Next.js export • d3-geo • topojson • Tailwind

Execution steps

Design country → landmark browsing flow
Build interactive SVG map and theming
Create static pages from JSON/CSV dataset
Write long landmark page structure (facts/sources)
Prepare static export and hosting-ready output

Gallery 071 / 10

Tourism website — home with SVG map and countries directory

Open live

SEO-friendly explanation

This project proves tourism website as a real outcome: clear UI, structured sections, and readable intent for users.

In "Arab Tourism Platform", tourism website was treated as a business goal: reduce friction and improve decision clarity from the first viewport.

The case study content is not decoration. Problem/solution/outcome are written to support tourism website and clear indexing signals.

Screenshots are contextual: each image has alt text aligned with tourism website to improve accessibility and search understanding.

Implementation uses Next.js (App Router) • React • Tailwind CSS • Static Export (output: 'export') • d3-geo • topojson-client • world-atlas • Local JSON/CSV Dataset with attention to mobile performance, because tourism website fails when pages are heavy.

Execution steps and FAQs add value and make tourism website page stronger than a short showcase.

Project FAQs

Why static export?

It removes backend cost and keeps pages fast on shared hosting.

Is the map usable on mobile?

Yes. Interaction is designed for tap and focus, not hover-only.

Can new landmarks be added easily?

Yes. Add data entries and rebuild; pages are generated automatically.