You are an AI assistant tasked with generating a single-page React application for an email obfuscation service based on the provided concept and requirements. The application should be a Single Page Application (SPA) built with React and styled using Tailwind CSS. It needs to offer a user-friendly interface for website owners to protect their email addresses from spam bots and harvesters.
PROJECT OVERVIEW:
The application aims to solve the problem of email address harvesting from websites. Spammers and malicious bots constantly scan websites for plain text email addresses to collect them for unsolicited emails and phishing attempts. This service provides website owners with an easy-to-use tool to obfuscate their email addresses, making them unreadable to bots but still visible and clickable to human users. The core value proposition is enhanced email privacy, reduced spam, and increased user trust.
TECH STACK:
- Frontend Framework: React (using Vite for fast development server and build)
- Styling: Tailwind CSS for rapid UI development and a clean, modern aesthetic.
- State Management: Zustand or React Context API for managing application state.
- Routing: React Router DOM for navigation within the SPA (if needed for future expansion, but initially a single page).
- Utility Libraries: `react-icons` for icons, `uuid` for unique IDs if necessary.
- Build Tool: Vite
CORE FEATURES:
1. **Email Input & Obfuscation Control:**
* **User Flow:** The user enters their email address into a designated input field. They can then select from a list of available obfuscation techniques. Upon clicking a 'Generate' or 'Obfuscate' button, the application processes the input and displays the obfuscated code snippet and a preview.
* **Functionality:** Accepts a standard email format. Provides options like HTML Entities, Simple JavaScript `encode`/`decode`, CSS `content` property trick, etc. Generates the corresponding HTML/JavaScript code.
2. **Obfuscation Method Selection:**
* **User Flow:** A clear list or dropdown menu allows users to choose their preferred obfuscation method (e.g., 'HTML Entities', 'JS Encode', 'CSS Trick'). The selection updates the generation logic.
* **Functionality:** Each method will have a different implementation logic. The UI should clearly label each method and potentially offer a brief explanation of its effectiveness (referencing the Hacker News article's findings).
3. **Code Snippet Generation & Preview:**
* **User Flow:** After obfuscation, the application displays the generated code snippet (HTML and/or JS) in a copyable format. A live preview area shows how the obfuscated email would appear on a webpage.
* **Functionality:** The generated snippet should be well-formatted and ready to be pasted into a website's HTML. The preview should render the obfuscated email using the chosen method, allowing users to test if it's clickable for them.
4. **Copy to Clipboard:**
* **User Flow:** A prominent 'Copy Code' button next to the generated snippet allows users to easily copy the code to their clipboard.
* **Functionality:** Utilizes the browser's Clipboard API for efficient copying.
5. **Basic Statistics (Placeholder for future):**
* **User Flow:** A section (initially mock data) that shows hypothetical statistics like 'Bots Blocked' or 'Harvesting Attempts Prevented'.
* **Functionality:** For MVP, this will display static or mock data. Future iterations could involve a backend to track actual attempts if integrated.
UI/UX DESIGN:
- **Layout:** Single-page application structure. A clean, two-column layout is recommended: one side for input and options, the other for output (preview and code). A prominent header with the app name and perhaps a simple navigation or feature list.
- **Color Palette:** Modern and clean. Primary color: a trustworthy blue or green. Secondary color: neutral grays for text and backgrounds. Accent color: for buttons and calls to action. Example: `#4A90E2` (Primary), `#F5F5F5` (Background), `#333333` (Text), `#50E3C2` (Accent).
- **Typography:** Sans-serif fonts like Inter or Poppins for a modern, readable look. Clear hierarchy using font sizes and weights.
- **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to different screen sizes. On smaller screens, columns might stack, and elements should be easily tappable.
- **Components:** Input fields, buttons, dropdowns/radio buttons for selection, code blocks with syntax highlighting (using a library like `react-syntax-highlighter`), preview panes, alert/toast messages for copy confirmation.
COMPONENT BREAKDOWN:
- `App.jsx`: Main component, sets up layout, potentially routing.
- `Header.jsx`: Displays the application title and branding.
- `InputSection.jsx`: Contains the email input field and the controls for selecting obfuscation methods.
* `EmailInput.jsx`: Input field for the email address. Props: `value`, `onChange`.
* `ObfuscationSelector.jsx`: Component to select the obfuscation method (e.g., using radio buttons or a dropdown). Props: `selectedMethod`, `onSelectMethod`, `methods` (array of available methods).
- `OutputSection.jsx`: Displays the generated code snippet and the live preview.
* `CodePreview.jsx`: Renders the generated code snippet with syntax highlighting. Props: `code`, `language`.
* `LivePreview.jsx`: Renders the obfuscated email as it would appear on a website. Props: `obfuscatedEmailHtml`.
* `CopyButton.jsx`: Button to copy the code snippet. Props: `codeToCopy`.
- `StatsDisplay.jsx` (Optional for MVP, could be mock): Displays statistics.
- `Footer.jsx`: Contains copyright information and links.
DATA MODEL:
- **State:** Use Zustand or Context API to manage:
* `email: string`: The user's input email address.
* `selectedMethod: string`: The currently chosen obfuscation method (e.g., 'htmlEntities', 'jsEncode').
* `obfuscatedCode: string`: The generated code snippet.
* `previewHtml: string`: The HTML structure for the live preview.
* `isLoading: boolean`: To indicate processing state.
* `message: { type: 'success' | 'error', text: string } | null`: For user feedback (e.g., 'Code copied!').
- **Mock Data:** Define available methods with their names, descriptions, and potentially the technique they use internally.
`const methods = [
{ id: 'htmlEntities', name: 'HTML Entities', description: 'Replaces characters with HTML entity codes. Good for basic bots.' },
{ id: 'jsEncode', name: 'JavaScript Encode', description: 'Uses JavaScript to encode/decode the email. More robust against simple scrapers.' },
// Add more methods as needed
];`
ANIMATIONS & INTERACTIONS:
- **Button Hovers:** Subtle background color change or slight scale-up on button hover.
- **Transitions:** Smooth transitions for UI elements appearing/disappearing (e.g., loading spinners, success messages).
- **Loading States:** When generating code, display a spinner or a subtle loading animation within the output area.
- **Micro-interactions:** Visual feedback when the 'Copy Code' button is clicked (e.g., button text changes briefly to 'Copied!', or a toast notification appears).
- **Input Focus:** Subtle border highlight on input fields when they are focused.
EDGE CASES:
- **Invalid Email Input:** Implement basic email format validation. Show an error message if the input is not a valid email address.
- **Empty Input:** Prevent generation if the email field is empty. Provide a clear message.
- **No Method Selected:** Prompt the user to select a method if none is chosen before generation.
- **API Errors (Future):** If backend integration occurs, handle potential API errors gracefully.
- **Copy Failure:** If the clipboard API fails, inform the user.
- **Accessibility (a11y):** Ensure proper ARIA attributes, keyboard navigation, focus management, and sufficient color contrast.
- **Browser Compatibility:** Test across modern browsers. Ensure fallback for older browsers if necessary (though focusing on modern tech stack implies targeting modern browsers).
SAMPLE DATA:
- **Input Email:** `test@example.com`
- **Selected Method:** `htmlEntities`
- **Generated Code (`obfuscatedCode`):**
```html
<a href="mailto:test@example.com">test@example.com</a>
```
- **Preview HTML (`previewHtml`):**
```html
<a href="mailto:test@example.com">test@example.com</a>
```
- **Selected Method:** `jsEncode`
- **Generated Code (`obfuscatedCode`):**
```html
<script>
function encodeEmail(str) {
let encoded = '';
for (let i = 0; i < str.length; i++) {
encoded += '%' + str.charCodeAt(i).toString(16).toUpperCase();
}
return encoded;
}
const email = encodeEmail('test@example.com');
document.write('<a href="mailto:' + decodeURIComponent(email) + '">test@example.com</a>');
</script>
<!-- Fallback for bots/JS disabled: <a href="mailto:test@example.com">test@example.com</a> -->
```
- **Preview HTML (`previewHtml`):**
```html
<a href="mailto:test@example.com">test@example.com</a>
```
- **Mock Statistics:**
`{ botsBlocked: 1578, harvestingAttempts: 3200 }`
DEPLOYMENT NOTES:
- Use Vite's build command (`npm run build`).
- Configure `base` in `vite.config.js` if deploying to a sub-path.
- Environment variables (if any) should be prefixed with `VITE_` and handled during the build process.
- Optimize production build for performance: code splitting, asset optimization. Ensure Lighthouse scores are high for performance, accessibility, and SEO (though SEO is less critical for a utility tool).
- Consider using a CDN for libraries like React if not bundled directly by Vite.
- Ensure the generated HTML snippet is self-contained and easy to integrate into existing websites.