Bilingual travel discovery, with English first and Arabic localization
Case StudyVercel - Production
Voyajar
A bilingual travel discovery interface with hotel and flights search, destination guides, and responsive content hubs. I designed the Next.js UI so discovery stays consistent from desktop to mobile, and travelers can browse destinations, hotels, and flights in a clear multilingual experience.
Frontend Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
Performance
- App Router rendering for a modern React interface
- React Query caching for discovery data
- Optimized media in content and operator views
- Code splitting for search and guide routes
Quality & Reliability
- Clear UI boundaries for protected operator areas
- Distinct public and authenticated interface states
- Explicit empty and error states for search results
- TypeScript models for hotels, flights, and destinations
Key Features
Hotel search and destination-oriented browsing
Flights search with a clear results experience
SEO-friendly destination guides and content hubs
Responsive journeys on desktop and mobile
Operator dashboard for content and media review
Loading, success, and empty states with React Query
Motion and visual rhythm aligned across the main travel pages
Frontend Architecture
Multilingual discovery and content routes Search and results components Shared travel layout and navigation Client data layer for search and media views Dashboard UI for content operations
UI Engineering Strategies
- Blend SEO content hubs with hotel and flights search
- Ship bilingual UX patterns from the first release
- Keep discovery, guides, and operator screens visually consistent
- Use React Query for loading, success, and empty states
- Split search routes from content hubs
Visual Interface
