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)
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
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/checkcompanyService.js- Company CRUDtokenService.js- Token CRUD + sendstatsService.js- Dashboard statstemplateService.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
# Development
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
🔐 Environment Variables
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! 🎉