🚗 GearGo - Gelişmiş Araç Kiralama Platformu

GearGo, modern teknolojiler kullanılarak geliştirilen, Türkiye'nin en kapsamlı ve kullanıcı dostu araç kiralama web platformudur. React TypeScript, Material-UI ve güçlü animasyon kütüphaneleri ile geliştirilmiş, gelişmiş özellikler sunan profesyonel bir uygulamadır.

✨ Ana Özellikler

🎨 Modern Kullanıcı Arayüzü

• Material-UI v5 ile profesyonel tasarım
• Styled Components ile özel stil tanımlamaları
• Emotion ile dinamik CSS-in-JS çözümleri
• Framer Motion ile sinematik animasyonlar
• React Spring ile fizik tabanlı animasyonlar

🏎️ Gelişmiş Araç Yönetimi

• Kapsamlı araç filtreleme sistemi
• Kategori, fiyat, özellik bazlı arama
• Interaktif araç galerisi
• Gerçek zamanlı stok kontrolü
• Favoriler sistemi

💳 Gelişmiş Ödeme Sistemi

• Canlı kart önizlemesi - Girilen bilgiler anında kart üzerinde görünür
• Akıllı formatlar - Kart numarası otomatik boşluklar, MM/YY tarihi
• Güvenli ödeme - 256-bit SSL şifreleme
• Çoklu ödeme yöntemi - Kredi kartı, banka kartı, taksitli ödeme
• CVV güvenliği - Şifrelenmiş güvenlik kodu girişi

📱 Responsive Tasarım

• Mobile-first yaklaşım
• Tüm ekran boyutlarında mükemmel görünüm
• Touch-friendly interface
• Progressive enhancement

🎯 Gelişmiş Rezervasyon Sistemi

• 5 adımlı rezervasyon süreci
• Adım göstergesi (Stepper) ile görsel ilerleme
• Gerçek zamanlı fiyat hesaplama
• Form validasyonu ve hata yönetimi
• Rezervasyon özeti ve onay sistemi

🛠️ Teknoloji Stack

Frontend Framework

• React 18+ with TypeScript
• TypeScript 5.0+ for type safety

UI & Styling

• Material-UI (MUI) v5
• Styled Components
• Emotion CSS-in-JS

Animasyonlar

• Framer Motion
• React Spring for physics-based animations

Routing & Build

• React Router DOM v6
• Vite for fast development
• Lucide React icons

🚀 Kurulum ve Çalıştırma

Gereksinimler

• Node.js 18+
• npm 9+ veya yarn 1.22+

Kurulum Adımları

1. Projeyi klonlayın:

   git clone https://github.com/ThecoderPinar/geargo.git
   cd geargo

2. Bağımlılıkları yükleyin:

   npm install
   # veya
   yarn install

3. Geliştirme sunucusunu başlatın:

   npm run dev
   # veya
   yarn dev

4. Tarayıcıda açın:

   http://localhost:5173
   

Mevcut Komutlar

npm run dev          # Geliştirme sunucusu (http://localhost:5173)
npm run build        # Production build
npm run preview      # Build önizlemesi
npm run lint         # ESLint kod kontrol
npm run type-check   # TypeScript kontrol

📁 Proje Yapısı

src/
├── components/          # Yeniden kullanılabilir bileşenler
│   ├── Header.tsx      # Ana navigasyon menüsü
│   └── Footer.tsx      # Alt bilgi ve linkler
├── pages/              # Ana sayfa bileşenleri
│   ├── HomePage.tsx    # Ana sayfa - Hero, özellikler, araç galerisi
│   ├── CarsPage.tsx    # Araç listesi ve filtreleme
│   ├── BookingPage.tsx # 5 adımlı rezervasyon sistemi
│   ├── ServicesPage.tsx # Hizmet paketleri ve özellikler
│   ├── BlogPage.tsx    # Blog yazıları ve haberler
│   ├── AboutPage.tsx   # Hakkımızda sayfası
│   └── ContactPage.tsx # İletişim bilgileri ve form
├── styles/
│   └── index.css       # Global CSS ve tema değişkenleri
├── App.tsx             # Ana uygulama ve routing
└── main.tsx           # React uygulaması giriş noktası

🎨 Tasarım Sistemi

Renk Paleti

