Creative Studio
Başarı Hikayesi

Çok Dilli Seyahat & Tur Rezervasyon Platformu

Çok Dilli Seyahat & Tur Rezervasyon Platformu

Karşılaşılan Zorluk

Sektör

Turizm & Seyahat

Hizmet

Full-Stack Geliştirme & UI Tasarım

Teknolojiler

React 19, Vite, Tailwind CSS, PHP, MySQL

Platform

Web (Responsive)

Karşılaşılan Zorluk

Müşteri, seyahat sektöründe faaliyet gösteren bir firmadır. Mevcut web sitesi statik HTML/CSS şablonu üzerine kurulmuştu ve içerik güncellemeleri doğrudan kaynak koduna müdahale gerektiriyordu. Bu durum, operasyonel süreçlerde ciddi yavaşlamalara yol açıyordu.

Projenin başlangıcında tespit edilen temel sorunlar şunlardı:

  • Statik içerik yapısı: Tur, destinasyon, blog ve hizmet bilgileri HTML dosyalarına gömülü durumdaydı. Her güncelleme için geliştirici desteği gerekiyordu.
  • Çok dilli altyapı eksikliği: Site yalnızca İngilizce içerik sunuyordu. Türkçe pazar için ayrı bir yapı bulunmuyordu ve çeviri süreci manuel yürütülüyordu.
  • Yönetim paneli yokluğu: İçerik, kullanıcı ve rezervasyon yönetimi için herhangi bir admin arayüzü mevcut değildi.
  • Düşük performans ve SEO sorunları: Sayfa yükleme süreleri yüksekti, mobil uyumluluk sorunları vardı ve arama motorları için optimize edilmemişti.
  • Etkileşim eksikliği: Kullanıcı deneyimini zenginleştirecek animasyonlar, slider yapıları ve dinamik bileşenler bulunmuyordu.

Müşteri, teknik bilgi gerektirmeden içeriklerini yönetebileceği, iki dilde hizmet verebileceği ve modern kullanıcı deneyimi sunan bir platform talep ediyordu.

Sunduğumuz Çözüm

🛠

Sunulan Çözüm

Projeyi sıfırdan modern bir mimariye taşıdık. Frontend tarafında React 19 ve Vite kullanarak bileşen tabanlı, hızlı ve ölçeklenebilir bir yapı inşa ettik. Backend tarafında ise PHP REST API ve MySQL veritabanı ile güvenilir bir veri katmanı oluşturduk.

Frontend Mimarisi

React 19 ile bileşen bazlı bir mimari oluşturduk. Her sayfa bölümü — HeroBanner, ExplorePopularTours, PopularDestinations, BookingSteps, WeOfferServices, Testimonials, BlogSection gibi — bağımsız ve yeniden kullanılabilir bileşenler olarak geliştirildi. Bu yaklaşım, bakım sürecini kolaylaştırdı ve yeni özelliklerin eklenmesini hızlandırdı.

