"BookStore" is a web app for adding books. It is a Single Page App (SPA) that allows users to add and remove a book from the library

Related tags

React BookStore
Overview

BookStore | M3Wx

"BookStore" is a web app for adding and removing books from a library storage. It is a Single Page App (SPA) that allows users to add and remove a book

screenshot

Our goal here is to Build a single page web application for book weebs using the React library

Live Demo

Click here to view live demo

Features implemented so far are:

  • Project Setup with React Installations

Built With

  • React (A free and open-source front-end JavaScript library for building user interfaces based on UI components)
  • React Testing Library
  • React Router v6
  • Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).
  • ESlint (A mighty, modern linter that helps you avoid errors and enforce conventions in JavaScript codes)

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

Prerequisites

The basic requirements for building the executable are:

  • A working browser application (Google chrome, Mozilla Fire fox, Microsoft edge ...)
  • VSCode or any other equivalent code editor
  • Node Package Manager (For installing packages like Lighthous, webhint & stylelint used for checking for debugging bad codes before deployment)

Getting Started

Cloning the project

git clone  https://github.com/harlexkhal/BookStore <Your-Build-Directory>

Getting packages and dependencies

To get all package modules required to build the project run:

npm install

every package module required to build the project is listed in the package.json file. this is used as a reference to get all dependencies.

Building

To build the project run:

npm run build

after you run this sucessfully you'd locate the build from in the build folder located from the parent directory of the project.

Running

To run the program on a browser through a server run this command in your cli

npm start

This should open the page in your localhost on port 3000. then you'd be able to view the built page generated using webpack.

License

All source code files are licensed under the permissive zlib license (http://opensource.org/licenses/Zlib) unless marked differently in a particular folder/file.

Author

You might also like...

Interactive web app where you can Store ,Add and Remove books to organize the books that you've read or the ones willing to read

bookStore Interactive web app where you can Store ,Add and Remove books to organize the books that you've read or the ones willing to read Built With

Jul 20, 2022

Web Application that allows you to add and remove books

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.

Feb 26, 2022

A website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing books.

A website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing books.

Bookstore "Bookstore" is a website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing

Dec 19, 2022

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

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

Oct 1, 2022

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

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

This application allows you to create a list to keep tracks of the books you are reading and check the progress for each book.

This application allows you to create a list to keep tracks of the books you are reading and check the progress for each book.

Bookstore This is an application built to track the books you are reading and the progress you have made for each book! Additional description about t

Feb 27, 2022

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 (see live version). My goal

Oct 3, 2021
Comments
  • Bookstore: Use Redux in React components.

    Bookstore: Use Redux in React components.

    • [x] Make sure that states are immutable in reducers!

    • Import Redux Provider and store it in the main component of React app.

    • Connect the app to the Redux store.

    • Make sure that list of books displays books from Redux store.

      • Use useSelector to consume the state.
    • [x] In 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
      • Once new book object is ready to be submitted to Redux store, dispatch a corresponding action.
    • [x] In React component responsible for removing books, add a functionality for "Remove" button click:

      • Import Redux useDispatch.
      • Dispatch a corresponding action.
    • [x] In React component responsible for categories, add functionality for "Check status" button click:

      • Import Redux useDispatch.
      • Dispatch a corresponding action.
    • [x] Link to deployment 👉 here

    opened by harlexkhal 1
  • Bookstore: add reducers and actions

    Bookstore: add reducers and actions

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

    • [x] Define action types for adding and removing a book.

    • [x] Set the initial state to be an empty array of books.

    • [x] Export Action Creators for your actions.

    • [x] Write your reducer and export it as default

    • [x] Define state changes for the actions that you created.

    • [x] 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.

    • [x] Define an action type for displaying "under construction" message.

    • [x] Set the initial state to be an empty array of categories.

    • [x] Export Action Creators for your actions.

    • [x] Write your reducer and export it as default

    • [x] For the check status action return a string "Under construction".

    • [x] In case of unknown action - return the current state.

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

    • [x] Importing the necessary methods from Redux.

    • [x] Combine both reducers into a root reducer by using combineReducers function.

    • [x] Use the root reducer to create your store.

    opened by harlexkhal 1
  • Bookstore: connect to API

    Bookstore: connect to API

    • Read the Bookstore API documentation to learn how to use the API.
    • Add redux-thunk to the project.
    • Use fetch for making API calls.
    • Fetch book list from Bookstore API on Books page load.
      • Add an Action Creator, that returns a function.
      • Fetch the list of books.
      • Dispatch another action (add an action type) that will pass the API response to the reducer and update the state.
    • Refactor 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 update the state accordingly.
    • Add book and remove book should work in the same way after the refactor.
    • Launched to GitHub pages 👉 here
    opened by harlexkhal 0
  • Bookstore: initialize project with components

    Bookstore: initialize project with components

    • [x] Initialise React app.
    • [x] The building blocks of your app should be set as re-usable components. Create a directory for your components.
    • [x] Add React Router and set two <Route>s and <Link>s for the app's navigation: 1. 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 functionality yet). - Should have a form for adding a book (no functionality yet) - Create a separate component for form 2. Categories - Should display a button "Check status" only.
    • [x] Styling is not required at this point.
    opened by harlexkhal 0
Owner
Alexander Oguzie-Ibeh
Software Engineer & Game programmer, I have a strong niche for good code architectural design and optimization. C++,C#, Java, JS, PHP. Open to new opportunities
Alexander Oguzie-Ibeh
The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live ?? Getting Started Open dev branch Open VSCod

Tadesse Alemayehu 5 May 3, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

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

Anuar Shaidenov 6 Jun 12, 2022
Bookstore CMS React Front-End to display a list of books, categorize it, add and remove books and update your reading progress

Bookstore REACT app to manage your books Build an app to display a list of books, categorize it, add and remove books and update your reading progress

Eapen Zacharias 3 Aug 19, 2022
Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote.

Math Magicians Math Magicians is the first React Project I'm building. The main objective of this is to understand React features with a project-based

Andrés Felipe Arroyave Naranjo 7 Feb 26, 2022
A Single Page App (SPA) that allows users to: make simple calculations and read a random math-related quote

Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: make simple calculations and read a random math-related quote.

Sahar Abdel Samad 13 May 31, 2022
Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations. Read a random math-related quote.

Math Magicians Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations.

null 7 Mar 23, 2022
"Math magician is a website for all fans of mathematics. It is a Single Page Application(SPA) that allows users to make simple math calculations and read some math related quotes."

Math Magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations

Michael_Tamirie 3 Mar 29, 2022
Book Store is a website that allows you to add, remove and view books.

Book Store Book Store is a website that allows you to add, remove and view books. Built With ReactJS Redux React Router Getting Started with Create Re

Ezekiel Utshudi Eteta 9 Jun 23, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023