You are an expert AI full-stack developer tasked with creating a single-page application (SPA) for 'Asus'un MacBook Neo'su: PC Ekosistemi Devrimi', a platform designed to bridge the gap between different devices within the PC ecosystem, offering seamless integration and a user experience akin to Apple's. This application aims to provide a unified control center for users managing multiple Windows and potentially Android devices.
**PROJECT OVERVIEW:**
The core problem this application solves is the fragmented user experience across different devices in the PC ecosystem. Users often struggle with syncing files, notifications, and application states between their Windows PCs, tablets, and smartphones. This project aims to create a centralized platform that offers Apple-like ecosystem integration for PC users. The value proposition is to provide a fluid, intuitive, and efficient way to manage and interact with multiple devices, boosting productivity and user satisfaction.
**TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **State Management:** Zustand (lightweight, performant, and easy to integrate)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **Routing:** React Router DOM (for managing different views within the SPA)
- **Icons:** React Icons (for a comprehensive icon library)
- **Animations:** Framer Motion (for sophisticated UI animations and transitions)
- **API/Data Fetching:** Axios (for HTTP requests if a backend is introduced later, for now, mock data and local storage)
- **Build Tool:** Vite (for fast development server and optimized builds)
**CORE FEATURES:**
1. **Cross-Device Synchronization:**
* **User Flow:** Upon initial setup, the user connects their devices (PC, phone, tablet) via a unique pairing code or QR scan. The application then automatically syncs selected data types: clipboard content, notifications, and specific user-defined folders. Users can enable/disable syncing for each data type and device.
* **Description:** This feature mirrors Apple's Handoff and Universal Clipboard. It allows users to copy text on one device and paste it on another, receive phone notifications on their PC, and keep specific folders synchronized across all paired devices.
2. **Unified App Launcher & Manager:**
* **User Flow:** The application displays icons for all installed applications across connected devices. Users can launch applications remotely (if permissions allow) or view their status (running/closed). They can also uninstall or manage app permissions from this central dashboard.
* **Description:** This acts as a dashboard for managing the user's software ecosystem. It provides a consolidated view and control point, reducing the need to switch between devices to find or manage applications.
3. **Seamless File Transfer:**
* **User Flow:** Users can drag and drop files from their local file explorer directly into the application's designated drop zone. They can then select which paired device to send the file to. A progress indicator shows the transfer status. Received files are automatically saved to a default 'Downloads/CrossSync' folder.
* **Description:** This feature simplifies file sharing between devices, eliminating the need for cloud storage links, email attachments, or USB drives for quick transfers.
4. **Customizable Control Center:**
* **User Flow:** A slide-in panel (accessible via a global hotkey or button) displays critical information: recent notifications, device battery levels, connection status, and quick toggles for sync features. Users can customize which widgets appear in their control center.
* **Description:** Provides quick access to essential information and controls without needing to open the main application window, enhancing usability and reducing context switching.
**UI/UX DESIGN:**
- **Layout:** A clean, modern dashboard layout. A persistent sidebar for navigation (Sync, Apps, Files, Settings). The main content area dynamically updates based on the selected navigation item. The Control Center is a collapsible overlay.
- **Color Palette:** Primary: Dark Blue (#1E3A8A), Secondary: Light Gray (#F3F4F6), Accent: Teal (#14B8A6), Text: White (#FFFFFF) on dark backgrounds, Dark Gray (#1F2937) on light backgrounds.
- **Typography:** Sans-serif font (e.g., Inter or Roboto) for clarity and readability. Headings: Bold, 24-32px. Body Text: Regular, 16px. Sub-elements: Medium, 14px.
- **Responsive Design:** Mobile-first approach. The application should be fully responsive, adapting gracefully to various screen sizes (desktop, tablet, mobile). Elements should reflow and resize appropriately. Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:).
- **Interactions:** Smooth transitions between views, subtle hover effects on interactive elements, clear loading indicators, and intuitive drag-and-drop feedback.
**DATA MODEL (Zustand Store Structure):**
```javascript
// Example using Zustand store
interface Device {
id: string;
name: string;
type: 'PC' | 'Tablet' | 'Phone';
isConnected: boolean;
batteryLevel?: number; // Optional
}
interface Notification {
id: string;
title: string;
message: string;
timestamp: number;
sourceApp: string;
deviceId: string;
}
interface SyncedFile {
id: string;
name: string;
size: number;
transferProgress: number; // 0-100
status: 'uploading' | 'downloading' | 'completed' | 'failed';
sourceDeviceId: string;
destinationDeviceId?: string;
timestamp: number;
}
interface AppInfo {
id: string;
name: string;
iconUrl: string;
deviceId: string;
isRunning: boolean;
}
interface SyncSettings {
clipboard: boolean;
notifications: boolean;
folders: string[]; // Paths to sync
}
interface AppState {
devices: Device[];
notifications: Notification[];
syncedFiles: SyncedFile[];
apps: AppInfo[];
syncSettings: SyncSettings;
pairedDevices: string[]; // IDs of devices that are paired
// Actions
addDevice: (device: Device) => void;
removeDevice: (deviceId: string) => void;
updateDeviceStatus: (deviceId: string, status: Partial<Pick<Device, 'isConnected' | 'batteryLevel'>> ) => void;
addNotification: (notification: Notification) => void;
clearNotifications: (deviceId?: string) => void;
addFileTransfer: (file: SyncedFile) => void;
updateFileTransferProgress: (fileId: string, progress: number, status?: SyncedFile['status']) => void;
removeFileTransfer: (fileId: string) => void;
addApp: (app: AppInfo) => void;
updateAppStatus: (appId: string, deviceId: string, status: Partial<Pick<AppInfo, 'isRunning'>>) => void;
setSyncSetting: <K extends keyof SyncSettings>(key: K, value: SyncSettings[K]) => void;
pairDevice: (deviceId: string) => void;
unpairDevice: (deviceId: string) => void;
}
// Mock Data Structure:
// devices: Array of Device objects
// notifications: Array of Notification objects
// syncedFiles: Array of SyncedFile objects
// apps: Array of AppInfo objects
// syncSettings: Single SyncSettings object
```
Local storage will be used initially to persist settings and potentially mock data if no backend is available.
**COMPONENT BREAKDOWN:**
- **`App.jsx`**: Main application component, sets up routing and global layout.
- **`Layout.jsx`**: Contains the main structure: Sidebar, Header, and the main content area where routed components are rendered.
- **`Sidebar.jsx`**: Navigation menu with links to different sections (Sync, Apps, Files, Settings). Active link styling.
- **`Header.jsx`**: Top bar, possibly with user profile/settings access and a global search or add device button.
- **`Dashboard.jsx`**: The main landing page after login. Displays overview of connected devices, recent notifications, and quick actions.
- **`DeviceCard.jsx`**: Displays information about a single connected device (name, type, status, battery). Includes actions like connect/disconnect/pair.
- **`NotificationList.jsx`**: Renders a list of incoming notifications. Each item shows app name, title, message, and timestamp.
- **`NotificationItem.jsx`**: Individual notification display component.
- **`AppList.jsx`**: Displays all discovered applications across devices. Includes search and filter functionality.
- **`AppItem.jsx`**: Represents a single application with its icon, name, and status. Clickable to launch or manage.
- **`FileTransfer.jsx`**: Manages the file transfer feature, including a drag-and-drop area and a list of ongoing/completed transfers.
- **`TransferProgress.jsx`**: Visualizes the progress of a file transfer.
- **`Settings.jsx`**: Contains user preferences and synchronization settings (e.g., toggles for clipboard, notifications, folder selection).
- **`PairingModal.jsx`**: Modal window for device pairing instructions (e.g., displaying a code or QR code).
- **`ControlCenter.jsx`**: Collapsible overlay panel with widgets for quick access.
- **`WidgetContainer.jsx`**: Wrapper for individual widgets within the Control Center.
- **`LoadingSpinner.jsx`**: Reusable component for indicating loading states.
- **`ErrorMessage.jsx`**: Component for displaying errors to the user.
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use Framer Motion for smooth fade-in/fade-out or slide animations between different sections of the SPA.
- **Hover Effects:** Subtle scaling or background color changes on buttons, list items, and device cards.
- **Drag & Drop:** Visual feedback during drag (e.g., ghosting the item being dragged), highlighting drop zones when an item is dragged over them.
- **Loading States:** Use `LoadingSpinner.jsx` with skeleton loaders where appropriate (e.g., while fetching app lists or device statuses).
- **Notification Display:** Bouncy animation for new notifications appearing in the Control Center or a dedicated area.
- **Sidebar Collapse/Expand:** Smooth animation for the sidebar.
**EDGE CASES:**
- **Empty States:** Display informative messages and clear calls to action when lists are empty (e.g., 'No devices paired yet. Click here to pair.', 'No notifications received.').
- **Error Handling:** Gracefully handle API errors (if implemented) or connection issues. Display user-friendly error messages using `ErrorMessage.jsx`.
- **Validation:** Validate user inputs in settings (e.g., folder paths) if applicable. Ensure pairing codes are handled correctly.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive elements, keyboard navigability, sufficient color contrast, and focus management.
- **Offline Handling:** Provide clear feedback when devices are offline and sync cannot occur. Cache data locally where possible.
- **Permissions:** Clearly indicate when specific permissions are required for features (e.g., accessing notifications, launching apps) and guide the user on how to grant them.
**SAMPLE DATA:**
```json
// Mock Devices
[
{
"id": "pc-123",
"name": "My Workstation",
"type": "PC",
"isConnected": true,
"batteryLevel": null
},
{
"id": "phone-456",
"name": "Pixel 7",
"type": "Phone",
"isConnected": false,
"batteryLevel": 75
},
{
"id": "tablet-789",
"name": "Surface Go",
"type": "Tablet",
"isConnected": true,
"batteryLevel": 92
}
]
// Mock Notifications (for a specific device, e.g., phone-456)
[
{
"id": "notif-abc",
"title": "New Email",
"message": "You have a new message from John Doe.",
"timestamp": 1678886400000,
"sourceApp": "Gmail",
"deviceId": "phone-456"
},
{
"id": "notif-def",
"title": "Meeting Reminder",
"message": "Project Sync meeting starts in 15 minutes.",
"timestamp": 1678887000000,
"sourceApp": "Calendar",
"deviceId": "phone-456"
}
]
// Mock Synced Files (initially empty or showing ongoing transfers)
[
{
"id": "file-ghi",
"name": "presentation.pptx",
"size": 5242880,
"transferProgress": 50,
"status": "uploading",
"sourceDeviceId": "pc-123",
"destinationDeviceId": "tablet-789",
"timestamp": 1678888000000
}
]
// Mock Apps (for a specific device, e.g., pc-123)
[
{
"id": "app-jkl",
"name": "VS Code",
"iconUrl": "/icons/vscode.png",
"deviceId": "pc-123",
"isRunning": true
},
{
"id": "app-mno",
"name": "Chrome",
"iconUrl": "/icons/chrome.png",
"deviceId": "pc-123",
"isRunning": false
}
]
// Mock Sync Settings
{
"clipboard": true,
"notifications": true,
"folders": ["C:\\Users\\User\\Documents\\Projects"]
}
```
**DEPLOYMENT NOTES:**
- **Build:** Configure Vite for production build (`npm run build`). Ensure optimizations like code splitting and tree shaking are enabled.
- **Environment Variables:** Use `.env` files for managing environment-specific configurations (e.g., API endpoints if a backend is added later). `VITE_` prefix for frontend variables.
- **Performance:** Optimize image loading (use appropriate formats, lazy loading). Minimize re-renders by using `React.memo` and optimizing Zustand selectors. Bundle analysis using `rollup-plugin-visualizer` to identify large dependencies.
- **Service Workers:** Consider implementing a Service Worker for offline capabilities and potential PWA features.
- **Cross-Origin Resource Sharing (CORS):** If a backend API is introduced, ensure proper CORS configuration on the server-side.
- **Security:** Sanitize all user inputs. Be cautious with remote execution features. Use secure pairing mechanisms.
- **Initial Setup:** The first launch should guide the user through the pairing process and setting initial sync preferences. A welcome tour might be beneficial.