The Digital Library is a webapp that allows the user to: Display a list of books

Overview

Digital Library

The Digital Library is a webapp that allows the user to: Display a list of books. Add a new book. Remove a selected book.It has been developed using React Redux and tested using Jest.

Built With

  • HTML
  • CSS
  • JavaScrpt
  • REACT

Live Demo in progress , web app to be deployed...()

Live Demo Link

Setup

  • To clone the repository run https://github.com/NATASHA-ct/bookstore.git in your terminal
  • run cd Leaderboard
  • run npm install
  • run npm run build
  • open the app directory using this > cd math-magician
  • run npm start to view wbsite
  • npm test Launches the test runner in the interactive watch

Prerequisites

-Github flow knowledge. -Basic CSS,HTML,JavaScript,React. -Installation of files.

Install

  • Set up Github Actions
  • Set up linter > Lighthouse . ,Stylelint ,
  • Added Eslint
  • REACT and redux installations
  • npm install to add dependencies after cloning
  • npm start to view website in browser

Authors

👤 NATASHA TATENDA CHIROMBE

🤝 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!

📝 License

This project is MIT licensed.

You might also like...
 💬 lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence
💬 lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence

cursor-chat 💬 lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence As a warning, this library is for experimental purposes

Breed is a landing page for a Digital Agency in React and Tailwind
Breed is a landing page for a Digital Agency in React and Tailwind

Breed is a digital agency and here's a landing page for breed. Tech used: React and Tailwind CSS. Getting Started with Create React App This project w

Thesis project for Digital Asset ownership and transfer using NFT and hyperledger
Thesis project for Digital Asset ownership and transfer using NFT and hyperledger

NFT as a proof of Digital Ownership-reward system integrated to a Secure Distributed Computing system Managed by Blockchain *** Se video below for a q

Stock metrics an app that allows you to display active stocks of companies built with react and redux
Stock metrics an app that allows you to display active stocks of companies built with react and redux

Stock metrics is an app that allows you to display active stocks of companies ,and you can see I ncome statement of past 5years by selecting a selected company.It is built with react and redux .

Application built in react js to display player list

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Webapp of Mattermost server: https://github.com/mattermost/mattermost-server

Mattermost Mattermost is an open source, self-hosted Slack-alternative from https://mattermost.org. It's written in Golang and React and runs as a sin

A cloned photo search webapp of Unsplash
A cloned photo search webapp of Unsplash

React Unsplash React Unsplash is photo search webapp made in React which uses Unsplash JSON APIs for photo search. A clone app of https://unsplash.com

plastplace webapp frontend written in react.js framework

Plastplace Web App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: yarn start Runs the a

Wink - Full-stack social webapp written in TypeScript, React & Express
Wink - Full-stack social webapp written in TypeScript, React & Express

Wink Full stack social web app made with TypeScript, React & Express

Comments
  • Adding redux in react components

    Adding redux in react components

    • [ ] Made sure the state remained immutable in reducers!

    • [ ] Changed the default state in the books reducer from an empty array to an array with a few books. Displayed them in React components.

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

    • [ ] Connected your app to the Redux store.

    • [ ] Made sure that list of books displays books from the Redux store.

    • [ ] Used useSelector to consume the state.

    • [ ] ✅ Added functionality for "Add new" button click: in React component responsible for adding new books(Form.js)

    • [ ] Imported Redux useDispatch.

    • [ ] Set the data inputs in the local React state (set title and author )

    • [ ] Dispatched a corresponding action (import Action Creator I created before ).

    • [ ] ✅ Added functionality for the "Remove" button click: React component responsible for removing books

    • [ ] Import Redux useDispatch.

    • [ ] Dispatched a corresponding action (import Action Creator I created before ).

    • [ ] ✅ Added functionality for the "Remove" button click: React component responsible for categories,

    • [ ] Import Redux useDispatch.

    • [ ] Dispatched a corresponding action (import Action Creator that I created before ).

    opened by NATASHA-ct 0
  • Bookstore: add reducers and actions ✔️

    Bookstore: add reducers and actions ✔️

    • [ ] Added Redux Toolkit(npm install react-redux @reduxjs/toolkit).

    • [ ] Structured my application files using a "feature folder" approach and used the [ducks pattern] for my Redux files.

    • [ ] Wrote my book's actions and reducer (in /src/redux/books/books.js) using the [ducks pattern].

      • Defined action types for adding and removing a book.
      • Set the initial state to be an empty array of books.
      • Exported Action Creators for actions.
      • Wrote reducer and exported it as default.
      • Defined state changes for the actions that I created.
    • [ ] Wrote my categories actions and reducer (in /src/redux/categories/categories.js) using the [ducks pattern]

      • Defined action types for checking the status.
      • Set the initial state to be an empty array of categories..
      • Exported Action Creators for actions.
      • Wrote reducer and exported it as default.
      • Defined state changes for the actions that I created.
      • For the check status action returned a string "Under construction".
    • [ ] Configured the Redux Store (/src/redux/configureStore.js):

    • [ ] Imported the necessary methods from Redux Toolkit.

    • [ ] Combined both reducers into a root reducer by using the configureStore function.

    opened by NATASHA-ct 0
  • Project setup

    Project setup

    • [ ] Initialised React app.

    • [ ] Created re-usable components.

    • [ ] Added React Router and set two s and s for the app's navigation:

    • [ ] Created a component called Book for displaying a single book (receive a title and an author as a prop) and reuse it in a component that displays a list of books.

    • [ ] Added form for adding a book (no functionality yet).

    • [ ] Created a separate component for this form (with inputs for a title and an author) .

    opened by NATASHA-ct 0
  • Project setup

    Project setup

    • [ ] Initialised React app.

    • [ ] Created re-usable components.

    • [ ] Added React Router and set two s and s for the app's navigation:

    • [ ] Created a component called Book for displaying a single book (receive a title and an author as a prop) and reuse it in a component that displays a list of books.

    • [ ] Added form for adding a book (no functionality yet).

    • [ ] Created a separate component for this form (with inputs for a title and an author) .

    opened by NATASHA-ct 0
Owner
Natasha Tatenda Chirombe
Full-stack Developer with a drive to learn and positively impact the tech industry.(HTML , CSS , JavaScript, Bootstrap. Open to new opportunities.
Natasha  Tatenda Chirombe
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.

Ali Aqa Atayee 6 Sep 8, 2022
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

Gabriela Sánchez Espirilla 2 Mar 23, 2022
A website that allows users to add/remove books from a list

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

Basir Mohammadi 11 Aug 25, 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 reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux

Henry Kc 10 Oct 17, 2021
"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

Rwubakwanayo Olivier 2 Jun 12, 2022
A TODO-List app allows user to perform various actions like creating a task, updating a task, and removing a task.

A TODO-List app allows user to perform various actions like creating a task, updating a task, and removing a task. User generated data get stored in a browser storage using localstorage API for later use.

Steven Ntakirutimana 5 Jul 16, 2022
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

Eze Promise 3 Aug 8, 2022
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

Kyrillos Hany 9 Mar 23, 2022
React application that scans, decodes and validates EU Digital COVID-19 certificates, all in the browser.

EU Digital Covid Certificate Decoder This project can scan, decode and validate the EU Digital Covid Certificates used in European Union countries as

Miguel Grinberg 21 Jul 6, 2022
Neoo: a Web3 Blockchain application that aims to ease crypto transactions between digital wallets

Neoo Neoo is a Web3 Blockchain application that aims to ease crypto transactions

Sayan Mondal 4 Aug 11, 2022