AR

Insightour

Static website for a travel agency with multilingual support.

A dynamic travel agency platform featuring custom animations and multilingual support. Optimized for performance, SEO and accessibility with perfect Lighthouse scores across all metrics. Delivers a fluid experience across all devices.

The Goal & The Stack

The goal was to create a modern, accessible platform that would reach a wider audience without losing the company's visual identity. I transformed their pre-built website using Next.js for development, Framer Motion for smooth animations, and Vercel for optimal performance.

The Challenge

It was important to keep the design minimalistic yet playful and informative, so I tried to convey information visually. This dotted line animation represents a route on a map, underlining the excitement of exploration during tours. I created it with multiple custom svgs and then used Framer Motion to animate their appearance.

Creating an interactive visualization of the country was crucial. By combining D3.js with GeoJSON data to draw the map and Framer Motion for animation, the end result was a beautiful minimalist map of the country with regional borders visible. The key cities from the tours offered by the agency are highlighted, with an animated line drawn connecting 4 of the cities randomly. Each time the animation completes, it redraws connecting a different set of four cities, showcasing the variety of routes available.

Call to action button that opens a contact form is present in multiple places across the website. All of its inputs are sanitized and validated on the Next.js backend, and then sent to a table using Google Sheets API as per the client's request. I implemented rate limiting to prevent abuse and control API costs.

The website features many interactive elements like this rates section, which I designed to be simple yet informative, with smooth, subtle animations to enhance the user experience in a text-heavy environment.

Supporting both English and Arabic was a key requirement, so I implemented a seamless language switching system using React context. The content structure was designed with scalability in mind - adding new languages or content is as simple as updating a single file. Pages dynamically access content based on the selected language, making future maintenance a breeze. The system also includes automatic language detection based on the user's IP address and browser preferences, defaulting to Arabic for visitors from Middle Eastern countries.

The Lesson

Work on this project presented me with numerous challenges that needed solutions the client would be satisfied with. Below are the tasks I found most engaging:

  • Language Selection
    designed and implemented a maintainable language selection solution using React context
  • Complex Animations
    came up with visually engaging animations to enhance the user experience in a text-heavy website
  • Google Sheets API
    developed a secure, rate-limited contact form with Google Sheets integration
  • Country Map
    used D3.js and GeoJSON data to create an animated map showcasing potential tour routes provided by the agency