🔄 Rundour

Hyper-Local Errand Sharing

Your neighbors are already going there. Save time, reduce emissions, and strengthen your community—one errand at a time.

---

🚀 What is Rundour?

Rundour is a hyper-local errand-sharing platform that connects neighbors who are already heading to the same stores. Need one item from the hardware store? Your neighbor is going there anyway—Rundour makes the match instantly.

Built as a zero-backend, fully functional single-page application that runs entirely in the browser with real-time cross-tab synchronization, geolocation, interactive mapping, and a complete user management system.

Live Demo: Open index.html in any modern browser. Click "Try Demo Account" on the login screen to explore with pre-populated data, or sign up to start from zero and watch the community grow as you use it.

---

✨ Features

Core Experience

• 🗺️ Hyper-Local Discovery — Radius-based matching (1–25km) with Haversine distance calculation
• 📍 Interactive Mapping — Full Leaflet/OpenStreetMap integration with live markers, popups, and user geolocation
• 💬 Real-Time Messaging — In-app encrypted chat threads per errand; no phone numbers exchanged
• ⚡ Live Sync — Cross-tab real-time updates via BroadcastChannel API + localStorage persistence
• 📊 Eco Impact Tracking — Automatic fuel (L) and CO₂ (kg) savings calculation per completed errand

User System

• 🔐 Secure Auth — Registration, login, session tokens, password hashing, rate limiting, XSS sanitization
• ✅ Verification Tiers — Email, phone (SMS simulation), and ID verification with badge display
• ⭐ Reputation Engine — Rating system, completion counters, response time tracking
• 🔒 Privacy-First — Exact coordinates never shared; only neighborhood-level visibility

Subscription Plans (Functional)

Plan	Price	Limits
Neighbor	Free	3 errands/month, 2km radius
Local Hero	$4.99/mo	Unlimited errands, 10km radius, verified badge, priority support
Community Champion	$9.99/mo	25km radius, gold badge, analytics dashboard, 24/7 support

Pages & Modules

• Landing — Animated hero, live stats, how-it-works, feature grid, pricing, security trust section
• Dashboard — Private overview with stats, activity feed, nearby errands, profile sidebar
• Explore — Dual-pane map + list with distance slider, category chips, urgency filters
• Create Errand — Multi-section form with tips, safety reminders, and plan enforcement
• Errand Detail — Status workflows, compensation display, real-time message thread
• Community — Discussion board, events, likes/shares, trending topics, neighbor directory
• Inbox — Tabbed messages & notifications with unread badges and conversation routing
• Profile — Cover photo layout, badges, subscription tier, verification status, tabbed history
• Settings — Account editing, privacy toggles, notification preferences, password change, account deletion

---

🛠️ Tech Stack

Layer	Technology
Framework	Vanilla JavaScript (ES6+) — zero dependencies
Styling	Custom CSS with CSS Variables, Flexbox, CSS Grid
Maps	Leaflet 1.9.4 + OpenStreetMap tiles
Icons	Font Awesome 6.4
Typography	Inter (Google Fonts)
Persistence	localStorage + BroadcastChannel API
Security	Client-side input sanitization, token generation, rate limiting

---

📦 Installation

No build step. No server required. Just open the file.

# Clone the repo
git clone https://github.com/yourusername/rundour.git
cd rundour

# Open in browser (macOS)
open index.html

# Or serve locally for full geolocation support
npx serve .
# Then visit http://localhost:3000

File Structure

rundour/
├── index.html          # Main SPA shell (75KB)
├── css/
│   └── style.css       # Complete design system (60KB)
├── js/
│   └── app.js          # Application logic, store, router (93KB)
└── README.md           # This file

---

🏗️ Architecture

State Management (Store)

Centralized immutable-ish store with the following data shape:

{
  currentUser: null | User,
  users: [],
  errands: [],
  messages: [],
  communityPosts: [],
  notifications: [],
  stats: { totalUsers, totalErrands, totalFuelSaved, totalCO2Saved }
}

• Auto-save every 5 seconds to localStorage
• Cross-tab sync via BroadcastChannel (falls back gracefully)
• All CRUD operations return updated references for reactive UI updates

Router (router)

Hash-based SPA router with 14 routes:

routes: [
  'home', 'login', 'register', 'dashboard', 'explore', 'create',
  'errand', 'community', 'inbox', 'profile', 'settings',
  'my-errands', 'running', 'history', 'pricing'
]

• Route guards for authenticated pages
• Dynamic parameter parsing (#/errand/:id)
• Page-specific initialization hooks

Security Layer (Security)

Security: {
  hashPassword(password)     // Simple hash for demo
  sanitize(str)              // XSS prevention via textContent
  validateEmail(email)       // RFC-style regex
  generateToken()            // crypto.getRandomValues(32)
  checkRateLimit(key, max, window)
}

---

🧪 Demo Flow

1. Landing → Click Get Started
2. Login → Click "Try Demo Account" (instant demo user with 3 errands)
3. Dashboard → See stats, activity feed, and nearby errands
4. Explore → Pan the map, filter by category/urgency, click an errand
5. Errand Detail → Accept an errand, open the message thread, send a message
6. Community → Create a post, like posts, view neighbors
7. Profile → Verify phone (code: 123456), upgrade subscription
8. Settings → Toggle privacy, change password, manage notifications

All data persists in localStorage. Open the app in a second tab to see real-time sync in action.

---

🔐 Security Protocols

Threat	Mitigation
XSS	All user input sanitized via textContent before DOM insertion
CSRF	Session tokens generated with crypto.getRandomValues
Brute Force	Rate limiting: 5 login attempts per minute per IP (simulated)
Data Leak	Exact coordinates never rendered; only neighborhood strings shown
Injection	No innerHTML with user data; parameterized store queries

Note: This is a client-side prototype. Production deployment requires a proper backend with bcrypt, HTTPS, JWT refresh tokens, and server-side validation.

---

🎨 Design System

Token	Value	Usage
--primary	#059669	Emerald — trust, eco-friendly actions
--secondary	#f59e0b	Amber — energy, urgency highlights
--accent	#ec4899	Pink — community, warmth, notifications
--bg	#f8fafc	Slate-50 — clean canvas
--surface	#ffffff	White — cards, modals
--text	#0f172a	Slate-900 — primary text

• Mobile-first responsive breakpoints at 1024px, 768px, 480px
• Backdrop blur navigation for modern glassmorphism feel
• CSS Grid + Flexbox throughout; no framework bloat

---

🗺️ Roadmap to Production

• Backend API — Node.js/Express + PostgreSQL or MongoDB
• Real-time Messaging — Socket.io or WebSockets for instant chat
• Payment Integration — Stripe for subscription billing
• Geocoding — Google Places API or Mapbox for store autocomplete
• Push Notifications — Web Push API for mobile alerts
• PWA — Service workers, offline support, installable app
• Image Uploads — Cloudinary or S3 for avatar/ID verification
• Moderation AI — Content filtering for community posts

---

🤝 Contributing

Contributions are welcome! This is a vanilla JS project—no build tools to learn.

1. Fork the repo
2. Create a feature branch (git checkout -b feature/amazing-thing)
3. Commit your changes (git commit -m 'Add amazing thing')
4. Push to the branch (git push origin feature/amazing-thing)
5. Open a Pull Request

Please ensure your code passes the existing security patterns (sanitize all inputs, no raw innerHTML with user data).

---

📄 License

MIT © 2026 Rundour

---

Built with 💚 for stronger neighborhoods.

🌐 Live Demo · 📖 Docs · 🐛 Issues