Momtur Travel Bodrum Projesi

Bodrum’un eşsiz güzelliklerini ve turizm potansiyelini modern web teknolojileri ile buluşturan Momtur Travel Bodrum projesi, hem teknik açıdan hem de kullanıcı deneyimi açısından önemli kazanımlar sağladı. Bu yazıda, Vibe Coding yaklaşımıyla geliştirdiğim projenin sürecini, kullanılan teknolojileri ve karşılaşılan zorlukları detaylı olarak paylaşacağım.

Vibe Coding ile Geliştirme Yaklaşımı

Momtur Travel Bodrum projesini geliştirirken benimsediğim Vibe Coding yaklaşımı, geleneksel yazılım geliştirme metodolojilerinden farklı olarak yaratıcılık, işbirliği ve geliştiricinin refahını merkeze alan bir süreç oldu. Bu yaklaşım sayesinde:

Zihinsel olarak net, odaklanmış ve enerjik olduğum zamanlarda kod yazarak daha temiz ve yaratıcı çözümler ürettim
Uzun saatler boyunca zorla çalışmak yerine, ilham ve üretkenliğin zirve yaptığı anlarda geliştirme yaparak verimliliği artırdım
Kod estetiğine ve organizasyonuna önem vererek daha sürdürülebilir ve anlaşılır bir kod tabanı oluşturdum
Takım içi işbirliğini ve pozitif enerjiyi teşvik ederek projenin amacına daha iyi bağlandım

Bu yaklaşım, özellikle turizm gibi yaratıcı ve kullanıcı deneyiminin ön planda olduğu bir sektörde, teknik mükemmellik ile kullanıcı odaklı tasarımı dengeli bir şekilde bir araya getirmemi sağladı.

Proje Hakkında

Momtur Travel Bodrum, Bodrum’daki turizm hizmetlerini dijital ortama taşıyan, kullanıcıların kolay ve hızlı bir şekilde rezervasyon yapabilmelerini sağlayan modern bir web platformudur. Proje, şu özellikleri içermektedir:

Otel ve villa rezervasyonları
Tur ve etkinlik planlaması
Özel transfer hizmetleri
Kullanıcı hesap yönetimi
Çok dilli destek (Türkçe, İngilizce, Rusça)
Ödeme entegrasyonu

Kullanılan Teknolojiler

Next.js ile Hızlı ve SEO Dostu Yapı

Projenin temelini Next.js oluşturuyor. Next.js’in sunduğu avantajlar:

Server-side rendering ile hızlı sayfa yüklemeleri
SEO optimizasyonu
API route’ları ile backend entegrasyonu
Kolay routing sistemi

// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { Hero } from '../bilesenler/anasayfa/Hero'
import { PopulerTurlar } from '../bilesenler/anasayfa/PopulerTurlar'
import { Hizmetler } from '../bilesenler/anasayfa/Hizmetler'

const Anasayfa: NextPage = () => {
  return (
    <>
      <Head>
        <title>Momtur Travel Bodrum - Eşsiz Tatil Deneyimi</title>
        <meta name="description" content="Bodrum'da unutulmaz bir tatil için tüm hizmetler" />
      </Head>
      <Hero />
      <PopulerTurlar />
      <Hizmetler />
    </>
  )
}

export default Anasayfa

Clerk Auth ile Güvenli Kimlik Doğrulama

Kullanıcı yönetimi ve kimlik doğrulama için Clerk Auth tercih ettim. Bu sayede:

Güvenli oturum yönetimi
Sosyal medya hesaplarıyla giriş
İki faktörlü doğrulama
GDPR uyumlu veri yönetimi

// bilesenler/Header.tsx
import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/nextjs";

export const Header = () => {
  return (
    <header className="bg-white shadow-sm">
      <div className="container mx-auto px-4 py-3 flex justify-between items-center">
        <Logo />
        <nav className="flex items-center gap-6">
          {/* Navigasyon linkleri */}
          <SignedIn>
            <UserButton afterSignOutUrl="/" />
          </SignedIn>
          <SignedOut>
            <SignInButton mode="modal">
              <button className="btn-primary">Giriş Yap</button>
            </SignInButton>
          </SignedOut>
        </nav>
      </div>
    </header>
  );
};

TypeScript ile Tip Güvenliği

Projenin tamamında TypeScript kullanarak, daha güvenli ve sürdürülebilir bir kod tabanı oluşturdum:

Derleme zamanında hata tespiti
Daha iyi kod tamamlama ve IDE desteği
Daha kolay refactoring
Ekip çalışmasında daha iyi iletişim

// tipler/rezervasyon.ts
export interface Rezervasyon {
  id: string;
  kullaniciId: string;
  hizmetTipi: 'otel' | 'tur' | 'transfer' | 'villa';
  hizmetId: string;
  baslangicTarihi: Date;
  bitisTarihi: Date;
  kisiSayisi: number;
  toplamFiyat: number;
  odemeDurumu: 'beklemede' | 'tamamlandi' | 'iptal';
  olusturmaTarihi: Date;
  guncellemeTarihi: Date;
}

