Scribd
Upload
7 views4 pages

Requirements

Uploaded by

omar.sabil.official01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views4 pages

Requirements

Uploaded by

omar.sabil.official01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

B9 A8 Requirements

Main Requirements

1. Follow the Figma design: Your website design should be similar to Figma.
You can change the color but choose a color palette that will be pleasing
to the eye. You can change images but use relevant images which you
can collect from Google and other resources.

2. Navbar: A navbar with a website logo or name on the left side & 3 menu
items in the middle: Home, Listed Books, and Pages to Read and two
buttons named “Sign In” and “Sign Up”. These buttons will not contain any
functionality. Make sure to apply the Active route on the navbar and the
navbar will be displayed on all pages.

3. Banner: A banner section having: a title and a button Named “View The
List” below the title on the left side. When you click the button it takes
you to the Listed Books page. On the right side add an image which must
be related to the website.

4. JSON: Create a JSON File with a minimum of 6 data. Each data will contain-
a. bookId
b. bookName
c. author
d. image
❌
e. review ( don’t use lorem ipsum text)
f. totalPages
g. rating
h. category
i. tags: (in an array) => example: ["Suspense", "Psychological"]
j. publisher
k. yearOfPublishing

5. Books Section: A section heading is on the top of this part.


Books Card: This section contains at least 6 cards of books, which are
arranged according to Figma. 3 cards in each row.
Each card will contain-
● image
● tags
● bookName
● author
● category
● rating

💡You can create your content but the layout and design should be similar to
Figma.

6. Clicking on a book's card will redirect to the Book Details page where you
can see the details of the Books.

7. Book Details Page: This will be a dynamic route. The Book details page will
have the following:
a. image at the left side of the page
b. bookName
c. author
d. category
e. review
f. tags
g. totalPages
h. publisher
i. yearOfPublishing
j. rating
k. 2 button named - Read, Wishlist

💡You can create your content but the layout and design should be similar to
Figma.

8. Clicking "Read" or "Wishlist" for the first time will show a toast/sweet alert
with a meaningful message. The clicked item will be added to the local
storage.
9. If you click the same button again for the same book, you'll see another
toast/sweet alert with a message letting you know it's already been
added and this Book will not be added to the list.

10. Once you select a book in the “Read” button you can not select it using
the “Wishlist” button for further. If you try it will show a toast/sweet alert.

11. Listed Books Page:


a. Show a header on the top of this page with a title.
b. Add a drop-down list to sort by and it will contain Rating, Number
of pages, and Published year.
c. The Listed Books Page will show all the read and wishlist books you
have added to the local storage. Here you need to get the added
books list data from the local storage and show them.
d. Here you need to implement Tab for showing the read books list and
wishlist books list separately. By default, it will show the read
books and when you click on the wishlist tab it will show the books
you have added to the wishlist.

12. List books card: For each item card you have the following information-
i. image
ii. bookName
iii. author
iv. category
v. tags
vi. totalPages
vii. publisher
viii. yearOfPublishing
ix. rating
x. A button named View Details

● When you click on the “View Details” button it will redirect


you to the book details page.

💡You can create your content but the layout and design should be similar to
Figma.
13. Pages to Read Page: Create a Pages to Read page where you will have to
implement a Custom Shape Bar Chart. You cannot use a line chart or any
other charts. You will only have to implement a Custom Shape Bar Chart.
The bar chart will be on your read-list book's name against read-listed
books totalPages. For example - if you have added 3 books to the read
list, you will show each book's total pages corresponding to the book
name.. Follow the Figma.

14. 404 Page: Make a 404 route/not found page.

Challenges Requirements:

1. Add 2 more routes to your website. Add relevant and meaningful content
for those routes.

2. You will need to make the Sort By drop-down functional. In the


drop-down, you can select a specific field by which you want to sort your
book list. Sorting will be in descending order.

3. Make at least 10 GitHub commits. Add a meaningful readme.md file with


the name of your website and a live site URL. Include a minimum of five
bullet points features and characteristics of your website.

4. The website should be responsive on desktop, and mobile devices. For


tablet view responsiveness is optional. The responsive layout is up to you
but should be readable, organized and eye-catching.

You need to Submit:

● Your Github repository link


● Live site link

You might also like