You are an expert AI assistant specialized in building single-page applications (SPAs) with a focus on user productivity and digital well-being. Your task is to generate a complete, production-ready React SPA based on the following detailed specifications. The application aims to help users reduce digital distractions and cultivate a reading habit.
**1. PROJECT OVERVIEW:**
The application, tentatively named 'Odaklan & Oku' (Focus & Read), addresses the growing problem of digital distraction and declining reading habits. It aims to provide users with tools to manage their screen time, enhance focus during work or study sessions, and encourage regular reading. The core value proposition is to empower users to reclaim their attention, improve their concentration, and foster a deeper connection with books in a digitally saturated world.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development server and build)
- **Styling:** Tailwind CSS for rapid, utility-first styling.
- **State Management:** Zustand for efficient and scalable global state management.
- **Routing:** React Router DOM for navigation within the SPA.
- **Persistence:** Local Storage for saving user preferences, session data, and basic settings.
- **Utilities:** Date-fns for date/time manipulation.
**3. CORE FEATURES:**
**a. Focus Mode:**
- **User Flow:** Users can activate a 'Focus Mode' for a set duration. During this mode, notifications from specified distracting apps are silenced, and access to these apps can be blocked (simulated via UI/UX, not actual OS-level blocking for MVP).
- **Configuration:** Users can pre-define 'distracting apps' and 'focus profiles' (e.g., 'Deep Work', 'Study Session', 'Reading Time'). They can set the duration of the focus session.
- **UI:** A prominent start/stop button, a countdown timer, visual indicators of active distractions being blocked, and a summary upon completion.
**b. Reading Tracker:**
- **User Flow:** Users can add books to their library, mark them as 'Currently Reading', 'To Read', or 'Finished'. For 'Currently Reading' books, they can log their reading progress (e.g., pages read, percentage complete) and the date of their last reading session.
- **Library View:** A visually appealing display of books (e.g., cover images, titles, authors). Filters and sorting options (by status, title, author, last read date).
- **Goal Setting:** Users can set personal reading goals (e.g., number of books per month/year).
- **UI:** Book cards with status indicators, a modal for adding/editing book details, progress bars, and a dedicated section for goals.
**c. Screen Time Analysis:**
- **User Flow:** The application provides insights into the user's digital habits based on manual input or simulated data for MVP. It displays daily/weekly usage statistics for different app categories (e.g., Social Media, Entertainment, Productivity).
- **Visualization:** Simple charts and graphs to represent data. Highlights excessive usage and provides gentle recommendations for digital detox.
- **UI:** A dashboard view with key metrics, charts, and actionable insights.
**d. Pomodoro Timer:**
- **User Flow:** An integrated timer that follows the Pomodoro Technique (e.g., 25 min work, 5 min break). Users can customize work and break durations.
- **Controls:** Start, pause, reset buttons. Visual and auditory cues for session completion.
- **Integration:** Can be linked to 'Focus Mode' or used independently.
**4. UI/UX DESIGN:**
- **Layout:** Single-page application with a clear navigation sidebar or top bar. Sections for Focus Mode, Reading Tracker, Screen Time Analysis, and Settings.
- **Color Palette:** Calming and focused colors. Primary: Deep Blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Light Gray (#e5e7eb), Text: Dark Gray (#374151), Success: Green (#10b981), Warning: Orange (#f97316).
- **Typography:** Clean, readable sans-serif fonts. Headings: Inter (Bold), Body Text: Inter (Regular). Use relative units (rem, em) for scalability.
- **Responsive Design:** Mobile-first approach. Layout should adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on interactive elements, smooth transitions for modal pop-ups and section changes. Loading spinners for data fetching simulations.
**5. DATA MODEL:**
- **State Structure (Zustand Store):**
```javascript
// Example structure
{
focus: {
isFocusActive: false,
currentProfile: null, // e.g., { id: 'profile1', name: 'Deep Work', blockedApps: [...] }
remainingTime: 0,
sessionHistory: []
},
reading: {
books: [], // Array of book objects
goals: [] // Array of goal objects
},
screenTime: {
dailyData: [], // Array of daily usage records
weeklySummary: {}
},
settings: {
theme: 'light' | 'dark',
notificationsEnabled: true,
distractingApps: [] // List of app identifiers
}
}
```
- **Book Object:**
```json
{
"id": "uuid",
"title": "string",
"author": "string",
"coverImageUrl": "string | null",
"status": "To Read" | "Currently Reading" | "Finished",
"progressPages": number | null, // Current page number
"totalPages": number | null, // Total pages
"lastReadDate": "ISO String | null",
"addedDate": "ISO String"
}
```
- **Screen Time Record:**
```json
{
"date": "YYYY-MM-DD",
"usage": [
{"appName": "string", "durationMinutes": number, "category": "string"}
]
}
```
- **Persistence:** Use `localStorage.setItem` and `localStorage.getItem` to persist the state, particularly for settings and reading library data.
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing and global layout.
- **`Navigation.jsx`:** Sidebar or header navigation component.
- **`FocusModePage.jsx`:** Container for focus mode features.
- **`FocusTimer.jsx`:** Displays and controls the countdown timer. Props: `initialTime`, `onComplete`.
- **`FocusConfigurator.jsx`:** Allows users to select profiles and set durations. Props: `profiles`, `onStartFocus`.
- **`ActiveFocusIndicator.jsx`:** Shows active state and blocked apps. Props: `blockedApps`, `remainingTime`.
- **`ReadingTrackerPage.jsx`:** Container for reading tracker features.
- **`BookList.jsx`:** Displays the library of books. Props: `books`, `onBookClick`.
- **`BookCard.jsx`:** Represents a single book in the list. Props: `book`.
- **`AddEditBookModal.jsx`:** Modal for adding or editing book details. Props: `bookToEdit`, `onSave`, `onClose`.
- **`ReadingGoals.jsx`:** Displays and manages reading goals. Props: `goals`.
- **`ScreenTimePage.jsx`:** Displays screen time analysis.
- **`UsageChart.jsx`:** Renders charts using a library like Chart.js or Recharts. Props: `data`, `type`.
- **`AnalysisSummary.jsx`:** Provides insights and recommendations. Props: `summaryData`.
- **`PomodoroTimer.jsx`:** Standalone Pomodoro timer component. Props: `workDuration`, `breakDuration`, `onCycleComplete`.
- **`SettingsPage.jsx`:** User settings configuration.
- **`Modal.jsx`:** Generic modal component. Props: `isOpen`, `onClose`, `children`.
**7. ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and interactive cards.
- **Transitions:** Smooth fade-in/out for modals, slide transitions for navigation changes (optional, can add complexity).
- **Loading States:** Use placeholder elements or spinners (`react-loader-spinner`) when simulating data loading or processing.
- **Micro-interactions:** Visual feedback when adding a book, completing a focus session, or achieving a goal (e.g., confetti effect or a checkmark animation).
- **Timer Animation:** Smooth countdown display, potentially with a subtle pulsing effect when nearing completion.
**8. EDGE CASES:**
- **Empty States:** Display user-friendly messages and clear calls to action when lists (books, goals, history) are empty (e.g., "Your reading list is empty. Add your first book!").
- **Error Handling:** Implement basic error handling for local storage operations. Display user-friendly error messages if data cannot be saved or retrieved.
- **Validation:** Basic validation for input fields (e.g., ensuring page numbers are valid, required fields are filled in the book modal).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Add ARIA attributes where necessary. Ensure keyboard navigability for all interactive elements.
**9. SAMPLE DATA:**
**Mock Book Data (for `reading.books`):**
```json
[
{
"id": "b7d4b3a8-1e5c-4f0a-8c3a-1b9e0d8f5c2a",
"title": "Dune",
"author": "Frank Herbert",
"coverImageUrl": "https://example.com/covers/dune.jpg",
"status": "Currently Reading",
"progressPages": 250,
"totalPages": 896,
"lastReadDate": "2024-07-26T10:30:00Z",
"addedDate": "2024-07-20T09:00:00Z"
},
{
"id": "c1a0f9e2-8b7d-4c1e-9a5f-2d3c8e1b0a9f",
"title": "1984",
"author": "George Orwell",
"coverImageUrl": "https://example.com/covers/1984.jpg",
"status": "Finished",
"progressPages": 328,
"totalPages": 328,
"lastReadDate": "2024-07-15T14:00:00Z",
"addedDate": "2024-06-01T11:00:00Z"
},
{
"id": "f3e9d1c8-7a6b-4d0e-8f1a-5c0b9e8d7f6a",
"title": "Sapiens: A Brief History of Humankind",
"author": "Yuval Noah Harari",
"coverImageUrl": "https://example.com/covers/sapiens.jpg",
"status": "To Read",
"progressPages": null,
"totalPages": null,
"lastReadDate": null,
"addedDate": "2024-07-25T16:00:00Z"
}
]
```
**Mock Screen Time Data (for `screenTime.dailyData`):**
```json
[
{
"date": "2024-07-26",
"usage": [
{"appName": "Instagram", "durationMinutes": 75, "category": "Social Media"},
{"appName": "YouTube", "durationMinutes": 120, "category": "Entertainment"},
{"appName": "VS Code", "durationMinutes": 180, "category": "Productivity"},
{"appName": "Spotify", "durationMinutes": 90, "category": "Music"}
]
},
{
"date": "2024-07-25",
"usage": [
{"appName": "TikTok", "durationMinutes": 45, "category": "Social Media"},
{"appName": "Netflix", "durationMinutes": 150, "category": "Entertainment"},
{"appName": "Google Docs", "durationMinutes": 90, "category": "Productivity"}
]
}
]
```
**Mock Focus Profile Data (for `focus.currentProfile` config):**
```json
{
"id": "profile1",
"name": "Deep Work",
"blockedApps": ["Instagram", "Twitter", "Facebook", "YouTube"]
}
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** Use `npm run build` or `yarn build` (Vite commands).
- **Environment Variables:** Define `NODE_ENV=production`. Vite uses `import.meta.env.VITE_VARIABLE_NAME`.
- **Hosting:** Suitable for static site hosting platforms like Vercel, Netlify, GitHub Pages.
- **Performance:** Ensure code splitting is handled effectively by Vite. Optimize image loading if cover images are fetched from an external API in the future. Lazy load components where appropriate.
- **State Persistence Strategy:** Implement robust saving of state to Local Storage on significant changes (e.g., ending a focus session, updating book progress) and on `beforeunload` event to minimize data loss.