Social App - Qwerty

Social App - Qwerty

ยท

4 min read

Hello everyone ๐Ÿ‘‹ ! I am Mansi . I have started learning Mern Stack from few months . I am really passionate about learning and developing . So , now let's talk about my project for this hackathon . My basic motive behind building this is to learn . I have build a social webapp named as " Qwerty " .

Inspiration

Ever wondered how the social media apps works ? That's what inspired me for making this project . I always wanted to have my own social media app . And here I come with my social app . Although the there are not much features that are implemented but it is good to go . It has got authentication , emailing features too which i learned while making this project .

Tools/Tech Stack Used

  • Visual Studio was used for development as I feel it provides the best development environment .
  • Github was used for maintaining my version controls .
  • FrontEnd : React.js , Material-UI
  • Backend : Node.js
  • Database : Mongodb and Cloudinary
  • Deployment : Vercel and Heroku

Working

User has to come up and signup where he can also update his details . An email will be sent to you email id after successfull registration . After logging in , User will be able to see the posts by other users . User can follow / unfollow other users . He can see other's profile . Search option is also available over there . In case user forgets his/her password then he can choose the option to reset the password . Mail Transporter was used to send emails to the user . When a user posts a pic , it is first stored in the cloudinary platform and the url of the pic generated from it is saved in our mongodb database . There are two schemas : User and Posts . The posts are seen in a decreasing time fashion , which means latest ones are shown on top .

Features

  • Login / Signup
  • Post a picture
  • Delete a picture
  • Post a comment
  • Delete a comment
  • Like / Unlike a post
  • Reset Password
  • Email greeting

Login Page

Screenshot (62).png

Home Page

Screenshot (63).png

User's Profile

Screenshot (64).png

Search User

Screenshot (68).png

Creating a Post

Screenshot (65).png

Posted

Screenshot (66).png

Posting a comment

Screenshot (70).png

Deployment

The backend of nodejs was hosted using heroku . The frontend was deployed very easily using vercel . The link is instaclient-ten.vercel.app . Enjoy !

#vercelhashnode