Facebook Clone

This Facebook clone is a comprehensive social media application that enables users to connect, share content, and communicate in a familiar social networking environment. Users can create accounts, build their profiles with customizable profile and cover photos along with personal information (location, website, social media links), and discover other users through an intelligent suggestion system that recommends accounts to follow. The core social experience revolves around creating text and image-based posts that appear in a personalized feed, where users can interact through likes and comments, with all interactions tracked and displayed in real-time. The application features a relationship-based feed algorithm that displays posts from users you follow plus your own content, ensuring a curated timeline experience. Users can manage their profiles through an intuitive update modal, follow or unfollow other users with a single click, delete their own posts, and switch between dark and light themes for personalized viewing preferences. The interface includes familiar social media elements like a stories section, navigation sidebars with quick access to various features, friend activity feeds, and a top navigation bar providing access to the home feed, notifications, and profile management—all designed with a clean, fully mobile-responsive layout that adapts seamlessly across devices and mirrors the user experience of popular social platforms.

Technology Utilized

This Facebook clone is a full-stack social media application built with React 18 on the frontend and Express.js with Node.js on the backend, utilizing MySQL as the relational database. The frontend leverages modern React patterns including hooks, React Router for navigation, Context API for global state management (authentication and theming), and TanStack React Query for efficient server state management and data caching, all styled with Material-UI (MUI) components and custom Sass styling. The backend API is structured as a RESTful service using Express with middleware for authentication, password hashing (bcrypt), file uploads (Multer), and CORS handling, executing raw SQL queries via the mysql2 library for direct database control without an ORM. User authentication is handled through JSON Web Tokens (JWT) stored in HTTP-only cookies, allowing users to remain authenticated across browser sessions—when a user logs in, the server generates a JWT containing their user information, sends it as a secure cookie to the client, and on subsequent requests, the token is validated to maintain the authenticated session without requiring repeated logins. The architecture is deployed as three separate Railway services: the React frontend, the Express backend API, and the MySQL database, with the database service featuring an attached persistent volume storage drive mounted to the backend for storing user-uploaded images including profile pictures, cover photos, and post images organized in dedicated folders.

Build Context

This Facebook clone represents a comprehensive dive into full-stack social media architecture and the intricate challenges of building an interactive platform from scratch. The project pushed me to master complex relational database design, where I had to thoughtfully model the interconnected nature of social interactions such as managing relationships between users, posts, comments, likes, and follows through a well-structured MySQL schema with proper foreign key relationships and query optimization. Authentication became far more sophisticated than previous projects, as I implemented JWT-based session management with httpOnly cookies for security, and learned how authentication state doesn't just gate access but fundamentally shapes the entire user experience. Examples of Authentication State range from determining whose posts appear in the user's feed to controlling edit permissions and personalizing profile interactions. I tackled the challenge of building a dynamic feed algorithm that intelligently aggregates content from followed users while maintaining performance, which required learning and understanding SQL joins and query efficiency at a deeper level than I was previously familiar with. The file upload system was particularly educational, as I integrated Multer for handling multipart form data, and learned how to implement organized storage patterns for different image types (profiles, covers, posts). I previously had photo storage running locally. Images were stored in a folder on the frontend of my application, which worked great for testing, but when moving the application to the cloud, I initially ran into issues figuring out dynamic routing by the image type to different directories. I originally deployed this project with Amazon, utilizing AWS S3 for image storage, and Amazon RDS for the rest of the data, but due to the high cost of hosting, I reconfigured large parts of my application for deployment on Railway. On the frontend, I advanced my React skills significantly by implementing TanStack React Query for sophisticated server state management, which taught me about caching strategies, query invalidation patterns, and how to create smooth, responsive UIs that feel instant even when dealing with network latency. The theming system was my first time managing large styling changes in many components in the app, allowing the end user to choose between light mode (default) or switch to dark mode. This was done using SASS mixins and CSS custom properties that dynamically switches not just colors but also handles mobile viewport meta tags to prevent visual glitches during overscroll. Building the messenger component introduced me to the foundations of real-time communication systems and conversation threading, laying groundwork for future WebSocket integration. Perhaps most importantly, this project taught me how to architect applications where user actions cascade through multiple layers. A single "like" triggers database updates, query cache invalidations, UI re-renders, and affects what other users see. This required careful thoughts and planning about data flow and state synchronization.