Visa Explorer

Visa-free travel information for every passport. Select your country to see visa-free, visa-on-arrival, eVisa, eTA, and visa-required destinations worldwide.

Tech Stack

• Framework: Astro 6 — static site generation with server-side rendering via Cloudflare
• UI: React 19 + shadcn/ui + Tailwind CSS 4
• Language: TypeScript 6
• Deployment: Cloudflare Workers via @astrojs/cloudflare
• Maps: d3-geo + topojson-client
• Icons: Lucide React
• Font: Noto Sans Variable

Getting Started

npm install
npm run dev

Open localhost:4321.

Build

npm run build
npm run preview   # preview the production build locally
npm run deploy    # build + deploy to Cloudflare Workers

Data

Visa requirement data is compiled from official government portals and IATA. Build data files with:

npm run data

Individual data pipelines:

Command	Description
npm run data:countries	Build country list
npm run data:visa	Build visa requirement matrix
npm run data:airports	Build airport/route data
npm run data:rates	Build exchange rates

Project Structure

src/
├── components/    # React & Astro components
│   ├── ui/        # shadcn/ui primitives
│   ├── CountryGrid.tsx
│   ├── CountryCard.tsx
│   ├── PassportHero.tsx
│   ├── VisaExplorer.tsx
│   ├── FlightMap.tsx
│   ├── CurrencyConverter.tsx
│   └── Flag.tsx
├── data/          # Compiled JSON data
├── layouts/       # Page layouts
├── lib/           # Utilities and data access
├── pages/         # Route pages
│   ├── index.astro
│   ├── country/   # Passport-specific pages
│   ├── about.astro
│   ├── contact.astro
│   ├── privacy.astro
│   └── terms.astro
└── styles/        # Global styles

Scripts

Command	Description
npm run dev	Start dev server
npm run build	Production build
npm run deploy	Build + deploy to Cloudflare
npm run preview	Preview production build
npm run data	Build all data pipelines
npm run lint	ESLint check
npm run format	Prettier format
npm run typecheck	astro check type checking
npm run generate-types	Generate Cloudflare Worker types