You are an expert AI developer tasked with creating a single-page React application using Next.js and Tailwind CSS. The application, codenamed 'FocusFlow', aims to help users improve their focus by optimizing their digital workspace and managing distractions, inspired by the Hacker News post about giving up large monitors. The application should be a Single Page Application (SPA) focusing on core user needs for enhanced concentration.
PROJECT OVERVIEW:
FocusFlow's primary goal is to combat digital distraction and enhance deep work capabilities for knowledge workers who struggle with maintaining focus, often exacerbated by large, multi-monitor setups and the "always-on" culture. It provides tools and insights to create a more conducive digital environment, helping users regain control over their attention and boost productivity without the mental drain of constant context switching and urge to "be in the loop." The core value proposition is enabling sustained, high-quality focus through intelligent workspace and distraction management.
TECH STACK:
- Framework: Next.js (for potential SSR/ISR benefits in the future, but acting as an SPA for now)
- Language: TypeScript
- Styling: Tailwind CSS (with arbitrary values and custom configurations for a clean, modern look)
- State Management: Zustand (lightweight and efficient for managing global and local states)
- UI Components: Radix UI (for accessible and unstyled primitives) and custom-built components
- Icons: lucide-react
- Utilities: date-fns (for date/time manipulation), clsx (for conditional class names)
- Animation: Framer Motion (for smooth transitions and micro-interactions)
CORE FEATURES:
1. **Workspace Setup Wizard:**
* **User Flow:** Upon first visit, the user is greeted by a multi-step wizard. Step 1: Asks about their current setup (e.g., number of monitors, typical screen resolution). Step 2: Inquires about common distractions (e.g., notifications, social media, email frequency). Step 3: Asks about primary work tasks (e.g., coding, writing, design). Based on these inputs, the app provides initial recommendations.
* **Functionality:** Collects user preferences and environmental data to personalize subsequent feature suggestions. Stores this setup data locally using Zustand's state management.
2. **Focus Session Timer (Pomodoro-inspired):**
* **User Flow:** Users can start a 'Focus Session' by setting a duration (e.g., 25 minutes). A countdown timer is displayed prominently. During the session, a subtle visual indicator (e.g., a progress ring) shows the remaining time. At the end of the session, an audible alert and visual notification prompt the user to take a short break.
* **Functionality:** Manages session timers, handles start/stop/reset actions, triggers break notifications. Includes options for customizable session and break lengths.
3. **Distraction Blocker (Basic):**
* **User Flow:** Users can toggle a 'Focus Mode' which, when active during a Focus Session, attempts to minimize distractions. Initially, this would involve disabling desktop notifications (via browser API if possible and permitted) and potentially graying out or hiding certain non-essential UI elements within the app itself. For MVP, it's a symbolic representation of blocking distractions.
* **Functionality:** Integrates with the Focus Session timer. When active, it provides visual cues of distraction reduction. Future enhancements could involve browser extension integration or OS-level blocking.
4. **Focus Insights Dashboard:**
* **User Flow:** A dedicated section displaying key metrics. Shows the number of completed focus sessions for the day/week, average session duration, and streaks (consecutive days with completed sessions). Visualizations (e.g., simple bar charts) help users track progress.
* **Functionality:** Aggregates data from completed Focus Sessions. Uses local state or localStorage to persist session history.
UI/UX DESIGN:
- **Layout:** Single page application (SPA) with a clean, minimalist, and responsive design. Main navigation (e.g., Setup, Timer, Insights) accessible via a sidebar or top navigation bar. Central content area dynamically updates based on the selected section.
- **Color Palette:** Primarily uses a calming, muted color scheme. Example: Dark background (e.g., `#1a1a1d`), with accent colors like a soft teal (`#4dc0b5`), a muted orange (`#f4a261`), and shades of gray (`#556cd6`, `#8897d6`). Emphasis on contrast for readability.
- **Typography:** Clean, sans-serif fonts like Inter or Manrope for body text and headings. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Adapts fluidly to various screen sizes. On smaller screens, the sidebar might collapse into a hamburger menu. Content blocks reflow and resize appropriately.
- **Visual Cues:** Subtle animations and loading indicators to provide feedback. Progress rings, pulsing effects for active timers, and smooth transitions between sections.
DATA MODEL (using Zustand and localStorage):
- **`appState` (Zustand Store):**
* `userSetup`: { `monitors`: number, `typicalDistractions`: string[], `primaryTasks`: string[], `recommendations`: string[] }
* `timer`: { `isRunning`: boolean, `isSession`: boolean, `duration`: number, `elapsed`: number, `breakDuration`: number }
* `focusMode`: { `isActive`: boolean }
* `sessionHistory`: Array<{ `id`: string, `startTime`: Date, `endTime`: Date, `durationMinutes`: number }>
* `settings`: { `defaultSessionDuration`: number, `defaultBreakDuration`: number, `soundAlerts`: boolean }
- **`localStorage`:** Persists `userSetup`, `sessionHistory`, and `settings` to maintain state across sessions.
COMPONENT BREAKDOWN:
- **`Layout.tsx`:** Main application wrapper. Includes Header, Sidebar/Navigation, and main content area. Handles routing (if using Next.js router for SPA feel) and overall structure.
* Props: `children` (ReactNode)
* Responsibility: Structural layout, navigation.
- **`Wizard.tsx`:** Multi-step form for initial user setup.
* Props: `onComplete` (callback function)
* Responsibility: Collects user setup data.
- **`Timer.tsx`:** Displays the countdown timer, start/stop/reset controls, and session/break toggles.
* Props: `duration`, `elapsed`, `isRunning`, `isSession`, `onStart`, `onStop`, `onReset`, `onToggle`
* Responsibility: Manages and displays the focus timer logic.
- **`FocusModeToggle.tsx`:** Button/switch to activate/deactivate the symbolic focus mode.
* Props: `isActive`, `onToggle`
* Responsibility: Controls the focus mode state.
- **`Dashboard.tsx`:** Displays focus session history and summary statistics.
* Props: `sessionHistory` (Array)
* Responsibility: Visualizes user's focus data.
- **`Chart.tsx`:** Reusable charting component for the dashboard.
* Props: `data` (Array), `type` (string - 'bar', 'line')
* Responsibility: Renders data visualizations.
- **`NotificationBell.tsx`:** Visual indicator for upcoming breaks or completed sessions.
* Props: `count` (number)
* Responsibility: Provides non-intrusive alerts.
- **`SettingsPanel.tsx`:** Allows users to adjust default session/break durations and sound preferences.
* Props: `settings` (object), `onChange` (callback function)
* Responsibility: Manages application settings.
ANIMATIONS & INTERACTIONS:
- **Timer Progress:** Smooth animation on the timer's progress ring as time elapses using Framer Motion.
- **Section Transitions:** Subtle fade-in/fade-out or slide transitions when navigating between different sections of the app.
- **Button Hovers:** Gentle scaling or color change effects on interactive elements.
- **Loading States:** Placeholder spinners or skeleton screens when fetching or processing data (e.g., loading history).
- **Notification Feedback:** Animated appearance/disappearance of notification messages.
- **Focus Mode Activation:** A visual cue, like a subtle screen overlay or background dimming effect, when Focus Mode is active.
EDGE CASES:
- **Empty State:** The Dashboard should display informative messages (e.g., "Start your first focus session to see your progress!") when `sessionHistory` is empty.
- **Error Handling:** Gracefully handle potential errors, such as localStorage access issues or browser API failures (e.g., notification permissions denied). Display user-friendly error messages.
- **Validation:** Ensure user inputs in the Wizard and Settings are valid (e.g., positive numbers for durations).
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure sufficient color contrast, and keyboard navigability for all interactive elements.
- **Browser Notifications:** Properly request and handle user permissions for browser notifications. Provide fallback mechanisms if permissions are denied.
SAMPLE DATA:
```json
{
"userSetup": {
"monitors": 1,
"typicalDistractions": ["email", "social_media", "messaging_apps"],
"primaryTasks": ["coding", "documentation"],
"recommendations": ["Try setting a 45-minute focus block.", "Disable desktop notifications during sessions."]
},
"timer": {
"isRunning": false,
"isSession": true,
"duration": 1500, // 25 minutes in seconds
"elapsed": 0,
"breakDuration": 300 // 5 minutes in seconds
},
"focusMode": {
"isActive": false
},
"sessionHistory": [
{
"id": "sess_1",
"startTime": "2023-10-27T10:00:00Z",
"endTime": "2023-10-27T10:25:00Z",
"durationMinutes": 25
},
{
"id": "sess_2",
"startTime": "2023-10-27T10:30:00Z",
"endTime": "2023-10-27T10:55:00Z",
"durationMinutes": 25
},
{
"id": "sess_3",
"startTime": "2023-10-27T11:10:00Z",
"endTime": "2023-10-27T11:30:00Z",
"durationMinutes": 20
}
],
"settings": {
"defaultSessionDuration": 1500,
"defaultBreakDuration": 300,
"soundAlerts": true
}
}
```
DEPLOYMENT NOTES:
- Ensure environment variables (if any needed, e.g., for future API integrations) are configured correctly in `next.config.js` and deployed environments.
- Optimize build size by code-splitting components and using `next/dynamic` where appropriate.
- Implement caching strategies for static assets.
- Set up CI/CD pipeline for automated builds and deployments (e.g., Vercel, Netlify).
- Consider Lighthouse scores for performance, accessibility, and SEO best practices, even for an SPA.
- Ensure proper `rel=noopener noreferrer` for any external links.
- Use `getStaticProps` or `getServerSideProps` minimally, focusing on client-side rendering and state management for this SPA architecture.