Grow a tiny productivity garden with each focus session. 🦝
🌐 Live Demo
Try GrowOps here: https://grow-ops.vercel.app/growops
- 🌱 Pomodoro-style Focus Timer — start, abort, or complete sessions
- 🌾 Garden Growth — each session grows a random plant SVG
- 🪴 Dynamic Tasks — add, remove, and select tasks you’re working on
- 📆 Day Streak & Total Focus Tracker — persistent local stats
- 🌑 Focus Mode — minimal overlay with keyboard + backdrop exit
- 💾 Local Persistence — tasks, plants, and sessions saved in localStorage
- ♻️ Reset Garden — start fresh anytime
- Optional cloud sync (Supabase)
- Cross-device garden sharing
- Animated growth transitions
- Soft ambient sound effects
- Plant lifecycle: seed → sprout → bloom
- Garden “snapshot” export
- Seasonal plant packs (🌻 🌵 🌸)
- Themes (dark mode, nature themes, neon, cozy)
| Name | Description |
|---|---|
| React | UI library for building interactive components. |
| Vite | Lightning-fast development server and bundler. |
| TypeScript | Strongly typed JavaScript for safer, cleaner code. |
| TailwindCSS | Utility-first CSS framework for fast styling. |
| localStorage API | Client-side persistence for tasks, plants, and streaks. |
-
Clone the repository
git clone https://github.com/NickTheDevOpsGuy/GrowOps.git
-
Install dependencies
npm install
-
Run the development server
npm run dev
📁 Click to expand file structure
.
├── .github
│ ├── ISSUE_TEMPLATE
│ │ ├── bug.yml
│ │ ├── config.yml
│ │ ├── documentation.yml
│ │ ├── enhancement_refactor.yml
│ │ ├── feature_request.yml
│ │ └── question_discussion.yml
│ ├── pull_request_template.md
│ └── workflows
│ ├── growsops-ci.yml
│ └── vercel-production.yml
├── .gitignore
├── .husky
│ ├── pre-commit
│ └── pre-push
├── .prettierignore
├── .prettierrc
├── .prettierrc.json
├── .prettierrc.yml
├── .stylelintrc.json
├── eslint.config.ts
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── public
│ └── assets
│ ├── growops.svg
│ └── preview.gif
├── README.md
├── scripts
│ └── precheck.sh
├── src
│ └── app
│ ├── App.tsx
│ ├── components
│ │ ├── Card.tsx
│ │ ├── FocusTimer.tsx
│ │ ├── icons
│ │ │ ├── Bloom.tsx
│ │ │ ├── Bud.tsx
│ │ │ ├── index.ts
│ │ │ ├── Seed.tsx
│ │ │ └── Sprout.tsx
│ │ ├── PlantIcon.tsx
│ │ └── TaskList.tsx
│ ├── hooks
│ │ ├── useCountdown.ts
│ │ └── usePlantGrowth.ts
│ ├── lib
│ │ └── garden.ts
│ ├── main.tsx
│ ├── pages
│ │ └── TaskGarden.tsx
│ ├── styles
│ │ └── global.css
│ └── types
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite-env.d.ts
└── vite.config.ts
- 🐛 Report bugs in Issues
- 💡 Suggest features or improvements
- 🔧 Open a Pull Request
Created with ☕, curiosity, and a touch of chaos by Nicholas Clark.
🏷 #NickDoesDevOps • #LearningInPublic • #BuiltInPublic