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

• [x] As a user, I want to be able to create an account so that I can log in.
• [x] As a user, I want to be able to log in so that I can view my home feed.
• [x] As a user, I want to be able to view posts so that I know what people I’m following are up to.
• [x] As a user, I want to be able to create a post so that I can share my current status.
• [x] As a user, I want to be able to delete my posts so that people can no longer see them.
• [x] As a user, I want to be able to edit my posts so that I can correct or clarify my thoughts.
• [x] As a user, I want to be able to like/unlike a post so that I can approve posts I am fond of.
• [x] As a user, I want to be able to comment on a post so that I can share additional thoughts.
• [x] As a user, I want to be able to view other users' profiles so that I can learn more about them.
• [x] 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.15 Catalina)

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."
3. Whitelist a connection IP address and create a new MongoDB user.
4. Once connection security is set up, choose "Connect Your 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.
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.
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.
4. In the deploy tab, choose any deployment method to deploy the application.

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.