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

Overview

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.

You might also like...
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.

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

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.

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.

"The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book

Bookstore "The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book Built

Bookstore is a react web app built to show collections of books

Bookstore is a react web app built to show collections of books, and give users access to add new books or remove existing book

Bookstore CMS - Built with React JS, Redux and CSS

This is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with React JS, Redux and CSS.

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!

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

Comments
  • Bookstore: Initialize Project with Components

    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.
    opened by amrendrakind 1
  • Bookstore: Connect to API

    Bookstore: Connect to API

    Connect to API

    • Read the Bookstore API documentation to learn how to use the API.
    • Add redux-thunk to your project.
    • Use fetch or axios 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.
    opened by amrendrakind 0
  • Bookstore: Use Redux in React Components.

    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).
    opened by amrendrakind 0
  • Bookstore: Add Reducers and Actions

    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)
    opened by amrendrakind 0
Owner
Amrendra K
Full-Stack Developer, learning with Microverse. I can work with JS | React JS | Node JS | Express JS | Mongo DB. Open to new opportunities.
Amrendra K
The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript

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.

Hamza Ellaouzi 8 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

Mateo Villagomez 5 May 4, 2022
The Bookstore is a website built with React and Redux

This project is a React and Redux App. A book library which allows a user to add, remove and update his favorites books.

Williams Colmenares 6 Aug 27, 2022
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.

shadabwahidullah 10 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

Melanie Arellano 6 Jun 7, 2022
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

Michael_Tamirie 4 Apr 9, 2022
Bookstore website create the React & Redux part of the app

Bookstore website create the React & Redux part of the app. It was also set up routing using React Router.

Pedro Marques 5 Aug 13, 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

Baraka Mukelenga 4 Aug 9, 2021
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

Arthur Guzman 3 Aug 28, 2021
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

Gabriel Rendon 5 May 4, 2022