Acebook - Facebook Clone

Acebook is a Facebook clone project, showcasing use of the MERN stack, Socket.io and Tailwind, created at Makers Academy.
This version is a WIP personal extension of Acebook Team Griffins with a focus on demonstrating modern UI principles and FE methods.
It adds real-time messaging and notifications through the use of websockets, as well as modern component design through Tailwind CSS.

Users can sign up, log in, create posts with images and/or text, interact with posts, add friends, send messages, and receive real-time notifications. All UI designs are responsive and aim to follow Facebook's early 2024 UI 1-to-1.

Screenshots:

✅ Landing Page:

✅ Navbar with Live Searchbar:

✅ Friends & Friend Requests Page:

User Page - WIP:

Installing Project Dependencies:

Node.js

1. Install Node Version Manager (nvm)

   brew install nvm
   

   Then follow the instructions to update your ~/.bash_profile.
2. Open a new terminal
3. Install the latest version of Node.js, currently 18.1.0.

   nvm install 18
   

MongoDB

1. Install MongoDB

   brew tap mongodb/brew
   brew install [email protected]
   

   Note: If you see a message that says If you need to have [email protected] first in your PATH, run:, follow the instruction. Restart your terminal after this.
2. Start MongoDB

   brew services start [email protected]
   

Project Dependencies

1. npm install in the three main folders:

   ; cd api
   ; npm install
   ; cd ../frontend
   ; npm install
   ; cd ../socket
   ; npm install
   

2. Add Cloudinary account API credentials

This project uses Cloudinary for media storage. Add a .env file to your root folder and add the following variables (replacing the values with your Cloudinary account API credentials)

; CLOUDINARY_CLOUD_NAME=your_cloud_name
; CLOUDINARY_API_KEY=your_api_key
; CLOUDINARY_API_SECRET=your_api_secret

Running the App:

1. Start the server application (in the api directory)

   ; cd api
   ; JWT_SECRET=f6d278bb34e1d0e146a80b16ec254c05 npm start
   

2. Start the front end application (in the frontend directory)

In a new terminal session...

; cd frontend
; npm start

You should now be able to open your browser and go to http://localhost:3000/

3. Start the socket (in the socket directory)

   In a new terminal session...

; cd socket
; npm start