A website that allows users to add/remove books from a list

Last update: Jul 28, 2022

book-store-react

This is a website that allows users to add/remove books from a list. This project is build using JavaScript objects and arrays.

Built With

  • HTML
  • CSS
  • Javascript
  • React

Getting Started

To get a local copy up and running follow these simple example steps.

  • Clone repository in your local machine
  • cd Portfolio
  • open index.html in your browser.
  • You can use live server.

Live Demo

Books Live

Author

ūüϧ Basir Mohammadi

ūü§Ě Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the https://github.com/Basir-Mohammadi/Awesome_Books/issues

Show your support

Give a ‚≠źÔłŹ to if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

GitHub

https://github.com/Basir-Mohammadi/book-store-react
Comments
  • 1. Styleing

    Project requirements

    • You will find all the details of the Bookstore design in Zeplin. Login to Zeplin (hint: you will find the credentials in the [sneak peek]- -(https://github.com/microverseinc/curriculum-react-redux/blob/main/bookstore/sneak_peek_v2_0.md) of the project).
    • Open the project Bookstore CMS.
    • Use the information detailed in Zeplin to style the website.
    • Your final design should match Zeplin's design.
    Reviewed by Basir-Mohammadi at 2022-07-23 22:34
  • 2. connect to api

    Proposed changes

    The aim of this pull request is to connect with API.

    The following setups were implemented

    • Read the Bookstore API documentation to learn how to use the API.
    • Use fetch or axios with createAsyncThunk for making API calls.
    • 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.
    • Refactor your add book and remove book features to persist your changes in the server.
    • Change your existing Action Creators, so they return functions.
    • Make changes by using API.
    • Dispatch an action (action type that existed before refactor) that will updates the state accordingly.
    • Add book and remove book should work in the same way after the refactor.
    • No styling is required.

    Type of change

    • New feature

    Checklist

    Reviewed by Basir-Mohammadi at 2022-07-22 20:27
  • 3. Connect react and redux

    Proposed changes

    The aim of this pull request is to add react and redux to the project

    The following setups were implemented

    • First of all - make sure that you keep state immutable in reducers!
    • Secondly, change the default state in your books reducer from an empty array to an array with a few books. One of the goals is to display them in your React components.
    • Import Redux Provider and your store in the main component of your React app.
    • Connect your app to the Redux store.
    • Make sure that list of books displays books from Redux store.
    • Use useSelector to consume the state.
    • In your React component responsible for adding new books, add functionality for "Add new" button click:
    • Import Redux useDispatch.
    • Set the data inputs in the local React state (set title and author - NOTE: categories and comments are NOT part of this step).
    • Takes the inputs from the state and generate a unique id and add them to an object.
    • Once your new book object is ready to be submitted to Redux store, dispatch a corresponding action (import Action Creator that you created before and use it here).
    • In your React component responsible for removing books, add a functionality for "Remove" button click:
    • Import Redux useDispatch.
    • Dispatch a corresponding action (import Action Creator that you created before and use it here).
    • In your React component responsible for categories, add a functionality for "Check status" button click:
    • Import Redux useDispatch.
    • Dispatch a corresponding action (import Action Creator that you created before and use it here).

    Type of change

    • New feature

    Checklist

    Reviewed by Basir-Mohammadi at 2022-07-21 10:52
  • 4. Add reducer and action

    Proposed changes

    The aim of this pull request is to add reducer and actions to the project

    The following setups were implemented

    • Add Redux Toolkit(npm install react-redux @reduxjs/toolkit).

    • 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:

    ... /src |---/components |---/redux |--- /books | books.js |--- /categories | categories.js | configureStore.js | index.js

    • 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.

    • 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.

    • 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.

    Type of change

    • New feature

    Checklist

    Reviewed by Basir-Mohammadi at 2022-07-19 18:17
  • 5. Create react app

    Proposed changes

    The aim of this pull request is to setup a book store react project.

    The following setups were implemented Initialise React app:

    • The building blocks of your app should be set as re-usable components. Create a directory for your components.
    • Add React Router and set two s and s for the app's navigation: Books - the default view:
    • Should display the list of books (empty at this point but it should be ready for the data) with the Remove button (no funcionality yet).
    • Create a component called Book for displaying a single book (receive a title and an author as prop) and reuse it in a - - -component that displays a list of books.
    • Should have a form for adding a book (no functionality yet).
    • 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.]). Categories
    • Should display a button "Check status" only.
    • Styling is not required at this point.

    Type of change

    • New feature

    Checklist

    Reviewed by Basir-Mohammadi at 2022-07-15 11:10
