You are an expert AI assistant specialized in building full-stack applications. Your task is to generate a complete, single-page React application based on the concept of a "Secure Information Access Platform" designed to monitor the availability and security of knowledge-based websites like Wikipedia and provide users with timely notifications and alternative access routes. The application should be built using React, Tailwind CSS, and utilize local storage for state persistence. Assume this is a Minimum Viable Product (MVP) and focus on the core functionalities.
**1. PROJECT OVERVIEW:**
* **Purpose:** The application aims to provide users with reliable and uninterrupted access to critical information sources, even during security breaches, maintenance, or downtime. It addresses the problem highlighted by incidents like Wikipedia's read-only mode due to admin account compromises.
* **Problem Solved:** Prevents information access disruptions for users relying on frequently updated, large-scale knowledge bases. Mitigates the impact of security vulnerabilities and unplanned downtime on users and organizations.
* **Value Proposition:** Ensure continuous access to vital information, provide proactive security breach alerts, and offer seamless redirection to alternative reliable sources, thereby minimizing information discontinuity and enhancing user trust.
**2. TECH STACK:**
* **Frontend Framework:** React (using functional components and Hooks).
* **Styling:** Tailwind CSS for rapid UI development and consistent styling. Utilize PostCSS for CSS processing.
* **State Management:** React Context API for global state management (e.g., user settings, notification preferences) and `useState`/`useReducer` for local component state. Use `localStorage` for persisting application state (like monitored sites and notification settings) across sessions.
* **Routing:** React Router DOM for handling navigation within the single-page application (though for a true SPA, initial load might handle all views, but Router provides structure for potential future expansion).
* **Build Tool:** Vite (for its speed and developer experience).
* **Icons:** Heroicons or similar SVG icon library.
**3. CORE FEATURES:**
* **a) Security Monitoring Dashboard:**
* **User Flow:** Upon landing on the page, the user sees a list of monitored knowledge-based platforms (initially pre-defined, later user-addable). Each platform displays its current status (e.g., 'Online', 'Read-Only', 'Under Maintenance', 'Compromised'). A visual indicator (e.g., green/yellow/red dot) should represent the status. The dashboard should refresh periodically or via a manual refresh button.
* **Functionality:** Fetches status information from mock API endpoints (simulating real-time checks).
* **b) Real-time Status Notification System:**
* **User Flow:** Users can enable/disable notifications for specific sites or globally. When a monitored site's status changes to a critical state (e.g., 'Compromised', 'Read-Only'), an in-app notification appears (e.g., a toast message at the top right). If enabled, an email/SMS simulation (console log for MVP) is triggered.
* **Functionality:** Listens for status updates and triggers notification logic based on user preferences.
* **c) Alternative Source Redirection:**
* **User Flow:** If a monitored site is in a critical state, a prominent 'Access Alternatives' button appears next to it. Clicking this button reveals a list of pre-defined alternative sources for that specific site. Clicking an alternative source link navigates the user to that URL in a new tab.
* **Functionality:** Displays alternative URLs based on the current status and the specific site being monitored.
* **d) Site Management (Add/Remove):**
* **User Flow:** A dedicated section or modal allows users to add new sites to monitor by entering a URL and a name. Users can also remove existing monitored sites from their list.
* **Functionality:** Updates the list of monitored sites in the application state and persists this list to `localStorage`.
**4. UI/UX DESIGN:**
* **Layout:** A clean, single-page layout. A main content area displaying the dashboard. A header with the application title and potentially a global settings/notification toggle. A footer for basic information.
* **Color Palette:** Primary: Dark blue/charcoal (for trust, stability). Secondary: Teal/cyan (for active states, alerts). Accent: Red/Orange (for critical warnings). Neutral: Grays for text and backgrounds. Ensure high contrast for accessibility.
* **Typography:** A clean, sans-serif font family (e.g., Inter, Poppins) for readability. Clear hierarchy using font sizes and weights.
* **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive modifiers (e.g., `md:`, `lg:`).
* **Component Hierarchy (Conceptual):**
* `App.js` (Root component, sets up context providers, routing)
* `Header.js`
* `DashboardPage.js` (Main view)
* `SiteList.js` (Renders list of SiteCard components)
* `SiteCard.js` (Displays info for a single site)
* `NotificationArea.js` (Toast notifications)
* `AddSiteModal.js` (Form to add a new site)
* `StatusIndicator.js` (Visual status dot)
* `AlternativeLinks.js` (Displayed within SiteCard when needed)
* **Interactions:** Subtle hover effects on cards and buttons. Smooth transitions for modal opening/closing and status changes.
**5. DATA MODEL:**
* **State Structure:** A global state managed by Context API, potentially structured as:
```javascript
{
monitoredSites: [
{
id: 'unique-site-id',
name: 'Wikipedia',
url: 'https://en.wikipedia.org',
status: 'Online', // 'Online', 'ReadOnly', 'Maintenance', 'Compromised', 'Error'
lastChecked: 1678886400000,
alternatives: [
{ name: 'Archive.org Mirror', url: 'https://archive.org/details/wikipedia' },
{ name: 'Another Wiki Project', url: 'https://example.com/wiki' }
]
},
// ... more sites
],
userSettings: {
notificationsEnabled: true,
emailNotifications: false, // For MVP, this would just log to console
smsNotifications: false // For MVP, this would just log to console
}
}
```
* **Persistence:** The `monitoredSites` array and `userSettings` should be loaded from `localStorage` on app initialization and saved back whenever they change.
* **Mock API:** Simulate API calls for fetching site statuses. Create a `mockApi.js` file with functions like `fetchSiteStatus(siteId)` that return mock data with varying statuses and delays.
**6. COMPONENT BREAKDOWN:**
* **`App.js`:**
* **Props:** None.
* **Responsibility:** Main application wrapper. Initializes Context Providers. Sets up basic layout and routing.
* **`Header.js`:**
* **Props:** `title` (string).
* **Responsibility:** Displays the application title and potentially global controls.
* **`DashboardPage.js`:**
* **Props:** None.
* **Responsibility:** Main content area. Fetches initial site data (or loads from storage). Renders `SiteList` and triggers status updates.
* **`SiteList.js`:**
* **Props:** `sites` (array of site objects).
* **Responsibility:** Maps over the `sites` array and renders a `SiteCard` for each site.
* **`SiteCard.js`:**
* **Props:** `site` (object: {id, name, url, status, alternatives}), `onUpdateStatus` (function), `onToggleSiteManagement` (function).
* **Responsibility:** Displays individual site information, status indicator, and alternative links. Handles triggering status checks or management actions.
* **`StatusIndicator.js`:**
* **Props:** `status` (string).
* **Responsibility:** Renders a visual indicator (e.g., colored dot) based on the site's status.
* **`NotificationArea.js`:**
* **Props:** `notifications` (array of notification objects).
* **Responsibility:** Displays toast-like notifications for critical events.
* **`AddSiteModal.js`:**
* **Props:** `isOpen` (boolean), `onClose` (function), `onAddSite` (function).
* **Responsibility:** Form for adding new sites. Handles input validation and submission.
* **`LoadingSpinner.js`:**
* **Props:** None.
* **Responsibility:** Displays a loading indicator.
**7. ANIMATIONS & INTERACTIONS:**
* **Hover Effects:** Subtle background color change or slight elevation on `SiteCard` and buttons when hovered.
* **Transitions:**
* Smooth appearance/disappearance of the `AddSiteModal`.
* Fade-in/fade-out for `NotificationArea` messages.
* A subtle transition effect when a `SiteCard`'s status changes (e.g., background color fade).
* **Loading States:** Display `LoadingSpinner` components when initial data is being fetched or when a status check is in progress for a specific site.
* **Micro-interactions:** Slight bounce effect on notification messages, button press feedback.
**8. EDGE CASES:**
* **Empty State:** When no sites are being monitored, the `DashboardPage` should display a helpful message and a clear call-to-action to add the first site.
* **Error Handling:**
* If fetching site status fails (simulated API error), display an 'Error' status and a relevant message in the `SiteCard`.
* Handle errors during `localStorage` read/write operations.
* Form validation errors in `AddSiteModal` (e.g., invalid URL format, empty name).
* **Validation:** Ensure URLs are valid formats when adding sites. Ensure site names are not empty.
* **Accessibility (a11y):**
* Use semantic HTML elements.
* Ensure sufficient color contrast.
* Add `aria-label` attributes where necessary for screen readers, especially for icon buttons or status indicators.
* Manage focus appropriately, especially within modals and during route changes (if implemented).
* **Offline Handling:** Although primarily a monitoring tool, consider how the app behaves if `localStorage` is unavailable or if there are network issues preventing status checks (display appropriate messages).
**9. SAMPLE DATA:**
* **Monitored Sites Mock Data:**
```json
[
{
"id": "wiki-001",
"name": "Wikipedia",
"url": "https://en.wikipedia.org",
"status": "Online",
"lastChecked": 1678886400000,
"alternatives": [
{ "name": "Wikipedia Archive", "url": "https://archive.org/details/wikipedia" },
{ "name": "Miraheze Wiki", "url": "https://miraheze.org" }
]
},
{
"id": "wikt-002",
"name": "Wiktionary",
"url": "https://en.wiktionary.org",
"status": "ReadOnly",
"lastChecked": 1678886520000,
"alternatives": [
{ "name": "Wiktionary Archive", "url": "https://archive.org/details/wiktionary" }
]
},
{
"id": "proj-003",
"name": "Project Gutenberg",
"url": "https://www.gutenberg.org",
"status": "Maintenance",
"lastChecked": 1678886640000,
"alternatives": [
{ "name": "Gutenberg Mirror", "url": "https://mirrors.gutenberg.org" }
]
},
{
"id": "archive-004",
"name": "Internet Archive",
"url": "https://archive.org",
"status": "Compromised",
"lastChecked": 1678886760000,
"alternatives": [
{ "name": "Archive.today", "url": "https://archive.today" }
]
},
{
"id": "other-wiki-005",
"name": "Another Wiki",
"url": "https://another.wiki.example.com",
"status": "Error",
"lastChecked": 1678886880000,
"alternatives": []
}
]
```
* **User Settings Mock Data:**
```json
{
"notificationsEnabled": true,
"emailNotifications": false,
"smsNotifications": false
}
```
* **Notification Message Mock Data:**
```json
{
"id": "notif-123",
"message": "Wikipedia is experiencing a security compromise and is read-only.",
"type": "warning", // 'info', 'warning', 'error'
"timestamp": 1678886700000
}
```
**10. DEPLOYMENT NOTES:**
* **Build Command:** Use `npm run build` or `yarn build` (depending on your package manager) provided by Vite.
* **Environment Variables:** While this MVP uses `localStorage`, for future API integrations, use `.env` files for API keys or base URLs (e.g., `VITE_API_URL`). Vite automatically loads variables prefixed with `VITE_`.
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically for routes if React Router is used more extensively.
* Memoization: Use `React.memo`, `useMemo`, and `useCallback` where appropriate to prevent unnecessary re-renders, especially in list components.
* Lazy Loading: Implement lazy loading for components that are not immediately visible (e.g., modals) using `React.lazy` and `Suspense`.
* Image Optimization: If images were used, optimize them for web performance.
* Bundle Analysis: Use tools to analyze the final bundle size and identify potential optimizations.
* **Hosting:** Suitable for static site hosting platforms like Vercel, Netlify, GitHub Pages, or Cloudflare Pages.
* **HTTPS:** Ensure the deployed application is served over HTTPS.