Bu proje, modern bir e-ticaret uygulamasının frontend (Next.js 15) ve mock backend (JSON Server) entegrasyonu ile geliştirilmiş bir web uygulamasıdır.
Tamamen Next.js App Router, TailwindCSS, Headless UI, Heroicons ve Context API kullanılarak yazılmıştır.
- ✅ Ürün listeleme
- ✅ Ürün detay sayfası (+ rating ve review count)
- ✅ Sepet sistemi (CartContext)
- ✅ Wishlist sistemi (guest + auth)
- ✅ Login / Logout (cookie tabanlı)
- ✅ Profil sayfası
- ✅ Sipariş geçmişi
- ✅ JSON Server ile sahte backend
- ✅ Modern responsive UI (Tailwind + HeadlessUI)
- ✅ Tamamı Next.js 15 (App Router) ile
| Teknoloji | Açıklama |
|---|---|
| Next.js 15 | App Router, Server/Client Components |
| React (JS) | UI |
| TailwindCSS | Stil |
| HeadlessUI | UI bileşenleri (Popover, Dialog, Disclosure) |
| Heroicons | Icon seti |
| React Context API | Cart, Wishlist, Auth yönetimi |
| JSON Server | Mock REST API backend |
| Axios & Fetch | API istekleri |
| react-hot-toast | Bildirim sistemi |
- Node.js >= 20 (zorunlu)
- npm veya yarn
Node versiyonunu kontrol etmek için:
node -v- Projeyi klonlayın:
git clone https://github.com/fatihes1/e-commerce-ui.git
cd e-commerce-ui- Bağımlılıkları yükleyin:
npm install
# veya
yarn install- Environment dosyasını oluşturun.
touch .env
.envdosyasını açın ve aşağıdaki satırı ekleyin:
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
- Projeyi başlatın:
npm run dev:concurrent
# veya
yarn dev:concurrentBu komut, hem Next.js uygulamasını hem de JSON Server'ı aynı anda başlatır.