Euphoria : Grow your Garden

Inspiration

I noticed something about myself and my friends, we always remember what went wrong, but we rarely celebrate what went right. A bad day sticks in your head, but a small win gets forgotten by the time you wake up next morning.

I wanted to build something that flips that. Something that actually makes you feel good about the little things you do every single day.

The idea came from two places. Firstly, games like Grow a Garden in Roblox where you grow things and care about them. Secondly, Plants vs Zombies (a game that I played a lot growing up!) - those collectible cards felt so satisfying to earn. I thought, what if every good thing you did grew a plant? What if you could look back and actually see all the kindness you've shown yourself?

That's how Euphoria was born.

What it does

Euphoria is a cozy pixel garden where your daily wins become plants. Here's what you can do:

• Plant a Win - Log one good thing each day and watch it grow. One day is a seedling, three days becomes a sprout, seven days a flower, fourteen days a tree, and after thirty days you get a legendary glowing plant.

• Collect Cards - Every plant comes with a collectible card. Flip it over and there's a motivational quote on the back.

• Build Your Garden - All your plants live in a grid. They bob gently and rare ones glow.

• Share in The Meadow - A community wall where anyone can share their wins and like other people's posts.

• Connect with Friends - Add friends, visit their gardens to see what they've grown, and send private messages.

• Level Up - You start as a Seedling and work your way up to Euphoria Legend. There are ten levels total so far. More levels will be added with time.

• Customize Your Avatar - Pick a little pixel face for yourself from a bunch of options.

How we built it

I kept things simple. Just HTML5, CSS3, and vanilla JavaScript - no fancy frameworks. All the data stays on your device using localStorage.

For the pixel aesthetic, I used Google Fonts (Press Start 2P and VT323) and made sure every image renders crisp with image-rendering: pixelated.

The colors are sage green, sunflower yellow, and terracotta - like a sunny meadow.

Tech Stack:

• HTML5 for structure
• CSS3 for pixel-perfect styling and animations
• Vanilla JavaScript for all game logic
• localStorage for data persistence
• Google Fonts for retro typography

Challenges we ran into

Keeping data in sync across all the features was tricky at first. When someone plants a win, it needs to update the garden grid, the streak counter, the level XP, the card album, and trigger the growth animation. I solved this by making one function called refreshAllDisplays() that handles everything.

The chat system without a backend was interesting. I store messages in localStorage under each user's key. When you send a message, it saves to your chat data and to your friend's chat data.

Accomplishments that we're proud of

• A fully working game-like habit tracker that actually feels good to use, not like another chore list

• Plant growth animations using only CSS keyframes - gentle bobbing, soft glows, and sparkle bursts

• A complete friends and chat system with no backend - everything runs in the browser using localStorage

• Card collection mechanic with flip animations and motivational quotes - every plant feels rewarding to earn

• Leveling system with ten unique titles from Seedling to Euphoria Legend

• Cohesive pixel aesthetic across every page, button, and modal and it actually looks like a retro game

• All data persists - you can close the browser and your garden is still there when you come back

What we learned

localStorage is surprisingly powerful. I learned how to store user data, friend lists, chat histories, and plant growth stages - all without any backend. Each user's data stays separate using their username as a key.

CSS animations can be magical. Just a few keyframes gave my plants life - gentle bobbing, soft glows, little sparkle bursts. No JavaScript needed for the cozy vibes.

Modal popups are harder than they look. Positioning, z-index, handling the escape key, clicking outside to close - so many edge cases.

Pixel art is forgiving. Imperfections look intentional. That took so much pressure off and let me focus on making things actually work.

What's next for Euphoria

• Seasonal events - special plants that only grow in spring, summer, fall, or winter

• Garden decorations - making a realistic garden and adding pixel furniture like benches, fences, and fountains

• Daily challenges - earn bonus seeds and rare plants for completing small tasks

• Plant trading - swap duplicate cards with friends

• Achievement badges - unlock special badges for milestones like 100 wins or 30 day streaks

• Custom plant names - let users name their favorite plants

• Export your garden - save a screenshot of your full garden to share on social media

Built With

• css3
• github
• google-fonts
• html5
• javascript
• localstorage
• vanilla