Contact person: Business Client

Phone:Show

Email:Show

Location: Kolkata, India

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"## **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
[login to view URL] // Main view switching (timer, profile, history)
[login to view URL] // Login & Registration forms
[login to view URL] // Timer UI and logic
[login to view URL] // List of past focus sessions
[login to view URL] // Profile view and editable form
[login to view URL] // Firebase config
[login to view URL] // Global TailwindCSS styles
[login to view URL] // Optional component styles
[login to view URL] // 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)" (client-provided description)