Beyblade Shop (BB Shop) Frontend E-Ticaret Projesi

Beyblade koleksiyonları satan, tamamen istemci tarafında (frontend-only) çalışan modern bir e-ticaret demo sitesi.

Bu proje, Sakarya Üniversitesi Bilişim Sistemleri Mühendisliği 1. sınıf döneminde "Web Teknolojileri" dersi için yapılan çalışmanın revize edilmiş halidir. Kod tabanı sonradan React, TypeScript ve Vite üzerine sıfırdan yeniden yazıldı; durum yönetimi zustand, arayüz Tailwind CSS ile kuruldu.

Not: Bu bir demo/portföy projesidir. Gerçek bir ödeme sistemi, backend, veritabanı veya kullanıcı hesabı yoktur. Sepete ürün ekleme ve "satın alma" işlemleri yalnızca tarayıcınızda (localStorage) simüle edilir; hiçbir sunucuya veri gönderilmez, hiçbir gerçek ödeme alınmaz.

Canlı bir örnek görmek isteyenler için bu README, projeyi kendi bilgisayarınızda sıfırdan çalışır hale getirmenizi adım adım anlatır. Yazılım geliştirme deneyiminiz olmasa bile bu rehberi takip ederek siteyi çalıştırabilirsiniz.

İçindekiler

Sitenin içeriği ve özellikleri
Kullanılan teknolojiler
Sistem mimarisi
Gereksinimler (kurmanız gerekenler)
Kurulum — adım adım
Projeyi çalıştırma
Kullanılabilir komutlar
Proje klasör yapısı
Sayfalar ve rotalar
Veri modeli
Sepet ve "satın alma" akışı nasıl çalışır
Tasarım sistemi
Production build alma ve yayınlama (deploy)
Sorun giderme (Troubleshooting)
Kapsam dışı olanlar
Lisans ve içerik notu

Sitenin içeriği ve özellikleri

BB SHOP, header'daki her menü başlığının kendi sayfasına yönlendirdiği, çok sayfalı (multi-page) bir React uygulamasıdır. Sayfalar arası geçiş, tarayıcı yenilenmeden anında gerçekleşir (Single Page Application / SPA).

Sayfa	Adres	İçerik
Anasayfa	`/`	2 banner alanlı hero bölümü, öne çıkan ürünler önizlemesi, yılın ürünleri önizlemesi, kısa "Hakkımızda" tanıtımı, bülten aboneliğine yönlendiren kampanya bandı
Ürünlerimiz	`/urunler`	8 ürünün tamamı; "Hepsi / En Çok Satanlar / Önerilenler / Yeni Çıkanlar" filtre sekmeleri, her üründe fiyat, indirim, puan/yorum sayısı ve "Sepete Ekle"
Yılın Ürünleri	`/yilin-urunleri`	"En Yüksek Oyu Alanlar / En Çok Satanlar / İndirimdekiler" sekmeleriyle öne çıkan ürünlerin sıralı listesi
İletişim	`/iletisim`	Adres, telefon, e-posta bilgileri + validasyonlu iletişim formu (ad, e-posta, mesaj)
Abone Ol	`/abone-ol`	Bülten aboneliği faydaları + e-posta ile abonelik formu
Anket	`/anket`	Çok adımlı memnuniyet anketi (alışveriş sıklığı, memnuniyet düzeyi, favori ürün, tavsiye durumu, yorum) ve gönderim sonrası teşekkür ekranı
Hakkımızda	`/hakkimizda`	Şirket hikayesi, istatistik rozetleri, kullanılan ürün görsellerinin kaynak linkleri

Site genelinde bulunan diğer özellikler:

Sepet paneli (drawer): Sağdan açılan bir panel; ürün ekleme/çıkarma, adet artırma/azaltma, toplam tutar hesaplama ve "Şimdi Satın Al" formu (Ad Soyad, E-posta, Telefon, Adres — hepsi anlık validasyonlu).
Kalıcı sepet: Sepetinize eklediğiniz ürünler tarayıcınızın localStorage'ında saklanır; sayfayı yenileseniz veya tarayıcıyı kapatıp tekrar açsanız bile sepetiniz korunur.
Anlık saat: Header'da gerçek zamanlı, saniyede bir güncellenen bir saat gösterilir (masaüstü görünümünde).
Aktif sayfa vurgusu: Header menüsünde bulunduğunuz sayfa görsel olarak vurgulanır (breadcrumb ile de desteklenir).
Responsive tasarım: Masaüstü, tablet ve mobil ekranlarda (hamburger menü dahil) tam uyumlu çalışır.
Erişilebilirlik (a11y): Anlamlı aria-label'lar, klavye ile gezilebilir odak halkaları (focus-visible), prefers-reduced-motion desteği.

