[Feature]: Add offline mode with local caching for event discovery and RSVP queuing

[prince-pokharna]

Summary

UniEvent currently requires a live Firebase connection for all core functionality — event discovery, RSVP, attendance check-in, and notifications. On a university campus with unreliable or congested Wi-Fi (especially during peak event hours), this creates a brittle user experience that silently fails with no feedback.

Problem

• The app has no offline detection or fallback strategy at the data layer.
• If a student loses connectivity mid-check-in via QR scan, the attendance record is silently lost — there is no retry queue.
• Event listings become entirely blank when Firebase is unreachable, with no cached state shown to the user.
• RSVP taps on a flaky connection produce no confirmation and the action is dropped entirely.
• Universities are exactly the environment where network saturation is common (hundreds of devices, shared campus Wi-Fi, event venues in basements or auditoriums with poor coverage).

Impact

• Students miss marking attendance for events they physically attended.
• Organizers receive inaccurate attendance analytics.
• The app feels unreliable even when the issue is the network, not the product — this drives uninstalls.

Proposed Solution

I would like to implement a two-layer offline strategy:

Layer 1 — Firebase Firestore Offline Persistence

Enable Firestore's built-in disk persistence so reads are served from cache when offline:

// app/firebase/config.js
import { initializeFirestore, persistentLocalCache, persistentMultipleTabManager } from 'firebase/firestore';

const db = initializeFirestore(app, {
  localCache: persistentLocalCache({ tabManager: persistentMultipleTabManager() })
});

Layer 2 — Offline RSVP and Check-in Queue

Use AsyncStorage to queue write operations when offline and flush them on reconnect:

// app/utils/offlineQueue.js
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

export const enqueueAction = async (action) => {
  const existing = JSON.parse(await AsyncStorage.getItem('offline_queue') || '[]');
  existing.push({ ...action, timestamp: Date.now() });
  await AsyncStorage.setItem('offline_queue', JSON.stringify(existing));
};

export const flushQueue = async () => {
  const queue = JSON.parse(await AsyncStorage.getItem('offline_queue') || '[]');
  for (const action of queue) {
    await executeAction(action); // dispatch to Firebase
  }
  await AsyncStorage.removeItem('offline_queue');
};

NetInfo.addEventListener(state => {
  if (state.isConnected) flushQueue();
});

Layer 3 — UI Feedback

Add an OfflineBanner component that renders when NetInfo.isConnected === false, informing users that actions will sync once connectivity is restored.

Files to Touch

• app/firebase/config.js — enable persistence
• app/utils/offlineQueue.js — new file
• app/hooks/useNetworkStatus.js — new hook
• app/components/OfflineBanner.jsx — new component
• app/screens/EventDetail.jsx — integrate queue for RSVP
• app/screens/QRCheckIn.jsx — integrate queue for attendance

Additional Notes

This is especially critical for QR check-in flows, which often happen in crowded, high-interference environments. I am happy to implement this end-to-end, including tests.

Could you assign this issue to me?

Labels: enhancement, ux, offline, help wanted, GSSoC 2026

[prince-pokharna]

Hey @roshankumar0036singh ,
Please assign it to me under GSSoC 2026.
/assign /claim /claim-assignment

[github-actions]

Hey @prince-pokharna, you already have an open issue assigned to you (#737). Please complete that one before taking on another!