Web Application that allows you to add and remove books

Last update: Feb 26, 2022

Overview

BOOKSTORE - REACT

Web Application that allows you to add and remove books! This project was created with the purpose of consolidating the creator's knowledge of React.

Built With

JavaScript, HTML, CSS
React
Webpack

Live Demo

Check the Live Demo of this project!

Getting Started

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

Prerequisites

You need to be able to use Node Package Manager, or also called, the npm command. If you dont have it, install it with these commands in the CLI (for Linux):

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

Then, run this command in the CLI:

npm --version

If the previous command prints a single line with a version number on screen, npm was installed.

Install

First you need to clone the repository into the folder of your choice with this command:

git clone https://github.com/Yothu/bookstore-react.git

Then go inside the repository foler with this command:

cd bookstore-react

After you are inside, download the npm dependecies with this command:

npm install

Finally, show the project through the browser with this command:

npm start

Usage

You can add Books with is Title and Category in the form at the bottom, then press ADD BOOK. Once you press the button a new Book will be created, you can delete them by pressing the remove button at the bottom part of each book.

Author

👤 David Vergaray

GitHub: @Yothu
Twiter: @Daivhy
LinkedIn: David Vergaray

📝 License

This project is MIT licensed.

Show your support

Give a ⭐️ if you like this project!

A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Oct 14, 2022

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

Sep 28, 2021

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native 🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Oct 11, 2022

TV Show App is an application that allows to searh tv shows based on user input. Each tv show is displayed in a Bulma Card component and when clicked, heads you to the official tv show site

TV SHOW APP TV Show App is an application that allows to search tv shows based on user input. Each tv show is displayed in a Bulma* Card component and

Dec 19, 2021

A web application that allows users to book rockets and join selected space missions, Using the SpaceX API.

Space-Travelers-Hub A web application that allow users to book rockets and join selected space missions, Using the SpaceX API. This project was bootst

Dec 9, 2021

Web App to store a list of books (Title and Author) made as a single page app.

Awesome Books This project its an interactive list of books, you can add and remove items to the list. Built With HTML JS Getting Started In this proj

Nov 9, 2022

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Jun 5, 2022

Add multiplayer presence (live cursors/avatars) to your react application using yjs and hooks

y-presence Easy way to add presence (live cursors/avatars) to any react application using react hooks. Installation yarn add y-presence # or npm i y-p

Dec 29, 2022

Choosy is a mobile application that allows users to create photo polls that others can vote on and help declare which photo is the best.

Choosy - Create photo polls The freshest mobile application for your photo polls! Explore the docs » Table of Contents Introduction App concept Target

Sep 7, 2022

Comments

Add Styling
Description

This pull request is about styling the project.

Project Requirements

[x] Style the project so that it looks the same as this template.

References

For a more detailed description of the project's instructions check this page.

Usage

To know how to install and use this project check the README.md file!.
enhancement
opened by Yothu 1
Initialize with components
Description

This pull request is about creating the basic structure of the components in the Bookstore project, and to initialize Redux.

Project Requirements

[x] Initialise React app.

[x] Add React Redux.

[x] Use the "feature folder" approach.

[x] Use the ducks pattern for your Redux files.

[x] Add React Router.

[x] Display the list of books (empty at this point but it should be ready for the data) with the Remove button (no funcionality yet).

[x] Should have a form for adding a book (no functionality yet)

[x] Styling is not required at this point.

References

For a more detailed description of the project's instructions check this page.

Usage

To know how to install and use this project check the README.md file!.
enhancement
opened by Yothu 1
Connect to API using Redux
Description

This pull request is about connecting the project to the Bookstore API using Redux middlewares.

Project Requirements

[x] Refactor the redux code of the application using middleware to make async requests to the API.

[x] Refactor the add book and remove book features to persist the changes in the server.

References

For a more detailed description of the project's instructions check this page.

Usage

To know how to install and use this project check the README.md file!.
enhancement
opened by Yothu 0
Add create and remove book using redux
Description

This pull request is about configuring the Redux Store and creating actions and reducer for adding and removing books.

Project Requirements

[x] Configure the Redux Store and import the necessary methods from Redux into the configureStore.js file.

[x] Write the book's actions and reducer using the ducks pattern.

[x] Set the data inputs in the local React state in the React component responsible for adding new books.

[x] Use the redux-logger to check if your application is working correctly.

References

For a more detailed description of the project's instructions check this page.

Usage

To know how to install and use this project check the README.md file!.
enhancement
opened by Yothu 0