:root {
  --primary-color: #2563eb;    /* Ana mavi */
  --primary-dark: #1d4ed8;     /* Koyu mavi */
  --primary-light: #3b82f6;    /* Açık mavi */
  --secondary-color: #f59e0b;  /* Turuncu */
  --accent-color: #10b981;     /* Yeşil */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Typography

• Primary Font: Inter, Roboto, Helvetica, Arial
• Display Font: Poppins, Inter
• Responsive tipografi - Her ekran boyutu için optimize edilmiş

Spacing & Layout

• 8px grid sistemi - Tutarlı boşluklar
• Flexbox ve CSS Grid - Modern layout teknikler
• Container queries - Bileşen bazlı responsive tasarım

🎯 Sayfa Detayları

🏠 Ana Sayfa (HomePage)

• Hero Section: Gradient arka plan, animasyonlu istatistikler
• Özellikler: Servis avantajları ve özellikler
• Araç Galerisi: Popüler araçların preview'ı
• Call-to-Action: Rezervasyon yönlendirme butonları

🚙 Araçlar Sayfası (CarsPage)

• Gelişmiş filtreleme: Kategori, fiyat, özellikler
• Arama sistemi: Gerçek zamanlı araç arama
• Grid layout: Responsive araç kartları
• Sıralama: Fiyat, popülerlik, yeni eklenenler

📋 Rezervasyon Sayfası (BookingPage)

1. Tarih ve Konum: Alış-teslim tarihi ve lokasyon
2. Araç Seçimi: Araç kategori ve model seçimi
3. Kişisel Bilgiler: Müşteri bilgileri ve ehliyet
4. Ödeme: Gelişmiş kart ödeme sistemi
5. Onay: Rezervasyon özeti ve tamamlama

🛠️ Hizmetler Sayfası (ServicesPage)

• Servis paketleri: Premium, ekonomik, kurumsal, şoförlü
• Özellik karşılaştırması: Paket içeriklerinin detayları
• Fiyatlandırma: Şeffaf fiyat bilgileri

📝 Blog Sayfası (BlogPage)

• Makale listesi: Kategori bazlı blog yazıları
• Öne çıkan yazı: Hero blog post
• Filtreleme: Kategori bazlı filtreleme
• Yazar bilgileri: Avatar, yayın tarihi, okuma süresi

🔧 Geliştirme Rehberi

Yeni Özellik Ekleme

1. Yeni Bileşen Oluşturma:

   // src/components/YeniBileşen.tsx
   import React from 'react'
   import { Box, Typography } from '@mui/material'
   import styled from '@emotion/styled'
   import { motion } from 'framer-motion'
   
   const StyledContainer = styled(Box)`
     // Styled components tanımlamaları
   `
   
   const YeniBileşen: React.FC = () => {
     return (
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
         <StyledContainer>
           <Typography variant="h4">Yeni Bileşen</Typography>
         </StyledContainer>
       </motion.div>
     )
   }
   
   export default YeniBileşen

2. Yeni Sayfa Ekleme:

   • src/pages/ klasörüne yeni dosya ekleyin
   • App.tsx dosyasında route tanımlaması yapın
   • Header.tsx dosyasında menü linkini ekleyin

3. Stil Düzenlemeleri:

   • Global stiller için src/index.css kullanın
   • Bileşen özel stilleri için Styled Components kullanın
   • Tema değişkenleri için CSS custom properties kullanın

Kod Standartları

• TypeScript: Tüm bileşenler tip güvenli olmalı
• ESLint: Kod kalite kurallarına uygun yazım
• Prettier: Otomatik kod formatlama
• Responsive: Mobil-first yaklaşım

🚀 Production Build

Build Süreci

npm run build

Build Optimizasyonları

• Tree shaking: Kullanılmayan kod elimination
• Code splitting: Sayfa bazlı kod ayrımı
• Bundle analysis: Bundle boyut optimizasyonu
• Image optimization: Otomatik resim sıkıştırma

Deploy Seçenekleri

• Vercel: One-click deployment
• Netlify: JAMstack hosting
• GitHub Pages: Static site hosting
• AWS S3 + CloudFront: Enterprise hosting

🤝 Katkıda Bulunma

Geliştirme Süreci

1. Fork edin ve clone yapın
2. Feature branch oluşturun: git checkout -b feature/yeni-ozellik
3. Değişiklikleri commit edin: git commit -m 'feat: yeni özellik eklendi'
4. Branch'i push edin: git push origin feature/yeni-ozellik
5. Pull Request oluşturun

Commit Konvansiyonları

feat: yeni özellik ekleme
fix: hata düzeltme
docs: dokümantasyon güncellemesi
style: kod formatı değişikliği
refactor: kod refactoring
test: test ekleme/düzeltme
chore: build süreci veya araç güncellemesi

📊 Performans ve Analytics

Core Web Vitals

• ⚡ First Contentful Paint (FCP): < 1.5s
• 🎯 Largest Contentful Paint (LCP): < 2.5s
• 📱 Cumulative Layout Shift (CLS): < 0.1
• 🔄 First Input Delay (FID): < 100ms

Bundle Analizi

npm run build-analyze  # Bundle boyut analizi
npm run lighthouse     # Performance audit

🔐 Güvenlik

Güvenlik Önlemleri

• XSS Protection: Input sanitization
• CSRF Protection: Token-based authentication
• SSL/TLS: HTTPS zorunlu
• Data Validation: Client ve server-side validation
• Dependency Scanning: Güvenlik açığı taraması

📱 Browser Desteği

Browser	Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+

📄 Lisans

Bu proje MIT Lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakınız.

📞 İletişim ve Destek

Geliştirici Bilgileri

• 👨‍💻 Geliştirici: Pınar Topuz
• 📧 Email: piinartp@gmail.com
• 🐙 GitHub: https://github.com/ThecoderPinar
• � LinkedIn: Pınar Topuz

Destek ve Dokümantasyon

• 📚 Dokümantasyon: docs.geargo.com
• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• ❓ Sorular: piinartp@gmail.com adresinden iletişime geçebilirsiniz

---

🚗 GearGo - Türkiye'nin En Gelişmiş Araç Kiralama Platformu ✨

Hayalinizdeki araç bir tık uzağınızda.

Geliştirici: Pınar Topuz | Email: piinartp@gmail.com