Skip to content

Latest commit

 

History

History
396 lines (275 loc) · 12.6 KB

README.md

File metadata and controls

396 lines (275 loc) · 12.6 KB
Raw

Design Files

Figma Designs
  • You can check the Design Files for different devices here.

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Instructions

Functionalities added
The website has the following functionalities

  • Login Route

    • When the invalid username and password are provided and the Login button is clicked, then the respective error message received from the response should be displayed
    • When the valid username and password are provided and the Login button is clicked, then the page should be navigated to the Home Route
    • When an unauthenticated user tries to access the Home, Bookshelves and Book Details Route, then the page should be navigated to the Login Route
    • When an authenticated user tries to access the Home, Bookshelves and Book Details Route, then the page should be navigated to the respective route
    • When an authenticated user tries to access the Login Route, then the page should be navigated to the Home Route

  • Home Route

    • When an authenticated user opens the Home Route,

      • An HTTP GET request should be made to Top Rated Books API URL with jwt_token in the Cookies

        • Loader should be displayed while fetching the data

        • After the data is fetched successfully, display the list of top rated books received from the response

        • If the HTTP GET request made is unsuccessful, then the failure view given in the Figma screens should be displayed

          • When the Try Again button is clicked, an HTTP GET request should be made to Top Rated Books API URL

        • When the Find Books button is clicked, then the page should be navigated to the Bookshelves Route

        • When a book item is clicked, then the page should be navigated to the Book Details Route

      • Header

        • When the Book Hub logo in the header is clicked, then the page should be navigated to the Home Route
        • When the Home link in the header is clicked, then the page should be navigated to the Home Route
        • When the Bookshelves link in the header is clicked, then the page should be navigated to the Bookshelves Route
        • When the Logout button in the header is clicked, then the page should be navigated to the Login Route

  • Bookshelves Route

    • When an authenticated user opens the Bookshelves Route

      • An HTTP GET request should be made to Books API URL with jwt_token in the Cookies and query parameters shelf and search with initial values as ALL and empty string respectively

        • The page should initially consist of All Books heading

        • Loader should be displayed while fetching the data

        • After the data is fetched successfully, display the list of books received from the response

        • If the HTTP GET request made is unsuccessful, then the failure view given in the Figma screens should be displayed

          • When the Try Again button is clicked, an HTTP GET request should be made to Books API URL

        • When a button in the bookshelves is clicked (Use the bookshelvesList data provided in the App.js to render Bookshelves),

          • The All Books heading changed to {bookshelf name} Books. Here the bookshelf name refers to the clicked bookshelf label from the provided bookshelvesList
          • Make an HTTP GET request to the Books API URL with jwt_token in the Cookies and query parameter shelf with value as the value of the clicked bookshelf from the provided bookshelvesList
          • Loader should be displayed while fetching the data
          • After the data is fetched successfully, display the list of books received from the response

        • When a non-empty value is provided in the search input and the search icon button is clicked

          • Make an HTTP GET request to the Books API URL with jwt_token in the Cookies and query parameter search with value as the text provided in the search input
          • Loader should be displayed while fetching the data
          • After the data is fetched successfully, display the list of books received from the response

        • When the HTTP GET request made to the Books API URL returns an empty list for books, then the No Books View should be displayed as shown in the Figma

    • When multiple filters are applied, then the HTTP GET request should be made with all the filters that are applied

      • For example: When the Read bookshelf is clicked and search input value is Speak, then the Books API URL will be as follows

        const apiUrl = 'https://apis.ccbp.in/book-hub/books?shelf=READ&search=Speak'

    • When a book item is clicked, then the page should be navigated to the Book Details Route

    • All the header functionalities mentioned in the Home Route should work in this route accordingly

  • Book Details Route

    • When an authenticated user opens the Book Details Route

      • An HTTP GET request should be made to Book Details API URL with jwt_token in the Cookies and book id as path parameter
        • Loader should be displayed while fetching the data
        • After the data is fetched successfully, book details received from the response should be displayed
      • If the HTTP GET request made is unsuccessful, then the failure view given in the Figma screens should be displayed
        • When the Try Again button is clicked, an HTTP GET request should be made to Book Details API URL

    • All the header functionalities mentioned in the Home Route should work in this route accordingly

  • Not Found Route

    • When a random path is provided as the URL path, then the page should be navigated to the Not Found Route

  • Users should be able to view the website responsively in mobile view, tablet view as well

  • The App is provided with bookshelvesList. It consists of a list of bookshelf objects with the following properties in each bookshelf object

    Key Data Type
    id String
    value String
    label String

Quick Tips

