Create a component called CircleProgress for displaying a circle progress image. It receives ratio, as props.

Create a component called Booklist that composes Book components for displaying the list of books: should display the list of books (empty at this point but it should be ready for the data) with the Remove button (no functionality yet).

Create a component called Book that composes a CircleProgress component for displaying a single book (receive category, title, author, chapters, currentChapter,).

Connect the Bookstore app to the Redux store:

• Import Redux Provider and your store in the main component of your React app.
• Connect Bookstore app to the Redux store.
• The default state in books reducer is an array with a few books.
• Display them in the React components. Make sure that the list of books displays books from Redux store.

Style the progress stats user interface:

• Style the progress stats container.
• Style the progress separator.
• Arrange elements inside container.

Style the progress stats user interface:

• Style the progress ratio.
• Style the completed text.

Style the categories page UI:

• Style the categories page container.
• Style the check status button.
• Style the under construction text.

Style the book card user interface:

• Style the book card container.
• Arrange the internal components.

In the Booklist component, add a functionality for "Remove" button click:

• Import Redux useDispatch.
• Once your book object is ready to be removed from Redux store, dispatch the corresponding action.
• Keep state immutable in the reducer.

Style the action bar user interface:

• Style the action buttons.
• Style the button separators.
• Style the container.

Create a separate component for this form (with inputs for a title and an author [IMPORTANT in the design you can see an input for a category - please replace it with an author.]).

Style the book list user interface:

• Style the book list container.
• Arrange components inside the container.

Create a component called Header that composes the Navbar component for displaying the page's header.

Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files. Your files/folder structure could look like this:

Create a component called BooksPage that composes the BookList and AddBookForm components for displaying the Books page.

Style the progress chapter user interface:

• Style the current chapter title.
• Style the current chapter details.
• Style the update progress button.

In your CategoriesPage component, add a functionality for: "Check status" button click:

• Import Redux useDispatch.
• Dispatch the corresponding action.
• Keep state immutable in the reducer.

Style the page header user interface:

• Style the header container.
• Style the Bookstore text logo.
• Style the Navbar
• Style the user icon.

Configure the Redux Store (/src/redux/configureStore.js):

• Importing the necessary methods from Redux Toolkit.
• Combine both reducers into a root reducer by using configureStore function.

Write your book's actions and reducer (in /src/redux/books/books.js) using the ducks pattern.

• Define action types for adding and removing a book.
• Set the initial state to be an empty array of books.
• Export Action Creators for your actions.
• Write your reducer and export it as default:
  • Define state changes for the actions that you created.
  • In case of unknown action - return the current state.

Add React Router and set two <Route>s and <Link>s for the app's navigation:

• Books - the default view
• Categories

Instruct Redux to use thunk:

• Add redux-thunk as a dependency.
• import redux-thunk and insert its middleware into Redux.

Style the book page user interface:

• Style the book page container.
• Style the separator.
• Arrange the components inside.

Style the book information user interface:

• Style the category.
• Style the title.
• Style the author.

In the AddBookForm component, add functionality for "Add new" button click:

• Import Redux useDispatch.
• Set title and author in the local React state (NOTE: categories and comments are NOT part of this step).
• Take the inputs from the state then generate a unique id and add them to an object.
• Once your new book object is ready to be submitted to Redux store, dispatch the corresponding action.
• Keep state immutable in the reducer.

Refactor add book and remove book features to persist changes in the server:

• Change existing Action Creators, so they return functions.
• Make changes by using API.
• Dispatch an action (action type that existed before refactor) that will update the state accordingly.

NOTE: Use fetch or axios with createAsyncThunk for making API calls.

Style the add new book form user interface:

• Style the form title.
• Style the form inputs.
• Style the form button.
• Style the form.
• Style the container.
• Arrange elements inside container.

Style the progress bar UI:

• Style the progress bar component.
• Style the progress bar container

Write your categories actions and reducer (in /src/redux/categories/categories.js) using the ducks pattern:

• Define an action type for checking the status.
• Set the initial state to be an empty array of categories.
• Export Action Creators for your actions.
• Write your reducer and export it as default.
  • For the check status action return a string "Under construction".
  • In case of unknown action - return the current state.

Create a component named Navbar for displaying the navbar for the BookStore application.

Create a component called CategoriesPage for display a button "Check status" only.

• Use Gitflow.
• Create React App.
• Setup linters.
• Create a directory for components.

Style the App user interface:

• Style the app container.
• Arrange the inside components.

Fetch book list from Bookstore API on Books page load:

• Add an Action Creator, that returns a function.
• Fetch list of books.
• Dispatch another action (add an action type) that will pass API response to reducer and updates the state.

NOTE: Use fetch or axios with createAsyncThunk for making API calls.