You are a senior full-stack developer tasked with building a Single Page Application (SPA) for a service called 'Sözleşme Güncellemeleri Bildirim Yöneticisi' (Contract Update Notification Manager). This application helps users track Terms of Service (TOS) and Privacy Policy updates from various online services they use. The core problem it solves is the difficulty users face in staying informed about changes to the legal agreements they implicitly or explicitly consent to, especially after rulings like the one highlighted by the Hacker News post where TOS can be updated via email and continued use implies consent. This application aims to provide timely notifications and a centralized dashboard for managing these updates.
**1. PROJECT OVERVIEW**
* **Objective:** To create a user-friendly platform that monitors TOS and Privacy Policy changes for specified online services and notifies users of these updates. The platform will offer a summarized view of key changes and allow users to manage their responses.
* **Problem Solved:** Users often miss critical updates to service agreements, leading to unintended consent to new terms they haven't reviewed. This application automates the monitoring process, saving users time and reducing the risk of agreeing to unfavorable terms unknowingly.
* **Value Proposition:** Stay informed and in control of your online agreements. Receive timely alerts about TOS and Privacy Policy changes, understand key modifications instantly, and manage your digital footprint with confidence.
**2. TECH STACK**
* **Frontend Framework:** React (using Vite for fast development and build times)
* **Styling:** Tailwind CSS for rapid UI development and consistent styling.
* **State Management:** Zustand for efficient and simple global state management.
* **Routing:** React Router DOM for client-side routing.
* **API Calls:** Axios for making HTTP requests to a hypothetical backend.
* **UI Components:** Potentially a lightweight component library like Headless UI or Radix UI for accessible and customizable components (buttons, modals, dropdowns).
* **Icons:** React Icons for a variety of icons.
* **Form Handling:** React Hook Form for efficient form validation and management.
**3. CORE FEATURES (MVP)**
* **Service Tracking:**
* **User Flow:** Users navigate to the 'Add Service' section. They input the website URL of the service they want to track. The system might perform a basic validation of the URL. Once added, the service appears in their 'Tracked Services' list.
* **Details:** Input field for URL, button to 'Add Service'. Display of added services with their URLs and current TOS/Policy status (e.g., 'Up-to-date', 'Update Available').
* **Automated Update Detection:**
* **User Flow:** This is a background process. When a user adds a service, the system periodically scrapes the relevant pages (TOS, Privacy Policy) or checks known update endpoints/feeds for changes compared to a previously stored version.
* **Details:** Requires a backend service for scraping/monitoring (for this frontend prompt, we'll simulate this with mock data and state). When a change is detected, the service's status in the UI updates to 'Update Available'.
* **Notification System:**
* **User Flow:** When an update is detected, a notification appears on the dashboard (e.g., a toast message or a highlighted item in the list). Clicking the notification or the item takes the user to the update details.
* **Details:** Visual cues for new updates (e.g., badge count, highlighted rows). A dedicated notification area or toast messages for immediate alerts.
* **Update Summary View:**
* **User Flow:** User clicks on a service with an 'Update Available' status or clicks a 'View Details' button. A modal or a separate page displays the detected changes.
* **Details:** For MVP, this will display the old TOS/Policy version, the new version, and a highlighted section showing the key differences (simulated via mock data comparison).
* **Consent Management (Basic):**
* **User Flow:** Within the update details view, users can see options like 'Accept' or 'Dismiss'. Accepting might mark the update as reviewed and the service status as 'Up-to-date'. Dismissing might hide the notification temporarily or permanently.
* **Details:** Buttons for 'Accept Terms' and 'Dismiss Update'. Update the service status accordingly.
**4. UI/UX DESIGN**
* **Layout:** Single Page Application. A main navigation sidebar (collapsible on smaller screens) with links to 'Dashboard', 'Tracked Services', 'Add Service', 'Settings'. The main content area displays the relevant information based on the selected navigation item.
* **Color Palette:** Primary: A calming blue (#3b82f6). Secondary: A neutral gray for text and borders (#6b7280). Accent: A vibrant green for success states/accept buttons (#10b981) and a cautionary red for dismissal/error states (#ef4444). Background: White (#ffffff) or a very light gray (#f3f4f6).
* **Typography:** Use a clean, readable sans-serif font like Inter or Lato. H1/H2 for page titles, H3/H4 for section headers, body text for paragraphs. Ensure good contrast.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on mobile. Content sections stack vertically. Ensure all interactive elements are easily tappable on touch devices.
* **Component Hierarchy Example (Dashboard):**
* `PageLayout` (Sidebar, Header, MainContent)
* `DashboardPage`
* `NotificationSummary` (Displays count of new updates)
* `TrackedServicesList`
* `ServiceListItem` (Renders individual service, status, actions)
* `StatusBadge`
* `ActionButton`
* **Interaction:** Smooth transitions between pages/views. Hover effects on buttons and links. Loading spinners for asynchronous operations.
**5. DATA MODEL (State Management with Zustand)**
* **`useStore` (Zustand Store):**
* `services`: Array of service objects.
* `notifications`: Array of notification objects.
* `isLoading`: Boolean for global loading state.
* `error`: String or null for error messages.
* `actions`: Functions to manage state (addService, removeService, fetchUpdates, markAsAccepted, dismissNotification).
* **Service Object Structure:**
```javascript
{
id: string; // e.g., 'uuid'
url: string;
name: string; // e.g., 'Example Social Media'
lastChecked: Date | null;
currentStatus: 'Up-to-date' | 'Update Available' | 'Error';
latestUpdate: UpdateInfo | null;
}
```
* **UpdateInfo Object Structure:**
```javascript
{
updateId: string; // e.g., 'uuid-update'
detectedAt: Date;
previousTosVersion: string;
newTosVersion: string;
previousPolicyVersion: string;
newPolicyVersion: string;
summary: string; // AI-generated or pre-defined summary of changes
changes: {
tos: {
added: string[];
removed: string[];
modified: string[];
};
policy: {
added: string[];
removed: string[];
modified: string[];
};
}
}
```
* **Notification Object Structure:**
```javascript
{
id: string; // e.g., 'uuid-notif'
serviceId: string;
updateId: string;
message: string;
isRead: boolean;
createdAt: Date;
}
```
* **Local Storage:** For persisting the `services` and potentially `notifications` state across browser sessions.
**6. COMPONENT BREAKDOWN**
* **`App.jsx`:** Main entry point, sets up routing, global providers.
* **`PageLayout.jsx`:** Wraps all pages, includes `Sidebar` and `Header`.
* **`Sidebar.jsx`:** Navigation menu. Props: `navItems` (array of objects: { name, path, icon }). State: `isOpen`.
* **`Header.jsx`:** Top bar, potentially includes user profile or settings shortcut.
* **`DashboardPage.jsx`:** Main dashboard view. Fetches and displays `NotificationSummary` and `TrackedServicesList`.
* **`NotificationSummary.jsx`:** Displays a count of unread notifications. Props: `unreadCount`.
* **`TrackedServicesList.jsx`:** Renders a list of `ServiceListItem` components. Props: `services`.
* **`ServiceListItem.jsx`:** Displays a single tracked service's details (name, status, date). Props: `service`. Contains `StatusBadge` and `ActionButton`.
* **`StatusBadge.jsx`:** Shows the status color and text. Props: `status`.
* **`ActionButton.jsx`:** Handles actions like 'View Details', 'Accept', 'Dismiss'. Props: `serviceId`, `updateId`, `actionType`.
* **`AddServicePage.jsx`:** Form to add a new service. Includes `ServiceForm`.
* **`ServiceForm.jsx`:** Input field for URL, submit button. Uses `react-hook-form`. Props: `onSubmit`, `isLoading`.
* **`UpdateDetailsModal.jsx`:** Modal to show update details. Props: `updateInfo`, `serviceName`, `onAccept`, `onDismiss`.
* **`ToastNotification.jsx`:** Component for displaying temporary messages (e.g., 'Service added successfully'). Uses a state management approach for queues.
**7. ANIMATIONS & INTERACTIONS**
* **Page Transitions:** Subtle fade-in/fade-out animations when navigating between sections using `Framer Motion` or similar.
* **Button Hovers:** Slight scale-up or background color change on hover.
* **Loading States:** Display skeleton loaders or spinners within `TrackedServicesList` and `ServiceListItem` while data is being fetched. Use the global `isLoading` state.
* **Notification Toasts:** Animate in from the side or bottom and fade out.
* **Expand/Collapse:** Smooth animation for sidebar collapse/expand and for expanding/collapsing detailed sections within `ServiceListItem` if implemented.
* **Status Changes:** Subtle color transition or a brief highlight animation when a service's status changes to 'Update Available'.
**8. EDGE CASES**
* **Empty State:** When no services are added, display a clear message and a prominent call-to-action button to 'Add Your First Service'. Same for empty notifications list.
* **Error Handling:**
* Network errors during API calls (display user-friendly messages via toasts).
* Scraping/detection errors for a specific service (mark service status as 'Error', provide option to retry).
* Invalid URL input (form validation).
* **Validation:** Ensure URLs are in a valid format. Prevent adding duplicate URLs.
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure keyboard navigability for all interactive components. Use ARIA attributes where necessary (e.g., for modals, dropdowns). Ensure sufficient color contrast.
* **Data Refresh:** Implement a mechanism for manual refresh or a configurable auto-refresh interval.
* **Initial Data Load:** Show loading indicators until the initial list of services and notifications is loaded.
**9. SAMPLE DATA**
* **Mock Services Array:**
```javascript
[
{
id: 'srv-101',
url: 'https://www.example-social.com',
name: 'Example Social Media',
lastChecked: new Date(Date.now() - 86400000), // 1 day ago
currentStatus: 'Update Available',
latestUpdate: {
updateId: 'upd-abc',
detectedAt: new Date(),
previousTosVersion: 'v2.1',
newTosVersion: 'v2.2',
previousPolicyVersion: 'p1.0',
newPolicyVersion: 'p1.1',
summary: 'Updated user data handling policies and community guidelines.',
changes: {
tos: { added: ['Section 4.2: Community Guidelines'], removed: [], modified: ['Section 3.1: Content Ownership'] },
policy: { added: ['Data Retention Policy details'], removed: [], modified: ['Data Usage section'] }
}
}
},
{
id: 'srv-102',
url: 'https://www.example-cloud.com',
name: 'Example Cloud Storage',
lastChecked: new Date(),
currentStatus: 'Up-to-date',
latestUpdate: null
},
{
id: 'srv-103',
url: 'https://www.example-news.com',
name: 'Example News Portal',
lastChecked: new Date(Date.now() - 3600000), // 1 hour ago
currentStatus: 'Error',
latestUpdate: null
}
]
```
* **Mock Notifications Array:**
```javascript
[
{
id: 'notif-xyz',
serviceId: 'srv-101',
updateId: 'upd-abc',
message: 'New TOS and Privacy Policy update available for Example Social Media.',
isRead: false,
createdAt: new Date(Date.now() - 60000) // 1 minute ago
}
]
```
* **Mock Empty State Service:**
```javascript
[] // Empty array for services
```
**10. DEPLOYMENT NOTES**
* **Build Tool:** Vite is recommended for fast builds (`npm run build`).
* **Environment Variables:** Use `.env` files for environment-specific configurations (e.g., API base URLs). Prefix variables with `VITE_` (e.g., `VITE_API_URL`).
* **Performance Optimizations:**
* Code splitting: Vite handles this automatically for routes.
* Lazy loading components: Especially for modals or components not immediately visible.
* Image optimization: If any images are used, ensure they are optimized.
* Memoization: Use `React.memo` or `useMemo` judiciously to prevent unnecessary re-renders.
* **HTTPS:** Ensure the deployed application uses HTTPS.
* **CORS:** If a separate backend API is used, configure CORS appropriately.
* **State Persistence:** Implement saving the `services` state to `localStorage` to retain user data between sessions. Load this state on application startup.
* **Error Boundaries:** Implement React Error Boundaries to catch JavaScript errors in components and display a fallback UI, preventing the entire app from crashing.
This detailed prompt provides a comprehensive guide for an AI assistant to generate the frontend codebase for the 'Sözleşme Güncellemeleri Bildirim Yöneticisi' application as a Single Page Application using React and Tailwind CSS.