LinkedIn Clone
A full-stack social network — real-time, secure, and live.
Overview
This project was a deep dive into the architecture behind a production social platform: real-time data synchronisation, per-user security rules, optimistic UI patterns, and cloud storage — all coordinated without a custom backend. By replicating LinkedIn's core feature set using React and Firebase, it demonstrates how modern cloud-native tools can power sophisticated multi-user applications.
The Problem
Most portfolio projects fake real-time with polling or only show a logged-in user's own data. Building a genuinely multi-user application with live feed updates, cross-user post visibility, and per-document security rules requires understanding the full Firestore permission model — something that only surfaces when real users interact with the same data.
The Solution
Implemented Firestore's onSnapshot real-time listeners in React, attaching them on component mount and detaching on unmount to prevent ghost listeners. Designed Firestore security rules that allow public post reads but restrict writes and deletes to the authenticated author. Added optimistic UI for post likes — the count updates instantly on click and rolls back if the Firestore transaction fails.
Key Features
- Firebase Authentication — email/password and Google OAuth sign-in
- Real-time Firestore news feed with live post and comment updates
- Optimistic UI for likes and reactions with failure rollback
- User profile editing — display name, headline, and avatar upload to Firebase Storage
- Post creation with text content and optional image attachments
- Firestore security rules enforcing per-user write and delete access
- Responsive layout across mobile and desktop matching LinkedIn's visual language
- Deployed and live on Firebase Hosting
Challenges & Learnings
Firestore security rules were the most nuanced part of the build. The rules needed to allow any authenticated user to read any post, but only the post author to update or delete — which required storing the author UID in every document and validating it server-side in the rules expression. Managing listener lifecycle in React was equally important: each onSnapshot call opens a persistent connection, and failing to unsubscribe on unmount caused memory leaks and duplicate update events in testing.