A MERN stack social network application with MVP features implemented: user authentication, profile viewing, posting, commenting, and following/unfollowing.
| Signup | Feed |
|---|---|
 |
 |
| Comment | Discover |
|---|---|
 |
 |
| Profile | Edit |
|---|---|
 |
 |
- 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.
- 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
First install the dependencies:
- Clone the repository.
cdinto the directory and runnpm install.- Run
cd client && npm install.
Next, set up the database credentials:
- Log into or create an MongoDB Atlas account.
- 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."
- Whitelist a connection IP address and create a new MongoDB user.
- Once connection security is set up, choose "Connect Your Application."
- Replace the dbURI in
secrets.js, located in backend folder, with the connection string. ReplacesomeUserand<password>with the user and password you created in step 2.
cdback into the main directory and runnpm start. You can access the site atlocalhost:3000.
Optional: If you want to also deploy the app to Heroku, first go through the aforementioned steps and then proceed as follows:
- Log into or create a Heroku account.
- Create a new app in Heroku.
- 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.
- In the deploy tab, choose any deployment method to deploy the application.
- 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
- 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.