Yuriy Chamkoriyski Book-store project

React & Redux app

Description

This project will lay foundations for my Bookstore website. I will create a React and Redux app. I will structure my files using the "feature folder" approach. I will also set up routing using React Router.

Requirements:

Phase 1, initialize project with components

• Initialize React app.
• Add React Redux (npm install react-redux).
• Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files. Your files/folder structure could look like this:
  ...
  /src
       |---/components
       |---/redux
            |--- /books
                 | books.js
            |--- /categories
                 | categories.js
            | configureStore.js
       | index.js
  
• The building blocks of your app should be set as re-usable components.
• Add React Router and set two <Route>s and <Link>s for the app's navigation:
  • 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).
  • Categories
    • Should display "Under construction" text only.
• Styling is not required at this point.

Phase 2, create and remove books

• Configuring the Redux Store
• Write book's actions and reducer
• In the React component responsible for adding new books set the data inputs in the local React state (set title and author - NOTE: categories and comments are NOT part of this step). Once your new book object is ready to be submitted to Redux store, dispatch a corresponding action.
• In the React component responsible for removing books - implement that event by dispatching a corresponding action.
• Use the redux-logger to check if your application is working correctly - Open your browser's console and look for the logger messages. Upon every action dispatch, the logger will print:
  • prev state - the state of the whole Redux store before the current action was dispatched.
  • action - the action object that is being dispatched.
  • next state - the state of the Redux store after the current action was dispatched.

Phase 3, connect to API

• Read the Bookstore API documentation to learn how to use the API.
• Refactor your add book and remove book features to persist your changes in the server.
  • You should refactor the redux code of your application using middleware to make async requests to the API.
  • Don't do the changes using only React state.
• Add book and remove book should work in the same way after the refactor.
• No styling is required.

Phase 4, styling

• You will find all the details of the Bookstore design in Zeplin.
• Login to Zeplin (hint: you will find the credentials in the sneak peek of the project)
• Open the project Bookstore CMS.
• Use the information detailed in Zeplin to style the website.
• Your final design should match Zeplin's design.

Built With

• Major languages: Javascript
• Frameworks: React.js
• Technologies used: Redux, Babel, Jest, webpack
• Tested with: - ESLint (JavaScript linting), Stylelint (style linting)

Live Demo

Live link

Deployment

Using Netlify

Prerequisites

• Internet connection and browser
• A text editor(preferably Visual Studio Code)
• Browser

Setup

• This project was bootstrapped with Create React App.

Install

• Git
• Node

Usage

• Clone the repository using git clone https://github.com/Hombre2014/Book-store
• Change directory into the project folder: cd book-store
• Run npm install
• Run npm start
• A new browser will open automatically with application loaded automatically on port 3000

Author

👤 Yuriy Chamkoriyski

• GitHub: @Hombre2014
• Twitter: @Chamkoriyski
• LinkedIn: axebit

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