Submission for Assignment 2

[kbuiblue]

Live demo: https://bookstore-assignment-2.vercel.app/

Main features:

• Pagination
• Theme toggle
• useContext, useState, useEffect
• localStorage
• CSS Modules

[ngolapnguyen]

Nice work 👍

Requirements

• [x] Render book list with pagination
• [x] Create book
• [x] Delete book
• [x] Search book by title
• [x] Standard use of React component & state
• [x] Light/dark mode

Final result: ✅ passed 70% of requirements

Feedbacks

1. We can use some basic validation for the add book modal. Right now users can add a book with empty title, author and category.

2. It's generally better to keep components & their respective css modules in the same place. Something like:

components/
  Table/
    Table.js
    Table.module.css

It'll be more manage-able when your project grows.

3. The way you are handling dark-theme is quite expensive & effort-consuming. I'm not very familar with CSS module, but I suppose we can use a top-level theme class to manipulate the styles better? 🤔 Something like:

.button {
  color: red;
}

:global(.theme-provider.dark) button {
  color: white;
}

... which you should be able to do in ThemeProvider.

4. Folder structure could be better.

For example, right now Table and DeleteBookButton are sitting at the same level, even though Table renders DeleteBookButton and DeleteBookButton is not being used anywhere else. You can structure them like this:

components/
  Table/
    Table.js
    DeleteBookButton.js

OR

components/
  Table/
    Table.js
    components/
      DeleteBookButton.js

Having a good component structure will help you visualize the hierarchy of the components better, which in turns improves readability.

5. Naming could be better. E.g:

• deleteBookModal -> openDeleteBookModal
• addBookModal -> openAddBookModal

Naming should be precise & accurate to what it represents.

6. Component logic & structure could be better. It's good practice to keep components simple & efficient in its responsibility. For example, the Modal component right now is too busy. It should be broken down into smaller modal components.