Malika

Posted on Mar 1

🏘️ CommuneXR – Turning Neighbors Into a Connected Community (Built in 48h)

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

🏘️ CommuneXR – Rebuilding Real Neighborhood Communities Through Technology

This is a submission for the DEV Weekend Challenge: Community

The Community

My neighborhood. My neighbors. The people on my street, in my building, at my local park.

I built this for the real, physical community I live in.

We live in the same place, but we rarely connect. Someone needs help fixing a bike, another person offers guitar lessons, someone else has tools to lend — but these needs and skills never meet.

CommuneXR transforms anonymous neighbors into a connected, supportive community.

What I Built

CommuneXR is a hyper-local platform that turns your neighborhood into a live map of mutual aid.

✨ Key Features

Feature	Description
📍 Interactive Map	Real geolocation with React-Leaflet. Green markers for offers 🤝, red for needs 🆘
💬 Exchange System	Structured lifecycle: `proposed` → `accepted` → `completed` with full accountability
🏆 Gamification Engine	Points (+10 per exchange) and 4 unlockable badges via Rails callbacks
📊 Personal Dashboard	Track exchanges, view badges, monitor your community impact
🔎 Smart Filters	Filter by type (offer/need) and category in real-time
🔄 Exchange Management	Accept, decline, or complete exchanges with instant UI feedback

🏆 Badges System

Badge	How to Earn
🌟 First Helper	Complete your first exchange
🏡 Good Neighbor	Complete 5 exchanges
🦸 Community Hero	Complete 10 exchanges
🔧 Skilled Helper	Help in 3 different categories

Demo

▶️ Watch the 2:49 demo: https://youtu.be/DE8ptjoFxhw

📸 Screenshots


Interactive Map	Create Service


Service Details	Dashboard

Code

Frontend Repository

git clone https://github.com/joupify/communeXR_front.git
cd communeXR_front
npm install
npm start

🔗 GitHub: https://github.com/joupify/communeXR_front

Backend Repository

bash
git clone https://github.com/joupify/communeXR.git
cd communeXR
bundle install
rails db:create db:migrate db:seed
rails s -p 3000

🔗 GitHub: https://github.com/joupify/communeXR

Project Structure

text
communeXR/
├── backend/ # Rails API
│ ├── app/models/
│ ├── app/controllers/
│ └── db/
└── frontend/ # React app
├── src/components/
├── src/pages/
└── public/

How I Built It

Tech Stack
Backend:

🟥 Ruby on Rails 7 (API mode)
🐘 PostgreSQL for database
🔐 Devise for authentication
📍 Geocoder for location services
🚀 Render.com for deployment

Frontend:

⚛️ React 18 with Hooks
🗺️ React-Leaflet + OpenStreetMap
🎨 Bootstrap 5 for styling
🔄 React Router for navigation
📡 Fetch API for REST calls
🚀 Render.com for deployment

Key Challenges Solved

🗺️ Custom Map Markers

javascript
const getServiceIcon = (type) => L.divIcon({
  html: `<div style="
    background-color: ${type === 'offer' ? '#22c55e' : '#ef4444'};
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border: 3px solid white;
  ">${type === 'offer' ? '🤝' : '🆘'}</div>`,
  iconSize: [40, 40],
  iconAnchor: [20, 40],  // 👈 Key: anchor at bottom center
  popupAnchor: [0, -40]
});

🏆 Automatic Badge Attribution

ruby
# app/models/exchange.rb
after_update :check_badges, if: :completed?

def check_badges
  # First exchange → "First Helper" badge
  if helper.helped_exchanges.completed.count == 1
    badge = Badge.find_by(name: "First Helper")
    UserBadge.find_or_create_by(user: helper, badge: badge)
  end

  # 5 exchanges → "Good Neighbor" badge
  if helper.helped_exchanges.completed.count == 5
    badge = Badge.find_by(name: "Good Neighbor")
    UserBadge.find_or_create_by(user: helper, badge: badge)
  end

  # +10 points per completed exchange
  helper.increment!(:points, 10)
end

🔄 Exchange Lifecycle Management

ruby
# app/models/exchange.rb
enum status: { proposed: 0, accepted: 1, completed: 2, rejected: 3 }

📊 Complex Nested JSON

ruby
# app/controllers/services_controller.rb
def show
  @service = Service.includes(:user, exchanges: [:requester, :helper]).find(params[:id])

  render json: @service.as_json(
    include: {
      user: { 
        only: [:id, :username, :points],
        include: { badges: { only: [:id, :name, :icon] } }
      },
      exchanges: { 
        include: { 
          requester: { only: [:id, :username] },
          helper: { only: [:id, :username] }
        } 
      }
    }
  )
end

Deployment Architecture

Frontend: React app hosted on Render.com 🚀
Backend: Rails API hosted on Render.com 🚀
Database: PostgreSQL hosted on Render.com 🐘

All services are deployed on Render.com, with the frontend communicating with the backend via REST API calls.

Data Model

ruby
User
├── has_many :services
├── has_many :helped_exchanges (as helper)
├── has_many :requested_exchanges (as requester)
├── has_many :badges through: :user_badges
└── points :integer

Service
├── service_type :offer or :need
├── status :open / :in_progress / :closed
├── latitude & longitude
└── belongs_to :User

Exchange
├── belongs_to :service
├── belongs_to :helper (User)
├── belongs_to :requester (User)
├── status :proposed / :accepted / :completed / :rejected
└── message :text

📊 API Endpoints

Method  Endpoint    Description
GET /services   List all services
GET /services/:id   Get service details
POST    /services   Create a service
POST    /exchanges  Create an exchange
PATCH   /exchanges/:id  Update exchange status
GET /users/:id  Get user profile
GET /users/:id/exchanges    Get user exchanges

Why This Matters

In a world of digital connections, we've lost touch with our physical neighbors.

CommuneXR brings back what matters:

🤝 Real help from real people
🌱 Stronger communities through sharing
🏘️ Safer neighborhoods when we know each other

This project is:
✅ Full-stack and functional
✅ Structured domain modeling with clean architecture
✅ Real community problem solved
✅ Gamified engagement engineered
✅ Built in 48 hours

"Community is not a feature. It is infrastructure."

🚀 What's Next

⚡ Real-time chat with Action Cable
📱 Mobile app with React Native
⭐ Trust & rating system for exchanges
📅 Neighborhood event layer (meetups, garage sales...)
🌐 Multi-language support (i18n)
🔐 Production-ready multi-user authentication

Links

Resource Link
🌍 Live App https://communexr-front.onrender.com
🎥 Demo Video https://youtu.be/DE8ptjoFxhw
📁 Frontend Repo https://github.com/joupify/communeXR_front
📁 Backend Repo https://github.com/joupify/communeXR

🙏 Acknowledgments

👥 The DEV community – for this amazing challenge
🗺️ Leaflet & OpenStreetMap – for the incredible mapping tools
🏘️ My neighbors – you know who you are!

Built in 48 hours with ❤️ for my neighborhood

DEV Community