DevConnector

DevConnector is a social network application with Node.js, Express, React, Redux and MongoDB.

Stack

MERN Stack - MongoDB, Express, React, Node.

• MongoDB - document database
• Express(.js) - Node.js web framework
• React(.js) - a client-side JavaScript framework
• Node(.js) - the premier JavaScript web server

Environment & Setup

• Edit in settings.json.

• Install Node.js - the npm file should be in /usr/local/bin/npm.

• Install the required dependencies:

  Back-end dependencies:

  npm i express express-validator bcryptjs config gravatar jsonwebtoken mongoose request
  npm i -D nodemon concurrently
  

  Front-end dependencies:

  npm i axios react-router-dom redux react-redux redux-thunk redux-devtools-extension moment react-moment uuid
  

• Download Postman and then connect it to your PC with the Postman desktop client before you can send requests on your local host http://localhost:5000.

• To check if a user has been registered, go to MongoDB: Atlas -> Browse Collections.

• Create an OAuth App on GitHub.

• Set up React: npx create-react-app client.

• Start the server:

  • Run nodemon: npm run server to start the server on the back-end.
  • Run cd client, npm start to start the React server on the front-end.
  • To run both front-end and back-end servers concurrently, explicitly specify it in package.json and then run npm run dev.

• Kill a process: Run ps aux | grep npm or lsof -i tcp:3000 to get the process ID, then do kill -9 [PID].

• Clear the cache: Run rm -r package-lock.json node_modules, npm install.

• Deploy on Heroku:

  heroku login
  heroku git:remote -a dev-connector-sherry-xzhu
  git add .
  git commit -am "Prepared for deployment"
  git push heroku main
  heroku open
  

Functionalities

User

Authentication

• Register users with name, valid email and password
  • JWT - decodes, verifies and generates JSON Web Token (JWT GitHub Repo).

Authorization

• Only users that own the post will be able to delete the post, or delete comment of the post

Profile

• Create and update user profile
• Get current user profile
• Get all profiles & profile by user ID
• Delete profile & user
• Add and delete experience & education from user profile
• Get GitHub repos for profile

Post

• Add and delete post
• Get all posts & post by ID
• Like or unlike a post
• Add and delete comment

Technology

Platform

• Virtual Studio - an integrated development environment from Microsoft.
• Heroku - a cloud platform that runs apps in virtual containers.
• Git - an open source distributed version control system, used to deploy the app to Heroku.

Front-end

• HTML - used to structure a web page and its content.
• JavaScript - a high-level, interpreted programming language.
• React - an open-source front-end JavaScript library for building user interfaces based on UI components.
• Font Awesome - the Internet's icon library and toolkit.
• Redux - an open-source JavaScript library for managing and centralizing application state (see Redux Devtool Extension Tutorials here).
• CORS - Cross-Origin Resource Sharing is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.

Middleware

• express-validator - a set of express.js middlewares that wraps validator.js validator and sanitizer functions.

Back-end

• Node.js - JavaScript run-time environment that executes JavaScript code server-side.
• Postman - an API platform for developers to design, build, test and iterate their APIs.
• MongoDB - a source-available cross-platform document-oriented database program, classified as a NoSQL database program, and uses JSON-like documents with optional schemas.
• Mongoose - an elegant mongodb object modeling for Node.js.

Resources

• Basic writing and formatting syntax on GitHub
• Remove .DS_Store from a Git Repository
• This project is inspired by MERN Stack Front To Back: Full Stack React, Redux & Node.js on Udemy by Brad Traversy.