Skip to content

Commit 32da346

Browse files
authored
Create README.md
1 parent 64b52de commit 32da346

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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

Comments
 (0)