BodrumAdvisor.com Rises Again

BodrumAdvisor.com, Bodrum’s most comprehensive digital guide, has been revived with modern web technologies after a long hiatus. In this article, I’ll share in detail the platform’s rebuild process, the technologies used, and the new features we developed with a Vibe Coding approach.

Project Story and Motivation

BodrumAdvisor served as a platform offering valuable information to tourists visiting Bodrum and locals for years. However, due to its aging technological infrastructure and lack of maintenance, it was inaccessible for a while. Considering Bodrum’s tourism potential and the importance of its digital presence, we decided to revive this valuable platform with modern technologies.

Rebirth with Vibe Coding

We adopted the Vibe Coding methodology during BodrumAdvisor’s redevelopment process. Thanks to this approach:

We produced more innovative solutions by coding during moments of high creative energy
We struck the perfect balance between user experience and technical excellence
We created a long-term structure by focusing on code quality and sustainability
We increased commitment to the project by creating a positive and productive development environment

New BodrumAdvisor Features

Comprehensive Business Guide

The platform categorizes all businesses in Bodrum for users:

Restaurants and cafes
Hotels and hostels
Beaches and beach clubs
Nightlife venues
Shopping locations
Water sports and activities
Health and wellness centers
Transfer and transportation services

Advanced Search and Filtering

Users can easily find businesses based on their needs:

Location-based search
Category filtering
Price range selection
Sorting by rating and reviews
Special campaigns and discounts

User Reviews and Rating System

To provide reliable information based on real experiences:

Verified user reviews
5-star rating system
Photo and video sharing
Helpful review voting

Technical Infrastructure and Modernization

Performance-Oriented Architecture with Next.js

BodrumAdvisor’s new version was developed with Next.js 14:

// app/isletmeler/[slug]/page.tsx
import { Metadata } from 'next'
import { getIsletmeBySlug } from '@/lib/isletme'
import { IsletmeDetay } from '@/components/isletme/IsletmeDetay'
import { YorumlarBolumu } from '@/components/isletme/YorumlarBolumu'
import { BenzerIsletmeler } from '@/components/isletme/BenzerIsletmeler'

export async function generateMetadata({ params }): Promise<Metadata> {
  const isletme = await getIsletmeBySlug(params.slug)

  return {
    title: `${isletme.ad} - BodrumAdvisor`,
    description: isletme.kisaAciklama,
    openGraph: {
      title: isletme.ad,
      description: isletme.kisaAciklama,
      images: [isletme.kapakFoto],
    },
  }
}

export default async function IsletmeSayfasi({ params }) {
  const isletme = await getIsletmeBySlug(params.slug)

  return (
    <div className="container mx-auto px-4 py-8">
      <IsletmeDetay isletme={isletme} />
      <YorumlarBolumu isletmeId={isletme.id} />
      <BenzerIsletmeler kategori={isletme.kategori} />
    </div>
  )
}

Modern and Responsive Design with Tailwind CSS

The user interface was built with Tailwind CSS:

// components/isletme/IsletmeKarti.tsx
interface IsletmeKartiProps {
  isletme: Isletme;
}

export const IsletmeKarti = ({ isletme }: IsletmeKartiProps) => {
  return (
    <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
      <div className="relative h-56">
        <Image src={isletme.kapakFoto} alt={isletme.ad} fill className="object-cover" />
        {isletme.ozelTeklif && (
          <span className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
            Special Offer
          </span>
        )}
      </div>
      <div className="p-6">
        <div className="flex justify-between items-start mb-3">
          <h3 className="text-xl font-bold text-gray-800">{isletme.ad}</h3>
          <div className="flex items-center">
            <Star className="w-5 h-5 text-yellow-400 fill-current" />
            <span className="ml-1 text-gray-600">{isletme.ortalamaPuan}</span>
          </div>
        </div>
        <p className="text-gray-600 mb-4 line-clamp-2">{isletme.kisaAciklama}</p>
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-500">{isletme.kategori}</span>
          <Link
            href={`/isletmeler/${isletme.slug}`}
            className="text-blue-600 hover:text-blue-800 font-medium flex items-center"
          >
            Details
            <ChevronRight className="w-4 h-4 ml-1" />
          </Link>
        </div>
      </div>
    </div>
  );
};

