MERN Social Network

Adapted and extended from the https://github.com/jm-shi/MERN-Social-Network/

A MERN stack social network application with MVP features implemented: user authentication, profile viewing, posting, commenting, and following/unfollowing.

User Stories

  • As a user, I want to be able to create an account so that I can log in.
  • As a user, I want to be able to log in so that I can view my home feed.
  • As a user, I want to be able to view posts so that I know what people I’m following are up to.
  • As a user, I want to be able to create a post so that I can share my current status.
  • As a user, I want to be able to delete my posts so that people can no longer see them.
  • As a user, I want to be able to edit my posts so that I can correct or clarify my thoughts.
  • As a user, I want to be able to like/unlike a post so that I can approve posts I am fond of.
  • As a user, I want to be able to comment on a post so that I can share additional thoughts.
  • As a user, I want to be able to view other users' profiles so that I can learn more about them.
  • As a user, I want to be able to edit my own profile (i.e. change name, avatar color, or bio) so that I can add more style to my page.

Potential improvements:

  • Add option for user to post images
  • Add option for user to change their avatar/background to a custom image
  • Add social media login options (e.g. Facebook, Google, Twitter)
  • Implement find users feature (i.e. find users by typing their name into a search field)
  • Improve code organization
  • Write more tests

Setup instructions

First install the dependencies:

  1. Clone the repository.
  2. cd into the directory and run npm install.
  3. Run cd client && npm install.

Next, set up the database credentials:

  1. Log into or create an MongoDB Atlas account.
  2. Create a new MongoDB cluster. You can go with the default settings or customize them as you wish. Once the cluster is created, click "Connect." Create Cluster Connect
  3. Whitelist a connection IP address and create a new MongoDB user. Setup Security
  4. Once connection security is set up, choose "Connect Your Application." Connect Application
  5. Replace the dbURI in secrets.js, located in backend folder, with the connection string. Replace someUser and <password> with the user and password you created in step 2. Connection String Sample Secrets
  6. cd back into the main directory and run npm start. You can access the site at localhost:3000.

Optional: If you want to also deploy the app to Heroku, first go through the aforementioned steps and then proceed as follows:

  1. Log into or create a Heroku account.
  2. Create a new app in Heroku. Create New App
  3. In the settings tab, add the config vars for REACT_APP_DB_URI and REACT_APP_JWT_KEY. The value for REACT_APP_DB_URI should be the same as the one you previously entered for dbURI in secrets.js. REACT_APP_JWT_KEY can be set to any random string. Heroku Config Variables
  4. In the deploy tab, choose any deployment method to deploy the application. Deploy Heroku

Built With

  • Express.js - Backend web framework
  • Heroku - Platform to deploy web applications
  • JSON Web Token - A standard to securely authenticate HTTP requests
  • Material-UI - UI library for React
  • MongoDB - Database to store document-based data
  • Mongoose - Object-modeling tool for Node.js
  • Node.js - Runtime environment to help build fast server applications
  • React - JavaScript library for building user interfaces
  • Redux - JavaScript library to help better manage application state

Acknowledgments

social-network-app

social-network-app

social-network-app

social-networking-app

social-networking-app