A full-featured Twitter/X clone replicating core social media functionality — tweeting, following, real-time feeds, and user profiles — built with Next.js and Firebase.
Social platforms require a scalable, real-time architecture with secure authentication, media handling, and dynamic feeds. Replicating this at scale is a complex full-stack engineering challenge.
Built a real-time social feed using Firebase Firestore for live data sync, Firebase Auth for Google and anonymous sign-in, and Cloudinary for image upload and optimization. Next.js App Router handles SSR for fast initial loads, while React-Redux manages client-side state.
Next.js App Router handles routing and SSR for fast first-paint. React-Redux manages global state (current user, feed data, notifications). TailwindCSS provides utility-first responsive styling; Material UI supplies icon and component primitives. Real-time feed updates are subscribed via Firestore's onSnapshot listeners, which push changes to the Redux store without a page refresh.
Firebase acts as the serverless backend. Firestore security rules enforce read/write access per user. Firebase Storage handles binary media (tweet images) with size limits enforced on the client. Authentication tokens are validated server-side on each Firestore request.
Firestore NoSQL document model. Collections: users (profile data), tweets (content, likes, timestamps), followers (user relationships), notifications. Real-time listeners on the tweets collection power the live feed.