SocioSphere is a powerful, responsive and highly user-friendly social media web application made using MERN Stack. It includes a number of core functionalities that a social media app should provide like the ability for users to create and register accounts, add and remove friends, share posts and engage in various social interactions. Features like light and dark mode, like or dislike posts was also added to improve user experience.
- Users can create an account by providing necessary details like name, email and password. Other details like occupation,location and a profile picture can also be provided on registeration.
- Accessible through all kinds of devices (Tablets , desktop , phones etc).
- The application also ensures secure web authentication and authorization process by implementing a login system that verifies user credentials.
- Users can add or remove friends and can also see their list of friends in the provided friend's list.
- Users can also create posts, upload images and share their experiences. They can also like or dislike posts on their feed.
- Users can also navigate to other user's profile by clicking on their name or profile pic.
- SocioSphere comes in with user friendly interface for better user experience.
Front-End: React, Material-UI, Redux-Toolkit
Back-End: Mongoose, Express.js, Node.js, Bcrypt, MongoDB
Third Party Services: Helmet, Formik, Yup, Multer, Morgan, JWT Authentication
Clone the project
$ git clone https://github.com/Khateebxtreme/SOCIOSPHERE.gitGo to the project directory
cd SOCIOSPHERE\clientInstall dependencies
npm installStart the project
npm run startThe backend is already deployed on Render so running the project locally doesn't require any focus on it.
- Hosting Services : Netlify (Front-End), Render (Back-End)
- Follow up : Add the functionality to add comments, Fix the minor user state issue(friend of friend profile's) which can throw an error, Add the functionality to update user details (customization option), Some minor design updates are also needed.