About Acebook

Acebook is the first MERN stack project at Makers Academy. We were challenged to work in groups to work with a legacy codebase, improve and extend it. This project was completed within a two week period by Claire Peng, Sam Ford, Ben Dixon, Megan Folsom, and Tej Chana

• Project Brief
• Project Documentation

Project Features

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

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
   

4. Install Node.js dependencies for both the frontend and api directories.

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

MongoDB

1. Install MongoDB

   brew tap mongodb/brew
   brew install mongodb-community@5.0
   

   Note: If you see a message that says If you need to have mongodb-community@5.0 first in your PATH, run:, follow the instruction. Restart your terminal after this.
2. Start MongoDB

   brew services start mongodb-community@5.0
   

Cloudinary

1. Sign up for a Cloudinary account.
2. In /api install the following:

; cd api 
; npm install cloudinary multer dotenv

3. In /frontend install the following:

; cd frontend
; npm install --save-dev cypress-file-upload

4. 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 Server and App

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

Note the use of an environment variable for the JWT secret

; 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/