A multilingual, client-facing website for Trust Taxi — a professional taxi and transfer service based in Marsa Alam, Egypt, connecting international travelers to destinations across the Red Sea coast and beyond.
⚠️ Confidentiality Notice Source code repository is private due to client confidentiality. This document serves as a technical case study, showcasing front-end architecture, UX implementation, and feature engineering for portfolio purposes.
Full-screen autoplay video background showcasing the Red Sea coast with a centered headline and a prominent "Book Transfer" call-to-action. A semi-transparent overlay ensures text readability across all lighting conditions.
A modal booking form that collects all trip details — pickup, destination, passengers, luggage, vehicle type, flight number, and date/time. On submission, all fields are serialized into a structured message and the customer is redirected directly to WhatsApp.
Full Arabic translation with automatic RTL layout switching. The entire page direction, alignment, and text flow adapts dynamically with no page reload, serving the Egyptian-Arabic speaking audience natively.
The entire booking flow is handled client-side with zero backend dependency. The JavaScript engine collects, validates, and encodes form data into a structured WhatsApp deep-link:
// trusttaxi.js — booking form → WhatsApp URL construction
var message = 'TAXI BOOKING REQUEST\n\n';
message += 'Pickup Point: ' + pickup + '\n';
message += 'Destination: ' + destination + '\n';
message += 'Passengers: ' + passengers + '\n';
message += 'Bags: ' + bags + '\n';
message += 'Car Type: ' + carType + '\n';
if (flight) message += 'Flight Number: ' + flight + '\n';
if (formattedDateTime) message += 'Date & Time: ' + formattedDateTime + '\n';
message += '\nPayment Method: Cash upon arrival\n';
var whatsappURL = 'https://api.whatsapp.com/send?phone=201501029999&text='
+ encodeURIComponent(message);
window.open(whatsappURL, '_blank');- Client-side required field validation before submission.
encodeURIComponentensures special characters, Arabic text, and newlines are safely transmitted via the WhatsApp API.- Date/time is parsed and reformatted using
Intl-styletoLocaleStringfor human-readable output in the message. - Flight number field is optional — included in the message only when provided.
A fully custom internationalization system was built without any third-party library. It supports 6 languages: 🇬🇧 English, 🇪🇬 Arabic, 🇩🇪 German, 🇮🇹 Italian, 🇵🇱 Polish, and 🇨🇿 Czech.
Architecture:
- All UI strings are stored in a single
translations.jsfile as a keyed object per language. - HTML elements carry
data-i18n="key"attributes — the engine queries and updates all matching nodes on language switch. - Arabic triggers an automatic
dir="rtl"swap on the<html>element, reflowing the entire page layout without a reload. - The selected language persists across session via
localStorage.
// translations.js — example structure
const translations = {
en: { 'nav.booking': 'Booking', 'header.title': 'Trust-taxi', ... },
ar: { 'nav.booking': 'حجز', 'header.title': 'تراست تاكسي', ... },
de: { 'nav.booking': 'Buchung', 'header.title': 'Trust-taxi', ... },
// + it, pl, cs
};This approach keeps the HTML clean, centralizes all copy in one maintainable file, and makes adding future languages a single-file change.
The hero section uses a looping, autoplay, muted <video> element as a full-viewport background:
autoplay muted loop playsinlineattributes ensure cross-browser silent autoplay, including iOS Safari.- A CSS overlay (
video-overlay) is rendered on top for contrast and readability of the heading and CTA. - A static image fallback is defined inside
<video>for browsers or connections where the video fails to load. - The scroll-aware navbar uses a JavaScript scroll listener to apply a
navbar-shrinkclass, collapsing padding and adding a background once the user scrolls past 100px.
Each destination (Marsa Alam, Hurghada, Port Ghalib, Cairo & Giza, Luxor, Aswan) is represented by a Bootstrap card. Clicking a card opens a dynamic modal populated from a JavaScript data object — a lightweight content-as-data pattern that avoids duplicating HTML for each destination.
- No JavaScript framework dependencies — the entire interactive layer is Vanilla JS, keeping the bundle lightweight and fast.
- Google Fonts (
Montserrat,Poppins) loaded via a single stylesheet link for consistent cross-platform typography. - Font Awesome 4.7 for icon coverage across the UI.
- Static deployment on Netlify with automatic HTTPS and global CDN — zero server management.
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3, Bootstrap 5 (custom overrides) |
| Interactivity | JavaScript ES6 (Vanilla — no framework) |
| i18n | Custom translation engine (translations.js) |
| Icons | Font Awesome 4.7 |
| Typography | Google Fonts — Montserrat, Poppins |
| Booking | WhatsApp Business API (deep-link) |
| Deployment | Netlify (CDN, HTTPS, auto-deploy) |
| Version Control | Git / GitHub (Private) |
The site is deployed as a static build on Netlify:
| Detail | Value |
|---|---|
| Platform | Netlify (Static Hosting) |
| CDN | Netlify global edge network |
| HTTPS | Automatic SSL via Let's Encrypt |
| Build | No build step — pure static HTML/CSS/JS |
| Live URL | https://trust-taxi.netlify.app |
This site was independently designed, engineered, and deployed as a client engagement — from UX design and multilingual content architecture through to Netlify deployment and handoff.
Available for frontend projects, multilingual web applications, and client-facing marketing sites.
