https://github.com/khateebxtreme/sociosphere
Responsive social media web application made using MongoDB, Express.js, React.js, Redux and Node.js
https://github.com/khateebxtreme/sociosphere
bcrypt cors express formik-yup gridfs-stream helmet jwt-authentication material-ui mongodb mongoose morgan multer-storage nodejs react-dropzone react-router-dom reactjs redux redux-toolkit
Last synced: 6 months ago
JSON representation
Responsive social media web application made using MongoDB, Express.js, React.js, Redux and Node.js
- Host: GitHub
- URL: https://github.com/khateebxtreme/sociosphere
- Owner: Khateebxtreme
- Created: 2023-06-17T17:51:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T10:46:53.000Z (7 months ago)
- Last Synced: 2025-03-25T11:34:20.795Z (7 months ago)
- Topics: bcrypt, cors, express, formik-yup, gridfs-stream, helmet, jwt-authentication, material-ui, mongodb, mongoose, morgan, multer-storage, nodejs, react-dropzone, react-router-dom, reactjs, redux, redux-toolkit
- Language: JavaScript
- Homepage:
- Size: 3.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### IMPORTANT NOTICE -> [ READ THIS ](#notes)
# SOCIOSPHERE
**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.
## Table of Contents
- [Features](#features)
- [TechStack](#techstack)
- [Screens](#screens)
- [Run_Locally](#run_locally)
- [Notes](#notes)
- [Authors](#authors)
- [License](#license)
## Features
- 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.
## TechStack
**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
## Screens
### User Registeration page
### User Login Page
### User Homepage ( Dark Mode )
### User Homepage ( Light Mode )
### Post Structure
### User FriendList Widget
## Run_Locally
Clone the project
```bash
$ git clone https://github.com/Khateebxtreme/SOCIOSPHERE.git
```
Go to the project directory
```bash
cd SOCIOSPHERE\client
```
Install dependencies
```bash
npm install
```
Start the project
```bash
npm run start
```
The backend is already deployed on Render so running the project locally doesn't require any focus on it.
## Notes
- **Important :** The following project is now offline and is currently unavailable from the mentioned hosting services.
- **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.
## Authors
- [@Khateebxtreme](https://github.com/Khateebxtreme)
## License
[MIT](https://choosealicense.com/licenses/mit/)