A full stack social media web application in which you can actually post pictures, like posts, comment upon it, follow people and maintain a healthy social network!
The hosted website can be found here
- Frontend: Reactjs, Javascript, HTML, CSS, Materialize-Css
- Backend: Nodejs, Expressjs, Jwt
- Database: MongoDB, Cloudinary
- Deployment: Heroku
- Tools: Git
We have used a NoSQL database(MongoDB) in which we are having two schemas Post and User. We have connected these two schemas at the relevant fields using (ObjectID).
The authentication part of our app is done using JSON web tokens(JWT). Bcrypt package is used for hashing passwords. Every time during signup we store the hashed password in our User schema and everytime during login we generate a jwt token and store it in the localStorage. Then for accessing any protected API we send authorization header that includes the jwt token. We have implemented a middleware that checks whether the user is logged in or not by checking the authorization header, while accessing any protected API.
These includes APIs ensuring following functionalities:
- /user/:id To find a user with a particular ID
- /follow To follow a particular user
- /unfollow To unfollow a particular user
- /updateprofilepic To update the profile picture of a user
- /searchusers To search a user using a unique email
- /allpost To retrieve all the posts from the Post schema
- /allfollowpost To retrieve all the posts from those users which are followed by the logged in user.
- /createpost To create a post with a title, body and a picture
- /mypost To retrieve all the posts posted by logged in user
- /like To like a paricular post
- /dislike To dislike a post
- /comment To comment upon a post
- /deletepost/:postId To delete a post posted by logged in user
- /deletecomment/:postId/:commentId To delete the comments posted by a logged in user
Cloudinary is a cloud based media storage and optimisation service. I have used it to store all kind of image media used in my application and this API returns the image url for any image media which I use in the frontend.
There is a basic landing page that is my Login page , you can always navigate to the signup screen from here.
After logging in you will see a home screen and you can view all the posts there .
The navbar at the top contains a home icon and other options like create post , my following posts , my profile , all of these are pretty much self explanatory.
Each Post contains a header which includes name of the person who posted that, caption, text body, picture, like button and the comment section. The posts posted by a logged-in user also includes a delete button to delete that. All the comments posted by a logged in user also possess the delete button. The image URL for the posts are returned from the cloudinary API.
The profile contains information about the user's username, Email, followers, following, update profile picture button and a thumbnail of the posts posted by a user.
Contains all the information as on the Profile page and the button to follow or unfollow.
You can search the users using their email IDs.
The interface to create a Post!
Shows all the posts posted by those users which are followed by logged in user.
- Frontend
-
Clone the repo
git clone https://github.com/tend2infinity/Instafam-full-stack
-
Install NPM packages in server
npm install
-
Install NPM packages in client
cd Client_side npm install -
Create a .env file using the template .env.template and add values accordingly.
-
Switch to the Root directory and run the backend server
npm start
-
Switch to the Frontend folder and run the frontend server
cd Client_side npm startMake sure you start the Backend server before the Frontend server to avoid unnecessary errors.