Skip to content

This is the fourth project of the third module in Microverse program. It is an exercise tutorial to practice Redux toolkit with React framework.

License

Notifications You must be signed in to change notification settings

mahammad-mostafa/redux-cart-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

41ef8ce Β· Sep 12, 2023

History

27 Commits
Aug 24, 2023
Aug 26, 2023
Aug 26, 2023
Aug 24, 2023
Aug 24, 2023
Aug 24, 2023
Aug 24, 2023
Aug 24, 2023
Sep 12, 2023
Aug 25, 2023
Aug 25, 2023

Repository files navigation

🏷️ Redux Cart Tutorial

This is the fourth project of the third module in the Microverse program.
Check the below contents for further details about this project.

πŸ“— Contents

πŸ“– Description

This project is a tutorial exercise for Redux Toolkit with ReactJS framework. It applies Redux concepts like (store / actions / reducers). All project dynamic files are contained in src directory while static assets are in public directory. The live build is generated inside the build directory. Also config linters for (CSS / JavaScript) in the .github folder.

πŸ“Œ Live Demo:

  • See the project live from here.

πŸ“Œ Tech Stack:

  • Framework used is ReactJS
  • State management by Redux Toolkit
  • Page structure is built with JSX
  • Styling is built with CSS Modules
  • Dynamic content is built with ES6 JavaScript
  • Bundling is done with WebPack

πŸ“Œ Key Features:

  • Single page app with all content loaded dynamically
  • Responsive layout with all screen sizes
  • Live data fetching from an external api
  • Simple cart items list with content updating
  • Ability to change cart contents
  • Confirmation dialog for clearing all cart items

back to top

πŸ› οΈ Instructions

You can easily download or fork this repository and work on it immadiately!

πŸ“Œ Prerequisites:

  • NodeJS for installing & running all packages

πŸ“Œ Setup:

  • Install all dependencies with npm
npm install
  • For live development on localhost:3000 run:
npm run start
  • Unit testing is done with:
npm run test

πŸ“Œ Deployment:

  • You can deploy this project by uploading files in the build folder to a live server.
  • Create the distribution build using this command:
npm run build

back to top

πŸ‘₯ Authors

πŸ“Œ Mahammad:

back to top

πŸ”­ Future

Some additional features I may implement in the project:

  • Using CSS preprocessors and their relevant loaders
  • Implement advanced Hooks features like useMemo

back to top

🀝🏻 Contributions

Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the issues page too.

back to top

⭐️ Support

Like this project? Show your support by starring!

back to top

πŸ™πŸ» Acknowledgements

I thank everyone at Microverse for guiding me through this project.

back to top

πŸ“ License

This project is MIT licensed.

back to top