MERN Social Network

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

Demo

MERN Social Network

Signup	Feed

Comment	Discover

Profile	Edit

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 (tested on macOS 10.14 Mojave)

To run server:

1. Clone the repository.
2. cd into the directory and run npm install.
3. Run cd client && npm install.
4. Back in the main directory, run npm start.

To set up your own database:

1. Log into or create an mLab account.
   1. Create a new MongoDB deployment.
   2. Enter the database and create a new user.
   3. Replace the dbURI in "secrets.js" (located in backend folder) with your MongoDB URI. Replace <dbuser> and <dbpassword> with the user and password you just created respectively.
2. Log into or create a Heroku account.
   1. Create a new app in Heroku.
   2. In settings, add config vars for REACT_APP_DB_URI and REACT_APP_JWT_KEY.
3. Back in the main directory, run npm start.

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

• Design was inspired by preexisting projects like Qolzam's React Social Network and Shama Hoque's Mern Social.
• Authentication was implemented with the help of Krunal Lathiya's example, Brad Traversy's guide on building a login system, and Maximilian Schwarzmüller's guide on JWT (primarily episodes 11 and 12).
• Restful CRUD API builds on concepts explained in Andrew Mead's Node.js course.
• Material-UI, React, Redux, Mongoose documentation.