Skip to content

ahmed1cb/facebook-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Facebook Clone (React + Laravel)

A full-stack Facebook-like social media platform built with React.js (frontend) and Laravel (backend API).
This project is designed as a large-scale learning project focusing on real-world architecture, scalability, and clean code.


🚀 Tech Stack

Frontend

  • React.js (Vite)
  • React Router
  • Axios
  • Redux
  • Material Ui

Backend

  • Laravel (REST API)
  • Laravel Sanctum (Authentication)
  • MySQL
  • Storage (Images & Media)

🎯 Project Goals

  • Build a real-world social media platform
  • Learn scalable backend architecture
  • Master API-based frontend development

🏗️ System Architecture

→ React Frontend → Laravel Backend → MySQL Database


🧩 Development Roadmap

Phase 0: Project Setup

Backend (Laravel)

  • Initialize Laravel project
  • Configure CORS
  • Install & configure Laravel Sanctum
  • Create User model & migrations

Frontend (React)

  • Create React app using Vite
  • Setup React Router
  • Configure Axios instance

Phase 1: Authentication System

Backend

  • Register API
  • Login API
  • Logout API
  • Auth middleware (Sanctum)

Frontend

  • Login page
  • Register page
  • Protected routes
  • Persistent authentication state

Phase 2: User Profiles

Backend

  • Profile controller
  • Update profile data
  • Upload avatar & cover images
  • Configure file storage

Frontend

  • Profile page
  • Edit profile modal
  • Image preview before upload

Phase 3: Friends System

Backend

  • Friend request model
  • Send / Accept / Reject friend requests
  • Friends list API

Frontend

  • Add friend button
  • Pending requests page
  • Friends list UI

Phase 4: Posts System

Backend

  • Post model
  • Create / Edit / Delete posts
  • Post privacy (Public / Friends / Private)
  • News feed API (based on friendships)

Frontend

  • Create post component
  • News feed page
  • Infinite scrolling
  • Post actions (edit / delete)

Phase 5: Likes & Comments

Backend

  • Polymorphic likes system
  • Comments
  • Optimized counters

Frontend

  • Like Button
  • Comments modal

Phase 6: Security & Performance

  • Request validation
  • Rate limiting
  • Authorization policies
  • Database indexing
  • Eager loading optimization

Phase 7: Deployment

  • Deploy Laravel API
  • Deploy React app
  • Environment variables setup
  • HTTPS & security headers

📌 License

This project is open-source and intended for educational use. MIT LICENSE


IMPORTANT NOTE !!!

Some Parts In this Project (Client Only) Made with AI But Only Ui Elements not Logic


About

A full-stack Facebook-like social media platform built with **React.js** (frontend) and **Laravel** (backend API).

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors