{"id":22661041,"url":"https://github.com/kirankumar-matham96/bookhub_react_app","last_synced_at":"2025-03-29T08:25:29.334Z","repository":{"id":41800842,"uuid":"510292852","full_name":"kirankumar-Matham96/BookHub_react_app","owner":"kirankumar-Matham96","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-04T15:24:03.000Z","size":184,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-03T22:45:37.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirankumar-Matham96.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-04T09:25:08.000Z","updated_at":"2022-07-04T09:26:20.000Z","dependencies_parsed_at":"2022-09-03T14:02:44.931Z","dependency_job_id":null,"html_url":"https://github.com/kirankumar-Matham96/BookHub_react_app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2FBookHub_react_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2FBookHub_react_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2FBookHub_react_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2FBookHub_react_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirankumar-Matham96","download_url":"https://codeload.github.com/kirankumar-Matham96/BookHub_react_app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246158643,"owners_count":20732842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-09T11:13:25.448Z","updated_at":"2025-03-29T08:25:29.302Z","avatar_url":"https://github.com/kirankumar-Matham96.png","language":"JavaScript","readme":"In this project let's build a **Book Hub** by applying the concepts we have learned till now. This project allows you to practice the concepts and techniques learned till React Course and apply them in a concrete project.\n\nYou will demonstrate your skills by creating an app that will fetch data from an internal server using a class component, displaying that data, using **component lifecycle** methods, **routing** concepts, **authentication**, and **authorization**, and adding responsiveness to the website.\n\nThis is an individual assessment. All work must be your own.\n\n### Prerequisites\n\n#### UI Prerequisites\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- What is Figma?\n  - Figma is a vector graphics editor and prototyping tool which is primarily web-based. You can check more info on the \u003ca href=\"https://www.figma.com/\" target=\"_blank\"\u003eWebsite\u003c/a\u003e.\n- Create a Free account in Figma\n  - Kindly follow the instructions as shown in \u003ca href=\"https://www.youtube.com/watch?v=hrHL2VLMl7g\u0026t=37s\" target=\"_blank\"\u003ethis\u003c/a\u003e video to create a Free Figma account. Watch the video upto **00:50**.\n- How to Check CSS in Figma?\n  - Kindly follow the instructions as shown in \u003ca href=\"https://www.youtube.com/watch?v=B242nuM3y2s\" target=\"_blank\"\u003ethis\u003c/a\u003e video to check CSS in the Figma screen. Watch the video upto **02:45**.\n- Export Images in Figma screen\n\n  - Kindly follow the instructions as shown in \u003ca href=\"https://www.youtube.com/watch?v=NpzL1MONwaw\" target=\"_blank\"\u003ethis\u003c/a\u003e video to export images from the Figma screen.\n  - Click on the Export button to get Export options as shown in the below image.\n\n  \u003cdiv style=\"text-align:center;margin:10px 0px 0px 45px;width:200px;\"\u003e\n    \u003cimg src=\"https://assets.ccbp.in/frontend/react-js/figma-export-option.png\" /\u003e\n  \u003c/div\u003e\n\n- Upload your exported images from Figma to Cloudinary and get image URLs from Cloudinary. Refer \u003ca href=\"https://learning.ccbp.in/projects/course?c_id=fe4c935d-3ad5-4bb8-a1a5-9b045ae70010\u0026s_id=2f72d6fe-09a7-4c0a-b0db-196740c853a0\u0026t_id=6535e48d-fb4e-45c4-9654-3da423c79e26\" target=\"_blank\"\u003ethis\u003c/a\u003e session for better understanding.\n\n\u003c/details\u003e\n\n#### Design Files\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- You can check the **Design Files** for different devices \u003ca href=\"https://www.figma.com/file/T8BdpViEZL6DhFxu0HlEPY/Book-Hub?node-id=0%3A1\" target=\"_blank\"\u003ehere\u003c/a\u003e.\n\n\u003c/details\u003e\n\n### Set Up Instructions\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- Download dependencies by running `npm install`\n- Start up the app using `npm start`\n\n\u003c/details\u003e\n\n### Completion Instructions\n\n\u003cdetails\u003e\n\n\u003csummary\u003eFunctionality to be added\u003c/summary\u003e\n\u003cbr/\u003e\nThe app must have the following functionalities\n\n- **Login Route**\n\n  - 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\n  - When the valid username and password are provided and the **Login** button is clicked, then the page should be navigated to the Home Route\n  - When an _unauthenticated_ user tries to access the Home, Bookshelves and Book Details Route, then the page should be navigated to the Login Route\n  - When an _authenticated_ user tries to access the Home, Bookshelves and Book Details Route, then the page should be navigated to the respective route\n  - When an _authenticated_ user tries to access the Login Route, then the page should be navigated to the Home Route\n\n- **Home Route**\n\n  - When an _authenticated_ user opens the Home Route,\n\n    - An HTTP GET request should be made to **Top Rated Books API URL** with `jwt_token` in the Cookies\n\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of top rated books received from the response\n      - If the HTTP GET request made is unsuccessful, then the failure view given in the **Figma** screens should be displayed\n\n        - When the **Try Again** button is clicked, an HTTP GET request should be made to **Top Rated Books API URL**\n\n      - When the **Find Books** button is clicked, then the page should be navigated to the Bookshelves Route\n      - When a **book item** is clicked, then the page should be navigated to the Book Details Route\n\n    - **Header**  \n    \n      - When the **Book Hub logo** in the header is clicked, then the page should be navigated to the Home Route\n      - When the **Home** link in the header is clicked, then the page should be navigated to the Home Route\n      - When the **Bookshelves** link in the header is clicked, then the page should be navigated to the Bookshelves Route\n      - When the **Logout** button in the header is clicked, then the page should be navigated to the Login Route\n\n- **Bookshelves Route**\n\n  - When an _authenticated_ user opens the Bookshelves Route\n\n    - 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\n\n      - The page should initially consist of **All Books** heading\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of books received from the response\n      - If the HTTP GET request made is unsuccessful, then the failure view given in the **Figma** screens should be displayed\n\n        - When the **Try Again** button is clicked, an HTTP GET request should be made to **Books API URL**\n\n      - When a button in the **bookshelves** is clicked (Use the bookshelvesList data provided in the App.js to render Bookshelves),\n\n        - The **All Books** heading changed to **{bookshelf name} Books**. Here the bookshelf name refers to the clicked bookshelf label from the provided `bookshelvesList`\n        - 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`\n        - **_Loader_** should be displayed while fetching the data\n        - After the data is fetched successfully, display the list of books received from the response\n\n      - When a non-empty value is provided in the search input and the search icon button is clicked\n\n        - 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\n        - **_Loader_** should be displayed while fetching the data\n        - After the data is fetched successfully, display the list of books received from the response\n\n      - 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\n\n  - When multiple filters are applied, then the HTTP GET request should be made with all the filters that are applied\n\n    - For example: When the **Read** bookshelf is clicked and search input value is **Speak**, then the **Books API URL** will be as follows\n\n      ```js\n      const apiUrl = 'https://apis.ccbp.in/book-hub/books?shelf=READ\u0026search=Speak'\n      ```\n\n  - When a **book** item is clicked, then the page should be navigated to the Book Details Route\n  - All the header functionalities mentioned in the Home Route should work in this route accordingly\n\n- **Book Details Route**\n\n  - When an _authenticated_ user opens the Book Details Route\n\n    - An HTTP GET request should be made to **Book Details API URL** with `jwt_token` in the Cookies and book `id` as path parameter\n      - **_Loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, book details received from the response should be displayed\n    - If the HTTP GET request made is unsuccessful, then the failure view given in the **Figma** screens should be displayed\n      - When the **Try Again** button is clicked, an HTTP GET request should be made to **Book Details API URL**\n\n  - All the header functionalities mentioned in the Home Route should work in this route accordingly\n\n- **Not Found Route**\n\n  - When a random path is provided as the URL path, then the page should be navigated to the Not Found Route\n\n- Users should be able to view the website responsively in mobile view, tablet view as well\n\n- The App is provided with `bookshelvesList`. It consists of a list of bookshelf objects with the following properties in each bookshelf object\n\n  |  Key  | Data Type |\n  | :---: | :-------: |\n  |  id   |  String   |\n  | value |  String   |\n  | label |  String   |\n\n\u003c/details\u003e\n\n### Quick Tips\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- Third party packages to be used to achieve the design or functionality\n\n  - React Slick\n\n    - React Slick \u003ca href=\"https://react-slick.neostack.com/docs/get-started\" target=\"_blank\"\u003eDocumentation\u003c/a\u003e\n    - React Slick implementation \u003ca href=\"https://codesandbox.io/s/react-slick-demo-iz90x?file=/src/components/ReactSlick/index.js\" target=\"_blank\"\u003eCodeSandbox\u003c/a\u003e\n    - Update the CSS accordingly to style the React Slider and arrow buttons, you can check the \u003ca href=\"https://codesandbox.io/s/react-slick-demo-iz90x?file=/src/components/ReactSlick/index.css\" target=\"_blank\"\u003eCodeSandbox\u003c/a\u003e\n    - Add the below CDN links in your `public \u003e index.html` file for CSS and Font, you can check the \u003ca href=\"https://codesandbox.io/s/react-slick-demo-iz90x?file=/public/index.html\" target=\"_blank\"\u003eCodeSandbox\u003c/a\u003e for adding below lines\n\n    ```jsx\n    \u003clink rel=\"stylesheet\" type=\"text/css\" charset=\"UTF-8\" href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css\" /\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css\" /\u003e\n    ```\n\n\u003c/details\u003e\n\n### Important Note\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n**The following instructions are required for the tests to pass**\n\n- **Note:**\n\n  - Don't use any third-party packages other than packages mentioned in the **Quick Tips**\n  - Use media queries for responsiveness. Instead of rendering the same elements twice for responsiveness.\n  - For Mini Projects, You have to use normal HTML elements to style the React Components. Usage of `styled-components` (CSS in JS) to style React components are not supported in Mini Projects. Test cases won't be passed, if you use styled components\n  - Refer to the below Example for the usage of `testid` in the HTML elements\n\n    - Example: `\u003cdiv testid=\"bookItem\" className=\"book-item\"/\u003e`\n\n- **Routes**\n\n  - Render `Login` Route component when the path in URL matches `/login`\n  - Render `Home` Route component when the path in URL matches `/`\n  - Render `Bookshelves` Route component when the path in URL matches `/shelf`\n  - Render `Book Details` Route component when the path in URL matches `/books/:id`\n\n- Wrap the `Loader` component with an HTML container element and add the `testid` attribute value as **loader** to it\n\n  ```jsx\n  \u003cdiv className=\"loader-container\" testid=\"loader\"\u003e\n    \u003cLoader type=\"TailSpin\" color=\"#0284C7\" height={50} width={50} /\u003e\n  \u003c/div\u003e\n  ```\n\n- The Failure View image should consist of alt attribute value as `failure view`\n\n- **Login Route**\n\n  - Login Route should consist of website logo image with alt as `login website logo`\n  - Login Route should consist of a website login image with alt as `website login`\n  - The Cookies should be set by using the key name `jwt_token`  \n\n- **Bookshelves Route**\n\n  - The book images in the Bookshelves Route should have the alt as the value of the key `title` respectively from the received Books response\n  - The search icon should be wrapped with an HTML button element with testid as `searchButton`\n  - `BsSearch` icon from react-icons should be used for the **Search Icon** button\n  - `BsFillStarFill` icon from react-icons should be used for the **star** image\n  - When the HTTP GET request made to the given Books API returns the books list as empty, then the page should consist of No Books image with alt as `no books`\n\n- **BookDetails Route**\n\n  - `BsFillStarFill` icon from react-icons should be used for the **star** image\n\n- **Not Found Route**\n\n  - The Not Found image should consist of alt attribute value as `not found`\n\n- **Header**\n\n  - The Book Hub Logo image in Header should consist of alt attribute value as `website logo`\n\n- **Footer**\n\n  - `FaGoogle` icon from react-icons should be used for the **Google Icon** button in Footer\n  - `FaTwitter` icon from react-icons should be used for the **Twitter Icon** button in Footer\n  - `FaInstagram` icon from react-icons should be used for the **Instagram Icon** button in Footer\n  - `FaYoutube` icon from react-icons should be used for the **Youtube Icon** button in Footer\n\n\u003c/details\u003e\n\n### Resources\n\n\u003cdetails\u003e\n\u003csummary\u003eData fetch URLs\u003c/summary\u003e\n\n- **Note:** Use the below sample code snippet to make a POST request on Login using valid username and password.\n\n  ```js\n  const options = {\n    method: 'POST',\n    body: JSON.stringify(userDetails),\n  }\n  ```\n\n**Login API**\n\n#### URL: `https://apis.ccbp.in/login`\n\n#### Method: `POST`\n\n#### Description:\n\nReturns a response based on the credentials provided\n\n#### Sample request object:\n\n```json\n{\n  \"username\": \"rahul\",\n  \"password\": \"rahul@2021\"\n}\n```\n\n#### Sample Success Response\n\n```json\n{\n  \"jwt_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y\"\n}\n```\n\n#### Sample Failure Response\n\n```json\n{\n  \"status_code\": 404,\n  \"error_msg\": \"Username is not found\"\n}\n```\n\n**Top Rated Books API**\n\n#### URL: `https://apis.ccbp.in/book-hub/top-rated-books`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of 10 top rated books\n\n#### Sample Response\n\n```json\n{\n  \"books\": [\n    {\n      \"id\": \"561d0af9-3cec-426d-9721-35ed8d7e9c3c\",\n      \"author_name\": \"Chetan Bhagat\",\n      \"cover_pic\": \"https://assets.ccbp.in/frontend/react-js/half-girlfriend-book.png\",\n      \"title\": \"Half Girlfriend\"\n    },\n    {\n      \"id\": \"5f7fe73a-c4f2-4d58-b4ad-ec88426e26be\",\n      \"author_name\": \"Robert Kiyosaki\",\n      \"cover_pic\": \"https://assets.ccbp.in/frontend/react-js/rich-dad-poor-dad-book.png\",\n      \"title\": \"Rich Dad Poor Dad\"\n    },\n    ...\n  ],\n  \"total\": 10\n}\n```\n\n**Books API**\n\n#### URL: `https://apis.ccbp.in/book-hub/books?shelf={bookshelfName}\u0026search={searchText}`\n\n#### Example: `https://apis.ccbp.in/book-hub/books?shelf=Read\u0026search=Luke`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of books based on the query parameters\n\n#### Sample Response\n\n```json\n{\n  \"books\": [\n    {\n      \"id\": \"54402549-a4bd-4c99-a176-bd795d47173a\",\n      \"title\": \"One life one chance\",\n      \"read_status\": \"Read\",\n      \"rating\": 4.2,\n      \"author_name\": \"Luke Richmond\",\n      \"cover_pic\": \"https://assets.ccbp.in/frontend/react-js/one-life-one-chance-book.png\"\n    },\n    ...\n  ],\n  \"total\": 10\n}\n```\n\n**Book Details API**\n\n#### URL: `https://apis.ccbp.in/book-hub/books/{bookId}`\n\n#### Example: `https://apis.ccbp.in/book-hub/books/7850622e-1b70-4396-963d-e68d5a2577d7`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing book details\n\n#### Sample Response\n\n```json\n{\n  \"book_details\": {\n    \"id\": \"7850622e-1b70-4396-963d-e68d5a2577d7\",\n    \"author_name\": \"Ady Barkan\",\n    \"cover_pic\": \"https://assets.ccbp.in/frontend/react-js/eyes-to-the-wind-book.png\",\n    \"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.\",\n    \"rating\": 4.8,\n    \"read_status\": \"READ\",\n    \"title\": \"Eyes to the Wind\",\n    \"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.\"\n  }\n}\n```\n\n\u003c/details\u003e\n\n### User Credentials\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view user credentials\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n**You can use any one of the following credentials**\n\n```text\n  username: aakash\n  password: sky@007\n```\n\n```text\n  username: agastya\n  password: myth#789\n```\n\n```text\n  username: advika\n  password: world@5\n```\n\n```text\n  username: binita\n  password: modest*6\n```\n\n```text\n  username: chetan\n  password: vigor$life\n```\n\n```text\n  username: deepak\n  password: lightstar@1\n```\n\n```text\n  username: harshad\n  password: joy@85\n```\n\n```text\n  username: kapil\n  password: moon$008\n```\n\n```text\n username: rahul\n password: rahul@2021\n```\n\n```text\n  username: shravya\n  password: musical#stone\n```\n\n```text\n  username: saira\n  password: princess@9\n```\n\n\u003cbr/\u003e\n\u003c/details\u003e\n\n### Project Submission Instructions\n\n- For Mini Projects, you can submit the test cases at your own pace. But we suggest you to submit the code to know the percentage of completion through test cases and that score will be considered for your interviews.\n\n- Also it's important to publish your code frequently using `Step - 4` in the Instructions tab.\n\n\u003e ### _Things to Keep in Mind_\n\u003e\n\u003e - All components you implement should go in the `src/components` directory.\n\u003e - **Do not remove the pre-filled code**\n\u003e - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirankumar-matham96%2Fbookhub_react_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirankumar-matham96%2Fbookhub_react_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirankumar-matham96%2Fbookhub_react_app/lists"}