ShopCart App

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

📗 Table of Contents

• 📗 Table of Contents
• 🛍️ ShopCart App
  • Preview ShopCart App
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Available Scripts
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • 🙏 Acknowledgments
  • ⭐ Show your support
  • 📝 License

---

🛍️ ShopCart App

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 project was built in order to learn how to use Redux in the context of a real application.}

Preview of ShopCart App.

^{This is a screenshot of how the ShopCart App looks at its initial state.}

(back to top)

🛠 Built With

Tech Stack

This project was bootstrapped with:

• React
• Create React App
• Redux Toolkit

Key Features

• 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

(back to top)

🚀 Live Demo

• ShopCart App - Link

ShopCart Live Demo Preview

^{This is a Demo for the ShopCart App, click on the link 👆 above and test it.}

(back to top)

💻 Getting Started

To get a local copy of this project up and running, follow these steps.

• Prerequisites

  • 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 install git.

  • You must have Node installed on our machine to access the NPM (Node Package Manager) tool. Run node -v and npm -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.

• Setup

  Clone this repository to your desired folder:

  cd my-folder
  git clone git@github.com:luigirazum/mv-reduxtoolkit-shopcartapp.git

• Install

  Install the package dependencies for this project with:

  cd mv-reduxtoolkit-shopcartapp
  npm install

Available Scripts

• Run

  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.

• Test

  npm test

  • Launches the test runner in the interactive watch mode.
    See the section about running tests for more information.

• Build

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

• Deploy

  npm run deploy

  • You can deploy this project using the above.
  • Your app is deployed!
    See the section about deployment for more information.

(back to top)

👥 Authors

👨‍💻 Luis Zubia

• GitHub: @luigirazum
• Twitter: @LuigiRazum
• LinkedIn: Luis Zubia

(back to top)

🔭 Future Features

• Create a form to add new items
• Create a login page so users can save their cart

(back to top)

🤝 Contributing

In order to improve this project, contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

🙏 Acknowledgments

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

(back to top)

⭐ Show your support

I really enjoyed making this project, so, if you like it, I appreciate your support giving a ⭐.

(back to top)

📝 License

This project is MIT licensed.

(back to top)