PC Marketplace Application Documentation

Project Overview

A React-based e-commerce platform for selling laptops and computer equipment, developed by:

• Abderrahim El Ouali
• Yassin Aboudou
• Aimran Housni

State Management with Redux

Redux Store Structure

The application uses Redux for centralized state management, with separate slices for:

• Users: Manages authentication state and user information
• Products: Handles the product catalog and related data
• Cart: Controls shopping cart state and calculations

State Management Features

• Centralized application state
• Predictable state updates
• Easy debugging with Redux DevTools
• Optimized performance with proper state selectors
• Separate reducers for different data domains
• Action creators for all state modifications
• Error handling and loading states

Features

User Authentication

The application implements a secure login system with:

• Redux-managed user state
• Username and password authentication
• Login/logout functionality
• Session management with user state persistence
• Protected routes for authenticated users

Product Catalog

The product listing page showcases laptops with:

• Redux-managed product state
• Product images and descriptions
• Detailed specifications
• Original and discounted pricing
• Add to Cart functionality

Shopping Cart

A fully functional shopping cart system featuring:

• Add/remove items
• Quantity adjustment controls
• Individual product price display
• Total price calculation
• Clear cart option
• Checkout functionality

User Interface

The application features a clean, modern design with:

• Responsive navigation bar
• User account status display
• Cart item counter
• Consistent styling throughout
• Clear call-to-action buttons
• Intuitive product cards

Technical Implementation

Frontend Architecture

• Built using React.js
• Redux for state management
• Component-based structure for reusability
• Responsive design principles

Redux Integration

1. Store Configuration

   • Configured with Redux DevTools
   • Combined reducers for users and products
   • Middleware setup for async actions

2. Component Connection

   • Use of useSelector and useDispatch hooks
   • Mapped state and actions to components
   • Optimized re-rendering with proper state selection

3. State Updates

   • Immutable state updates
   • Action creators for all state modifications
   • Error handling in reducers

Key Components

1. Login Component

   • Redux-connected authentication
   • Form validation
   • Error handling

2. Product List Component

   • Redux-managed product state
   • Grid layout for product display
   • Product card components
   • Price formatting

3. Shopping Cart Component

   • Redux integration for cart state
   • Quantity controls
   • Price calculations
   • Remove item functionality

4. Navigation Component

   • Dynamic cart counter
   • Redux-connected user authentication status
   • Responsive design

Future Enhancements

Potential areas for improvement include:

• User registration functionality
• Product search and filtering
• Order history
• Payment gateway integration
• Admin dashboard
• Product reviews and ratings
• Redux persistence for cart items
• Redux middleware for API calls

Deployment

The application can be deployed using standard React build processes and hosted on various platforms that support static site hosting.

Conclusion

This e-commerce platform demonstrates effective implementation of core online shopping functionalities while maintaining a clean and user-friendly interface. The use of Redux provides robust state management across the application, making it scalable and maintainable.