A simple desktop app inspired by Tamagotchi toys, where you have to keep a tiny virtual plant alive. This project was built with HTML, CSS, JavaScript, and Electron.
- Water meter mechanic 💧
A visible water bar that drains over real time - Dynamic moods 😄
The plant shifts between four states based on its water level: thriving, okay, thirsty, and wilted - Care reminder 🔔
A little message below your plant that lets you know how it's feeling
The app starts fresh every time you open it. Your plant begins at 100% level and the water bar will slowly drain over time.
- Click “Water” to refill the bar by +25%. You can water again every 10 seconds.
- Watch the plant's mood. It updates as the water level changes and warns you when the plant is thirsty.
- If the bar hits 0% the plant wilts and the session ends. Click "Restart" to start over.
I wrote a markdown doc explaining how to build your own Plant Buddy step-by-step from scratch as part of my submission for Codédex's Project Tutorial Challenge.
- Read my document: tutorial.md
- Check Codédex project tutorial: Build a Plant Buddy Desktop App with Electron 🪴
- Set up an Electron project from scratch
- Build a custom window
- Render and style a desktop app with HTML & CSS
- Bring it to life with JavaScript
Everything you need is already in this repo, so you can follow along and build your own version!
Figma design file for this project: Plant Buddy 🪴
Want to test the finished app first? Here's how to run it:
git clone https://github.com/sh3rqxs/plant-buddy.git
cd plant-buddyMake sure you have Node.js installed on your machine, then run:
npm installThis installs Electron and any other modules required to run the app.
npm startThis will open Plant Buddy as a desktop application powered by Electron.
If you find something confusing or want to suggest improvements, feel free to open an issue or submit a pull request!
Happy coding! :)