Kullanılan teknolojiler

Katman	Teknoloji	Neden seçildi
Build tool / dev server	Vite	Anında sıcak yenileme (HMR), sıfıra yakın konfigürasyonla hızlı geliştirme ve production build
UI kütüphanesi	React 19	Component tabanlı mimari, endüstri standardı, geniş ekosistem
Dil	TypeScript	Derleme zamanında hata yakalama, güçlü tip güvenliği, daha sürdürülebilir kod
Stil / tasarım sistemi	Tailwind CSS v4	Utility-first yaklaşımla hızlı, tutarlı ve bakımı kolay bir tasarım sistemi (renk paleti, tipografi, spacing tek yerden yönetilir)
Sayfa yönlendirme (routing)	React Router v7	Header'daki her başlığın kendi URL'i ve sayfası olmasını sağlar
Global state (sepet)	Zustand + `persist` middleware	Redux'a kıyasla çok daha az boilerplate kod; `localStorage`'a otomatik kaydetme desteği hazır gelir
Linter	oxlint	Rust tabanlı, çok hızlı, sıfır konfigürasyonla çalışan kod kalite denetleyicisi
Paket yöneticisi	npm	Node.js ile birlikte gelir, ek kurulum gerektirmez

Proje, backend gerektirmeyen, tamamen tarayıcıda çalışan statik bir SPA (Single Page Application) olarak derlenir (npm run build sonrası oluşan dist/ klasörü herhangi bir statik dosya sunucusuna (Netlify, Vercel, GitHub Pages vb.) yüklenebilir).

Sistem mimarisi

Aşağıdaki diyagram, kullanıcı tarayıcısından React uygulamasına ve tarayıcı içi localStorage'a kadar olan veri akışını özetler:

flowchart TB
    subgraph Browser["KULLANICI TARAYICISI"]
        subgraph SPA["React Uygulaması (SPA)"]
            Main["main.tsx<br/>BrowserRouter"]
            App["App.tsx<br/>(ScrollToTop, Header, Footer, CartDrawer)"]
            Routes["Routes"]
            Home["/ → Home.tsx"]
            Products["/urunler → Products.tsx"]
            Popular["/yilin-urunleri → PopularProducts.tsx"]
            Contact["/iletisim → Contact.tsx"]
            Newsletter["/abone-ol → Newsletter.tsx"]
            Survey["/anket → Survey.tsx"]
            About["/hakkimizda → About.tsx"]
            Components["components/<br/>ProductCard, Button, Tabs, Rating, ..."]

            Main --> App --> Routes
            Routes --> Home
            Routes --> Products
            Routes --> Popular
            Routes --> Contact
            Routes --> Newsletter
            Routes --> Survey
            Routes --> About
            Home & Products & Popular & Contact & Newsletter & Survey & About --> Components
        end

        Store["Zustand Store — store/cartStore.ts<br/>sepetteki ürünler ve adetleri global state olarak tutar"]
        LocalStorage["Tarayıcı localStorage — 'bb-shop-cart' anahtarı<br/>sayfa yenilense/kapatılsa bile veri kalıcıdır"]

        Components -- "okuma / yazma" --> Store
        Store -- "persist middleware ile otomatik senkronize" --> LocalStorage
    end

    Note["Backend / sunucu / veritabanı YOKTUR.<br/>Tüm veri (ürünler, sepet) uygulama koduna ve tarayıcıya gömülüdür."]
    Browser -.-> Note

Katman katman açıklama:

