PROJECT OVERVIEW:
This project aims to develop a single-page application (SPA) for a SaaS product named 'Güvenli İletişim Kalkanı' (Secure Communication Shield). The application addresses the critical problem of increasing cyber threats, specifically targeting personal and corporate email accounts through sophisticated phishing, malware, and data breach attacks. The core value proposition is to provide users with a proactive, AI-powered defense system that not only detects and blocks threats in real-time but also educates them about evolving cyber risks. This shield will protect high-profile individuals, public officials, journalists, lawyers, and SMEs who handle sensitive data and are prime targets for state-sponsored or organized cybercriminal groups.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and a consistent design system.
- State Management: Zustand for efficient and scalable global state management.
- Routing: React Router DOM for handling navigation within the SPA.
- API Communication: Axios for making HTTP requests to a hypothetical backend API.
- Icons: Heroicons for a clean and modern icon set.
- Utilities: Lodash for utility functions, date-fns for date manipulation.
CORE FEATURES:
1. **Dashboard Overview:**
* **User Flow:** Upon login, the user lands on the dashboard. The dashboard displays a summary of the current security status (e.g., 'Secure', 'Warning', 'Critical'), recent threat detections, a count of blocked emails/links, and quick access buttons to key features like 'Scan Inbox' or 'View Reports'.
* **Details:** Visualizations (e.g., charts for threat types over time) and key metrics are presented clearly.
* **Loading State:** A skeleton loader or a subtle animation will be shown while fetching data.
* **Empty State:** If no threats have been detected, a friendly message indicating current security and encouraging regular use will be displayed.
2. **Email Scanning & Analysis:**
* **User Flow:** Users can manually initiate an inbox scan or the system can perform periodic background scans (simulated in MVP). The scanning process involves analyzing email headers, sender reputation, link destinations (using a simulated URL checker), and attachment metadata for known malicious patterns or AI-detected anomalies.
* **Details:** The system will categorize threats (e.g., Phishing, Malware, Spam, Suspicious Link).
* **Feedback:** A progress indicator will show the scanning status. Upon completion, detected threats are listed with severity levels.
3. **Threat Management:**
* **User Flow:** Detected threats are listed in a dedicated 'Threats' section. Each threat entry shows the email subject, sender, threat type, detected date, and status (e.g., 'Blocked', 'Quarantined', 'Ignored'). Users can take actions like 'Quarantine', 'Delete', 'Mark as Safe', or 'View Details'.
* **Details:** Threat details might include snippets of the email content, the specific malicious element identified, and recommended actions.
* **Filtering/Sorting:** Users can filter threats by type, date, or status.
4. **Security Education:**
* **User Flow:** Accessible via a 'Learn' or 'Security Tips' section. This module presents bite-sized, actionable advice on cybersecurity best practices, common attack vectors, and how to stay safe online. Content is updated regularly (simulated in MVP).
* **Details:** Short articles, infographics, or video links (simulated) covering topics like password hygiene, recognizing phishing attempts, and secure browsing.
UI/UX DESIGN:
- **Layout:** A clean, modern, and intuitive single-page application layout. A persistent sidebar navigation will allow easy access to Dashboard, Scan, Threats, and Education sections. The main content area will display the relevant information for the selected section.
- **Color Palette:** Primary: Deep Blue (#1A202C) for backgrounds and primary elements, Secondary: Teal (#38B2AC) for accents, calls-to-action, and positive indicators. Warning: Orange (#ED8936), Danger: Red (#F56565). Neutral: Light Grays for text and borders.
- **Typography:** Sans-serif fonts like 'Inter' or 'Manrope' for readability. Clear hierarchy using font sizes and weights.
- **Responsive Design:** Mobile-first approach. The layout will adapt seamlessly to various screen sizes (mobile, tablet, desktop) using Tailwind CSS's responsive modifiers (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for route changes and modal appearances. Clear loading indicators.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing.
- `Layout.js`: Wrapper component containing the sidebar and main content area. Handles responsive sidebar toggling.
- `Sidebar.js`: Navigation menu component. Receives current route as prop.
- `Dashboard.js`: Displays security overview, charts, and key metrics. Fetches data. Uses `StatCard.js`, `ThreatChart.js`, `RecentThreatsList.js`.
- `StatCard.js`: Displays a single statistic (e.g., 'Threats Blocked'). Props: `title`, `value`, `icon`.
- `ThreatChart.js`: Renders a chart visualizing threat trends. Props: `data`.
- `RecentThreatsList.js`: Displays a summarized list of recent threats. Props: `threats`.
- `ScanPage.js`: Manages the email scanning process. Includes a 'Start Scan' button and progress display. Uses `ScanProgress.js`.
- `ScanProgress.js`: Visualizes the scanning progress. Props: `progress`, `status`.
- `ThreatsPage.js`: Lists all detected threats. Includes filtering and sorting options. Uses `ThreatsTable.js`.
- `ThreatsTable.js`: Renders the threat data in a table format. Props: `threats`, `actions`.
- `ThreatDetailModal.js`: Modal to display detailed information about a specific threat. Props: `threat`, `isOpen`, `onClose`.
- `EducationPage.js`: Displays security tips and educational content. Uses `ArticleCard.js`.
- `ArticleCard.js`: Displays a summary of an educational article. Props: `title`, `summary`, `imageUrl`.
- `Login.js` / `AuthGuard.js`: (Simulated) Handles user authentication.
- `Button.js`: Reusable button component. Props: `onClick`, `children`, `variant`, `isLoading`.
- `Modal.js`: Generic modal component. Props: `isOpen`, `onClose`, `children`.
DATA MODEL:
- **State:** Managed using Zustand. Key stores might include `authStore`, `dashboardStore`, `threatStore`, `scanStore`.
- **Mock Data Structures:**
* `Threat`: `{ id: string, subject: string, sender: string, date: string, type: 'Phishing' | 'Malware' | 'Suspicious Link' | 'Spam', severity: 'High' | 'Medium' | 'Low', status: 'Blocked' | 'Quarantined' | 'Ignored', details: string }`
* `ScanResult`: `{ scannedEmails: number, threatsDetected: number, duration: string, detectedThreats: Threat[] }`
* `SecurityMetrics`: `{ totalBlocked: number, currentStatus: string, recentThreats: Threat[], threatTrend: { date: string, count: number }[] }`
* `EducationArticle`: `{ id: string, title: string, summary: string, content: string, imageUrl?: string }`
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out animations using `Framer Motion` or CSS transitions for route changes.
- **Button Hover:** Slight scale or background color change on button hover.
- **Loading States:** Skeleton loaders for data fetching. Spinner components within buttons during async operations (e.g., 'Start Scan').
- **Micro-interactions:** Smooth expansion/collapse of list items, subtle pulsing on critical alerts.
- **Modal Animations:** Fade-in and slight slide-up effect for modal appearance.
EDGE CASES:
- **Authentication:** Handling expired tokens, login errors, and guiding users through the login process.
- **Empty States:** Displaying informative and encouraging messages when there are no threats detected, no scan history, or no educational content loaded.
- **Error Handling:** Graceful error messages for API failures (e.g., 'Could not fetch data, please try again'), scan interruptions, or invalid user input (though MVP focuses less on user input).
- **Data Fetching Errors:** Displaying specific error messages and potentially retry mechanisms.
- **Accessibility (a11y):** Using semantic HTML, ARIA attributes where necessary, ensuring sufficient color contrast, and keyboard navigability.
- **Rate Limiting:** (Backend consideration, but frontend should handle potential errors) Ensuring users don't overload the system with rapid scan requests.
SAMPLE DATA:
(Mock data simulating API responses)
`mockDashboardMetrics`:
```json
{
"totalBlocked": 15,
"currentStatus": "Secure",
"recentThreats": [
{
"id": "thrt_001",
"subject": "Urgent: Account Verification Required",
"sender": "support@example-phish.com",
"date": "2023-10-27T10:30:00Z",
"type": "Phishing",
"severity": "High",
"status": "Blocked",
"details": "Link to fake login page detected."
},
{
"id": "thrt_002",
"subject": "Invoice Attached",
"sender": "billing@example-malware.net",
"date": "2023-10-26T15:00:00Z",
"type": "Malware",
"severity": "High",
"status": "Quarantined",
"details": "Executable file detected in attachment."
}
],
"threatTrend": [
{"date": "2023-10-20", "count": 2},
{"date": "2023-10-21", "count": 0},
{"date": "2023-10-22", "count": 1},
{"date": "2023-10-23", "count": 3},
{"date": "2023-10-24", "count": 1},
{"date": "2023-10-25", "count": 0},
{"date": "2023-10-26", "count": 2},
{"date": "2023-10-27", "count": 1}
]
}
```
`mockThreatsList`:
```json
[
{
"id": "thrt_001",
"subject": "Urgent: Account Verification Required",
"sender": "support@example-phish.com",
"date": "2023-10-27T10:30:00Z",
"type": "Phishing",
"severity": "High",
"status": "Blocked",
"details": "User was prompted to click a link that led to a credential harvesting site disguised as a legitimate login portal. The link destination was identified and blocked."
},
{
"id": "thrt_002",
"subject": "Invoice Attached",
"sender": "billing@example-malware.net",
"date": "2023-10-26T15:00:00Z",
"type": "Malware",
"severity": "High",
"status": "Quarantined",
"details": "An attached .zip file contained a known trojan malware. The file was quarantined to prevent execution."
},
{
"id": "thrt_003",
"subject": "Update Your Payment Information",
"sender": "accounts@example-suspicious.org",
"date": "2023-10-25T09:15:00Z",
"type": "Suspicious Link",
"severity": "Medium",
"status": "Blocked",
"details": "Email contained a link to a non-standard URL that exhibited characteristics of a potential malware distribution site."
},
{
"id": "thrt_004",
"subject": "Your Order Confirmation #789123",
"sender": "no-reply@legit-ecommerce.com",
"date": "2023-10-27T11:00:00Z",
"type": "Spam",
"severity": "Low",
"status": "Ignored",
"details": "Marked as spam due to sender reputation and content analysis, but not deemed malicious."
}
]
```
`mockScanResult`:
```json
{
"scannedEmails": 582,
"threatsDetected": 2,
"duration": "45s",
"detectedThreats": [
{
"id": "thrt_001",
"subject": "Urgent: Account Verification Required",
"sender": "support@example-phish.com",
"date": "2023-10-27T10:30:00Z",
"type": "Phishing",
"severity": "High",
"status": "Blocked",
"details": "User was prompted to click a link that led to a credential harvesting site disguised as a legitimate login portal. The link destination was identified and blocked."
},
{
"id": "thrt_002",
"subject": "Invoice Attached",
"sender": "billing@example-malware.net",
"date": "2023-10-26T15:00:00Z",
"type": "Malware",
"severity": "High",
"status": "Quarantined",
"details": "An attached .zip file contained a known trojan malware. The file was quarantined to prevent execution."
}
]
}
```
`mockEducationArticles`:
```json
[
{
"id": "edu_001",
"title": "Recognizing Phishing Emails",
"summary": "Learn the tell-tale signs of phishing emails to protect your accounts.",
"content": "Phishing emails often create a sense of urgency...",
"imageUrl": "/images/phishing-tips.png"
},
{
"id": "edu_002",
"title": "Password Security Best Practices",
"summary": "Tips for creating strong, unique passwords and using password managers.",
"content": "Your password is the first line of defense...",
"imageUrl": "/images/password-security.png"
},
{
"id": "edu_003",
"title": "What is Multi-Factor Authentication (MFA)?",
"summary": "Understand how MFA adds an extra layer of security to your accounts.",
"content": "MFA requires more than just a password...",
"imageUrl": "/images/mfa-explained.png"
}
]
```
DEPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed. `npm run build` command will generate optimized static assets in the `dist` folder.
- **Environment Variables:** Use `.env` files for managing API endpoints, authentication keys, and other configuration settings. Prefix variables with `VITE_` (e.g., `VITE_API_URL`).
- **Performance:** Code splitting using React.lazy and Suspense for route-based loading. Image optimization (using appropriate formats like WebP and lazy loading). Minimize bundle size by analyzing dependencies.
- **Hosting:** Deployable to static hosting platforms like Netlify, Vercel, or AWS S3/CloudFront.
- **HTTPS:** Ensure the deployment environment enforces HTTPS for secure communication.
- **Caching:** Implement appropriate browser caching strategies for static assets.
- **CORS:** Ensure backend API is configured to handle Cross-Origin Resource Sharing (CORS) if the frontend and backend are on different domains.