Tips

  • Third party packages to be used to achieve the design or functionality

    • React Slick

      • React Slick Documentation
      • React Slick implementation CodeSandbox
      • Update the CSS accordingly to style the React Slider and arrow buttons, you can check the CodeSandbox
      • Add the below CDN links in your public > index.html file for CSS and Font, you can check the CodeSandbox for adding below lines
      <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

Important Note

Routes

  • Routes

    • Render Login Route component when the path in URL matches /login
    • Render Home Route component when the path in URL matches /
    • Render Bookshelves Route component when the path in URL matches /shelf
    • Render Book Details Route component when the path in URL matches /books/:id

  • Wrap the Loader component with an HTML container element and add the testid attribute value as loader to it

    <div className="loader-container" testid="loader">
  <Loader type="TailSpin" color="#0284C7" height={50} width={50} />
</div>

  • Bookshelves Route

    • BsSearch icon from react-icons should be used for the Search Icon button
    • BsFillStarFill icon from react-icons should be used for the star image

  • BookDetails Route

    • BsFillStarFill icon from react-icons should be used for the star image

  • Footer

    • FaGoogle icon from react-icons should be used for the Google Icon button in Footer
    • FaTwitter icon from react-icons should be used for the Twitter Icon button in Footer
    • FaInstagram icon from react-icons should be used for the Instagram Icon button in Footer
    • FaYoutube icon from react-icons should be used for the Youtube Icon button in Footer

Resources

Data fetch URLs

  • Note: Use the below sample code snippet to make a POST request on Login using valid username and password.

    const options = {
  method: 'POST',
  body: JSON.stringify(userDetails),
}

Login API

URL: https://apis.ccbp.in/login

Method: POST

Description:

Returns a response based on the credentials provided

Sample request object:

{
  "username": "rahul",
  "password": "rahul@2021"
}

Sample Success Response

{
  "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
}

Sample Failure Response

{
  "status_code": 404,
  "error_msg": "Username is not found"
}

Top Rated Books API

URL: https://apis.ccbp.in/book-hub/top-rated-books

Method: GET

Description:

Returns a response containing the list of 10 top rated books

Sample Response

{
  "books": [
    {
      "id": "561d0af9-3cec-426d-9721-35ed8d7e9c3c",
      "author_name": "Chetan Bhagat",
      "cover_pic": "https://assets.ccbp.in/frontend/react-js/half-girlfriend-book.png",
      "title": "Half Girlfriend"
    },
    {
      "id": "5f7fe73a-c4f2-4d58-b4ad-ec88426e26be",
      "author_name": "Robert Kiyosaki",
      "cover_pic": "https://assets.ccbp.in/frontend/react-js/rich-dad-poor-dad-book.png",
      "title": "Rich Dad Poor Dad"
    },
    ...
  ],
  "total": 10
}

Books API

URL: https://apis.ccbp.in/book-hub/books?shelf={bookshelfName}&search={searchText}

Example: https://apis.ccbp.in/book-hub/books?shelf=Read&search=Luke

Method: GET

Description:

Returns a response containing the list of books based on the query parameters

Sample Response

{
  "books": [
    {
      "id": "54402549-a4bd-4c99-a176-bd795d47173a",
      "title": "One life one chance",
      "read_status": "Read",
      "rating": 4.2,
      "author_name": "Luke Richmond",
      "cover_pic": "https://assets.ccbp.in/frontend/react-js/one-life-one-chance-book.png"
    },
    ...
  ],
  "total": 10
}

Book Details API

URL: https://apis.ccbp.in/book-hub/books/{bookId}

Example: https://apis.ccbp.in/book-hub/books/7850622e-1b70-4396-963d-e68d5a2577d7

Method: GET

Description:

Returns a response containing book details

Sample Response

{
  "book_details": {
    "id": "7850622e-1b70-4396-963d-e68d5a2577d7",
    "author_name": "Ady Barkan",
    "cover_pic": "https://assets.ccbp.in/frontend/react-js/eyes-to-the-wind-book.png",
    "about_book": "Eyes to the Wind is a rousing memoir featuring intertwining storylines about determination, perseverance, and how to live a life filled with purpose and intention.",
    "rating": 4.8,
    "read_status": "READ",
    "title": "Eyes to the Wind",
    "about_author": "Ady Barkan is an American lawyer and liberal activist. He is a co-founder of the Be a Hero PAC and is an organizer for the Center for Popular Democracy, where he led the Fed Up campaign."
  }
}

User Credentials

Click to view user credentials

You can use any one of the following credentials

  username: aakash
  password: sky@007

  username: agastya
  password: myth#789

  username: advika
  password: world@5

  username: binita
  password: modest*6

  username: chetan
  password: vigor$life

  username: deepak
  password: lightstar@1

  username: harshad
  password: joy@85

  username: kapil
  password: moon$008

 username: rahul
 password: rahul@2021

  username: shravya
  password: musical#stone

  username: saira
  password: princess@9