Flexible Data Management with MongoDB and Prisma

MongoDB was used as the database and managed with Prisma ORM:

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

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

model Isletme {
  id              String   @id @default(auto()) @map("_id") @db.ObjectId
  ad              String
  slug            String   @unique
  kategori        String
  kisaAciklama    String
  uzunAciklama    String
  adres           String
  telefon         String
  email           String?
  website         String?
  kapakFoto       String
  galeriFotolar   String[]
  koordinatlar    Koordinat
  calismaaSaatleri Json
  ozellikler      String[]
  ortalamaPuan    Float    @default(0)
  yorumSayisi     Int      @default(0)
  ozelTeklif      Boolean  @default(false)
  yorumlar        Yorum[]
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
}

model Yorum {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  isletmeId   String   @db.ObjectId
  isletme     Isletme  @relation(fields: [isletmeId], references: [id])
  kullaniciAdi String
  kullaniciEmail String
  puan        Int
  baslik      String
  icerik      String
  fotograflar String[]
  onaylandi   Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

type Koordinat {
  lat Float
  lng Float
}

SEO Optimization and Performance

To ensure BodrumAdvisor ranks high in search engines:

Fast page loads with server-side rendering
Dynamic meta tags and structured data
Sitemap and robots.txt optimization
Core Web Vitals score improvement
Cloudflare CDN integration

Advanced Features and Integrations

Map Integration

Google Maps API integration to visually present business locations:

// components/harita/IsletmeHaritasi.tsx
import { GoogleMap, Marker, InfoWindow } from '@react-google-maps/api'

export const IsletmeHaritasi = ({ isletmeler }) => {
  const [selectedIsletme, setSelectedIsletme] = useState(null)

  return (
    <GoogleMap
      mapContainerStyle={mapContainerStyle}
      zoom={12}
      center={bodrumMerkez}
    >
      {isletmeler.map((isletme) => (
        <Marker
          key={isletme.id}
          position={{
            lat: isletme.koordinatlar.lat,
            lng: isletme.koordinatlar.lng
          }}
          onClick={() => setSelectedIsletme(isletme)}
        />
      ))}

      {selectedIsletme && (
        <InfoWindow
          position={{
            lat: selectedIsletme.koordinatlar.lat,
            lng: selectedIsletme.koordinatlar.lng
          }}
          onCloseClick={() => setSelectedIsletme(null)}
        >
          <div className="p-2">
            <h3 className="font-bold">{selectedIsletme.ad}</h3>
            <p className="text-sm">{selectedIsletme.kategori}</p>
            <Link href={`/isletmeler/${selectedIsletme.slug}`}>
              View Details
            </Link>
          </div>
        </InfoWindow>
      )}
    </GoogleMap>
  )
}

Multi-Language Support

Multi-language infrastructure for international visitors:

Turkish
English
German
Russian

Mobile App Readiness

Mobile experience with Progressive Web App (PWA) features:

Offline capability
Push notifications
Add to home screen
Fast loading times

Conclusion and Future Vision

The revival of BodrumAdvisor.com is a significant gain for Bodrum’s digital tourism ecosystem. Developed with modern technologies and a user-focused design approach, the platform continues its mission of being a valuable guide for both local and foreign visitors.

Future Plans

AI-powered personalized recommendations
Virtual tour and 360° viewing features
Online reservation and payment system integration
Social media integrations
Bodrum events calendar
Tourist guide and blog section

BodrumAdvisor is advancing confidently on its path to becoming Bodrum’s digital showcase. The platform will continue to renew itself in parallel with evolving technology and changing user needs.

If you’d like to implement a similar digital transformation project or want your business featured on BodrumAdvisor, feel free to contact me. Let’s build Bodrum’s digital future together.

BodrumAdvisor.com Rises Again: Bodrum's Digital Guide is Back