arjohnston/myface

The social media you didn't know you needed

Table of Contents

• Setup and Dependencies
• Available Scripts

---

Setup and Dependencies

This project was built in the Ubuntu Xenial 16.04 LTS Linux environment, and was built on

• Node.js v8.9.1+
• ExpressJS NPM package v4.16.2+
• MongoDB Official Driver NPM package v2.2.33+

Automatic Install [MacOS, Linux]

1. Navigate to the util/scripts folder - cd util/scripts
2. Run the setup script - chmod +x setup.sh && bash setup.sh

Manual Install [Windows, MacOS, Linux]

1. In a "main" directory of your choice (i.e. cd into Desktop or Documents), you can acquire the latest Node.js package in two ways:
   • Download from nodejs.org, or
   • Install through the command line using apt-get (or whatever package manager is supported by your OS, i.e. yum)
   • Verify the installation succeeded using node -v on command line. You should see the version of your package printed out (e.g. v10.14.2).
2. [MacOS, Linux] Install Homebrew (e.g. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)")
   • After installing, upgrade existing packages by running the command: brew upgrade && brew update
3. Acquire MongoDB in the main directory as well (locally on your machine).
   • MacOS, Linux:
     • Use Homebrew to install MongoDB:
       • brew tap mongodb/brew
       • brew install mongodb-community
   • Windows:
     • Download and install the package from the MongoDB website
     • Follow your OS's installation instructions listed on the MongoDB website
4. After installing MongoDB, initialize your database document store by creating the /data/db directory
   • MacOS, Linux:
     • sudo mkdir -p /Volumes/data/db (Use sudo in front of mkdir if necessary)
     • sudo chown -R `id -un` /Volumes/data/db (Use sudo in front of chown if necessary)
   • Windows:
     • cd C:\
     • md "\data\db"
5. [Windows] Install git by downloading it here
6. [Windows] Install PM2
   • npm i -g pm2
7. If you haven't already cloned the project on your local machine, clone the dev branch into a location of your choice (e.g. the Documents directory):
   • git clone https://github.com/arjohnston/myface
8. Go to the root directory of the project (i.e. cd /path/to/your/.../myface/
9. Create your own branch to work off of:
   • git checkout -b [name]
10. [Windows] In a new terminal window, run the mongo daemon by entering:
    • "C:\Program Files\MongoDB\Server\4.2\bin\mongod.exe" --dbpath="c:\data\db"
11. Run the app in the root project directory using: npm start
    • MacOS, Linux:
      • npm start
    • Windows:
      • node util/scripts/start.js
    • The app should automatically run on port 3000 and 8080 and open in your default browser

Available Scripts

In the project directory, you can run:

Build and run:

npm run start

Manually build:

npm run build

Manually start the API server:

npm run start-api

Manually start the API:

npm run start-ui

Launch the test runner utilizing mocha and chai:

npm test

Run a script to get the latest changes from github, installs any new dependencies and spawns the daemons:

npm run deploy

Run a linter against the repository to standardize the format of the code:

npm run lint

myface's Issues

User Profile Routes

Create API routes & models for saving and retrieving user profile information

IP Location Lock

New device detected email sent

404 page - "Cannot find the face you're looking for"

Hide the password input field until a user starts typing into username

Create Notifications

Secure socket communication

Encrypt, or create sessions..need to look into it more:

e.g.
https://github.com/wcamarao/session.socket.io

Create a global header component

The header component should include at least:

• Logo
• Internal navigation (Home, Messaging, Friend Finder, Profile, etc)

And it should be stateful, showing different information when logged in versus not logged in

Save & Retrieve Assets

API routes for Images / Videos

Will we use S3 to store the assets?

Update README to include instructions for Windows

Too many login attempts

Cap the amount of times someone can login to 5 times over a period of 10 minutes. Display an error message when too many attempts were taken

"Show password" button when logging in/registering

An eye icon to the right of the password field so a user can see what password they're entering in plain text

Windows - using 'npm start' errors

Right now, we're required to use 'node util/scripts/start.js' as using 'npm start' is erroneous.

Add messaging

• A messaging component should be available on each page so anyone can directly message others no matter what page they're on
• A messaging page should also exist

This would entail retrieving messages from the DB, displaying them, creating messages and reloading the component when new messages come in

Use Travis CI for automated test running

Add global state management

MobX / Redux for global state management:

https://mobx.js.org/README.html
https://react-redux.js.org/

Add username

Also need to collect First/Last name of the person to display it in the app. The username by default could be their parsed email before the @ symbol. if duplicates exist, add a number to the end of it.

For example, [email protected] would be username: abc
If abc already exists in the system, then it would be abc1, abc2, etc.

A user can also make their own unique username

Unit tests for APIs

Add ability to "stay signed in" when logging in

Create global layout component

A layout component defines similar styling between multiple pages (e.g. color, size of inputs). This way its to create standardization

Take a look at: https://github.com/arjohnston/health-tracker/blob/master/src/components/Dashboard/Dashboard.js for an example

APIs for Friend Finder

Create API endpoints for friend finder:
Search
Accept friend request
Block friend request
Request friendship
Retrieve friend list

Sign up with Google

In addition being able to create an account, use Google's auth service to login

Create Friend Finder

Search for friends out of all users in the DB with keywords
Request friendship
accept/block incoming friend requests
View friendlist for self

Profile page

Add an image, bio and create posts

Will need to fetch data from the DB, such as image, biography, user posts, etc

Add infinite scrolling upwards for messaging

Batch the amount of messages received at a given time to improve performance.

Querying and appending messages typically isn't an issue however when prepending messages, the scrollTop value is now different if we want to preserve the location of where the user was scrolled. Naturally, we should scroll to the old message, but browser compatibility is unstable between Firefox/Chrome. Different mechanisms should be looked into, including injecting refs and scrolling to those

Create an infinite scrolling feed

An object with the feed data would be fetched from the database, in chronological order of only friends, parsed through and displayed - similar to other social media feeds.

The component should be "infinite" scrolling. One solution may be to display the top 50 posts and when the user scrolls to the bottom, then fetch the next 50 posts, etc.

Here's a simple example of infinite scrolling: https://codesandbox.io/s/yk7637p62z

standard library incorrect w/ some indentation

To reproduce, change line 226 on Register.js and then commit the file. During the standard check, it fails due to improper indentation when the library tries to fix it

API Routes & Model for posts

Create Post
Retrieve posts for one user in chronological order

Retrieve given number of posts for group of users:

• For example, on the infinite scrolling the top 50 posts would be retrieved for a user and that users friends

Messaging API

Create the models & routes associated with storing and retrieving messages for a user

Some issues will be concurrent messaging. In that case, something like socket.io may be a solution:
https://github.com/socketio/socket.io

Remove hover state when clicking on submenu link in the header on iOS Safari

Use recaptcha for Register

Darkmode

You know, because it's 2020

Show warning for when caps lock is on when entering a password