The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.

  • By Arthur Guzman
  • Last update: Aug 28, 2021
  • Comments: 4

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 functionality with REACT). This project was bootstrapped with Create React App.

Screenshot

Bookstore Preview

🔴 Live Demo

🔨 Built With

  • REACT and REDUX.

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

  1. Go to the repository page.
  2. Press the "Code" button and copy the link.
  3. Clone it using git command git clone <link>.
  4. Run npm install to install the packages and dependencies.

To run the tests:

  • Run npm test on a Terminal.

📘 Learning Objectives

  • Understand the concept of state management.
  • Use store, actions and reducers in React.
  • Connect React and Redux.

Authors

👤 ArthurGC

🤝 ✋ ✋ Contributions

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

❕ Acknowledgments

📝 License

This project is MIT licensed.

Github

https://github.com/ArthurGC/Bookstore_CMS

Comments(4)

  • 1

    Milestone 3: Connect Bookstore API

    Bookstore Project

    :blue_book: Third Step

    In this third milestone I:

    • [ ] Added redux-thunk to work with middleware and allow working with async-await functions.
    • [ ] Added request (post, get, delete) to receive and send data to Bookstore API.
    • [ ] Refactored my addBookAction and removeBookAction to work with async-await functions.
    • [ ] Made sure addBookAction and removeBookAction work in the same way after the refactor.
  • 2

    Milestone 4: Add styling

    Bookstore Project

    :blue_book: Fourth Step

    In this third milestone I:

    • [ ] Followed Bookstore design from Zeplin.
    • [ ] Created index.css to add styles.

    :red_circle: Notes

  • 3

    Milestone 2: Add create-remove books

    Bookstore Project

    :blue_book: Steps

    In this second milestone I:

    • [ ] Added configureStore.js contains (createStore, combineReducer, appluMiddleware, redux-logger, and store).
    • [ ] Added redux/book/books.js contains(actions, action creators, and reducer).
    • [ ] Added Provider to index.js.
    • [ ] Used useDispatch to send actions creators (addBookAction and removeBookAction) to reducer in (components/book/AddBook.js, components/book/Book.js)
    • [ ] Used useSelector to get global store (components/book/BookList.js).

    :red_circle: Notes

    Following requirements, only title and author input are working in the form. (categories and comments are NOT part of this step).

  • 4

    Milestone 1: Initialize with components

    Bookstore Project

    :blue_book: Steps

    In this first milestone I:

    • [ ] Structured my application files using a "feature folder" approach and use the Ducks pattern 
      ...
/src
    |---/components
    |---/redux
        |--- /books
                | books.js
        |--- /categories
                | categories.js
        | cofigureStore.js
    | index.js
    • [ ] Added React Router and set two <Route>s and <NavLink>s for the app's navigation:
      • Books: Default view - Display the list of books and add/remove book functionality.
      • Categories: Display "Under construction" text only.

    :red_circle: Notes

    There are 2 book components shown in BookList only to make sure the Book component is working well. It is going to remove for the second step when I implemented a global state with REDUX.

Popular Tag

Related