|
| 1 | +# Feeds Feature - Improvement Opportunities |
| 2 | + |
| 3 | +This document outlines potential improvements for the feeds feature based on code analysis. |
| 4 | + |
| 5 | +## Performance & Optimization |
| 6 | + |
| 7 | +1. **Implement infinite scroll** instead of traditional pagination |
| 8 | + - Better UX for feed browsing |
| 9 | + - Reduces cognitive load on users |
| 10 | + - More engaging scrolling experience |
| 11 | + |
| 12 | +2. **Add optimistic updates** for upvotes/comments |
| 13 | + - Instant UI feedback before server response |
| 14 | + - Improves perceived performance |
| 15 | + - Better user experience |
| 16 | + |
| 17 | +3. **Implement React Query/TanStack Query** for server state management |
| 18 | + - Better caching strategy than current Zustand-only approach |
| 19 | + - Automatic background refetching |
| 20 | + - Built-in stale-while-revalidate pattern |
| 21 | + |
| 22 | +4. **Add real-time updates** using Supabase subscriptions |
| 23 | + - New posts appear automatically without manual refresh |
| 24 | + - Live upvote/comment count updates |
| 25 | + - Better collaboration experience |
| 26 | + |
| 27 | +5. **Optimize image loading** |
| 28 | + - Add blur placeholders (Next.js Image component supports this) |
| 29 | + - Lazy loading for images below the fold |
| 30 | + - Progressive image loading |
| 31 | + |
| 32 | +6. **Memoize filtered posts computation** |
| 33 | + - Already using `useMemo` in Feed.tsx:25-41 |
| 34 | + - Could optimize further with better dependency keys |
| 35 | + - Consider moving heavy filtering to server-side |
| 36 | + |
| 37 | +## UX & Features |
| 38 | + |
| 39 | +7. **Add post categories/tags** |
| 40 | + - Allow filtering by topic (announcement, discussion, help, etc.) |
| 41 | + - Multiple categories per post |
| 42 | + - Visual category badges |
| 43 | + |
| 44 | +8. **Sort options** |
| 45 | + - Newest first (current default) |
| 46 | + - Most upvoted |
| 47 | + - Trending (combination of recent + upvotes) |
| 48 | + - Most commented |
| 49 | + |
| 50 | +9. **Bookmark/save posts** |
| 51 | + - Let users save posts for later reading |
| 52 | + - Personal collection of saved posts |
| 53 | + - Quick access from user profile |
| 54 | + |
| 55 | +10. **Rich text preview** in PostCard |
| 56 | + - Currently only shows title (PostCard.tsx:107-109) |
| 57 | + - Show content excerpt with "Read more..." |
| 58 | + - Better preview of post content |
| 59 | + |
| 60 | +11. **Comment count display** on PostCard |
| 61 | + - Show engagement metrics at a glance |
| 62 | + - Currently only shows upvote count |
| 63 | + - Display next to upvote button |
| 64 | + |
| 65 | +12. **Share functionality** |
| 66 | + - Copy link to clipboard |
| 67 | + - Share to social platforms |
| 68 | + - Generate preview cards for sharing |
| 69 | + |
| 70 | +13. **User mentions** in comments |
| 71 | + - @username autocomplete |
| 72 | + - Notify mentioned users |
| 73 | + - Highlight mentions in text |
| 74 | + |
| 75 | +14. **Image gallery view** for posts with multiple images |
| 76 | + - Currently supports single thumbnail |
| 77 | + - Carousel/gallery for multiple images |
| 78 | + - Lightbox for full-size viewing |
| 79 | + |
| 80 | +15. **Draft posts** |
| 81 | + - Save work in progress before publishing |
| 82 | + - Auto-save functionality |
| 83 | + - Resume editing later |
| 84 | + |
| 85 | +## Code Quality & Architecture |
| 86 | + |
| 87 | +16. **Fix hardcoded admin check** (page.tsx:13) |
| 88 | + - Currently: `const [isAdmin, setIsAdmin] = useState(true);` |
| 89 | + - Should initialize as `false` |
| 90 | + - Security risk if not properly validated |
| 91 | + |
| 92 | +17. **Consolidate duplicate user role fetching** |
| 93 | + - Used in page.tsx:20-27 and PostView.tsx:48-52 |
| 94 | + - Extract to custom hook: `useUserRole()` |
| 95 | + - Single source of truth for role logic |
| 96 | + |
| 97 | +18. **Extract search logic** into custom hook |
| 98 | + - Create `usePostSearch(posts, query)` hook |
| 99 | + - Reusable across components |
| 100 | + - Cleaner component code |
| 101 | + |
| 102 | +19. **Type safety improvements** |
| 103 | + - `PostType` could include computed fields |
| 104 | + - Add `upvote_count: number` |
| 105 | + - Add `comment_count: number` |
| 106 | + - Reduce runtime calculations |
| 107 | + |
| 108 | +20. **Error boundaries** |
| 109 | + - Add error handling UI for failed post loads |
| 110 | + - Graceful degradation |
| 111 | + - User-friendly error messages |
| 112 | + |
| 113 | +21. **Loading skeletons** for individual post cards |
| 114 | + - Currently only in PostView.tsx:110-115 |
| 115 | + - Add to Feed.tsx while posts are loading |
| 116 | + - Better loading states |
| 117 | + |
| 118 | +22. **Extract magic numbers** to constants |
| 119 | + - `postsPerPage: 6` (Feed.tsx:43) |
| 120 | + - Debounce delay `500ms` (page.tsx:32) |
| 121 | + - Create `constants.ts` file |
| 122 | + |
| 123 | +23. **Consistent async/await error handling** |
| 124 | + - Some functions use try/catch, others don't |
| 125 | + - Standardize error handling pattern |
| 126 | + - Centralized error reporting |
| 127 | + |
| 128 | +## Accessibility |
| 129 | + |
| 130 | +24. **Keyboard navigation** |
| 131 | + - Arrow keys to navigate between posts |
| 132 | + - Enter to open post |
| 133 | + - Escape to close modals |
| 134 | + |
| 135 | +25. **ARIA labels** for interactive elements |
| 136 | + - Upvote buttons need descriptive labels |
| 137 | + - Delete buttons (PostCard.tsx:77-84) |
| 138 | + - Search input |
| 139 | + |
| 140 | +26. **Focus management** in modals |
| 141 | + - Trap focus inside modal |
| 142 | + - Return focus on close |
| 143 | + - Focus first interactive element |
| 144 | + |
| 145 | +27. **Screen reader announcements** for live updates |
| 146 | + - Announce new posts |
| 147 | + - Announce upvote changes |
| 148 | + - Use ARIA live regions |
| 149 | + |
| 150 | +## Analytics & Insights |
| 151 | + |
| 152 | +28. **Post view tracking** |
| 153 | + - Track which posts are most viewed |
| 154 | + - Engagement analytics |
| 155 | + - Popular content insights |
| 156 | + |
| 157 | +29. **Read time estimation** |
| 158 | + - Calculate based on content length |
| 159 | + - Display "X min read" on posts |
| 160 | + - Help users decide what to read |
| 161 | + |
| 162 | +30. **User engagement metrics** |
| 163 | + - Most active contributors |
| 164 | + - Trending topics |
| 165 | + - Peak activity times |
| 166 | + |
| 167 | +## Security & Data Integrity |
| 168 | + |
| 169 | +31. **Rate limiting** for post creation/upvotes |
| 170 | + - Prevent spam and abuse |
| 171 | + - Server-side enforcement |
| 172 | + - Clear user feedback when limited |
| 173 | + |
| 174 | +32. **Content moderation flags** |
| 175 | + - Report inappropriate posts |
| 176 | + - Admin review queue |
| 177 | + - Community standards enforcement |
| 178 | + |
| 179 | +33. **Sanitize markdown input** |
| 180 | + - Prevent XSS through markdown (PostView.tsx:149-151) |
| 181 | + - Validate image URLs |
| 182 | + - Strip dangerous HTML |
| 183 | + |
| 184 | +34. **Image upload size limits** |
| 185 | + - Currently no visible validation in uploadPostContentImage |
| 186 | + - Client-side file size check |
| 187 | + - Clear error messages |
| 188 | + |
| 189 | +## Mobile Experience |
| 190 | + |
| 191 | +35. **Pull-to-refresh** gesture support |
| 192 | + - Native mobile pattern |
| 193 | + - Refresh posts list |
| 194 | + - Visual feedback during refresh |
| 195 | + |
| 196 | +36. **Bottom sheet for post view** instead of modal |
| 197 | + - Better mobile UX |
| 198 | + - Native app-like experience |
| 199 | + - Easier one-handed use |
| 200 | + |
| 201 | +37. **Swipe gestures** for navigation |
| 202 | + - Swipe to go back |
| 203 | + - Swipe between posts |
| 204 | + - Natural mobile interaction |
| 205 | + |
| 206 | +38. **Improved fixed positioning** for SocialPointsCard |
| 207 | + - Currently uses responsive positioning (SocialPointsCard.tsx:36) |
| 208 | + - May overlap content on some mobile devices |
| 209 | + - Consider sticky positioning alternative |
| 210 | + |
| 211 | +## Data & State Management |
| 212 | + |
| 213 | +39. **Cache invalidation strategy** |
| 214 | + - Refresh posts after create/edit/delete |
| 215 | + - Intelligent cache updates |
| 216 | + - Reduce unnecessary refetches |
| 217 | + |
| 218 | +40. **Prefetch next page** for pagination |
| 219 | + - Load next page in background |
| 220 | + - Instant page transitions |
| 221 | + - Better perceived performance |
| 222 | + |
| 223 | +41. **Persist search query** in URL params |
| 224 | + - Shareable search results |
| 225 | + - Browser back/forward support |
| 226 | + - Deep linking to filtered views |
| 227 | + |
| 228 | +42. **Local storage backup** for draft posts |
| 229 | + - Prevent data loss |
| 230 | + - Auto-save as user types |
| 231 | + - Restore on page refresh |
| 232 | + |
| 233 | +## Quick Wins (Easy to Implement) |
| 234 | + |
| 235 | +These improvements can be implemented quickly and provide immediate value: |
| 236 | + |
| 237 | +- ✅ **Fix the `isAdmin` initialization bug** (page.tsx:13) |
| 238 | + - Change `useState(true)` to `useState(false)` |
| 239 | + - 1-line fix, important security improvement |
| 240 | + |
| 241 | +- ✅ **Add comment count to PostCard component** |
| 242 | + - Query comment count in getPosts |
| 243 | + - Display next to upvote count |
| 244 | + - ~20 lines of code |
| 245 | + |
| 246 | +- ✅ **Extract constants** |
| 247 | + - Create `_constants/index.ts` |
| 248 | + - Move magic numbers: `POSTS_PER_PAGE = 6`, `SEARCH_DEBOUNCE_MS = 500` |
| 249 | + - Better maintainability |
| 250 | + |
| 251 | +- ✅ **Add loading skeleton for post cards** |
| 252 | + - Reuse existing Skeleton component |
| 253 | + - Show while `fetchPosts()` is loading |
| 254 | + - ~15 lines of code |
| 255 | + |
| 256 | +- ✅ **Add empty state when no posts match search** |
| 257 | + - Simple conditional in Feed.tsx |
| 258 | + - Better UX than empty grid |
| 259 | + - ~10 lines of code |
| 260 | + |
| 261 | +## File References |
| 262 | + |
| 263 | +- Main page: `apps/codebility/app/home/feeds/page.tsx` |
| 264 | +- Feed component: `apps/codebility/app/home/feeds/_components/Feed.tsx` |
| 265 | +- Post card: `apps/codebility/app/home/feeds/_components/PostCard.tsx` |
| 266 | +- Actions: `apps/codebility/app/home/feeds/_services/action.ts` |
| 267 | +- Queries: `apps/codebility/app/home/feeds/_services/query.ts` |
| 268 | +- Store: `apps/codebility/store/feeds-store.ts` |
0 commit comments