A website that allows uses to: Display a list of books. Add a book. Remove a selected book. Built with React and Redux.
A website that allows uses to: Display a list of books. Add a book. Remove a selected book. Built with React and Redux.

Bookstore The Bookstore is a website that allows uses to: Display a list of books. Add a book. Remove a selected book. Built With Built with React Thi

Jul 11, 2022
A book store site built with React and Redux that allows users to add/remove books
A book store site built with React and Redux that allows users to add/remove books

Book Store In this project, I built a basic website that allows users to add/remove books from a book list using React and Redux. Built With React.js

Mar 23, 2022
A bookstore MVP that allows users to add, delete, and list available books
A bookstore MVP that allows users to add, delete, and list available books

Bookstore It is a bookstore MVP that allows users to add, delete, and list available books. Features The website displays a bookstore user interface u

Mar 23, 2022
Book store is a simple app built with React and Redux that allows you to view, add, and remove books
 Book store is a simple app built with React and Redux that allows you to view, add, and remove books

Book Store Book store is a simple app built with React and Redux that allows you to view, add, and remove books Explore the docs ???? · Live Demo Comi

Mar 24, 2022
Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features.

Advance React TODOLIST Application Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features. Clone this project

Jul 19, 2022
ūüďč Task manager with react js you can add title add description , editūüďĚ, complete‚úĒ, remove‚ĚĆ, localstorage, dark mode ūüĆú

?? Task manager with react js you can add title add description , edit??, complete‚úĒ, remove‚ĚĆ, localstorage, dark mode ??

Jul 26, 2022
A React-Redux application connected to an existing API to create and remove books in a remote server
A React-Redux application connected to an existing API to create and remove books in a remote server

Bookstore The Bookstore is a React-Redux application connected to an existing API to create and remove books in a remote server. Users can Display the

May 31, 2022
This is a React application for managing books you want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.
This is a React application for managing books you  want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.

This is a React application for managing books you want to read. It tracks your progress and makes reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux

Oct 17, 2021
The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript
The Bookstore is a website similar to the

The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript. It allows you to: Display a list of books. Add a book. Remove a selected book. By building this application, I learned how to use React and Redux.

Oct 29, 2021
Bookstore - a website similar to the Awesome Books website built in the previous module

The Bookstore is a website similar to the Awesome Books website built in the previous module. This MVP version allows you to: Display a list of books. Add a book. Remove a selected book. It is built with React, Redux, Javascript and CSS.

Apr 15, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module.

The Bookstore is a website similar to the "Awesome Books" website built in the previous module.

Jun 3, 2022
Covid-tracker: a website that allows users to have access to the latest covid data in Brazil
Covid-tracker: a website that allows users to have access to the latest covid data in Brazil

Covid-tracker Covid-tracker is a website that allows users to have access to the

Dec 24, 2021
Bookstore CMS project based on React and Redux to display a list of books

This is a Bookstore CMS project based on React and Redux to display a list of books, categorize it, add and remove books and update your reading progress. It basically stores the added books and fetch the stored list of books using remote API.

Jul 29, 2022
This website is a React and Redux app. It is simply an adding and removing books store.
This website is a React and Redux app. It is simply an adding and removing books store.

This website is a React and Redux app. It is simply an adding and removing books store. Thank you to the ZEPLIN website for the UI provided. This application works with an existing API.

Oct 25, 2021
Bookstore - A simple website to store all your favorite books. Created with React.js

Bookstore - A simple website to store all your favorite books. Created with React.js

Jun 7, 2022
This web tool allows you to add your daily commodities with their price and titile
This web tool allows you to add your daily commodities with their price and titile

Xpenser It's a web utility which allows you to add your daily expenses, commodity along with their price, and keep track of them. It also provides you

May 19, 2022
A react app and team project that allows users in mental health crisis to send alerts to mental health professionals

A react app and team project that allows users in mental health crisis to send alerts to mental health professionals

Nov 30, 2021
Social Media mobile app that allows users to connect via QR scanning. Built-in React Ionic together with @Mic01.

Tap-n-Chat Mobile Messaging app that allows the user to login/signup and message other users. The app is able to generate and scan QR codes to add use

Dec 26, 2021
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Apr 14, 2022