0e5dffb7fc
- Fixed dotenv path in app.js to properly load .env from backend root - Updated CORS to allow http://localhost:5173 (frontend URL) - Updated README.md with accurate project statistics (58 files, 6677+ lines) - Updated backend/README.md - marked as Production Ready - Updated frontend/README.md with complete feature list - All systems tested and working (backend + frontend)
150 lines
3.5 KiB
Markdown
150 lines
3.5 KiB
Markdown
# Oltalama Frontend
|
||
|
||
Modern ve responsive phishing test yönetim paneli frontend'i.
|
||
|
||
## ✨ Özellikler
|
||
|
||
- 🎨 **Material-UI** - Modern UI component library
|
||
- ⚡ **Vite** - Hızlı development server
|
||
- 🔐 **Session Auth** - Context-based authentication
|
||
- 📱 **Responsive** - Mobile-first tasarım
|
||
- 🎯 **5 Sayfa** - Login, Dashboard, Companies, Tokens, Settings
|
||
|
||
## 🚀 Kurulum
|
||
|
||
```bash
|
||
npm install
|
||
cp .env.example .env
|
||
# VITE_API_URL=http://localhost:3000 olarak ayarlayın
|
||
|
||
npm run dev
|
||
```
|
||
|
||
**URL:** http://localhost:5173
|
||
**Default Login:** admin / admin123
|
||
|
||
## 📄 Sayfalar
|
||
|
||
### 🔑 Login
|
||
- Session-based authentication
|
||
- Form validation
|
||
- Auto redirect on success
|
||
|
||
### 📊 Dashboard
|
||
- Genel istatistikler (şirket, token, tıklama)
|
||
- Başarı oranı kartı
|
||
- Şirket performans tablosu
|
||
- Son tıklamalar listesi
|
||
|
||
### 🏢 Companies
|
||
- Grid view ile şirket kartları
|
||
- Create/Edit/Delete modal
|
||
- Şirket bazlı istatistikler
|
||
- Click-through to detail
|
||
|
||
### 🔗 Tokens
|
||
- Tüm tokenlar tablo görünümü
|
||
- Token oluştur + mail gönder
|
||
- Durum badge'leri (Tıklandı/Bekliyor)
|
||
- Tıklama sayısı tracking
|
||
|
||
### ⚙️ Settings
|
||
- Gmail yapılandırması
|
||
- Telegram yapılandırması
|
||
- Test butonları (mail & telegram)
|
||
- Gerçek zamanlı feedback
|
||
|
||
## 🎨 UI Komponenti
|
||
|
||
### Layout
|
||
- Sidebar navigation
|
||
- Responsive drawer (mobile)
|
||
- User menu (logout)
|
||
- Material-UI theming
|
||
|
||
### Services
|
||
- `api.js` - Axios instance (credentials, base URL)
|
||
- `authService.js` - Login/logout/check
|
||
- `companyService.js` - Company CRUD
|
||
- `tokenService.js` - Token CRUD + send
|
||
- `statsService.js` - Dashboard stats
|
||
- `templateService.js` - Mail templates
|
||
|
||
### Context
|
||
- `AuthContext` - Global auth state
|
||
- Auto session check on mount
|
||
- Protected routes
|
||
|
||
## 🛠️ Teknolojiler
|
||
|
||
- **React 18** - UI library
|
||
- **Vite** - Build tool
|
||
- **Material-UI v6** - Component library
|
||
- **React Router v7** - Routing
|
||
- **Axios** - HTTP client
|
||
- **date-fns** - Date formatting
|
||
|
||
## 📦 Build
|
||
|
||
```bash
|
||
# Development
|
||
npm run dev
|
||
|
||
# Production build
|
||
npm run build
|
||
|
||
# Preview production build
|
||
npm run preview
|
||
```
|
||
|
||
## 🔐 Environment Variables
|
||
|
||
```env
|
||
VITE_API_URL=http://localhost:3000
|
||
```
|
||
|
||
**Not:** Vite sadece `VITE_` prefix'li değişkenleri expose eder.
|
||
|
||
## 📁 Yapı
|
||
|
||
```
|
||
src/
|
||
├── components/
|
||
│ └── Layout/
|
||
│ └── Layout.jsx - Main layout with sidebar
|
||
├── context/
|
||
│ └── AuthContext.jsx - Authentication context
|
||
├── pages/
|
||
│ ├── Login.jsx - Login page
|
||
│ ├── Dashboard.jsx - Stats dashboard
|
||
│ ├── Companies.jsx - Company management
|
||
│ ├── Tokens.jsx - Token management
|
||
│ └── Settings.jsx - System settings
|
||
├── services/
|
||
│ ├── api.js - Axios instance
|
||
│ ├── authService.js - Auth endpoints
|
||
│ ├── companyService.js - Company endpoints
|
||
│ ├── tokenService.js - Token endpoints
|
||
│ ├── statsService.js - Stats endpoints
|
||
│ └── templateService.js - Template endpoints
|
||
├── App.jsx - Main app with routing
|
||
├── main.jsx - App entry point
|
||
└── index.css - Global styles
|
||
```
|
||
|
||
## ✅ Durum
|
||
|
||
**Tamamlanan:**
|
||
- ✅ Login & Authentication
|
||
- ✅ Protected routes
|
||
- ✅ Dashboard with stats
|
||
- ✅ Company management (CRUD)
|
||
- ✅ Token management (CRUD + send)
|
||
- ✅ Settings (Gmail + Telegram)
|
||
- ✅ Responsive layout
|
||
- ✅ Material-UI theming
|
||
- ✅ Error handling
|
||
- ✅ Loading states
|
||
|
||
**Production Ready!** 🎉
|