This is a submission for the DEV Weekend Challenge: Community
The Community
It was a typical Saturday morning in my neighborhood when I heard something that would change my weekend: a family's beloved dog had gone missing. The frantic posters, the social media shares, the desperate calls to local shelters, it struck me how fragmented our community's resources were when it came to helping our furry friends.
That's when it hit me: what if there was a single platform where pet owners could connect, help find lost pets, and support each other?
The pet owner community is massive and passionate. We share tips, celebrate wins, and mourn losses together. But we lacked a centralized tool to coordinate efforts when it mattered most. That's the gap I set out to fill with FurMap.
What I Built
FurMap is a community platform that connects pet owners through an interactive map-based interface. Here's what makes it special:
🗺️ Interactive Map with Color-Coded Pins
- Red pins: Lost pets
- Green pins: Found pets
- Blue pins: Pet sitters needed
Users can see all activity in their neighborhood at a glance. Click on any pin to view details, comment, or contact the poster.
🔔 Real-Time Notifications
When someone comments on your post, you get an instant notification. No more refreshing the page hoping for updates, FurMap keeps the community connected.
💬 Community Comments
Every post has a comment section where neighbors can:
- Share tips and leads
- Coordinate search efforts
- Offer emotional support
📞 Direct Contact
Post owners can share their email or WhatsApp, making it easy to connect offline when needed.
🐾 My Pets Profile
Create profiles for your furry friends and link them to your posts. It adds a personal touch and helps others identify the pet faster.
📍 Smart Location Detection
- GPS for mobile users
- IP-based fallback for desktop users
- Click-to-set on the interactive map
Demo
- URL: https://fur-map.netlify.app
- Dashboard - Map page
- Dashboard - List page
- Create New Post page
- My Pets page
- Notification page
- Post Details page
Code
depapp
/
furmap
FurMap is a community platform for pet owners to connect, help find lost pets, report found animals, and find trusted pet sitters in their neighborhood.
🐾 FurMap - Pet Community Platform
FurMap is a community platform for pet owners to connect, help find lost pets, report found animals, and find trusted pet sitters in their neighborhood. Built with Next.js 14, Supabase, and Leaflet/OpenStreetMap.
✨ Features
🗺️ Interactive Map
- See all posts on a map with color-coded pins
- 🔴 Red = Lost Pets
- 🟢 Green = Found Pets
- 🔵 Blue = Pet Sitters
- Click on map to view post details
🔔 Real-time Notifications
- Get instant notifications when someone comments on your posts
- Notification bell with unread count badge
- Mark as read / Mark all as read
💬 Community Comments
- Discuss and help each other
- Comment on posts to coordinate searches
- Share information and tips
📞 Direct Contact
- Post owners can share contact info
- Connect via email or WhatsApp
🐾 My Pets
- Create profiles for your furry friends
- Link pets to your posts
📍
…How I Built It
Tech Stack
| Component | Technology |
|---|---|
| Frontend | Next.js 14 (App Router) |
| Styling | Tailwind CSS + Neo-brutalism |
| Backend | Supabase |
| Database | PostgreSQL |
| Auth | Supabase Auth |
| Maps | Leaflet + OpenStreetMap |
| Deployment | Netlify |
Key Technical Decisions
1. Neo-Brutalism Design
I chose a bold, playful design aesthetic to match the fun energy of pet ownership. The chunky borders, bright colors, and playful typography make the app feel approachable and memorable.
2. Supabase for Backend
Supabase was perfect for this project, it provided authentication, database, and real-time subscriptions out of the box. The free tier is generous enough for a growing community.
3. Leaflet + OpenStreetMap
No expensive Google Maps API needed! OpenStreetMap is free, open-source, and works beautifully for neighborhood-level mapping.
4. Dual Notification System
- Post owners get notified of new comments
- Other commenters also get notified (threaded engagement)
- Uses Supabase database with manual refresh (real-time can be added later)
Challenges & Solutions
Challenge: Desktop users don't have GPS
Solution: Implemented IP-based geolocation using ipapi.co as fallback, plus click-to-set on the map
Challenge: Managing location on mobile Safari
Solution: Combined GPS with manual map clicking for maximum reliability
Challenge: Creating realistic seed data
Solution: Built a seed script that creates test users, pets, posts with geographic distribution around Jakarta, Indonesia
What I Learned
This weekend challenge pushed me to think about community-first design. It's not just about the technology, it's about understanding human needs:
- People panic when pets go missing, they need quick, intuitive tools
- Community members want to help but need coordination, comments and notifications bridge that gap
- Trust is built through transparency, showing contact info, clear post types
FurMap isn't just an app, it's a small step toward more connected, compassionate neighborhoods. Every lost pet that finds their way home, every pet sitter that helps a stressed owner, every comment that offers hope... that's the real value.
The best technology is the kind that brings us closer together.
Top comments (0)