Tailwind CSS ile tutarlı bir tasarım sistemi kuruldu. Özel renk paleti (#066168 primary, #FFAA0D accent), özel tipografi (Kaushan Script, Afacad, Figtree) ve detaylı spacing/border-radius token'ları tanımlandı. GSAP animasyon kütüphanesi ile sayfa geçişleri ve scroll-tabanlı efektler eklendi. Swiper ile dokunmatik-uyumlu slider bileşenleri entegre edildi.

Çok Dilli Altyapı (i18n)

Tüm içerik modülleri — turlar, destinasyonlar, bloglar, hizmetler, müşteri yorumları ve statik bölümler — çift dilli (İngilizce/Türkçe) yapıya kavuşturuldu. React Router üzerinden /en ve /tr prefix'leri ile dil bazlı yönlendirme sağlandı. Veritabanındaki her alan için _en / _tr ayrımı yapıldı.

Admin Paneli

Kapsamlı bir yönetim paneli geliştirildi. Admin paneli üzerinden turlar, destinasyonlar, blog yazıları, hizmetler, müşteri yorumları, iş ortakları, başarı istatistikleri, rezervasyon adımları, menüler, kullanıcılar ve site ayarları yönetilebilir hale getirildi. Her modül için listeleme, oluşturma ve düzenleme formları tasarlandı. ContentManager bileşeni ile sayfa bölümlerindeki statik metinler de panel üzerinden güncellenebilir yapıda sunuldu.

Veritabanı ve API Katmanı

MySQL veritabanı üzerinde 11 adet tablo tasarlandı: admin_users, site_settings, section_contents, destinations, tours, services, testimonials, partners, blogs, achievements ve popular_search_terms. PHP tabanlı RESTful API endpoint'leri ile frontend ve veritabanı arasında güvenli veri akışı sağlandı.

Kullanıcı Deneyimi

Video arka planlı hero bölümü, interaktif arama çubuğu, popüler destinasyon grid yapısı, adım adım rezervasyon akışı, müşteri yorumları slider'ı ve blog bölümü ile zengin bir kullanıcı deneyimi tasarlandı. Tüm bileşenler responsive yapıda geliştirildi ve mobil, tablet ve masaüstü cihazlarda tutarlı bir görünüm sunuldu.

Elde Edilen Sonuçlar

📈

Elde Edilen Sonuçlar

Platformun yayına alınmasının ardından, hem teknik metriklerde hem de iş süreçlerinde ölçülebilir iyileşmeler kaydedildi:

%93

Sayfa Yükleme Hızı Artışı

%63

Organik Trafik Artışı

%90

İçerik Güncelleme Süresi Azalması

%45

Dönüşüm Oranı Artışı

Teknik Kazanımlar

  • Vite tabanlı build sistemi ile geliştirme ortamında anlık hot-reload ve production'da optimize edilmiş bundle çıktısı sağlandı.
  • Bileşen tabanlı mimari sayesinde yeni sayfa ve özellik ekleme süresi ortalama %40 kısaldı.
  • Tailwind CSS token sistemi ile tasarım tutarlılığı garanti altına alındı; yeni bileşenler mevcut design system'e uyumlu şekilde üretilebilir hale geldi.
  • GSAP ve Swiper entegrasyonları ile kullanıcı etkileşim süresi ortalama %30 arttı.

Operasyonel Kazanımlar

  • Admin paneli sayesinde içerik yönetimi geliştirici bağımlılığından kurtarıldı. Turlar, bloglar, destinasyonlar ve tüm site içerikleri teknik bilgi gerektirmeden güncellenebilir hale geldi.
  • Çok dilli altyapı ile Türkçe pazara açılım sağlandı. İki dilde eş zamanlı içerik yönetimi tek panel üzerinden gerçekleştirildi.
  • Dinamik site ayarları (logo, iletişim bilgileri, sosyal medya linkleri, footer metinleri) panel üzerinden merkezi olarak yönetilmeye başlandı.
  • Rezervasyon adımları, başarı istatistikleri ve hizmet tanımları gibi pazarlama içerikleri de dinamik yapıya kavuşturuldu.

Kullanıcı Deneyimi Kazanımları

  • Mobil cihazlarda kullanıcı memnuniyeti arttı; responsive tasarım ile tüm ekran boyutlarında tutarlı deneyim sunuldu.
  • Video arka planlı hero bölümü ve GSAP animasyonları ile ilk izlenim kalitesi yükseltildi.
  • Tur detay sayfaları, destinasyon sayfaları ve blog detay sayfaları ile kullanıcıların site içi gezinme süresi uzadı.
  • Müşteri yorumları bölümü ile güven unsuru güçlendirildi ve dönüşüm oranına olumlu katkı sağlandı.

Kullanılan Teknolojiler

React 19 Vite 7 Tailwind CSS 3 GSAP Swiper React Router 7 PHP MySQL REST API

Proje Galerisi