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

Last update: May 10, 2022

Project Name : BookStore

The Bookstore is a website similar to the "Awesome Books" website built in the previous module. I will create an MVP version of it that allows you to::

  • Display a list of books.
  • Add a book.
  • Remove a selected book.

You can find live project at https://amrendrakind.github.io/bookstore-react/

Built With

  • React JS with Redux
  • JSX
  • JavaScripts
  • GitFlow

Live Demo (Link for My BookStore Project)

Github

Take a look at the BookStore page [email protected]

Development set up

Clone Repository using

git clone [email protected]:amrendrakind/bookstore-react.git

OR using HTTPS

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

move into project directory

cd bookstore-react

Install Project dependancies using NPM

npm install

launch project locally with

npm start

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Author

👤 Amrendra K

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Microverse team for guidance

📝 License

This project is MIT licensed.

GitHub

https://github.com/amrendrakind/bookstore-react
You might also like...

Bookstore - a project built with React redux, implemented with Ducks files structure and, React Router to interact between the different tabs of the project

Bookstore - a project built with React redux, implemented with Ducks files structure and, React Router to interact between the different tabs of the project

Bookstore is a project built with React redux, implemented with Ducks files structure and, React Router to interact between the different tabs of the project. You can manage information of a book interact with an API.

Mar 23, 2022

Bookstore an app built with HTML, CSS, JavaScript, and React

Bookstore an app built with HTML, CSS, JavaScript, and React

The Bookstore is an app that displays a list of books and allows you to add and remove books from that list. Built with HTML, CSS, JavaScript, and React.

Mar 12, 2022

This app simulates a simple bookstore, and it was created using ReactJS and Redux.

This app simulates a simple bookstore, and it was created using ReactJS and Redux.

Bookstore About The Bookstore is a website similar to the "Awesome Books" website built in the previous Microverse module, with pure JavaScript (see l

Oct 3, 2021

Virtual bookstore created with React and Redux, with add and delete functionalities.

Virtual bookstore created with React and Redux, with add and delete functionalities.

Bookstore Virtual bookstore created with React and Redux. Preview Built With Node.js React Redux JavaScript Live Demo Heroku Live Demo Netlify Live De

Nov 19, 2021

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

A bot Similar to the reaction roles discord bot, but free. Written in JavaScript, and uses MongoDB.

An open source reaction roles bot to anyone who needs one in their server. It's easy to use, similar to the reaction roles bot and Totally Free. The bot also used MongoDB as a database!

May 8, 2022

An Arweave.js dapp wallet aggregator for react. (similar to useWallet but for Arweave.)

arjs-react An Arweave.js dapp wallet aggregator for react. (similar to useWallet but for Arweave.) Todos: Implement persistent sessions with "sesssion

Apr 11, 2022

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists, so you can meet new artists based on the previous selected one.

Apr 13, 2022

Trek and Travel - React based web application modelled on a similar design to AirBnB

Trek and Travel - React based web application modelled on a similar design to AirBnB

React based web application modelled on a similar design to AirBnB. Created with Context API, React Routing for snappy and responsive pages and links. Uses modern Material UI and CSS3 with HTML5 and fully hosted live on Firebase.

Mar 15, 2022
Comments
  • 1. Bookstore: Initialize Project with Components

    Initialize project with components

    • Initialise React app.
    • Add React Router and set two <Route>s and <Link>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.
    Reviewed by amrendrakind at 2022-05-06 13:00
  • 2. Bookstore: Add Reducers and Actions

    Bookstore: Add Reducers and Actions

    • Add React Redux (npm install react-redux).

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

    • 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.
      • Combine both reducers into a root reducer by using combineReducers function. (combineReducers updated with configureStore as createStore is deprecated as per eslint hint)
      • Use the root reducer to create your store. (store is created from configureStore)
    Reviewed by amrendrakind at 2022-05-09 18:28
  • 3. Bookstore: Use Redux in React Components.

    Use Redux in React Components

    • 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 Providerand 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 useSelectorto 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).
      • 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).
    Reviewed by amrendrakind at 2022-05-11 01:36
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
The Bookstore is a website similar to the

Bookstore The 'Bookstore' is a website similar to the "Awesome Books" website already built with JavaScript. It allows you to: Display a list of books

May 4, 2022
This project will lay foundations for your Bookstore website.
This project will lay foundations for your Bookstore website.

This project will lay foundations for your Bookstore website. I will create a React and Redux app. I will structure my files using the "feature folder" approach. I will also set up routing using React Router.

Mar 8, 2022
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

Feb 27, 2022
Book Store App - a bookstore website published with react and redux
Book Store App - a bookstore website published with react and redux

Book Store App This is a bookstore website published with react and redux. It has display list of books, add books and also remove books functionaliti

Apr 9, 2022
This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Aug 9, 2021
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.

Bookstore Project In this project, I set up my Bookstore project. It is about making a Bookstore with 2 section BOOKS and CATEGORIES (styles and funct

Aug 28, 2021
Bookstore app, store your favorites books. Built with JavaScript, React, SASS and framer.
Bookstore app, store your favorites books. Built with JavaScript, React, SASS and framer.

Bookstore. Bookstore application built with REACT, JAVASCRIPT, and SASS. It lets you add and remove books. I also used motion library too create compl

May 4, 2022
Bookstore is a simple online book store. It's built with React, Redux and Bootstrap
Bookstore is a simple online book store. It's built with React, Redux and Bootstrap

Bookstore Bookstore is a simple online book store. It's built with React, Redux and Bootstrap. It allows you to: Display a list of books. Add a book.

Dec 5, 2021
Bookstore app - built using React, Redux, and Styled Components
Bookstore app - built using React, Redux, and Styled Components

Bookstore is an app that allows you to display a list of added books, add new book and remove a book. It is built using React, Redux, and Styled Components

Mar 29, 2022