79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
# GAuth-Central Admin Panel - Walkthrough
|
||
|
||
## Tamamlanan Özellikler
|
||
|
||
### 1. Proje Altyapısı
|
||
- **Teknolojiler**: React, Vite, TypeScript, Tailwind CSS, Shadcn UI.
|
||
- **Klasör Yapısı**: `src/features`, `src/components`, `src/layouts` şeklinde modüler yapı.
|
||
- **API İstemcisi**: Axios ile merkezi yapı, interceptor'lar ile otomatik token yönetimi.
|
||
- **Tema**: Shadcn UI ve Tailwind CSS ile modern, responsive tasarım.
|
||
|
||
### 2. Kimlik Doğrulama (Auth)
|
||
- **Giriş Sayfası**: E-posta ve şifre ile giriş.
|
||
- **Auth Context**: Kullanıcı oturum yönetimi, `localStorage` üzerinde token saklama.
|
||
- **Korumalı Route**: `/login` harici sayfalar için oturum kontrolü.
|
||
|
||
### 3. Kullanıcı Arayüzü (UI)
|
||
- **Dashboard Layout**: Sidebar ve Header içeren ana yerleşim.
|
||
- **Dashboard Sayfası**: Özet kartları (mock veri).
|
||
- **Kullanıcılar Sayfası**: Backend'den veri çeken, sayfalamalı ve aramalı kullanıcı listesi.
|
||
- **Bileşenler**: Button, Input, Table, Card, Form, Dropdown Menu (shadcn/ui).
|
||
|
||
## Nasıl Çalıştırılır?
|
||
|
||
1. **Bağımlılıkları Yükle**:
|
||
```bash
|
||
cd admin-panel
|
||
npm install
|
||
```
|
||
|
||
2. **Geliştirme Sunucusunu Başlat**:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
3. **Backend Bağlantısı**:
|
||
- Varsayılan olarak `http://localhost:8080` adresine bağlanır.
|
||
- Değiştirmek için `.env` dosyası oluşturun: `VITE_API_BASE_URL=http://localhost:8080`
|
||
|
||
## Ekran Görüntüleri & Kod Örnekleri
|
||
|
||
### Kullanıcı Listesi ([UserList.tsx](file:///Users/beyhan/Desktop/Projeler/Go/atahango/admin-panel/src/features/users/components/UserList.tsx))
|
||
```tsx
|
||
export function UserList() {
|
||
const { data } = useUsers(page, 10, search)
|
||
// ...
|
||
return (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>Email</TableHead>
|
||
<TableHead>Roller</TableHead>
|
||
{/* ... */}
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{data?.users?.map(user => (
|
||
<TableRow key={user.id}>
|
||
{/* ... */}
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
)
|
||
}
|
||
```
|
||
|
||
### API İstemcisi ([api.ts](file:///Users/beyhan/Desktop/Projeler/Go/atahango/admin-panel/src/lib/api.ts))
|
||
```ts
|
||
api.interceptors.response.use(
|
||
(response) => response,
|
||
async (error) => {
|
||
// 401 hatasında otomatik token yenileme
|
||
if (error.response?.status === 401) {
|
||
// ... refresh token logic
|
||
}
|
||
}
|
||
)
|
||
```
|