Bookstore

📗 Table of Contents

• 📖 About the Project
• 📖 Learning objectives
  • 🛠 Built With
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 [Bookstore]

[Bookstore] This is a simple book store app built with React js. It uses the Google Books API to search for books and display them. It also uses react-router to navigate between pages.

Learning objectives

• Use React Router.
• Use React components.
• Understand the concept of state management.
• Use store, actions, and reducers in React.
• Connect React and Redux.
• Understand the concept of state management.
• Use store, actions and reducers in React.
• Connect React and Redux.
• Connect an existing API via Redux and use the data to display something in a UI.
• Understand the concept of state management.
• Use store, actions and reducers in React.
• Connect React and Redux.
• Apply React best practices and language style guides in code.

🛠 Built With

• React
• JavaScript
• CSS
• JSX
• Jest

Key Features

-[ ] Create React App -[ ] reusable components: /components. -[ ] Setup your router inside of -[ ] Add 2 routes in your application, each should render a page component:

• /
• /categories -[ ] Contains individual book state, as well as a button to delete the book -[ ] Contains a list to renders individual books -[ ] Contains a form to create new books -[ ] Contains a navigation to link to the 2 routes you created -[ ] Add Redux Toolkit (npm install react-redux @reduxjs/toolkit). -[ ] Create a directory that will contain all your Redux logic (/src/redux) -[ ] Configure a Redux store (/src/redux/store.js) -[ ] Define a slice of state for books
• Wrap your with the component from react-redux
• Pass your configured store into the
• Create an initialState variable for your booksSlice
• Display your books, received from the slice, in a reusable component
• Dispatch actions using useDispatch
• Add a component, which includes:
• An event handler that adds a book to the books array (with attributes id, title and author)
• Add a component, which includes:
• An event handler that removes a book from the books array (by id)
• Make use of the Bookstore API as your backend.
• Use axios with createAsyncThunk to make your HTTP requests to the backend
• Fetch your books from the Bookstore API after the component has rendered
• Refactor your add book and remove book features to persist your changes in the server
• Your application should behave the same way after the refactoring
• dd any missing JSX elements to your project (without adding extra functionality)
• Your final design should match Zeplin's design (this includes all elements + the same styling)
• You may use the CSS rules detailed in Zeplin to style the website.

(back to top)

Home page

🚀 Live Demo and video

https://amazinggracee.github.io/Bookstore/

• Click Here

(back to top)

💻 Getting Started

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

Clone the project unto your local machine Open the project with your code editor Run npm install to install all the dependencies Run npm start to start the server Open http://localhost:3000 to view it in the browser.

Test

For tracking linter errors locally you need to follow these steps:

• After cloning the project you need to run this command

  npm install This command will download all the dependencies of the project

• For tracking the linter errors in HTML file run:

  npx hint .

• For tracking the linter errors in CSS file run:

  npx stylelint "**/*.{css,scss}"

  • And For tracking the linter errors in JavaScript file run:

  npx eslint .

Prerequisites

• Basic knowledge of HTML, CSS, and Javascript
• Basic knowledge of Git and Github
• Basic knowledge of Webpack
• Basic knowledge of Jest
• Basic knowledge of APIs

To get the output of our project make sure you have google Chrome, Mozila or any other browser installed.

Install

In order to install this project please go through the following steps:

• Clone the repository
• Run npm install
• Run npm start to start the server
• Run npm run build to build the project
• Run npm run test to run the tests

(back to top)

👥 Authors

👤 Amarachi Dimkpa

• GitHub: @amazinggacee
• Twitter: @amazinggaceu
• LinkedIn: Amarachi Dimkpa

(back to top)

🔭 Future Features

Key Features

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

• Hat tip to Microvers and all the staff
• Thanks to My coding Partners
• Thanks to My Morning-session-group and Standup-team Partners and
• Thanks to Code Reviewers

(back to top)

📝 License

This project is MIT licensed.

(back to top)