You are an expert AI full-stack developer tasked with creating a single-page application (SPA) using React, Tailwind CSS, and local storage for state management. The application's purpose is to help users who have been banned or restricted on Meta platforms (Facebook, Instagram, etc.) by providing tools to analyze their account status, guide them through the appeal process, and offer proactive content moderation risk assessment. This is a B2C SaaS application.
## PROJECT OVERVIEW:
**Project Name:** Meta BanShield
**Goal:** To empower users facing unjustified bans or restrictions on Meta platforms by providing them with the tools and guidance needed to recover their accounts and maintain a healthy digital presence. The application aims to demystify Meta's complex and often opaque content moderation policies and appeal processes.
**Problem Solved:** Many users, especially content creators, small businesses, and activists, suffer from arbitrary or erroneous account suspensions on Meta platforms, leading to significant loss of reach, income, and community. The appeal process is often confusing and ineffective. Meta BanShield offers a structured approach to navigate these challenges.
**Value Proposition:** Recover your banned Meta account and protect your digital presence with expert analysis, guided appeals, and proactive risk assessment. We help you fight unfair bans and maintain your online voice.
## TECH STACK:
* **Frontend Framework:** React (using Vite for fast development)
* **Styling:** Tailwind CSS (with Headless UI for accessible components)
* **State Management:** React Context API and `useState`/`useReducer` hooks. Local Storage for persisting user data and application state across sessions.
* **Routing:** React Router DOM (for potential future expansion, though initially a single page)
* **Form Handling:** React Hook Form (for robust form validation)
* **API Interaction (Simulated):** Placeholder API or mock data functions for simulating Meta's backend responses.
* **Utility Libraries:** `uuid` for unique IDs, `date-fns` for date manipulation.
## CORE FEATURES:
1. **Account Status Analyzer:**
* **User Flow:** User navigates to the 'Analyze Account' section. They are prompted to input their Meta account username/link and select the platform (Facebook/Instagram). The application simulates a check against hypothetical Meta API endpoints (using mock data). It then displays the current status (e.g., 'Restricted', 'Suspended', 'Permanently Banned'), a summary of potential violation categories based on common Meta policies (e.g., 'Hate Speech', 'Spam', 'Intellectual Property'), and a confidence score for the detected issue.
* **Details:** This feature provides a clear, concise summary of the account's predicament. It should highlight the *most likely* reasons for the ban, drawing from a predefined knowledge base of Meta's Community Standards.
2. **Appeal Process Guide:**
* **User Flow:** If an account is flagged as banned/restricted, the user can access the 'Appeal Account' feature. Based on the analysis, the application presents a step-by-step guide. It offers pre-written, customizable appeal templates tailored to the identified violation type. Users can edit these templates, add their own context, and then copy the final text for submission to Meta.
* **Details:** The guide should include tips on writing effective appeals, common pitfalls to avoid, and information on typical response times. Templates should be professional and neutral in tone, focusing on factual arguments and adherence to policies.
3. **Content Risk Assessor:**
* **User Flow:** Users can input text or paste a URL of a draft post. The application analyzes the content against a simplified model of Meta's policies, looking for keywords, sentiment, and patterns associated with violations (e.g., prohibited topics, potentially misleading information). It provides a risk score ('Low', 'Medium', 'High') and specific warnings (e.g., 'Potential hate speech detected', 'May be flagged as spam').
* **Details:** This is a proactive tool. It should educate users on what constitutes risky content and help them adjust their posts *before* publishing on Meta, thereby reducing the chance of future bans.
4. **Digital Reputation Log (MVP - Basic):**
* **User Flow:** A dedicated section where users can optionally log their appeal outcomes (Success/Failure) and notable account events. This data is stored locally and serves as a personal record.
* **Details:** This feature provides users with a personal history of their interactions with Meta's moderation system, helping them track patterns and success rates over time.
## UI/UX DESIGN:
* **Layout:** Single-page application layout. A clean, modern, and professional design. A persistent sidebar or top navigation bar for accessing the core features. Main content area dynamically updates based on the selected feature. Use of cards for displaying information modules (e.g., analysis results, appeal steps).
* **Color Palette:** Primary: A deep, trustworthy blue (`#1E3A8A`). Secondary: A calming grey (`#6B7280`). Accent: A hopeful green for success states (`#10B981`) and a warning orange for risks (`#F97316`). White/off-white backgrounds (`#FFFFFF`, `#F3F4F6`). Use dark mode toggle for accessibility and user preference.
* **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Clear hierarchy with distinct heading sizes (e.g., `text-3xl`, `text-xl`, `text-lg`) and body text (`text-base`).
* **Responsive Design:** Mobile-first approach. Tailwind CSS's responsive prefixes (`sm:`, `md:`, `lg:`) will be used extensively. Ensure the layout adapts seamlessly from small mobile screens to large desktop monitors. Navigation should collapse into a hamburger menu on smaller screens. Content should reflow and resize appropriately.
* **Key Components:** Sidebar/Nav Menu, Feature Card, Input Field, Text Area, Button (Primary, Secondary, Destructive), Alert/Notification Banner, Progress Indicator, Modal Dialog, Tooltip.
## COMPONENT BREAKDOWN:
* **`App.jsx`:** Main application component, sets up routing (if used), context providers, and main layout.
* **`Layout.jsx`:** Wraps the entire application, includes Header, Sidebar/Nav, and main content area. Handles responsiveness of navigation.
* **`Sidebar.jsx`:** Navigation component. Displays links to different features. Manages active link state.
* Props: `onNavigate` (function), `activeItem` (string).
* **`AccountAnalyzer.jsx`:** Container for the account analysis feature.
* Contains `PlatformSelector`, `UsernameInput`, `AnalysisResultCard`.
* **`PlatformSelector.jsx`:** Radio buttons or dropdown to select Facebook/Instagram.
* Props: `onChange` (function).
* **`UsernameInput.jsx`:** Input field for username/URL.
* Props: `value`, `onChange`, `label`, `placeholder`.
* **`AnalysisResultCard.jsx`:** Displays the results of the account analysis.
* Props: `analysisData` (object containing status, reason, score).
* **`AppealGuide.jsx`:** Container for the appeal process guidance.
* Contains `ViolationTypeDisplay`, `AppealTemplateSelector`, `AppealEditor`, `SubmitButton`.
* **`ViolationTypeDisplay.jsx`:** Shows the identified violation type.
* Props: `violationType`.
* **`AppealTemplateSelector.jsx`:** Dropdown or list to choose an appeal template.
* Props: `templates` (array), `onSelect` (function).
* **`AppealEditor.jsx`:** Text area for editing the appeal message.
* Props: `initialContent`, `onChange` (function).
* **`ContentRiskAssessor.jsx`:** Container for the content analysis feature.
* Contains `ContentInput`, `RiskResultDisplay`.
* **`ContentInput.jsx`:** Text area for pasting content or URL input.
* Props: `value`, `onChange`.
* **`RiskResultDisplay.jsx`:** Shows the risk score and warnings.
* Props: `riskData` (object containing score, warnings).
* **`ReputationLog.jsx`:** Displays the user's digital reputation history.
* Contains `LogEntryForm`, `LogTable`.
* **`LogEntryForm.jsx`:** Form to add new log entries (event, outcome).
* Props: `onSubmit`.
* **`LogTable.jsx`:** Table displaying historical log entries.
* Props: `entries`.
* **`LoadingSpinner.jsx`:** Reusable loading indicator.
* **`ErrorMessage.jsx`:** Reusable component for displaying errors.
## DATA MODEL:
* **`appState` (Local Storage / Context):**
* `userProfile`: { `username`: string, `platform`: string, `accountStatus`: object | null, `analysisHistory`: array, `appealHistory`: array, `contentLog`: array, `settings`: { `darkMode`: boolean } }
* `currentFeature`: string (e.g., 'analyzer', 'appeal', 'risk-assessor')
* **`AnalysisResult` (Mock Data Structure):**
* `status`: 'Active' | 'Restricted' | 'Suspended' | 'Banned'
* `detectedViolations`: [
{ `type`: string, `description`: string, `confidence`: number (0-1) }
* ]
* `suggestedAction`: 'Submit Appeal' | 'Review Content' | 'Contact Support'
* **`AppealTemplate`:**
* `id`: string
* `type`: string (e.g., 'Hate Speech', 'Spam')
* `title`: string
* `body`: string (template string with placeholders like `{username}`)
* **`ContentAnalysisResult`:**
* `riskLevel`: 'Low' | 'Medium' | 'High'
* `warnings`: string[]
* **`ReputationLogEntry`:**
* `id`: string
* `timestamp`: string (ISO format)
* `eventType`: 'Account Ban' | 'Appeal Submitted' | 'Appeal Success' | 'Appeal Failure' | 'Content Warning'
* `details`: string
## ANIMATIONS & INTERACTIONS:
* **Page Transitions:** Subtle fade-in/fade-out effect when switching between features using `Framer Motion` or CSS transitions.
* **Button Hovers:** Slight scale-up or background color change on button hover states.
* **Loading States:** Display `LoadingSpinner` component with a translucent overlay when fetching/analyzing data. Spinner should have a smooth rotation animation.
* **Input Focus:** Subtle border color change on input fields when they are in focus.
* **Alerts/Notifications:** Slide-in animation for success or error messages at the top or bottom of the screen.
* **Micro-interactions:** E.g., Checkmark animation on successful form submission, subtle animation when analysis results appear.
## EDGE CASES:
* **Empty States:** All lists (history, results) should display friendly empty state messages (e.g., 'No analysis history yet. Try analyzing an account!', 'No appeal templates found for this violation.').
* **Error Handling:** Network errors (simulated), invalid user input, API failures. Display clear `ErrorMessage` components. Provide retry options where applicable.
* **Validation:** Input fields for username, content. Ensure URLs are somewhat valid. Appeal editor should have character count limits if specified by Meta (though this is simulated).
* **Accessibility (a11y):** Use semantic HTML. Ensure sufficient color contrast. All interactive elements should be focusable and operable via keyboard. ARIA attributes should be used where necessary (e.g., for dynamic content updates, loading states).
* **No Meta API:** Clearly state that this application does not have direct access to Meta's internal systems and relies on user input and pattern analysis based on publicly known policies. Manage user expectations.
## SAMPLE DATA:
1. **Mock Analysis Result (Suspended - Hate Speech):**
```json
{
"status": "Suspended",
"detectedViolations": [
{ "type": "Hate Speech", "description": "Content targeting protected characteristics.", "confidence": 0.85 },
{ "type": "Community Standards Violation", "description": "General breach of platform rules.", "confidence": 0.60 }
],
"suggestedAction": "Submit Appeal"
}
```
2. **Mock Analysis Result (Banned - Spam):**
```json
{
"status": "Banned",
"detectedViolations": [
{ "type": "Spam", "description": "Repetitive or unwanted commercial content.", "confidence": 0.90 }
],
"suggestedAction": "Review Content"
}
```
3. **Mock Appeal Template (Hate Speech):**
```json
{
"id": "template-hs-1",
"type": "Hate Speech",
"title": "Appeal Regarding Hate Speech Violation",
"body": "Dear Meta Support Team,\n\nI am writing to appeal the recent decision regarding my account {username}. I believe the suspension for 'Hate Speech' may have been a misunderstanding. I have reviewed Meta's Community Standards on Hate Speech and do not believe my content violates these guidelines. [Optional: Explain context or provide specific examples if applicable]. I am committed to maintaining a positive and compliant presence on your platform. I kindly request a review of my account and the content in question.\n\nSincerely,\n{username}"
}
```
4. **Mock Content Analysis (Low Risk):**
```json
{
"riskLevel": "Low",
"warnings": []
}
```
5. **Mock Content Analysis (High Risk):**
```json
{
"riskLevel": "High",
"warnings": [
"Content contains potentially aggressive language.",
"Topic may be sensitive and could violate policies on harassment."
]
}
```
6. **Mock Reputation Log Entry (Appeal Success):**
```json
{
"id": "log-001",
"timestamp": "2023-10-27T10:00:00Z",
"eventType": "Appeal Success",
"details": "Account reinstated after appeal for spam violation."
}
```
7. **User Profile (Initial State):**
```json
{
"username": null,
"platform": null,
"accountStatus": null,
"analysisHistory": [],
"appealHistory": [],
"contentLog": [],
"settings": { "darkMode": false }
}
```
## DEPLOYMENT NOTES:
* **Build Tool:** Vite is recommended for its speed. `npm run build` or `yarn build`.
* **Environment Variables:** Use `.env` files for API keys (if any are added later) or configuration settings. `VITE_` prefix for frontend variables.
* **Performance:** Optimize React components using `React.memo`, `useCallback`. Code-splitting if the app grows beyond a single page. Lazy loading images and components. Bundle analysis to identify optimization opportunities.
* **State Persistence:** Ensure `appState` is reliably saved to `localStorage` on changes and loaded on application initialization. Use debouncing or throttling for frequent updates to localStorage to improve performance.
* **Error Boundaries:** Implement React Error Boundaries to catch rendering errors and prevent the entire app from crashing.
* **Service Workers:** Consider implementing a service worker for potential offline capabilities or faster loading on subsequent visits (PWA).