The Bookstore website is designed for you to create a personal list of books. You can add a book to the list, or remove a book from your list. You can use this as a "to read" list and update the list when you finish reading a book that is on the list.

Tiago Lelinski Marin

Last update: Sep 1, 2022

Related tags

React Bookstore

Overview

Bookstore

"Bookstore" is a website for all reading fans. It is a Single Page App (SPA) that allows users to:

Display a list of books.
Add books to the list.
Remove books from the list.

It is part of my journey at Microverse, that's my first React Redux based project.

Built With

To build this app these React features were used:

Functional components
Hooks
Router
Redux
Jest for testing

Live demo

Live demo is available through this link.

Getting Started

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

Clone this repo to your computer using git. Or
Download the compressed zip folder and use a decompressor to unzip it into your computer. Then open the folder and all the project files will be there.
then instal npm in with "npm install" and then use "npm run see" to open the application on your browser

Authors

👤 Tiago Lelinski Marin

GitHub: @githubhandle
Twitter: @twitterhandle
LinkedIn: LinkedIn

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

Comments

add final styles to match design

In this pull request I added the final styles to match the proposed design.

Also I added some functionality to increase the status progress when you click in update status (ps. chapter name and number are inputs now and can be updated).

opened by tiagomarin 0
connect to API & change state based on api requests

In this pull request I refactored the "addBook" and "removeBook" action creators to update the state based on data fetched from the API.

Also I created another action creator to get the list of books stored in the API, called "getBookList". In order to update the UI on page load I used "useEffect" to dispatch an action to upload the state, then it renders on UI.

opened by tiagomarin 0
add dispatch and useSelector to use Redux in Components

In this pull request I added the necessary methods of React Redux to use the Redux store in the components.

Also I added the funcionality for removing and adding books to the list by dispatching actions and using the state connected to Redux store. All books have a unique ID, for that I used the npm package uuid.

Lastly I added the funcionality for the button "status" on the categories page to display a message "under construction" below the button.

Please note

I created the reducers and actions using 2 diferent approaches, one with normal Redux and the other using the createSlice from the toolkit library. I plan to make both work to practice both, but at the end I'll choose 1 of them to leave in the project.

opened by tiagomarin 0
Add reducers and actions

In this pull request I added the reducers and actions to the book section and categories sections.

Please note

I created the reducers and actions using 2 diferent approaches, one with normal Redux and the other using the createSlice from the toolkit library. I plan to make both work to practice both, but at the end I'll choose 1 of them to leave in the project.

I also added a configureStore file to combine both reducers and create a store.

opened by tiagomarin 0
Initialize project
In this PR I:

Initialized React app.

Create a directory with re-usable components.

Added React Router and set two Routes and Links for the app's navigation.

Add the default view for Books section that: * it displays the list of books (hard coded for now) * has a remove button (no functionality yet).

Created a component called Book (that receives a title and an author as prop) that is called in the Books (list of books).

Added a form for adding a book with no functionality yet. This is a separate component with inputs for a title, author and category.

Added another component for the Categories page that only displays a button Check status".

I added basic style to the project although it was not required at this point .
opened by tiagomarin 0

The Bookstore website is designed for you to create a personal list of books. You can add a book to the list, or remove a book from your list. You can use this as a "to read" list and update the list when you finish reading a book that is on the list.

Related tags

Overview

Bookstore

Built With

Live demo

Getting Started

Authors

🤝 Contributing

Show your support

📝 License

Comments

add final styles to match design

connect to API & change state based on api requests

add dispatch and useSelector to use Redux in Components

Please note

Add reducers and actions

Please note

Initialize project

Owner

Tiago Lelinski Marin

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.

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.

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

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

A bookstore app that allows a user add a book, displays added book with reviews and rating for each book and allows a user delete a book.

"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

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...

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

Book Store is a website that allows you to add, remove and view books.

⚡️The Fullstack React Framework — built on Next.js

Web Application that allows you to add and remove books

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

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

"Math magicians" is a website for all fans of mathematics. You can Make simple calculations and Read a random math-related quote.

BookAttic is an online bookstore made using the MERN stack.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

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 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."

Personal website and blog made using NextJS, TailwindCSS, GraphCMS, and MDX bundler