Social — Web application using nodejs API

About Project:

I have created a web application which I have named Social — web Applicaion. In this application i have created signup, login, craete post, feed post , view post, edit posts and delete posts. I have used mongodb database for this application. In this blog, we will focus on all of this module.

SignUp Page:

Given below is the snapshot of SignUp Page.

SignUp page

This page is for registered users. When user enters required details correctly, he/she will be redirected to Login Page. here i have used mongodb databse for store user credentials. Given below is the snapshot of the mongodb database.

User Credentials In Mongodb Database

Login Page:

Given below is the snapshot of Login Page.

Login Page

This page is for login users. When user enters valid username and password, he/she will be redirected to Feed page.

Feed Page:

Given below is the snapshot of Feed Page.

Feed Post Page

This snapshot shows the feed page in which it shows all the posts which created by the users. here user can add the new post by clicking on NEW POST button and user can also view this post. on every posts there are two more options is available like edit post and delete post. now we we see create post page by clicking on create post button.

Create Post Page:

Given below is the snapshot of New Post page.

Create Post Page

here we can see that there are 3 types of details user have to fill up in this page like what is the title of the post ? and relevent image according to title and last thing is the content of the post. after adding this details user have to click on the ACCEPT button. now post is uploaded into the databse. here i have used mongodb database for storing the all data. Given below is the snapshot of the post data in mongodb database.

Posts collection of mongodb database

View Post Page:

Given below is the snapshot of the view post page.

Post Details Page

There is a view post page. when user clicked in view button on feed post page so he/she will be redirect to this page. In this page user can see the details of the post like title, image and the whole content.

As i previosly mention there are two more fuctions are also available like edit the post and delete the post. so, when user click on edit button he will be redirect to edit post page it is same like new post page but here one change is that details of the form is already fill and user only have to hange this details. after clicking on accept button data will be change. clicking on the delete button user can delete the post.

That’s all what i have done till now. In future i am going to take this project to next level by adding new features.

At last, I am thankful to my project guide Mr Divyesh Patel for giving me such a wonderful opportunity and for having faith in me.

Thanks for reading my blog!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is a component important when using a scraping website?

React v17.0: An Update With No New Features?

Ionic or React Native App Development. Which is the best one for 2022?

Nullish coalescing operator (??)

Directives and DOM in Angular

The nteract April 2020 Release

Quickly Setup your Ember app with ESLint

React JS — Understanding Functional & Class Components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
PRASHIL VAISHNANI

PRASHIL VAISHNANI

student

More from Medium

CDC INTERNSHIP CHRONICLES

Groww Internship Interview Experience (On-Campus)

Internship experience with HackerRank, India: from the lens of an SDE

TECHNICAL CONTENT ENGINEER INTERNSHIP AT HACKERRANK