main.tsx — Uygulamanın giriş noktası. React uygulamasını #root elementine bağlar ve tüm uygulamayı <BrowserRouter> ile sarar (bu sayede URL tabanlı sayfa geçişleri mümkün olur).
App.tsx — Sitenin iskeleti: her sayfada sabit kalan Header, Footer ve CartDrawer bileşenlerini render eder; <Routes> içinde hangi URL'in hangi sayfa bileşenine karşılık geldiğini tanımlar.
pages/ — Her biri bir route'a karşılık gelen tam sayfa bileşenleri (Home, Products, PopularProducts, Contact, Newsletter, Survey, About). Bu sayfalar, aşağıdaki components/ klasöründeki küçük ve tekrar kullanılabilir parçaları bir araya getirir.
components/ — Yeniden kullanılabilir UI parçaları: ui/ (Button, Badge, Tabs, Rating, Clock gibi temel yapı taşları), layout/ (Header, Footer, PageHeader, ScrollToTop), product/ (ProductCard), cart/ (CartDrawer), sections/ (yalnızca anasayfaya özel Hero bölümü).
store/cartStore.ts — Sepet verisinin tutulduğu global state deposu (Zustand). Herhangi bir bileşen sepete ürün ekleyebilir/çıkarabilir; bu store, zustand/middleware'in persist fonksiyonu sayesinde her değişiklikte otomatik olarak tarayıcının localStorage'ına yazılır.
data/products.ts — Sitedeki 8 ürünün tüm bilgilerini (isim, fiyat, görsel, etiketler, puan, açıklama) içeren statik veri dosyası. Gerçek bir veritabanı yoktur; bu dosya "veritabanı" görevi görür.
lib/format.ts — Yardımcı fonksiyonlar (örn. sayıları Türk Lirası formatında gösterme).

