Skip to content

[FEAT] Real-time dashboard — live data updates via Supabase Realtime subscriptions without page refresh #2109

@IshitaSingh0822

Description

@IshitaSingh0822

Summary

The dashboard is fully static after load — users must manually refresh to see new commits, streak changes,
or goal updates. Add Supabase Realtime subscriptions so widgets update live when underlying data changes
(e.g. after a streak freeze is applied, goal progress updates, or a new session starts).

Problem

  • Streak Tracker shows stale data if a freeze is applied in another tab
  • Goal progress bars don't update without a full page reload
  • No visual feedback that data is live vs cached

Proposed Solution

Use Supabase's supabase.channel() Realtime API to subscribe to row-level changes:

Table Event Widget to update
streak_freezes INSERT / DELETE StreakTracker.tsx
goals INSERT / UPDATE / DELETE GoalTracker.tsx
users UPDATE DashboardHeader.tsx
  • Subscribe on component mount, unsubscribe on unmount (proper cleanup)
  • Use React state to apply delta updates without full re-fetch
  • Show a pulsing green dot "Live" indicator in DashboardHeader when connected
  • Graceful degradation: if Realtime connection drops, fall back to a 60s polling interval

Acceptance Criteria

  • Supabase Realtime enabled for streak_freezes, goals, users tables
  • StreakTracker.tsx re-renders automatically on freeze INSERT/DELETE
  • GoalTracker.tsx re-renders automatically on goal INSERT/UPDATE/DELETE
  • Live indicator shown in header when WS connection is active
  • Polling fallback kicks in on connection failure
  • No memory leaks (subscriptions properly removed on unmount)
  • Existing type-check and lint pass

I would like to work on this under GSSoC

Metadata

Metadata

Labels

gssoc:assignedGSSoC: Issue assigned to a contributor

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions