Hearth

🌿 About the Project

🌍 Inspiration

I created Hearth because I wanted to build a platform where people don’t just scroll — they contribute. A place where local moments, stories, and problems are shared on a map, not lost in a timeline.

The idea was simple: what if social media could help plant trees?

Every 10 interactions (likes, posts, or comments) = 1 real tree planted by the Hearth team. The more you post or engage, the more seeds you earn — and those seeds grow into something real 🌱

🔧 How I Built It

I built Hearth using v0.dev to prototype a mobile-first, card-based layout. It’s fully responsive and uses a clean, minimalist design system with animations to keep the experience smooth and engaging.

Frontend: Next.js + TypeScript
Components: shadcn/ui (clean, utility-first UI)
State Management: Zustand
Animations: Framer Motion
Backend: Supabase for Auth, Database, Storage, and Realtime
Maps: Google Maps JavaScript API (with styled tiles and pin features)
Design Principle: No colors except red (danger/destructive) and green (positive/action)

🧠 Key Features

📸 Post Creation
- Upload multiple photos with descriptions
- Drop a pin on Google Maps or search a place using autocomplete
- Choose category tags (Nature, Events, Art, Issues)
- Add hashtags
- Earn seeds with every engagement
🗺️ Google Maps Integration
- Users can post places they love — or issues that need attention
- Posts can help others discover hidden gems, or even report local problems like damages, leaks, waste, or environmental concerns
- Styled map interface with animated pins and filters
📰 Feed & Trending
- Card-style post feed with likes, comments, shares, bookmarks
- Trending section sorted by engagement
- Hashtags ranked by most-liked posts using them
👤 User Profiles
- Profile picture, name, followers/following
- Sections for: Posts, Saved, Boards (like Pinterest folders)
- Followers list is clickable and manageable
- Seeds score increases with activity (10 seeds = 1 tree)

💻 What I Learned

Integrating and styling Google Maps for post creation and discovery
Using Supabase for secure login, realtime syncing, and storage
Managing complex app state with Zustand cleanly
Designing for constraint: how fewer colors and minimalist layout leads to better UX
Making performance a priority while building mobile-first and responsive interfaces

🚧 Challenges I Faced

Making Google Maps feel native to the app-loading errors
Handling edge cases in posting (invalid location, offline states)
Real-time updates without over-fetching or re-rendering
Designing meaningful gamification with seeds that leads to real-world environmental action

✅ What Makes Hearth Unique

Map-first design. The map isn’t a feature — it is the platform.
Every post has impact. Whether you’re sharing a hidden garden or reporting a leaking pipe, your post can help others nearby.
You grow the planet. 10 seeds = 1 tree. It’s not just a feed — it’s a cause.
Minimalist & accessible. Only red and green used sparingly. Everything else is clean, soft, and device-adaptive.