Tailwind CSS ile Modern ve Responsive Tasarım

Kullanıcı arayüzü için Tailwind CSS kullandım:

Hızlı geliştirme süreci
Responsive tasarım kolaylığı
Özelleştirilebilir tema
Küçük CSS dosya boyutu

// bilesenler/TurKarti.tsx
interface TurKartiProps {
  tur: Tur;
}

export const TurKarti = ({ tur }: TurKartiProps) => {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
      <div className="relative h-48">
        <Image 
          src={tur.resimUrl} 
          alt={tur.baslik} 
          layout="fill" 
          objectFit="cover" 
        />
      </div>
      <div className="p-4">
        <h3 className="text-xl font-semibold text-gray-800">{tur.baslik}</h3>
        <p className="text-gray-600 mt-2">{tur.kisaAciklama}</p>
        <div className="flex justify-between items-center mt-4">
          <span className="text-primary-600 font-bold">{tur.fiyat} TL</span>
          <button className="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md">
            Detaylar
          </button>
        </div>
      </div>
    </div>
  );
};

MongoDB ve Prisma ile Veritabanı Yönetimi

Veritabanı olarak MongoDB tercih ettim ve Prisma ORM ile entegre ettim:

Esnek şema yapısı
Hızlı sorgu performansı
Kolay ölçeklenebilirlik
Prisma ile tip güvenliği

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model Kullanici {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  clerkId   String   @unique
  ad        String
  soyad     String
  email     String   @unique
  telefon   String?
  rezervasyonlar Rezervasyon[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Tur {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  baslik      String
  aciklama    String
  kisaAciklama String
  resimUrl    String
  fiyat       Float
  sureSaat    Float
  kapasite    Int
  kategori    String
  rezervasyonlar Rezervasyon[]
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Geliştirme Süreci ve Zorluklar

Planlama ve Tasarım

Projeye başlamadan önce kapsamlı bir planlama süreci gerçekleştirdim:

Kullanıcı hikayeleri ve gereksinimler
Veritabanı şeması tasarımı
UI/UX wireframe’leri
API endpoint’leri planlaması

Karşılaşılan Zorluklar

Proje sürecinde bazı zorluklarla karşılaştım:

1. Çoklu Dil Desteği

Farklı dillerde içerik yönetimi için next-i18next kütüphanesini kullandım. Dinamik içeriklerin çevirilerini veritabanında saklayarak esnek bir yapı oluşturdum.

2. Ödeme Entegrasyonu

Farklı ödeme yöntemlerini entegre etmek için modüler bir yapı tasarladım. Bu sayede yeni ödeme yöntemleri kolayca eklenebiliyor.

3. Performans Optimizasyonu

Büyük resim dosyaları ve karmaşık sayfalar için:

Cloudinary ile görsel optimizasyonu
Lazy loading ve code splitting
Önbelleğe alma stratejileri

Sonuç ve Öğrenimler

Momtur Travel Bodrum projesi, modern web teknolojilerinin turizm sektöründe nasıl etkili bir şekilde kullanılabileceğini gösterdi. Proje sürecinde edindiğim bazı önemli öğrenimler:

Kullanıcı Odaklı Tasarım: Hedef kitlenin ihtiyaçlarını anlamak ve buna göre tasarım yapmak başarının anahtarı.
Teknoloji Seçimi: Projenin gereksinimlerine uygun teknolojileri seçmek, geliştirme sürecini hızlandırıyor ve bakım maliyetlerini düşürüyor.
Modüler Yapı: Kodun modüler ve yeniden kullanılabilir parçalara ayrılması, projenin büyümesini ve bakımını kolaylaştırıyor.
Sürekli Test: Geliştirme sürecinde düzenli testler yapmak, hataları erken aşamada tespit etmeyi sağlıyor.

Gelecek Planları

Momtur Travel Bodrum projesi için gelecek planlarım:

Mobil uygulama geliştirme
AI destekli kişiselleştirilmiş öneriler
Sanal gerçeklik turları
Blockchain tabanlı sadakat programı

Bu proje, modern web teknolojilerinin turizm sektöründe nasıl değer yaratabileceğini göstermesi açısından önemli bir örnek oldu. Benzer projelerde bu deneyimlerden faydalanarak daha da gelişmiş çözümler üretmeyi hedefliyorum.

Eğer siz de turizm sektöründe dijital dönüşüm projesi geliştirmek istiyorsanız, benimle iletişime geçebilirsiniz. Deneyimlerimi paylaşmaktan ve işbirliği yapmaktan mutluluk duyarım.

Momtur Travel Bodrum Projesi: Modern Web Teknolojileri ile Turizm Deneyimi