About Acebook Messenger

Acebook Messenger is a small personal extension of the Acebook Group Project at Makers Academy, which uses socket.io to add real-time messaging.

• Project Brief
• Project Documentation

NOTE: I am working on a new version of the project to demonstrate cleaner code organization, and the ability to create modern, responsive frontend styling with Tailwind CSS. Please see the repo here

Project Features

New: Messaging:

Screen_Recording_2024-01-15_at_13_56_52_AdobeExpress.mp4

• Users can create chats with other users and see them in realtime
• Users can send each other messages, with emojis, and see them in realtime

Registration & Login

1.Registration.Login.mp4

• Users can register and log in
• Users can see an error message if their email is already registered with Acebook
• Users can see an error message if the user signs in with the wrong password

New Post

2.New.Post.-.image.and.text.mp4

• Users see their name in the new post text input box
• Users can post both images and text

Timeline & Posts

3.Timeline.by.New.and.Posts.2.mp4

• Users can see a timeline of posts, sorted by Newest first
• Users can see the post author, relative and absolute timestamps, and link to their profiles
• Users can like/unlike posts
• Users can see a list of comments
• Users can add a new comment

Sort by Trending

4.Timeline.by.Trending.mp4

• Users can sort posts by New or sort by Trending
• Users can see 🔥 next to trending posts -- newer posts with more recent engagement (comments, likes) are prioritised

Searchbar

5.Searchbar.mp4

• Users can use live-search searchbar

Profile

6.Own.Profile.Update.mp4

• Users can see their profile, profile picture, bio, email, and past posts
• Users can update their bios

Friends

7.Friends.1.mp4

• Users can send/unsend friend requests on other user's profiles
• Users can confirm/deny friend requests in their friend requests page or on other users' pages
• Users can see a notification in their navbar if they have a friend request
• Users can unfriend friends through their friends list or on other users' pages

Timeout

8.Login.Timeout.1.mp4

• If inactive for 20 minutes, users get timed out and a log-in prompt occurs

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