passion project
A digital corner to nurture your relationships with human.
ROLE
Design + Vibe-code
TIMELINE
1 week
STACK
Figma, Claude Code, Firebase, Vercel, GitHub, Canva
the gap
People with different communication style are often together in this universe
A very common reason for fights isn't that the love and care wasn't there, but that people couldn't find a way to say the hard thing without it turning into a whole thing. And when things do go wrong, anger has a way of making you forget all the good - the memories, the care, everything that was built
Instagram felt too generic. WhatsApp is a chat box where things get lost. There was no place that felt like it was made for just two people, something small and warm.
Defining the Problem statement
How might we create a shared space for two people to hold their memories together and navigate conflict without the pressure of having to say it all out loud?
EXECUTION
Phase 1 — Think & Define (Days 1–2)
Wrote the core idea down.
Ideated with Claude, ChatGPT and my friends.
Wrote the PRD and listed requirements.
Got basic wireframes from Claude Chat.
Phase 2 — Visual Design (Day 3–4)
Day 3: Sketched the wireframe for more clarity, selected initial assets, did basic layout exploration and prompted it in claude. But did not feel the magic.
Day 4: Referenced Pinterest and social media for whimsy design direction, got a Canva subscription for assets and image editing, came back to Figma with a clearer vision
Designed concrete frames: exact layout, whimsy elements, where everything lives
Had the visual locked before going back to code
Phase 3 — Build Front End (Day 4–5)
Opened Claude Code, linked asset folder.
Prompted in small chunks, one section at a time.
Tested on localhost throughout, iterated when something felt off.
Added ambient sound, moving elements, multiple garden views, wall background options to make it more whimsical ( I’m just a girl :) )
Phase 4 — Build Back End & Iterate (Day 5–6)
Added Node.js + Express to store gardens and handle user data and integrated Nodemailer to send invite emails via Gmail when a garden is created.
Built real-time sync using Socket.io so both partners see changes instantly, but then dropped it from v1, because it felt unnecessary. This place is supposed to be a warm and slow corner and not an active platform like Figma.
To adapt a bit to mobile added touch drag, touch resize, expandable garden, floating pickers, responsive modals.
Moved the database to Firestore to store gardens and sync changes between partners in real time & added Firebase Auth for passwordless magic link sign-in.
Pushed everything to GitHub and connected it to Vercel for hosting.
Compressed all images for faster loading. Went live at nook-and-bloom.vercel.app
FUTURE SCOPE
It is just v1, and in future with more time I will like to improve it more. Here are few things -
Resolve a bug together — when both partners mark a bug as resolved, it blooms into a flower on the garden, visually showing growth from conflict
Garden anniversaries — automatic email on the day the garden was created every year, with a snapshot of how the garden looks
Logout + session management — currently there's no way to log out; adding a proper logout button and session expiry so accounts stay secure
Photo privacy — photos uploaded to memories are stored as base64 in Firestore right now, visible to anyone with database access; but for future adding an end-to-end encryption will be the best.
