Skip to content

Latest commit

 

History

History
235 lines (138 loc) · 5.86 KB

README.md

File metadata and controls

235 lines (138 loc) · 5.86 KB

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.

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/

  1. Start the socket (in the socket directory)

    In a new terminal session...

; cd socket
; npm start