🌀 LoopLocal — Offline-First Loyalty Rewards for Local Businesses

A mobile-first, progressive web app (PWA) that empowers salons, barbershops, and eateries with a smart, offline-friendly loyalty rewards system — no app installs needed.

---

📚 Table of Contents

• Why LoopLocal?
• Key Features
• Product Overview (Screenshots)
• User Journeys
• App Architecture
• Onboarding Flows
• Offline-First Logic
• Testing Scenarios
• Tech Stack
• Development Setup
• Screenshots
• Localization & Extensibility
• Future Enhancements
• Highlight Reel
• Pitch Deck
• Conclusion
• Contact
• Back to Top ⏫

---

🧠 Why LoopLocal?

Local businesses often struggle to retain loyal customers due to:

• Lack of affordable customer tracking tools
• Limited internet access
• Low digital adoption among walk-in clients

LoopLocal solves this by combining WiFi-based check-ins, QR/NFC fallback, and offline-first data syncing into a seamless experience.

---

🚀 Features

✅ For Customers

• Check-in automatically via WiFi login, QR scan, or NFC tap
• Earn loyalty points and streak bonuses
• Enjoy gamified rewards (Spin-the-Wheel, Leaderboard)
• Offline-first access with PWA support
• View reward progress, invite friends, and redeem offers

🧑‍💼 For Business Owners

• Create and manage a loyalty program
• View real-time check-ins and customer data
• Export analytics (CSV/JSON)
• Works even without internet — auto-syncs later

---

🖼️ Product Overview

All screenshots are from a mobile device for optimal mobile-first preview.

---

📲 User Journeys

1. Customer Check-In (WiFi)

flowchart LR
    A(Customer) --> B(Connects to business WiFi)
    B --> C(Captive portal appears)
    C --> D(Enters phone number)
    D --> E(Reward points added)

Loading

---

2. Customer Check-In (Offline QR/NFC)

flowchart LR
    A(Customer scans QR / taps NFC)
    A --> B(App logs check-in locally)
    B --> C(Syncs data later)
    C --> D(Points reflect)

Loading

---

3. Business View (Owner)

flowchart LR
    A(Owner logs in)
    A --> B(Views stats, edits reward program)
    B --> C(Data auto-syncs)
    C --> D(Exports reports)

Loading

---

🧱 App Architecture

flowchart TD
    subgraph Customer_Device [Customer Device]
        A1["User Interface\n(PWA on Mobile/Web)"]
        A2["Local Database\n(IndexedDB/Dexie)"]
        A3["Offline Sync Engine"]
        A4["Gamified UI"]
    end
    subgraph Cloud_Backend [Cloud & Backend]
        B1["Cloud API\n(Express.js/SQLite)"]
        B2["Admin Dashboard"]
        B3["Analytics & Reports"]
    end

    A1 --> A2
    A2 --> A3
    A3 -- "When Online" --> B1
    A1 --> A4
    B1 --> B2
    B2 --> B3

Loading

---

🔐 Onboarding Flows

🎉 Customer

1. Open app or WiFi portal
2. Enter phone number (simulate OTP)
3. Start earning points on visits

🧑‍💼 Business Owner

1. Register business name & category
2. Define reward tiers (e.g., 5 visits = free item)
3. Access dashboard for metrics & customer info

---

📡 Offline-First Logic

• All check-in actions are cached locally
• App detects online status via navigator.onLine
• Queued actions sync automatically when reconnected
• Admin dashboard updates in real time post-sync

Edge Case Handling

• Duplicate visits on same day are ignored
• Stale sync requests are time-filtered
• Points are assigned on first valid connection only

---

🧪 Testing Scenarios

Test Case	Expected Result
Offline QR check-in	Check-in cached and synced later
Multiple check-ins in a day	Only 1 rewarded per 24h per venue
Referral link reuse	Only unique phone numbers rewarded
Owner logs in with wrong phone	Access denied with retry notice
Data export	File is downloadable, correct data in table format

---

🔧 Tech Stack

Layer	Tech
Frontend	PWA (React/Next.js or similar), Tailwind CSS
Offline Storage	IndexedDB (via Dexie.js or localStorage fallback)
Backend (Edge)	Express.js / SQLite (or local Node.js server on device)
Captive Portal	Simulated via router route or real via router login page
Notifications	Twilio / Africa’s Talking / Firebase (simulated in prototype)
QR/NFC Sim	HTML-based simulation buttons for tap/scan interaction

---

🛠 Dev Setup (Optional)

For custom builds

git clone https://github.com/preston176/looplocal-rewards-mobile.git
cd looplocal-rewards-mobile
npm install
npm start

Using Bun (Recommended for performance)

bun install
bun start

• To simulate offline: disable browser network in DevTools
• To test PWA: install on mobile home screen or use Lighthouse

---

🎨 Screenshots

Customer Home	Owner Dashboard

---

🌍 Localization & Extensibility

• ✅ Multi-business support (franchise model)
• ✅ Custom branding (business logos + color themes)
• ✅ Multi-language support (future roadmap)
• ✅ Webhooks for CRM integration (Zapier, etc.)

---

💡 Future Enhancements

• AI-based reward suggestions
• NFC business cards for instant referrals
• Voice-enabled customer kiosk mode
• WhatsApp bot for reward balance checks
• IoT beacons for passive check-ins

---

👨‍⚖️ Highlight Reel

LoopLocal is a scalable, offline-first platform that brings modern loyalty systems to underserved local businesses. It mimics big-tech ecosystems (Apple Pay check-ins, Google WiFi captive portals), yet functions without dependency on full-time internet or expensive infrastructure. All while giving users fun, gamified experiences they already love.

---

📊 Pitch Deck

Want an at-a-glance overview of LoopLocal?
Check out our interactive pitch deck:

Or view it here:
🔗 LoopLocal Pitch Deck on Canva

🏁 Conclusion

LoopLocal empowers small businesses with tech they can afford, and gives customers rewards they’ll love — even without internet.

Built with ❤️ to help small businesses stay competitive.

---

📬 Contact

Made for PLP Vibe Coding Hackathon by Preston Mayieka
GitHub: preston176
Email: prestonynamweya@example.com
Twitter: @preston_Mayieka
LinkedIn: linkedin.com/in/preston-mayieka

---

Back to Top ⏫