A MERN stack Social Web App where users can post , follow others and chat with them .
The app has been hosted on Netlify here . P.S: You might have to wait for a few seconds for the netlify site to respond.
- Users can register and login .
- Uses hashed password which are more reliable and safe .
- Users can make posts , follow/unfollow other users and realtime chat with friends .
- Users can also post images .
- Users can search for other users.
- Users can update/change their Profile Picture, Cover Picture and Personal Info about themelves .
- Users can comment on the posts .
- Register/Login takes valid input and give error messages for invalid or non-matchable credentials .
This is the first page which appears after logging in and it contains all the posts of the user and whoever the user follows .
This page displays the user's profile . The user can change the default cover picture and profile picture from this page . The personal info and a short description can also be added through this page . This page diplays all of user's posts . The rightbar also displays the friends of the user ( whoever the user follows ) .
This page can be accessed by clicking on the search bar on the navbar .
This page can be accessed by clicking on the messenger icon on the navbar . The user can chat / real-time chat with those users who are added on messenger ( each profile page gives you the option to add user on messenger ) . If two users are online then they can see each other as online on the right side of the messenger page .
A user can share a post from his/her profile and home page . The user can write a post and can also add an image with the post by clicking on the photo or video button ( for now only images can be shared ) . On selecting an image the user is also given the option to cancel the selected image ( a small black cross appears over the selected image ) . On clicking the share button the post is shared .
Each post has a 'comments' button , on clicking this button the comments section becomes visible and all the comments can be seen . The user can also enter a comment by writing in the input area and clicking the send icon .
- Must have basic knowledge of Node, React, Express, MongoDB .
- Basic idea about socketio .
- Familiarity with npm and npm packages .
- Clone the repo .
git clone https://github.com/aayushsrivastava9760/SocioLiz.git
- Install the dependencies for the Backend .
npm i
- Install the dependencies for the Frontend .
cd social-frontend
npm i
- Install the dependencies for the socket .
cd socket
npm i
- Create a
.envfile in the backend and add your connection string from mongoDB .
MONGO_URL=<your_connection_string>
-
Navigate to
social-frontend/src/utils/constantsand replacehttps://api-socioliz.herokuapp.com/apiwithhttp://localhost:8800/api. -
Navigate to
social-frontend/src/pages/messenger/Messengerand replacehttps://socioliz-socket.herokuapp.com/withws://localhost:8900.
- Start the backend server .
npm start
- Start the socket server .
cd socket
npm start
- Start the frontend .
cd social-frontend
npm start
For first-time contributors, be sure to read the contribution guidelines here.
The app is still under production phase so if bugs are found kindly create an issue regarding the same stating the method to reproduce the bug or relevant screenshot .
- Aayush Srivastava
- Heroku buildpack used for deployment of socket server timanovsky/subdir-heroku-buildpack