Back to Projects
Luxury Transportation
Europe Chauffeur Service
Luxury Chauffeur Service Platform - Setting the Standard in the Netherlands
Client
Europe Chauffeur Service (Founded 2009)
Year
2024
Role
Full-Stack Developer
Duration
12 months
Luxury Chauffeur Service Platform - Setting the Standard in the Netherlands
Europe Chauffeur Service (Founded 2009)
2024
Full-Stack Developer
12 months
Built a modern React 18 application with TypeScript using Vite for blazing-fast performance. Implemented comprehensive bilingual support (English/Dutch) using i18next, integrated 51+ shadcn/ui components for a polished UI, and created a booking system with Google Sheets integration. The platform features 13 pages including detailed fleet showcase, service offerings, blog, gallery, and complete GDPR compliance with cookie consent management.
Europe Chauffeur Service demonstrates expertise in building modern, bilingual web applications with premium UI, complex state management, and comprehensive feature sets. Let's create something exceptional together!
Complete internationalization with i18next supporting English and Dutch languages. Automatic language detection based on browser settings, persistent language preference, and 80KB+ of translations per language covering all content.
Comprehensive vehicle catalog featuring 10+ luxury vehicles across categories (Ultra Luxury, Electric, Group Travel). Each vehicle has detailed pages with high-resolution images, complete specifications, features, amenities, and passenger capacity information.
Integrated booking modal with Google Sheets API for seamless reservation management. Form validation with Zod schema, React Hook Form for state management, and real-time availability checking.
Geographic service visualization covering 8 domestic Dutch cities (Amsterdam, Rotterdam, The Hague, Utrecht, Eindhoven, Groningen, Maastricht, Haarlem) and international destinations in Belgium, Germany, and France.
8 Major Cities:
Belgium:
Germany:
Need for seamless bilingual experience without page reloads or language barriers
Implemented i18next with react-i18next providing instant language switching, persistent user preferences, automatic detection, and 80KB+ translations covering all content including vehicle specs, services, and legal pages
// i18n configuration with auto-detection
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import enTranslation from './locales/en.json'
import nlTranslation from './locales/nl.json'
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: { translation: enTranslation },
nl: { translation: nlTranslation }
},
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
})
// Usage in components
const { t, i18n } = useTranslation()
<h1>{t('hero.title')}</h1>
<button onClick={() => i18n.changeLanguage('nl')}>
Nederlands
</button>Complete website with all essential pages
22 custom + 51 shadcn/ui components
English and Dutch with 80KB+ translations each
Complete fleet with detailed specifications
Blog system with markdown rendering, categories, tags, search functionality, and extensive travel content. Includes responsive card layouts and related post suggestions.
Masonry grid layout featuring 32+ high-quality vehicle images. Includes Fisher-Yates shuffle algorithm, lightbox viewing, and configurable display (default 3x3 grid with 9 images).
Complete GDPR compliance with cookie consent management, comprehensive privacy policy, terms of service, and transparent data handling practices. Includes user rights information and contact details for data requests.
Comprehensive SEO implementation with meta tags, Open Graph tags, structured data, XML sitemap, robots.txt, and semantic HTML. Optimized for search engines and social media sharing.
Mobile-first responsive design optimized for all devices. Includes mobile hamburger menu, touch-optimized interactions, adaptive layouts, and performance optimization for mobile networks.
Floating WhatsApp widget for instant customer communication. Quick access to +31 6 30 405 097 with pre-filled message templates for common inquiries.
Vercel Analytics integration for real-time performance tracking, user behavior analysis, and conversion optimization. Includes page view tracking, bounce rate analysis, and user flow visualization.
22 custom React components plus 51 shadcn/ui components providing a complete, accessible, and polished user interface. All components are fully typed with TypeScript and optimized for performance.
France:
Managing complex booking form with validation across multiple languages
Combined React Hook Form with Zod schema validation and i18next for translated error messages. Form state persists during language switches and provides instant validation feedback
// Multilingual form with validation
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { useTranslation } from 'react-i18next'
const BookingModal = () => {
const { t } = useTranslation()
const bookingSchema = z.object({
name: z.string().min(2, t('form.errors.nameRequired')),
email: z.string().email(t('form.errors.emailInvalid')),
phone: z.string().min(10, t('form.errors.phoneRequired')),
pickupLocation: z.string().min(1, t('form.errors.pickupRequired')),
dropoffLocation: z.string().min(1, t('form.errors.dropoffRequired')),
date: z.date().min(new Date(), t('form.errors.dateInvalid')),
passengers: z.number().min(1).max(8)
})
const form = useForm({
resolver: zodResolver(bookingSchema),
defaultValues: {
passengers: 1
}
})
const onSubmit = async (data) => {
// Submit to Google Sheets
await submitToGoogleSheets(data)
toast.success(t('form.success'))
}
return <Form {...form}>...</Form>
}Creating premium UI matching luxury brand without custom design system
Leveraged shadcn/ui with 51+ pre-built accessible components, customized with luxury color palette, premium typography, and smooth animations. Achieved consistent, polished look across all pages
// Tailwind config with luxury theme
export default {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
// ... luxury blue palette
900: '#0c2340',
},
gold: {
50: '#fffbeb',
// ... gold accent palette
900: '#78350f',
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Playfair Display', 'serif'],
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.6s ease-out',
}
}
}
}
// Using shadcn/ui components
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Dialog } from '@/components/ui/dialog'
<Button size="lg" className="bg-gradient-to-r from-primary-600 to-primary-800">
{t('cta.bookNow')}
</Button>Gallery performance with 32+ high-resolution vehicle images
Implemented lazy loading, responsive image optimization, masonry layout with efficient rendering, and Fisher-Yates shuffle for randomized display. Default shows 9 images in 3x3 grid with load more option
// Optimized gallery with lazy loading
const Gallery = () => {
const [displayCount, setDisplayCount] = useState(9)
const [shuffledImages, setShuffledImages] = useState([])
useEffect(() => {
// Fisher-Yates shuffle for randomized display
const shuffled = [...galleryImages]
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
}
setShuffledImages(shuffled)
}, [])
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{shuffledImages.slice(0, displayCount).map((image) => (
<img
key={image.id}
src={image.url}
alt={image.alt}
loading="lazy"
className="w-full h-64 object-cover rounded-lg hover:scale-105 transition-transform"
/>
))}
</div>
)
}Major Dutch cities plus international coverage
Professional high-resolution vehicle photography