You are a senior full-stack developer tasked with creating a single-page application (SPA) using React, Tailwind CSS, and necessary state management libraries. The application, named 'Account Guardian', aims to help users recover their suspended Google Workspace accounts and prevent future security issues. The user experienced a suspension due to a perceived security risk (accessing from overseas after removing a recovery phone number) which locked them out despite having other authentication methods.
## PROJECT OVERVIEW:
**Application Name:** Account Guardian
**Goal:** To provide a streamlined and supportive platform for users experiencing Google Workspace account suspension or lockout issues. The application will offer guided recovery processes, security analysis, and proactive measures to prevent future incidents.
**Problem Solved:** Users facing sudden Google Workspace account suspensions often struggle with Google's opaque recovery processes, leading to significant disruption in their work and communication. Account Guardian aims to simplify this by offering clear steps, actionable advice, and tools to facilitate account recovery and enhance security.
**Value Proposition:** Regain access to your critical Google Workspace account quickly and securely, with expert guidance and tools designed to navigate complex suspension scenarios and strengthen your account's defenses.
## TECH STACK:
- **Frontend Framework:** React.js (v18+)
- **Styling:** Tailwind CSS (v3+)
- **State Management:** Zustand (for global state) and React Context API (for localized state)
- **Routing:** React Router DOM (v6+)
- **HTTP Client:** Axios (for API requests if needed in the future, though MVP will focus on client-side logic and mock data)
- **Form Handling:** React Hook Form (for cleaner form management)
- **UI Components:** Headless UI (for accessible, unstyled components like modals, dropdowns) and custom Tailwind components.
- **Icons:** Heroicons
## CORE FEATURES (MVP):
1. **Dashboard Overview:**
* **User Flow:** Upon successful login (simulated for MVP), the user lands on a dashboard. This screen displays the current status of their Google Workspace account (simulated status: 'Active', 'Suspended', 'Requires Attention'), recent security events (e.g., 'Suspicious login attempt', 'Recovery information changed'), and quick access buttons to key features like 'Start Recovery Process' or 'Security Checkup'.
* **Details:** Presents a summary of the user's account health. Includes a prominent status indicator and a feed of recent (mock) security alerts.
2. **Recovery Wizard:**
* **User Flow:** User clicks 'Start Recovery Process'. A multi-step wizard guides them. Step 1: Identify the reason for suspension (e.g., 'Suspicious Activity', 'Policy Violation', 'Login Issue'). User selects the most relevant option based on their experience (like the Hacker News post). Step 2: Based on the selected reason, the wizard presents a checklist of actions. For 'Login Issue/Suspicious Activity', this might include: 'Verify Domain Ownership (DNS)', 'Gather Authentication Proofs (Passkey, Authenticator App, Backup Codes)', 'Document Access History'. Step 3: Provides templates and guidance for contacting Google Support, including fields for critical information to include.
* **Details:** Each step is a distinct UI section within the wizard. Conditional logic dictates which steps and information are presented. Clear instructions and explanations are provided at each stage. Links to relevant (external) Google help resources can be included.
3. **Security Checkup:**
* **User Flow:** User navigates to 'Security Checkup'. The system presents a series of questions and checks (simulated) regarding their account setup: 'Is 2FA enabled?', 'Are recovery methods up-to-date?', 'Have you reviewed login locations recently?'. Based on answers and simulated analysis, it provides a 'Security Score' and specific recommendations.
* **Details:** A questionnaire-like interface. Generates a score (e.g., 0-100) and actionable advice. Examples: 'Add a secondary recovery email', 'Review app permissions', 'Consider enabling advanced protection'.
4. **Support Request Assistant:**
* **User Flow:** Accessed via the Recovery Wizard or directly. User fills in a form with details about their situation (account ID, suspension date, actions taken, Google's response). The tool formats this information into a structured message suitable for Google Support ticket submission or pre-filled email draft.
* **Details:** Utilizes React Hook Form for data validation. Generates a well-formatted text output that the user can copy. Includes placeholders for specific details the user needs to provide.
## UI/UX DESIGN:
- **Layout:** Single page application. A persistent navigation sidebar (collapsible on smaller screens) for accessing Dashboard, Recovery Wizard, Security Checkup, and Settings. Main content area displays the active feature.
- **Color Palette:** Primary: Deep Blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Orange (#f97316) for calls to action, Alerts: Red (#ef4444), Success: Green (#22c55e), Neutral: Grays (#f3f4f6, #9ca3af, #1f2937).
- **Typography:** Use a clean, readable sans-serif font like 'Inter' or 'Inter var'. Headings: Bold, larger sizes. Body text: Regular weight, comfortable line height.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on mobile/tablet. Content reflows and stacks vertically. Ensure all interactive elements are easily tappable on touch devices.
- **Component Hierarchy:**
- `App.js` (Root component, Router setup)
- `Layout.js` (Sidebar, Header, Main content area)
- `Sidebar.js` (Navigation links)
- `DashboardPage.js` (Dashboard components)
- `AccountStatusCard.js`
- `SecurityEventsFeed.js`
- `QuickActionsPanel.js`
- `RecoveryWizardPage.js` (Wizard components)
- `Step1_ReasonSelection.js`
- `Step2_ActionChecklist.js`
- `Step3_SupportGuidance.js`
- `WizardNavigation.js`
- `SecurityCheckupPage.js` (Checkup components)
- `Questionnaire.js`
- `ResultsDisplay.js`
- `SupportAssistantPage.js` (Support assistant components)
- `SupportForm.js`
- `OutputDisplay.js`
- `common/` (Shared components like `Button.js`, `Modal.js`, `Input.js`, `Spinner.js`)
## COMPONENT BREAKDOWN:
- **`App.js`:** Sets up React Router, manages global Ztate provider.
- **`Layout.js`:** Renders `Sidebar` and the main content area based on the current route. Handles responsive sidebar collapse.
- **`Sidebar.js`:** Renders navigation links. Receives `activeLink` prop. Uses `NavLink` from React Router DOM.
- **`DashboardPage.js`:** Fetches and displays mock account data. Renders `AccountStatusCard`, `SecurityEventsFeed`, `QuickActionsPanel`.
- **`AccountStatusCard.js`:** Props: `status` (string), `title` (string). Displays account status prominently.
- **`SecurityEventsFeed.js`:** Props: `events` (array of objects). Renders a list of mock security events.
- **`QuickActionsPanel.js`:** Props: `onStartRecovery` (function), `onSecurityCheckup` (function). Displays buttons for core actions.
- **`RecoveryWizardPage.js`:** Manages the state of the multi-step wizard. Renders the current step component.
- **`Step1_ReasonSelection.js`:** Props: `selectedReason` (state setter), `reasons` (array). Renders radio buttons or similar for reason selection.
- **`Step2_ActionChecklist.js`:** Props: `currentReason` (string), `actions` (object mapping reasons to checklists). Renders checkboxes for required actions.
- **`Step3_SupportGuidance.js`:** Props: `userData` (object), `supportTemplate` (string). Displays guidance and the support request template.
- **`WizardNavigation.js`:** Props: `currentStep` (number), `totalSteps` (number), `onNext` (function), `onPrev` (function). Renders navigation buttons (Next, Previous, Submit).
- **`SecurityCheckupPage.js`:** Manages the security checkup process. Renders `Questionnaire` and `ResultsDisplay`.
- **`Questionnaire.js`:** Props: `questions` (array), `onSubmit` (function). Renders form for security questions.
- **`ResultsDisplay.js`:** Props: `score` (number), `recommendations` (array). Displays the security score and advice.
- **`SupportAssistantPage.js`:** Renders the `SupportForm` and `OutputDisplay`.
- **`SupportForm.js`:** Uses React Hook Form. Props: `onSubmit` (function). Handles user input for support request details.
- **`OutputDisplay.js`:** Props: `formattedRequest` (string). Displays the generated support request text.
- **`common/Button.js`:** Props: `onClick`, `children`, `variant` (e.g., 'primary', 'secondary'), `isLoading` (boolean). Standard button component.
- **`common/Modal.js`:** Props: `isOpen`, `onClose`, `children`. Reusable modal dialog.
- **`common/Input.js`:** Props: `label`, `type`, `register` (from React Hook Form), `error` (string). Input field component.
- **`common/Spinner.js`:** Displays a loading indicator.
## DATA MODEL:
- **Global State (Zustand Store - `useStore`):**
- `user`: { id: string, name: string, email: string, accountStatus: string }
- `securityEvents`: Array<{ id: string, timestamp: string, description: string, type: string }>
- `recoveryWizard`: { currentStep: number, selectedReason: string, actionsCompleted: object, supportDetails: object }
- `securityCheckup`: { score: number | null, recommendations: array, answers: object }
- **Local State:** Component-specific states (e.g., form input values, modal visibility).
- **Mock Data Structure:**
```json
// Example User Data
{
"id": "user-123",
"name": "Ajay CA",
"email": "ajay.ca@example.com",
"accountStatus": "Suspended"
}
// Example Security Event
{
"id": "event-abc",
"timestamp": "2024-04-05T05:06:00Z",
"description": "Recovery phone number removed. Potential security risk detected.",
"type": "alert"
}
// Example Recovery Actions (nested by reason)
{
"Suspicious Activity": [
{ "id": "action-1", "text": "Verify Domain Ownership (DNS Records)", "completed": false },
{ "id": "action-2", "text": "Gather Authentication Proofs (Passkey, Authenticator App, Backup Codes)", "completed": false },
{ "id": "action-3", "text": "Document Access History (IPs, Locations, Timestamps)", "completed": false }
],
"Policy Violation": [
// ... actions for policy violation
]
}
```
## ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between major sections using React Transition Group or Framer Motion (if complexity allows).
- **Button Hovers:** Slight scale or background color change on button hover using Tailwind's `hover:` variants.
- **Loading States:** Display `Spinner.js` component within buttons or sections while data is being fetched (simulated) or processes are running. Use opacity transitions for content appearing after loading.
- **Form Feedback:** Input field validation messages appear smoothly.
- **Wizard Navigation:** Smooth scrolling to the top of the wizard container when navigating between steps.
- **Sidebar Collapse:** Smooth animation for sidebar expanding/collapsing.
## EDGE CASES:
- **Empty States:** Dashboard shows helpful text and CTAs if no security events exist. Recovery wizard guides the user even if they have no prior information. Security Checkup shows a default state before the first run.
- **Error Handling:** Gracefully handle potential errors during simulated data fetching or form submissions. Display user-friendly error messages (e.g., using toast notifications).
- **Validation:** Implement robust validation using React Hook Form for all user inputs (email format, required fields, etc.). Provide clear inline error messages.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive components. Keyboard navigation support for all elements. Sufficient color contrast.
- **No Google API:** MVP does not interact with Google APIs directly. All data is mocked. Future versions would require OAuth and API integration.
- **User Not Logged In:** Redirect to a login/signup page (simulated). In MVP, assume the user is logged in.
## SAMPLE DATA:
```json
{
"userProfile": {
"id": "user-hn-452",
"name": "Ajay CA",
"email": "ajay.ca@example.com",
"accountStatus": "Suspended"
},
"securityEvents": [
{
"id": "evt-001",
"timestamp": "2024-04-05T05:06:00Z",
"description": "Recovery phone number removed. System flagged as potentially suspicious activity.",
"type": "alert"
},
{
"id": "evt-002",
"timestamp": "2024-04-05T05:00:00Z",
"description": "User removed recovery phone number while traveling overseas.",
"type": "info"
},
{
"id": "evt-003",
"timestamp": "2024-04-04T23:00:00Z",
"description": "Login attempt from United Kingdom detected.",
"type": "warning"
}
],
"recoverySteps": {
"Login Issue": [
{ "id": "ls-01", "text": "Confirm your identity using alternative methods (Passkey, Authenticator App, Backup Codes).", "completed": false },
{ "id": "ls-02", "text": "Verify domain ownership via DNS records.", "completed": false },
{ "id": "ls-03", "text": "Document your recent login activity and location history.", "completed": false },
{ "id": "ls-04", "text": "Prepare a detailed explanation for Google Support regarding access from overseas.", "completed": false }
],
"Suspicious Activity": [
{ "id": "sa-01", "text": "Review all connected devices and active sessions. Sign out unrecognized devices.", "completed": false },
{ "id": "sa-02", "text": "Enable 2-Step Verification if not already active.", "completed": false },
{ "id": "sa-03", "text": "Update all recovery information (phone, email) to current and accessible details.", "completed": false },
{ "id": "sa-04", "text": "Consider enabling Google's Advanced Protection Program.", "completed": false }
]
},
"securityCheckupQuestions": [
{ "id": "q1", "text": "Is Two-Factor Authentication (2FA) enabled on your account?", "type": "boolean" },
{ "id": "q2", "text": "Do you have up-to-date recovery phone number and email configured?", "type": "boolean" },
{ "id": "q3", "text": "Have you recently reviewed devices logged into your account?", "type": "boolean" },
{ "id": "q4", "text": "How many linked third-party apps have access to your account?", "type": "number", "min": 0, "max": 20 }
],
"supportRequestTemplate": "Subject: Google Workspace Account Suspension - Recovery Assistance Required - [Your Name/Company]
Dear Google Workspace Support Team,
My Google Workspace account, {{email}}, has been suspended on {{date}}. The stated reason was {{reason}}, or potential suspicious activity. However, the situation arose due to [briefly explain circumstances, e.g., accessing the account from overseas after changing recovery settings].
I have taken the following steps to resolve this:
{{actions_taken}}
I have gathered the following supporting information:
- Proof of identity and domain ownership (DNS verification completed).
- Details of my recent login activity, including timestamps and locations.
- Confirmation that I possess all authentication factors (Passkey, Authenticator App, Backup Codes).
My account is critical for [mention business impact, e.g., business operations, communication]. I kindly request your urgent assistance in reviewing my case and restoring access to my account.
Thank you for your time and support.
Sincerely,
{{name}}"
}
```
## DEPLOYMENT NOTES:
- **Build Tool:** Vite (for fast development server and optimized production builds).
- **Environment Variables:** Use `.env` files for configuration. Key variables: `VITE_APP_NAME`, `VITE_API_BASE_URL` (for future use).
- **Code Splitting:** Vite handles code splitting automatically for efficient loading.
- **Production Build:** Run `npm run build` (or `yarn build`). The output will be in the `dist` folder.
- **Hosting:** Suitable for static site hosting platforms like Netlify, Vercel, or GitHub Pages.
- **Performance:** Optimize image assets. Lazy load components where appropriate (e.g., modals, less frequently used sections). Ensure efficient state management to prevent unnecessary re-renders.
- **Error Monitoring:** Integrate a service like Sentry or LogRocket for production error tracking in later versions.