Bu mimari sayesinde proje tamamen statiktir: npm run build komutuyla üretilen dosyalar herhangi bir web sunucusuna (veya CDN'e) yüklenerek çalıştırılabilir, ayrıca bir sunucu yazılımı (Node.js, PHP, veritabanı vb.) gerektirmez.

Gereksinimler (kurmanız gerekenler)

Siteyi kendi bilgisayarınızda çalıştırabilmek için sadece iki programa ihtiyacınız var. Yazılım geliştirme deneyiminiz olmasa bile aşağıdaki adımları takip ederek kurabilirsiniz.

1. Node.js (ve beraberinde gelen npm)

Bu proje bir Node.js projesidir; JavaScript kodunu çalıştırmak ve gerekli kütüphaneleri indirmek için Node.js'e ihtiyaç vardır. Node.js'i kurduğunuzda npm (Node Package Manager) da otomatik olarak kurulur.

İndirme adresi: https://nodejs.org/
Bu sayfada genelde iki seçenek görürsünüz: LTS (uzun süreli destek, önerilen) ve Current. LTS sürümünü indirin.
İşletim sisteminize göre indirici otomatik olarak seçilir (Windows .msi, macOS .pkg, Linux için paket yöneticisi talimatları).
İndirdiğiniz kurulum dosyasını çalıştırın ve sihirbazdaki adımları (hepsi "İleri/Next" ile) takip ederek kurulumu tamamlayın.

Kurulumun başarılı olduğunu doğrulamak için:

Bilgisayarınızda bir terminal (macOS'ta "Terminal" uygulaması, Windows'ta "PowerShell" veya "Komut İstemi") açın ve şu komutları tek tek yazıp Enter'a basın:

node -v
npm -v

Her ikisi de bir sürüm numarası (örn. v22.12.0 ve 10.9.0) yazdırıyorsa kurulum başarılıdır. Bu proje, kullandığı Vite 8 sürümü nedeniyle Node.js 20.19+ veya 22.12+ bir sürüm gerektirir — nodejs.org'dan indireceğiniz güncel LTS sürümü bu şartı zaten karşılar.

2. Git

Projeyi GitHub'dan bilgisayarınıza indirmek (klonlamak) için Git'e ihtiyacınız var.

İndirme adresi: https://git-scm.com/downloads
İşletim sisteminize uygun indiriciyi seçin, kurulum sihirbazını (varsayılan ayarlarla "İleri/Next" diyerek) tamamlayın.
macOS kullanıcıları alternatif olarak terminalde git yazıp Enter'a bastığında sistem Git'i otomatik kurmayı teklif edebilir; bu teklifi kabul etmeniz yeterlidir.

Kurulumun başarılı olduğunu doğrulamak için:

git --version

Bir sürüm numarası görüyorsanız (örn. git version 2.43.0) kurulum tamamdır.

Alternatif: Git kurmak istemiyorsanız, GitHub'daki proje sayfasında yeşil "Code" butonuna tıklayıp "Download ZIP" seçeneğiyle projeyi doğrudan bir zip dosyası olarak da indirebilir, bilgisayarınızda bir klasöre çıkartabilirsiniz. Bu durumda aşağıdaki "Kurulum" bölümündeki git clone adımını atlayabilirsiniz.

İhtiyaç duymayacağınız şeyler

Bu proje backend, veritabanı veya ödeme sistemi içermez. Dolayısıyla herhangi bir veritabanı programı (MySQL, PostgreSQL vb.), sunucu yazılımı, API anahtarı veya ek bir hesap oluşturmanıza gerek yoktur. Sadece Node.js ve (isteğe bağlı) Git yeterlidir.

Kurulum — adım adım

Terminali açın.
- macOS: Cmd + Boşluk tuşlarına basıp "Terminal" yazıp Enter'a basın.
- Windows: Başlat menüsüne "PowerShell" yazıp Enter'a basın.
Projeyi bilgisayarınıza indirin (klonlayın). Projeyi indirmek istediğiniz klasöre gidin (örneğin masaüstü) ve şu komutu çalıştırın:
```
git clone https://github.com/desideroo/bb-shop.git
```
Bu komut, bb-shop adında yeni bir klasör oluşturup projenin tüm dosyalarını içine indirir.

Git kurmadıysanız ve zip olarak indirdiyseniz, zip dosyasını istediğiniz bir klasöre çıkartmanız yeterli — bu adımı atlayabilirsiniz.
Proje klasörüne girin:
```
cd bb-shop
```
Gerekli kütüphaneleri (bağımlılıkları) kurun. Bu komut, projenin ihtiyaç duyduğu React, Tailwind gibi tüm kütüphaneleri otomatik olarak indirip node_modules adlı bir klasöre kuracaktır (internet bağlantısı gerektirir, ilk seferde birkaç dakika sürebilir):
```
npm install
```
Komut bittiğinde terminalde bir hata görmüyorsanız (bazı npm warn uyarıları normaldir, sorun değildir) kurulum tamamlanmıştır.

Kurulum bu kadar! Bir sonraki bölümde siteyi nasıl çalıştıracağınızı anlatıyoruz.

Projeyi çalıştırma

Kurulumdan sonra, proje klasöründeyken (bb-shop klasörünün içinde) terminalde şu komutu çalıştırın:

npm run dev

Bu komut bir geliştirme sunucusu başlatır ve terminalde şuna benzer bir çıktı gösterir:

  VITE v8.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Şimdi tarayıcınızı (Chrome, Safari, Edge, Firefox — hangisini kullanıyorsanız) açın ve adres çubuğuna şunu yazın:

http://localhost:5173

Karşınıza BB SHOP anasayfası gelecektir. Artık siteyi kendi bilgisayarınızda çalışır durumda görebilir, gezinebilir, sepete ürün ekleyebilirsiniz.

Sunucuyu durdurmak için: Terminale geri dönüp klavyeden Ctrl + C tuşlarına basın.

Kolay yol: çift tıkla, çalışsın

Terminal komutlarıyla uğraşmak istemiyorsanız, proje klasörünün içinde Siteyi Başlat.command adında bir dosya bulunur (yalnızca macOS için). Bu dosyaya Finder'da çift tıkladığınızda:

Gerekiyorsa bağımlılıkları otomatik kurar,
Geliştirme sunucusunu başlatır,
Tarayıcınızda siteyi otomatik olarak açar.

Sunucuyu kapatmak için açılan terminal penceresinde Ctrl + C tuşlarına basmanız yeterlidir.

Kullanılabilir komutlar

Proje klasöründeyken çalıştırabileceğiniz komutlar:

Komut	Ne işe yarar
`npm install`	Projenin ihtiyaç duyduğu tüm kütüphaneleri kurar (yalnızca ilk kurulumda veya `package.json` değiştiğinde gerekir)
`npm run dev`	Geliştirme sunucusunu başlatır (`http://localhost:5173`), kodda yaptığınız değişiklikleri anında tarayıcıya yansıtır
`npm run build`	Siteyi "production" (yayına hazır) haliyle derler; sonuç `dist/` klasörüne yazılır
`npm run preview`	`npm run build` ile üretilen `dist/` klasörünü yerel olarak önizlemenizi sağlar
`npm run lint`	Kod kalite denetleyicisini (oxlint) çalıştırır, olası hataları/uyarıları listeler

Proje klasör yapısı

bb-shop/
├── public/                    Doğrudan sunulan statik dosyalar (favicon vb.)
├── src/
│   ├── assets/                Ürün görselleri, logo, banner görseli
│   │   └── products/          8 ürünün görselleri
│   ├── components/
│   │   ├── ui/                Temel, tekrar kullanılabilir arayüz parçaları
│   │   │                      (Button/LinkButton, Badge, Tabs, Rating, Clock)
│   │   ├── layout/             Header, Footer, PageHeader (başlık+breadcrumb),
│   │   │                      ScrollToTop (sayfa değişince en üste kaydırma)
│   │   ├── product/            ProductCard (ürün kartı)
│   │   ├── cart/                CartDrawer (sepet paneli + satın alma formu)
│   │   └── sections/            Hero (yalnızca anasayfada kullanılan banner alanı)
│   ├── data/
│   │   └── products.ts         8 ürünün tüm bilgilerini içeren veri dosyası
│   ├── lib/
│   │   └── format.ts           Fiyat formatlama yardımcı fonksiyonu
│   ├── pages/                  Her biri bir route'a karşılık gelen sayfa bileşenleri
│   │   ├── Home.tsx             "/"
│   │   ├── Products.tsx         "/urunler"
│   │   ├── PopularProducts.tsx  "/yilin-urunleri"
│   │   ├── Contact.tsx          "/iletisim"
│   │   ├── Newsletter.tsx       "/abone-ol"
│   │   ├── Survey.tsx           "/anket"
│   │   └── About.tsx            "/hakkimizda"
│   ├── store/
│   │   └── cartStore.ts        Zustand ile global sepet state'i (localStorage kalıcı)
│   ├── types/
│   │   └── product.ts          Ürün veri tipinin TypeScript tanımı
│   ├── App.tsx                 Sayfa yönlendirme (routing) ve genel sayfa iskeleti
│   ├── main.tsx                Uygulamanın giriş noktası
│   └── index.css               Tailwind importu ve tasarım sistemi (renk/tipografi) tanımları
├── index.html                  Ana HTML dosyası
├── package.json                 Proje bilgisi, bağımlılıklar, komutlar (scripts)
├── vite.config.ts               Vite yapılandırması
├── tsconfig*.json                TypeScript yapılandırması
├── CLAUDE.md                    Proje gereksinimleri ve kuralları
├── PROJE.md                     Orijinal ders ödevi şartnamesi
└── README.md                    Bu dosya

Sayfalar ve rotalar

Header'daki her menü başlığı, gerçek bir URL'e (route) karşılık gelen ayrı bir sayfadır — anchor/kaydırma değil, React Router ile yönetilen tam sayfa geçişleridir. Sol üstteki logo her sayfadan anasayfaya (/) döner.

Route	Header başlığı	Sayfa dosyası
`/`	Anasayfa	`src/pages/Home.tsx`
`/urunler`	Ürünlerimiz	`src/pages/Products.tsx`
`/yilin-urunleri`	Yılın Ürünleri	`src/pages/PopularProducts.tsx`
`/iletisim`	İletişim	`src/pages/Contact.tsx`
`/abone-ol`	Abone Ol	`src/pages/Newsletter.tsx`
`/anket`	Anket	`src/pages/Survey.tsx`
`/hakkimizda`	Hakkımızda	`src/pages/About.tsx`

Veri modeli

Sitedeki 8 ürün, src/data/products.ts dosyasında sabit (statik) bir dizi olarak tanımlıdır — harici bir veritabanı veya API çağrısı yoktur. Her ürün nesnesi şu alanları içerir (bkz. src/types/product.ts):

Alan	Açıklama
`id`	Ürünün benzersiz kimliği (URL-dostu, örn. `cosmic-pegasus`)
`name`	Ürün adı
`price`	Güncel satış fiyatı (₺)
`compareAtPrice`	(Opsiyonel) İndirim öncesi fiyat — üstü çizili gösterilir
`image`	Ürün görselinin dosya yolu
`tags`	`best-seller`, `featured`, `new` etiketlerinden biri veya birkaçı — filtreleme için kullanılır
`rating`	5 üzerinden ortalama puan
`reviewCount`	Yorum sayısı
`description`	Kısa ürün açıklaması
`wikiUrl`	Ürün görseli/tekniği için kaynak sayfası linki (Hakkımızda sayfasında listelenir)

Korunan 8 ürün: Cosmic Pegasus, Phoenix Wing, Lightning Drago, Ultimate Valkyrie, Dran Sword, Chaos Oval Gyro, Ninja Salamander, Emperor Forneus.

Sepet ve "satın alma" akışı nasıl çalışır

Herhangi bir üründeki "Sepete Ekle" butonuna tıklandığında, src/store/cartStore.ts içindeki Zustand store güncellenir ve sepet paneli (drawer) otomatik olarak açılır.
Sepet panelinde ürün adedini artırıp azaltabilir veya ürünü tamamen kaldırabilirsiniz; toplam tutar anlık olarak yeniden hesaplanır.
Her değişiklikte, zustand/middleware'in persist özelliği sayesinde sepet içeriği otomatik olarak tarayıcının localStorage'ına (bb-shop-cart anahtarı altında) yazılır. Bu sayede sayfayı yenileseniz veya tarayıcıyı kapatıp yeniden açsanız bile sepetiniz kaybolmaz.
"Şimdi Satın Al" formunu doldurup gönderdiğinizde (Ad Soyad, E-posta, Telefon, Adres — hepsi anlık validasyonludur), sahte bir yükleme animasyonunun ardından bir başarı mesajı gösterilir ve sepet temizlenir.

Önemli: Bu adımların hiçbiri gerçek bir sunucuya veri göndermez. Girdiğiniz bilgiler yalnızca tarayıcınızda işlenir ve hiçbir yerde saklanmaz/iletilmez. Gerçek bir ödeme alınmaz.

Tasarım sistemi

Site, src/index.css içinde Tailwind CSS v4'ün @theme özelliğiyle tanımlanmış merkezi bir tasarım sistemi kullanır:

Renk paleti: Marka rengi (brand, turuncu-kırmızı tonları), nötr "ink" tonları (metin/arka plan gri skalası) ve vurgu rengi (accent, mavi).
Tipografi: Gövde metinleri için Inter, başlıklar için Sora (Google Fonts üzerinden yüklenir).
Bileşen kütüphanesi: src/components/ui/ altında Button/LinkButton, Badge, Tabs, Rating, Clock gibi tekrar kullanılabilir, tutarlı stillere sahip temel bileşenler bulunur.
Erişilebilirlik: Tüm etkileşimli öğelerde belirgin focus-visible halkaları, anlamlı aria-label'lar ve prefers-reduced-motion desteği (kullanıcı sistem ayarlarında animasyonları azalttıysa, site de animasyonları otomatik olarak azaltır).
Responsive tasarım: Mobile-first yaklaşımla, Tailwind'in sm/md/lg/xl breakpoint'leri kullanılarak masaüstü, tablet ve mobil (hamburger menü dahil) için ayrı ayrı optimize edilmiştir.

Production build alma ve yayınlama (deploy)

Siteyi bir web sunucusunda gerçek bir adres üzerinden yayınlamak isterseniz:

npm run build

Bu komut, optimize edilmiş (küçültülmüş, önbelleğe alınabilir) dosyaları dist/ klasörüne üretir. dist/ klasörünün içeriği, herhangi bir statik dosya barındırma hizmetine yüklenebilir — örneğin:

Vercel
Netlify
GitHub Pages
Herhangi bir paylaşımlı hosting / Nginx / Apache sunucusu

Bu proje bir Node.js sunucusu, veritabanı veya ortam değişkeni (environment variable) gerektirmediğinden, deploy işlemi yalnızca dist/ klasörünün ilgili platforma yüklenmesinden ibarettir.

Build'i yüklemeden önce yerel olarak kontrol etmek isterseniz:

npm run preview

Sorun giderme (Troubleshooting)

"npm: command not found" / "npm tanınmıyor" hatası alıyorum Node.js düzgün kurulmamış veya terminal, kurulumdan sonra yeniden başlatılmamış olabilir. Node.js'i nodejs.org üzerinden tekrar kurun, ardından terminali tamamen kapatıp yeniden açın.

npm install çalışırken hata alıyorum İnternet bağlantınızı kontrol edin. Kurumsal/okul ağlarında bazı paket kayıtlarına erişim engellenmiş olabilir; farklı bir ağ (örn. mobil internet) ile tekrar deneyin.

http://localhost:5173 tarayıcıda açılmıyor / "bu siteye ulaşılamıyor" hatası npm run dev komutunu çalıştırdığınız terminal penceresinin hâlâ açık ve çalışır durumda olduğundan emin olun (pencereyi kapatırsanız sunucu da durur). Terminaldeki çıktıda gerçek port numarasını kontrol edin (bazen 5173 meşgulse Vite otomatik olarak 5174 gibi başka bir port kullanır).

"Port 5173 is already in use" gibi bir hata görüyorum Bilgisayarınızda zaten çalışan başka bir Vite sunucusu olabilir. Önceki terminal pencerelerini kapatın veya bilgisayarınızı yeniden başlatıp tekrar deneyin.

Sepetim beklenmedik şekilde boşaldı Sepet verisi tarayıcınızın localStorage'ında tutulur. Tarayıcı geçmişini/verilerini temizlemek, farklı bir tarayıcı veya gizli/InPrivate sekme kullanmak sepeti sıfırlar — bu beklenen bir davranıştır.

Değişiklik yaptım ama tarayıcıda görünmüyor npm run dev sunucusunun hâlâ çalıştığından emin olun ve tarayıcıda sayfayı yenileyin (Cmd/Ctrl + R). Sorun devam ederse sunucuyu durdurup (Ctrl + C) npm run dev ile yeniden başlatın.

Kapsam dışı olanlar

Bu proje bilinçli olarak aşağıdakileri içermez:

Gerçek bir ödeme sistemi (kredi kartı işleme, banka entegrasyonu vb.)
Backend, API veya veritabanı
Kullanıcı hesabı / giriş-kayıt (auth) sistemi
Gerçek e-posta gönderimi (iletişim ve bülten formları yalnızca tarayıcıda simüle edilir)
8'den fazla ürün eklenmesi (ürün yelpazesi orijinal siteyle sınırlıdır)

Lisans ve içerik notu

Bu proje eğitim/portföy amaçlı bir demo çalışmasıdır. Sitede yer alan fiyat, adres, telefon, e-posta ve "Hakkımızda" metni gibi tüm işletme bilgileri tamamen kurgusal placeholder içeriktir, gerçek bir işletmeye ait değildir. Ürün görselleri ve isimleri ilgili Beyblade serisine aittir; kaynakları Hakkımızda sayfasında (/hakkimizda) listelenmiştir.

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
.oxlintrc.json		.oxlintrc.json
README.md		README.md
Siteyi Başlat.command		Siteyi Başlat.command
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository files navigation

Beyblade Shop (BB Shop) Frontend E-Ticaret Projesi

İçindekiler

Sitenin içeriği ve özellikleri

Kullanılan teknolojiler

Sistem mimarisi

Gereksinimler (kurmanız gerekenler)

1. Node.js (ve beraberinde gelen npm)

2. Git

İhtiyaç duymayacağınız şeyler

Kurulum — adım adım

Projeyi çalıştırma

Kolay yol: çift tıkla, çalışsın

Kullanılabilir komutlar

Proje klasör yapısı

Sayfalar ve rotalar

Veri modeli

Sepet ve "satın alma" akışı nasıl çalışır

Tasarım sistemi

Production build alma ve yayınlama (deploy)

Sorun giderme (Troubleshooting)

Kapsam dışı olanlar

Lisans ve içerik notu

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Beyblade Shop (BB Shop) Frontend E-Ticaret Projesi

İçindekiler

Sitenin içeriği ve özellikleri

Kullanılan teknolojiler

Sistem mimarisi

Gereksinimler (kurmanız gerekenler)

1. Node.js (ve beraberinde gelen npm)

2. Git

İhtiyaç duymayacağınız şeyler

Kurulum — adım adım

Projeyi çalıştırma

Kolay yol: çift tıkla, çalışsın

Kullanılabilir komutlar

Proje klasör yapısı

Sayfalar ve rotalar

Veri modeli

Sepet ve "satın alma" akışı nasıl çalışır

Tasarım sistemi

Production build alma ve yayınlama (deploy)

Sorun giderme (Troubleshooting)

Kapsam dışı olanlar

Lisans ve içerik notu

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages