React Redux Shopping App

Live Demo

A modern shopping app built with React and Redux Toolkit, enabling users to browse products, add items to their cart, and manage their shopping experience efficiently.

About The Project

React Redux Shopping App is a feature-rich e-commerce application designed to demonstrate the power of Redux Toolkit in handling global state management. Users can explore various products, add them to their cart, and make updates seamlessly with a modern and intuitive UI built using Material UI.

Features

• React 19 & Vite 6.x: Utilizes the latest versions for optimal performance and development experience.
• State Management with Redux Toolkit: Efficiently manages product and cart state.
• Axios for API Calls: Fetches product data dynamically.
• Material UI Components: Ensures a sleek and modern UI.
• React Router: Enables smooth navigation between pages.
• SWC (Speedy Web Compiler): Provides fast and optimized JavaScript compilation.

Built with

• React 19
• Redux Toolkit
• Axios
• Material UI
• React Router
• Vite 6.x
• SWC (Speedy Web Compiler)

Installation & Setup

To set up the project locally, follow these steps:

# Clone the repository
git clone https://github.com/yourusername/react-redux-shopping-app.git

# Navigate to the project directory
cd react-redux-shopping-app

# Install dependencies (also works with yarn & pnpm)
npm install

# Start the development server
npm run dev

What I Learned

• Advanced State Management: Gained hands-on experience with Redux Toolkit, particularly with slices, async thunks, and selectors.
• Optimized Performance with Vite: Explored the benefits of faster hot module replacement and optimized bundling.
• Material UI Customization: Learned how to efficiently customize Material UI components to align with branding.
• API Handling with Axios: Improved knowledge of handling asynchronous requests, error handling, and state updates.

Useful Resources

1. Redux Toolkit Documentation - Official guide for Redux Toolkit.
2. React Router Documentation - Helps with routing in React applications.
3. Material UI Docs - Official documentation for Material UI components and styling.
4. Vite Documentation - Understanding Vite and its optimizations.

Acknowledgments

A huge thanks to:

• The React & Redux Community for their extensive documentation and helpful discussions.
• Vite & SWC developers for making development faster and smoother.
• Material UI for providing a sleek component library that enhances UI design.
• Everyone who provided feedback and insights during the development process.