ShopCart App is the MVP of a SPA application that lets users to:
1) Display a Shopping list of items,
2) Increase or Decrease the number of each item,
3) Remove an item from the list,
4) Clear the whole list with the help of the CLEAR CART button,
5) Show a modal screen to confirm the "CLEAR CART" action,
6) Shows the total number of items and the total amount of the cart and,
7) Retrieves initial data from an API when the App loads.
This project was built in order to learn how to use Redux in the context of a real application.
ShopCart App is the MVP of a SPA application that lets users display a Shopping list of items, Increase/Decrease the number of each item, Remove an item or the whole list,when the user tries to remove all the items a modal screen is shown to confirm the action, it also shows the total number of items in a badge at the top/right of the screen and the total amount of the cart and an API retrieves the initial data when the App loads.
This is a screenshot of how the ShopCart App looks at its initial state.
This project was bootstrapped with:
- Display a list of items
- Increase/Decrease the quantity of each item listed
- Remove an item or the whole list
- Ask for confirmation with a modal window for deleting the whole list
- Show the total of items and the total amount of the ShopCart
- Fetch initial data from an API
To get a local copy of this project up and running, follow these steps.
-
-
In order to run this project locally you need
git
installed. Please got to Getting Started - Installing Git guide and follow the steps described for your system to installgit
. -
You must have Node installed on our machine to access the NPM (Node Package Manager) tool. Run
node -v
andnpm -v
in the terminal to see if you have node and npm installed, respectively. Ensure you have node>=14.0.0 and npm>=5.6
If you don’t have them installed, head to Node to download and install the latest stable version.
-
-
Clone this repository to your desired folder:
cd my-folder git clone git@github.com:luigirazum/mv-reduxtoolkit-shopcartapp.git
-
Install the package dependencies for this project with:
cd mv-reduxtoolkit-shopcartapp npm install
-
In the project directory, you can run:
npm start
- Runs the app in the 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.
- Runs the app in the development mode.
-
npm test
- Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
- Launches the test runner in the interactive watch mode.
-
npm run build
- 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!.
- Builds the app for production to the
-
npm run deploy
- You can deploy this project using the above.
- Your app is deployed!
See the section about deployment for more information.
👨💻 Luis Zubia
- GitHub: @luigirazum
- Twitter: @LuigiRazum
- LinkedIn: Luis Zubia
- Create a form to add new items
- Create a login page so users can save their cart
In order to improve this project, contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
- 👏 I would like to thank the support of my partners.
- 👏 Also thanks to John Smilga who creates this 👨💻 Redux Toolkit Tutorial – JavaScript State Management Library which I follow in order to learn how Redux works.
I really enjoyed making this project, so, if you like it, I appreciate your support giving a ⭐.
This project is MIT licensed.