perf: optimize Firestore reaction fetching using batched aggregation

[vraj826]

PR Type

Select the type of PR (check one):

• 🐞 Bug Fix
• ✨ Feature
• 🛠️ Improvement / Refactor
• 📚 Documentation

---

Related Issue

Link the GitHub issue this PR closes (if applicable).

• Closes Optimize Firestore Story Reaction Aggregation to Eliminate N+1 Query Bottleneck #150 .

---

Rationale / Motivation

The current story feed implementation performed Firestore reaction queries inside loops while fetching stories, creating an N+1 query pattern.

This resulted in:

• Excessive Firestore read operations
• Slower feed rendering
• Increased latency on slower/mobile networks
• Poor scalability as the number of stories increased

This PR optimizes the reaction fetching flow by replacing per-story Firestore queries with batched queries and lightweight in-memory aggregation.

The implementation stays intentionally minimal and in-scope without introducing unnecessary abstractions or architectural changes.

---

Description of Changes

Frontend

• Updated src/pages/Home.tsx

  • Removed loop-based reaction queries
  • Added batched reaction fetching using Firestore where('story_id', 'in', chunk)
  • Added in-memory aggregation for reaction counts
  • Added graceful handling for empty story lists and failed chunk fetches

• Updated src/pages/Stories.tsx

  • Replaced N+1 reaction query pattern with batched querying
  • Added chunked Firestore queries (size 30)
  • Aggregated reactions using a lightweight map/object
  • Preserved existing UI/UX behavior

Performance Optimization

• Reduced Firestore query count from:

  • 1 + N queries
    to:
  • 1 + ceil(N / 30) queries

• Improved:

  • feed rendering speed
  • scalability
  • Firebase billing efficiency
  • responsiveness on slower networks

Code Quality

• Kept implementation minimal and maintainable
• No new dependencies introduced
• No schema/backend changes made
• No UI modifications introduced

---

Testing Instructions

1. Clone the repository and install dependencies

npm install

2. Start the development server

netlify dev

3. Navigate to:

• Home page
• Stories page

4. Verify:

• Stories load correctly
• Reaction counts display properly
• No UI regressions occur

5. Run verification checks

npm run build
npx tsc --noEmit

6. Expected Results

• Successful production build
• No TypeScript errors
• Reduced Firestore reads
• Faster story feed rendering

7. Edge Cases Verified

• Empty stories collection
• Failed reaction chunk query handling
• Large story lists requiring query chunking

---

Impact Assessment

User-facing Changes

• Faster loading story feeds
• Improved responsiveness on slower/mobile networks

Backend/API Changes

• Optimized Firestore query strategy
• No API contract changes

Performance Considerations

• Significant reduction in Firestore reads
• Better scalability for growing datasets

Security Implications

• No security-sensitive logic modified

Cross-browser / Device Impact

• No browser-specific behavior introduced
• Works consistently across desktop and mobile

---

Screenshots / GIFs (if applicable)

N/A — no visual/UI changes introduced.

---

Checklist

• Code follows project’s coding style and guidelines
• Changes are tested locally
• Automated tests added/updated
• Documentation updated (if applicable)
• User-facing changes are documented
• Related issue linked
• No new warnings/errors introduced
• All reviewers guidance addressed

---

Reviewer Notes

Areas to focus on:

• Firestore batching logic
• Query chunking implementation
• In-memory reaction aggregation
• Graceful fallback/error handling

Trade-offs:

• Current implementation uses runtime aggregation instead of schema-level counters to keep changes minimal and in-scope.

---

Breaking Changes

No breaking changes introduced.

---

Optional Enhancements / Future Work

Possible future optimizations:

• Introduce atomic Firestore reaction counters
• Add optimistic reaction rollback handling
• Extract reusable batching utility
• Add caching/pagination optimizations

---

Priority / Impact Level

• Priority: High
• Impact: High

[netlify]

👷 Deploy request for safevoiceforwomen pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	84819ee

[vraj826]

Hello @Piyushydv08 , can you please add the gssoc:approved label so that it can be visible for the evaluation in GSSoc'26.