4.1 App screen 1 (UI + Backend Integration)

Nikhil Chaudhary
2 min readJul 7, 2017

--

Finally,The first Screen of ShareBook is ready.

In this blog post i will show the UI ofthe first screen of my webapp. I have used HTML , CSS, JavaScript, Bootstrap for front end.

To get through the knowledge of using HTML tags, CSS, JavaScript and more, Please visit:

Take a look at the screens of our webapp so far:

Home Screen :

In the above pic of home screen, when user is not logged in, then user have options to either LOGIN(top-right corner) -if already existing account or to create new account- REGISTER.
Three options are given whether the user want to borrow books,buy books or to post any books for other users. User can also see recently posted books.

Recently posted books on home page
Details of selected books

Register Modal:

After clicking on register button :

After entering all the details, press the Register button. If you have entered valid details, and the email-id/username does not already exist, an account is created and you are brought to the login page.

Login Modal:

Feedback Screen :

The above picture is the footer of home screen, where user can give feedback or report any bug.
For the back-end part of the above screen we Aditi Agrawal and I used Nodejs and Postgres database is used to store data.

In my next blog, i’ll discuss about second screen of my webapp.

--

--