Social Feed UI Kit (Next.js + React + Tailwind + React Query)
By (author)Saad Hasnain Khan
Tech stack:
Next.js
React
TS
TW
The frontend that ties a social app together. An infinite-scroll feed with IntersectionObserver, a post composer with media + character counter, a ful...
read more
read more
AI Contributions:64
Published At:July 24, 2026
Files Included:13 file(s)
Updated At:October 23, 2026
Read Me
Social Feed UI Kit (Next.js + React + Tailwind + React Query)
The frontend that turns the backend gigs into a working social app. Everything is typed, themed (light/dark), accessible, and wired to the companion APIs.
What's inside
| File | What it does |
|---|---|
src/components/Feed.tsx | infinite-scroll timeline via IntersectionObserver + skeleton/empty states. |
src/components/PostCard.tsx | post with like/comment/repost/share, optimistic + accessible. |
src/components/PostComposer.tsx | composer with live character counter. |
src/components/CommentThread.tsx | inline paginated comments + reply box. |
src/components/FollowButton.tsx | optimistic follow/unfollow with hover-to-unfollow. |
src/components/NotificationBell.tsx | live badge + dropdown over Socket.IO. |
src/components/RelativeTime.tsx | compact "3m / 5h / 2d" timestamps. |
src/hooks/useFeed.ts | useInfiniteQuery over the keyset feed cursor. |
src/hooks/useEngagement.ts | optimistic like/repost/comment mutations with rollback. |
src/hooks/useNotifications.ts | Socket.IO notification stream + unread count. |
src/lib/apiClient.ts | tiny typed fetch wrapper (bearer auth, query params). |
src/types.ts | shared response types. |
Highlights
- Infinite scroll with a prefetch margin (
rootMargin: 600px) — loads the next page before the user hits the bottom, no scroll-event math. - Optimistic UI everywhere it matters. Likes, reposts, and follows flip instantly and roll back on error; the server's response reconciles the final state.
- Real-time notification badge with zero polling — subscribes to the
/notificationsSocket.IO namespace and updates the count live. - Themed + accessible. Tailwind light/dark,
aria-pressed/aria-labelon actions, semantic<article>/<time>, keyboard-friendly buttons. - Presentational components, logic in hooks. Easy to restyle or port.
Wiring it up
// pages/_app.tsx
const qc = new QueryClient();
<QueryClientProvider client={qc}><Component {...pageProps} /></QueryClientProvider>
// pages/index.tsx
import { Feed } from '@/components/Feed';
export default function Home() { return <Feed />; }
Set NEXT_PUBLIC_API_URL to your backend base and store the JWT in
localStorage.accessToken (or swap getToken() in apiClient.ts for cookies).
Install: npm i @tanstack/react-query socket.io-client. Talks to Posts & News
Feed, Likes/Comments/Reposts, Profiles & Follow System, and Real-time
Notifications.
