|
| 1 | +# Prism - Modern React Admin Paneli |
| 2 | + |
| 3 | +Prism, verilerinizi yönetmek ve görselleştirmek için tasarlanmış, modern, duyarlı ve zengin özelliklere sahip bir admin paneli uygulamasıdır. Bu proje, bir yönetici panelinde bulunması gereken temel özellikleri modern bir arayüzle sunmak amacıyla geliştirilmiştir. React, Tailwind CSS, Recharts ve React Big Calendar gibi güçlü teknolojiler kullanılarak hem estetik hem de fonksiyonel bir kullanıcı deneyimi hedeflenmiştir. |
| 4 | + |
| 5 | +## Canlı Demo |
| 6 | + |
| 7 | +Canlı Demoyu Görüntüle: [https://enderkaran.github.io/Prism-Admin-Dashboard/](https://enderkaran.github.io/Prism-Admin-Dashboard/) |
| 8 | + |
| 9 | +<img width="1348" height="603" alt="image" src="https://github.com/user-attachments/assets/2fa8e91f-39ba-4910-a1af-acdf2493dfc0" /> |
| 10 | + |
| 11 | +## Öne Çıkan Özellikler |
| 12 | + |
| 13 | +### 1. İnteraktif Dashboard |
| 14 | +- **İstatistik Kartları (StatCard):** Toplam müşteri, sipariş, gelir gibi önemli metrikleri anlık olarak gösteren dinamik kartlar. |
| 15 | +- **Veri Odaklı Grafikler (StatisticsChart):** Recharts kütüphanesi kullanılarak oluşturulmuş, aylık satışları ve istatistikleri görselleştiren interaktif ve duyarlı grafikler. |
| 16 | +- **Coğrafi Veri Haritası (DemographicsMap):** Müşterilerin dünya üzerindeki dağılımını gösteren, react-simple-maps ile oluşturulmuş demografi haritası. |
| 17 | + |
| 18 | +### 2. Yönetim Sayfaları |
| 19 | +- **Takvim (CalendarPage):** React Big Calendar kullanılarak oluşturulmuş, etkinlik ekleme, düzenleme ve görüntüleme özelliklerine sahip tam fonksiyonel takvim sayfası. |
| 20 | +- **Profil Sayfası (ProfilePage):** Kullanıcıların kişisel bilgilerini ve adreslerini görüntüleyebileceği, modal pencereler üzerinden düzenleyebileceği profil yönetim sayfası. |
| 21 | +- **Sipariş Listesi (RecentOrders):** Son siparişleri ürün görselleri, fiyatları ve durumları (Teslim Edildi, Beklemede, İptal) ile birlikte listeleyen modern tablo. |
| 22 | + |
| 23 | +### 3. Kullanıcı Arayüzü ve Deneyimi |
| 24 | +- **Aydınlık ve Karanlık Mod:** Tek bir tıklama ile uygulama genelinde tema değiştirmeye olanak tanıyan tam tema desteği. |
| 25 | +- **Duyarlı Tasarım:** Tailwind CSS’in mobile-first yaklaşımıyla geliştirilmiş, tüm ekran boyutlarında kusursuz çalışan bir arayüz. |
| 26 | +- **Modern Bileşenler:** Bildirimler (NotificationDropdown), kullanıcı menüsü (ProfileDropdown) ve form girişleri (FormInput) gibi yeniden kullanılabilir ve modern arayüz bileşenleri. |
| 27 | +- **Otomatik Dağıtım:** GitHub Actions ile main branch’e yapılan her push’ta projenin otomatik olarak derlenip GitHub Pages’e dağıtılması. |
| 28 | + |
| 29 | +## Teknoloji Yığını |
| 30 | + |
| 31 | +| Teknoloji | Açıklama | |
| 32 | +|------------|-----------| |
| 33 | +| React | Uygulama çatısı | |
| 34 | +| Vite | Geliştirme ve derleme aracı | |
| 35 | +| Tailwind CSS | Modern ve duyarlı stil altyapısı | |
| 36 | +| Recharts | Grafik ve veri görselleştirme kütüphanesi | |
| 37 | +| React Big Calendar | Takvim ve etkinlik yönetimi | |
| 38 | +| React Simple Maps | Coğrafi veri haritaları oluşturma | |
| 39 | +| Lucide React | Hafif ve modern ikon seti | |
| 40 | +| React Router DOM | Sayfa yönlendirme sistemi | |
| 41 | +| GitHub Actions & GitHub Pages | Sürekli entegrasyon ve otomatik dağıtım | |
| 42 | + |
| 43 | +## Başlarken |
| 44 | + |
| 45 | +Projeyi yerel makinenizde çalıştırmak için aşağıdaki adımları izleyin. |
| 46 | + |
| 47 | +### Kurulum |
| 48 | + |
| 49 | +Depoyu klonlayın: |
| 50 | +```bash |
| 51 | +git clone https://github.com/EnderKaran/Prism-Admin-Dashboard.git |
| 52 | +cd admin-dashboard |
| 53 | +``` |
| 54 | + |
| 55 | +Bağımlılıkları yükleyin (bazı eski bağımlılıklar için --legacy-peer-deps gerekebilir): |
| 56 | +```bash |
| 57 | +npm install --legacy-peer-deps |
| 58 | +``` |
| 59 | + |
| 60 | +## Proje Yapısı |
| 61 | + |
| 62 | +Proje, sorumlulukların ayrılması ilkesine dayanan, ölçeklenebilir ve bakımı kolay bir yapıya sahiptir. |
| 63 | +``` |
| 64 | +Prism-Admin-Dashboard/ |
| 65 | +├── node_modules/ |
| 66 | +├── public/ |
| 67 | +│ └── 404.html # GitHub Pages yönlendirme dosyası |
| 68 | +├── src/ |
| 69 | +│ ├── assets/ # Görseller, fontlar vb. |
| 70 | +│ ├── components/ |
| 71 | +│ │ ├── Charts/ # Grafik bileşenleri |
| 72 | +│ │ │ ├── DemographicsMap.jsx |
| 73 | +│ │ │ └── StatisticsChart.jsx |
| 74 | +│ │ ├── Dropdowns/ # Açılır menü bileşenleri |
| 75 | +│ │ │ ├── NotificationDropdown.jsx |
| 76 | +│ │ │ └── ProfileDropdown.jsx |
| 77 | +│ │ ├── Form/ # Form elemanları |
| 78 | +│ │ │ └── FormInput.jsx |
| 79 | +│ │ ├── Layout/ # Sayfa düzeni bileşenleri |
| 80 | +│ │ │ ├── Header.jsx |
| 81 | +│ │ │ └── Sidebar.jsx |
| 82 | +│ │ ├── Modals/ # Modal bileşenleri |
| 83 | +│ │ │ ├── EditAddressModal.jsx |
| 84 | +│ │ │ ├── EditPersonalInfoModal.jsx |
| 85 | +│ │ │ └── EventModal.jsx |
| 86 | +│ │ └── Tables/ # Tablo bileşenleri |
| 87 | +│ │ ├── RecentOrders.jsx |
| 88 | +│ │ └── StatCard.jsx |
| 89 | +│ ├── pages/ # Sayfa bileşenleri |
| 90 | +│ │ ├── CalendarPage.jsx |
| 91 | +│ │ ├── DashboardContent.jsx |
| 92 | +│ │ └── ProfilePage.jsx |
| 93 | +│ ├── App.css # Global stil ve takvim özelleştirmeleri |
| 94 | +│ ├── App.jsx # Ana bileşen ve yönlendirme |
| 95 | +│ └── main.jsx # Uygulamanın giriş noktası |
| 96 | +├── .gitignore |
| 97 | +├── eslint.config.js |
| 98 | +├── index.html |
| 99 | +├── package-lock.json |
| 100 | +├── package.json |
| 101 | +├── tailwind.config.js |
| 102 | +└── vite.config.js |
| 103 | +``` |
| 104 | + |
| 105 | +## Katkıda Bulunma |
| 106 | + |
| 107 | +Katkılar memnuniyetle karşılanmaktadır. Öneri, geliştirme veya hata bildirimi için Pull Request veya Issue açabilirsiniz. |
| 108 | + |
0 commit comments