/BookClubReactFrontEnd

Primary LanguageTypeScriptMIT LicenseMIT

Book Club (Front-end)

A React e-commerce book application that coded with JavaScript and TypeScript. You might find the back-end side from: https://github.com/elifnurafsar/BookClubSpringBootBackEnd.git

Note Please open the README file to see the content properly.

Sample Video

Here is the YouTube link of sample video: https://youtu.be/1sRn4iLO448

Project Screen Shots

Login-Logout Pages

Inside this application there are 3 types of concepts (navigation bar based):

  1. Admin Page
  2. User Page with authorization
  3. User Page without any authorization

As shown in example images below, that the navigation bar changes with user roles.

Login Page

Login page.

Affirmations

Admin logged in affirmation page. User logged in affirmation page.

Logout Page

Logout page. Logged out page.

Admin Pages

Discount Page

discounts.mp4

Creation Pages

Book

select box example from create book page in admin pages. Full input example from create book page in admin pages.


Book creation affirmation page in admin pages.


Author

Full input example from create author page in admin pages. Create author affirmation page in admin pages.

Publisher pages are also seem like author pages in creation, updation and deletion. Therefore, I decided not to give any examples from the publisher's pages.

Update Delete Pages

Order

Confirmation/check (You might think this as "shipping") and deletion processes of orders are shown in this video. It is not possible to delete an order without check it.

orderadmin.mp4
Book

To update and delete books you have to enter the ISBN number to specified input box.

Update The Little Match Girl

updatebookfassttt.mp4

Delete The Little Match Girl

DeleteBook.mp4
Author

Below, you can see the process of updating Checkov's biography.

Checkov before update example. Author Update Delete Page example.


Checkov after update affirmation example. Checkov after update example.


Here are some examples from deletion process of an author.

Author delete example. Author deleting process cancelled example.

Publisher

Here is an example video of deletion process of a publisher.

deletepublisher.mp4

Searching Process Example

searchvideo.mp4

User Pages

Home Page

HomePageUser.mp4

Authors Page

AuthorsUser.mp4

User Authors page.

Publishers Page

PublishersUser.mp4

Shop Page

shopvideo.mp4

User Shop page.

My Basket Page

shopping.mp4

User My Basket page example.

Profile / My Orders Page

User Profile / My Orders page example.


Error Pages

Wrong URL Error example. An error caused from fetching operations.


Note This project was bootstrapped with Create React App.

How to Run?

In the project directory, you can run:

npm install

npm start

Sources