## **FocusGarden – Product Overview** **FocusGarden** is a mindfulness-based productivity web app that uses the **Pomodoro technique** to help users stay focused, take mindful breaks, and visually track their progress through a gamified garden metaphor. --- ## **Objective** The goal of FocusGarden is to improve user productivity while encouraging mindful habits and balance through structured work and break intervals. The app rewards users for completing focus sessions by **"growing" their digital garden**, using visuals like animated flowers or plants. --- ## **Core Features** ### 1. **Authentication** * User registration and login via Firebase Authentication * Form validation (password strength, confirmation, email format) * Optionally store user profile data in Firestore (name, birthday, preferences) --- ### 2. **Customizable Pomodoro Timer** * Default: 25 minutes focus / 5 minutes break * Users can customize focus and break durations (e.g., 15/3, 45/10) * Preferences saved to Firestore and/or localStorage * Countdown timer with Start, Pause, and Reset functionality * Prevents changing duration while a session is active --- ### 3. **Visual Garden Feedback** * After each completed focus session, an animated flower or plant "grows" * Garden resets each day, or can be accumulated over time (based on preferences) * Encourages a sense of progress and visual reward --- ### 4. **Session Tracking** * Each completed Pomodoro is logged to Firebase Firestore * Includes timestamp, duration, and user ID * Session history displayed in a list or calendar format --- ### 5. **Mindful Breaks** * During break periods, a mindfulness prompt is shown (e.g., deep breathing, mini-meditation) * Soothing audio or animation may accompany the break --- ### 6. **User Profile Page** * Displays email and registered name * Allows editing of profile info (name, optional avatar, birthday) * Displays user’s session statistics (total time focused, longest streak, etc.) --- ### 7. **Settings & Themes** * Dark mode toggle * Option to enable/disable sound effects * Custom theme colors to match a calming garden aesthetic --- ## **Tech Stack** * **Frontend**: React (with TailwindCSS) * **Backend**: Firebase (Auth, Firestore, Hosting) * **Styling**: TailwindCSS with a soft, nature-inspired theme * **State Management**: React state + Firestore * **Animation**: CSS animations or GIFs for flower blooming --- ## **Directory Structure** ```plaintext /src App.jsx // Main view switching (timer, profile, history) Auth.jsx // Login & Registration forms PomodoroTimer.jsx // Timer UI and logic SessionHistory.jsx // List of past focus sessions UserProfile.jsx // Profile view and editable form firebase.js // Firebase config index.css // Global TailwindCSS styles App.css // Optional component styles main.jsx // App entry point ``` --- ## **Deliverables for Developer** The hired developer should deliver: * A fully functional, responsive React web app * Integrated Firebase backend (authentication + Firestore) * All features listed above implemented cleanly and modularly * Smooth UI/UX with accessible design * Deployed version (optional: via Firebase Hosting or Vercel)