You are an AI assistant tasked with generating a single-page React application using Next.js and Tailwind CSS. The application, named 'Veri Kalkanı' (Data Shield), aims to help users track their unique email addresses used for various services to identify which service or data broker might be leaking their information. This follows a real user problem reported on Hacker News where a user discovered their unique email, used only for BrowserStack, was found by Apollo.io, indicating a potential data leak or unauthorized sharing.
**PROJECT OVERVIEW:**
Veri Kalkanı provides individuals with a robust system to manage and monitor unique email addresses assigned to different online services. By generating distinct email aliases for each sign-up, users can pinpoint exactly which service or third-party data broker is responsible for subsequent unsolicited emails or data breaches. The core value proposition is to empower users with granular control over their digital identity privacy, offering peace of mind and actionable insights into data leakages. It directly addresses the problem of opaque data sharing practices and the difficulty in tracing the origin of email address leaks.
**TECH STACK:**
- **Framework:** Next.js (App Router for structure, API routes for backend logic)
- **UI Library:** Tailwind CSS (for rapid, utility-first styling)
- **State Management:** Zustand (lightweight, easy to integrate)
- **Form Handling:** React Hook Form (for efficient form validation and management)
- **Icons:** lucide-react (for clean, versatile icons)
- **Date Handling:** date-fns (for robust date manipulation)
- **Utilities:** clsx (for conditional class naming)
- **Deployment:** Vercel (recommended for Next.js)
**CORE FEATURES:**
1. **Email Alias Management:**
* **User Flow:** Upon first use, the user is prompted to set up a base email domain or a catch-all email address (e.g., `user@yourdomain.com` or `*.yourdomain.com`). The app will then help generate unique aliases like `service-name-uniqueid@yourdomain.com` or `uniqueid@yourdomain.com`. Users can manually add existing aliases they use for specific services or let the app generate new ones.
* **Functionality:** A dashboard displays a list of all managed email aliases. Each entry shows the service name, the generated alias, the date created, and its current status (e.g., 'Active', 'Leaked'). Users can add, edit, or delete aliases. A 'Generate New Alias' button provides a quick way to create a fresh alias, potentially incorporating a service name or a random string.
2. **Leak Detection & Notification:**
* **User Flow:** The system periodically (simulated in MVP, real-time via email server integration in future) checks incoming emails to the managed aliases. If an email arrives at an alias not associated with its supposed service (e.g., a spam email arrives at `browserstack-xyz@yourdomain.com` from an unknown sender, or an email is sent to an alias designated for 'Service A' but appears to originate from a breach related to 'Service B'), the system flags it.
* **Functionality:** The backend API (Next.js API route) would ideally integrate with an email service (like Mailgun, SendGrid, or a custom IMAP/POP3 setup) to process incoming emails. For the MVP, this will be simulated. When a potential leak is detected, the 'Status' of the corresponding alias is updated to 'Suspected Leak', and a notification is sent to the user via the app's UI.
3. **Source Tracking & Reporting:**
* **User Flow:** When an alias is flagged as a 'Suspected Leak', the user can navigate to a detailed view for that alias. This view presents the evidence: the alias, the service it was intended for, and the details of the suspicious email (sender, subject, approximate time). The user can then trigger a basic report.
* **Functionality:** A 'Generate Report' button creates a concise summary including the alias, associated service, timestamp of the suspicious email, and a placeholder for the suspected source (e.g., 'BrowserStack via Apollo.io' based on the Hacker News example). This report can be copied or downloaded.
4. **Communication Templates:**
* **User Flow:** Within the detailed view of a leaked alias, users find pre-written email templates.
* **Functionality:** These templates are designed to be copied and sent to the suspected service provider or data broker. They include placeholders for specific details like the alias, service name, and date of breach discovery. Example templates might range from a simple inquiry to a more formal GDPR/CCPA-related data breach notification request.
**UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) feel using Next.js. A clean, responsive sidebar navigation for main sections (Dashboard, Manage Aliases, Settings). The main content area displays the relevant information.
- **Color Palette:** Primary: `#1f2937` (Dark Slate Gray) for backgrounds/dark mode. Secondary: `#0369a1` (Strong Blue) for primary actions and accents. Accent: `#facc15` (Vivid Yellow) for alerts/warnings. Neutrals: Shades of gray (`#e5e7eb`, `#9ca3af`) for text and borders. White (`#ffffff`) for light mode backgrounds and text on dark backgrounds.
- **Typography:** Inter font family. Headings: Inter Bold (e.g., `h1`, `h2`). Body Text: Inter Regular. Ensure good readability and hierarchy.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Use Tailwind's responsive modifiers (sm:, md:, lg:).
**COMPONENT BREAKDOWN:**
- `Layout.jsx`: Main wrapper component. Includes sidebar, header, main content area. Manages responsiveness of navigation.
- `Sidebar.jsx`: Navigation links (Dashboard, Aliases, Settings). Handles collapse/expand state.
- `Header.jsx`: Application title and user profile/settings access.
- `Dashboard.jsx`: Overview page. Shows summary statistics (Total Aliases, Suspected Leaks, Recent Activity).
- `AliasManager.jsx`: Main interface for managing email aliases.
- `AliasList.jsx`: Displays the table/list of aliases. Handles sorting and filtering.
- `AliasListItem.jsx`: Represents a single alias row in the list. Displays service, alias, date, status. Includes quick action buttons (View Details, Edit, Delete).
- `AliasForm.jsx`: Modal or section for adding/editing an alias. Uses `react-hook-form`.
- `AliasDetailView.jsx`: Displays detailed information for a selected alias.
- `LeakDetails.jsx`: Shows information about the suspected leak.
- `ReportGenerator.jsx`: Button and logic to generate the summary report.
- `TemplateSelector.jsx`: Displays available communication templates.
- `Settings.jsx`: User preferences, base email domain configuration.
- `NotificationBanner.jsx`: Displays temporary alerts or system messages.
**DATA MODEL (Zustand Store):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
// User Configuration
baseEmailDomain: '', // e.g., 'example.com'
catchAllEnabled: false, // true if using *.example.com
setBaseEmailDomain: (domain) => set({ baseEmailDomain: domain }),
setCatchAllEnabled: (enabled) => set({ catchAllEnabled: enabled }),
// Email Aliases
aliases: [], // Array of alias objects
addAlias: (alias) => set((state) => ({ aliases: [...state.aliases, alias] })),
updateAliasStatus: (id, status) => set((state) => ({
aliases: state.aliases.map(a => a.id === id ? { ...a, status } : a)
})),
deleteAlias: (id) => set((state) => ({ aliases: state.aliases.filter(a => a.id !== id) })),
setAliases: (aliases) => set({ aliases }),
// Selected Alias for Detail View
selectedAlias: null,
setSelectedAlias: (aliasId) => set(state => ({
selectedAlias: state.aliases.find(a => a.id === aliasId) || null
})),
// Loading States
isLoading: false,
setLoading: (loading) => set({ isLoading: loading }),
// Errors
error: null,
setError: (err) => set({ error: err }),
}));
export default useStore;
// Mock Alias Object Structure:
// {
// id: string (uuid),
// serviceName: string,
// alias: string (e.g., 'service-xyz@yourdomain.com'),
// createdAt: Date,
// status: 'Active' | 'Suspected Leak' | 'Leaked Confirmed'
// leakDetails: {
// suspiciousEmailSender?: string,
// suspiciousEmailSubject?: string,
// detectedAt?: Date
// } | null
// }
```
**ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and list items.
- **Transitions:** Smooth transitions for modal popups, sidebar collapse/expand, and route changes (if using Next.js dynamic routing within the SPA). Use Tailwind's transition utilities.
- **Loading States:** Display spinners or skeleton loaders (`react-loading-skeleton` or custom Tailwind divs) while data is being fetched (e.g., loading aliases from mock API, processing emails).
- **Micro-interactions:** Visual feedback on button clicks, form submission success/error messages appearing smoothly.
**EDGE CASES:**
- **Empty State:** When no aliases are added, display a clear message with a call-to-action to create the first alias.
- **Error Handling:** Implement try-catch blocks for API calls. Display user-friendly error messages using the `error` state and `NotificationBanner.jsx`. Handle cases like invalid domain input, failed data fetching.
- **Validation:** Use `react-hook-form` for validating inputs::
* Base Email Domain: Must be a valid domain format.
* Service Name: Cannot be empty.
* Alias Generation: Ensure generated aliases are unique and follow a reasonable pattern.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigation should be fully supported. Color contrast ratios should meet WCAG AA standards.
**SAMPLE DATA (Mock Data for Aliases):**
(These would be part of the initial state or fetched from a mock API)
```javascript
[
{
id: 'uuid-1',
serviceName: 'BrowserStack',
alias: 'browserstack-abc123@mydomain.com',
createdAt: new Date('2023-10-26T10:00:00Z'),
status: 'Suspected Leak',
leakDetails: {
suspiciousEmailSender: 'spammer@suspicious-source.net',
suspiciousEmailSubject: 'Special Offer Just For You!',
detectedAt: new Date('2024-03-10T14:30:00Z')
}
},
{
id: 'uuid-2',
serviceName: 'GitHub',
alias: 'github-def456@mydomain.com',
createdAt: new Date('2023-11-15T09:00:00Z'),
status: 'Active',
leakDetails: null
},
{
id: 'uuid-3',
serviceName: 'Netflix',
alias: 'netflix-ghi789@mydomain.com',
createdAt: new Date('2024-01-05T11:30:00Z'),
status: 'Active',
leakDetails: null
},
{
id: 'uuid-4',
serviceName: 'ExampleCorp (Internal)',
alias: 'examplecorp-jkl012@mydomain.com',
createdAt: new Date('2024-02-20T16:45:00Z'),
status: 'Active',
leakDetails: null
},
{
id: 'uuid-5',
serviceName: 'DataBrokerX',
alias: 'databrokerx-mno345@mydomain.com',
createdAt: new Date('2024-03-01T08:15:00Z'),
status: 'Suspected Leak',
leakDetails: {
suspiciousEmailSender: 'marketing@another-site.com',
suspiciousEmailSubject: 'Your Account Information',
detectedAt: new Date('2024-03-11T09:00:00Z')
}
}
]
```
**DEPLOYMENT NOTES:**
- Ensure environment variables (like `NEXT_PUBLIC_API_URL` if using separate backend, or future email service credentials) are configured correctly in Vercel.
- Optimize images and code splitting using Next.js built-in features.
- Consider setting up a basic email forwarding service (e.g., using AWS SES or a third-party provider) for the `baseEmailDomain` to make the leak detection feature functional beyond simulation.
- Implement a robust authentication system (e.g., NextAuth.js) if user accounts are needed beyond simple local storage persistence for the MVP.
- For MVP, mock API calls using `setTimeout` to simulate network latency and data fetching.