Book Store React Project - Microverse! - An online Bookstore app built with React, Redux, CSS, and HTML. Users can browse books by category, add them to a cart, and proceed to checkout. The app features a search function, allowing users to search for books by title or author. project is a repository consisting of the following files:
- Html files.
- CSS files
- JS files.
- HTML, CSS, and JS linters file
- Book Store:
- Setup a new React application using Create React App
- Create a directory for your reusable components: /components.
- Install React Router V6
- Setup your router inside of
- Add 2 routes in your application, each should render a page component:
- /
- /categories
- Create components inside of the /components directory:
- Contains individual book states, as well as a button to delete the book
- Contains a list to render individual books
- Contains a form to create a new book
- Contains 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 that:
- Includes an array of books (initial state: empty array)
- Includes a reducer that adds books
- Includes a reducer that removes a book
- Define a slice of state for categories that:
- Includes an array of categories (initial state: empty array)
- Includes a reducer that checks the status and always returns "Under construction" (the initial state should check to that string) -[x] Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files.
- Wrap
<App>with the<Provider>component from react-redux - Pass your configured store into the
<Provider> - Create an initialState variable for your booksSlice, which will include
- Display your books, received from the slice, in a reusable component
- Dispatch actions using useDispatch.
- Add a
<Button>component, which includes:- An event handler that adds a book to the books array (with attributes id, title, and author)
- Add a
<Button>component, which includes:- An event handler that removes a book from the books array (by id)
- Add any missing JSX elements to the project (without adding extra functionality)
- The final design should match Zeplin's design (this includes all elements + the same styling)
- The CSS rules detailed in Zeplin to style the website used.
- In the browser tested ; it render without problems, this
- React Book Store Web App
- Learn More How to deploy react app
- GitHub account;
- git installed on your OS.
- Installations required to run this project:
- Run the following command:
- Run the following command:
- Run the following command:
- Run the following command:
- Run the following command:
- Run
- Add some animation style for the project💯
- We would like to thank the Microverse program for providing us with this great chance
React Project: Requirements
To get a local copy up and running, follow these steps.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single-build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point, you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However, we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Clone this repository to your desired folder:
cd my-folder git clone git@github.com:Microverse-JS-Capstone.git
In order to run this project you need:
npm install
npx create-react-app my-app
cd my-app
npm start
npm install --save-dev style-loader css-loader
npm install --save-dev hint@7.x
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
You can use this project by cloning it to your folder and changing index.html and styles.css files.
To run tests, run the following commands:
To track linter errors locally follow these steps:
Download all the dependencies run:
npm install
Track HTML linter errors run:
npx hint.
Track CSS linter errors run:
npx stylelint "**/*.{css,scss}"
Track JavaScript linter errors run:
npx eslint .
You can redeploy this project by adding new lines of code to source files.
Contributions, issues, and feature requests are welcome!
Give me ⭐️ If you like this project!
This project is MIT licensed.