## Diagram

### Overview

This section covers the essential components and setup for the frontend application.

### Main Components

#### Routing & Utilities
- **ProtectedRoute**: Manages route protection based on authentication.
- **Cart Utilities**: Functions for handling cart functionalities.

#### Context Providers
- **AuthContext**: Provides authentication context.
- **CartContext**: Supplies cart context for handling cart state.

#### Pages
- **Login Page**: User login interface.
- **Signup Page**: User registration interface.
- **AdminDashboard**: Main admin control panel.
- **UserDashboard**: User's personal dashboard.

#### UI Components
- **ProductList**: Renders a list of products available for purchase.
- **Cart**: Displays the current user's shopping cart.
- **Checkout**: Facilitates the checkout process.
- **Orders**: Shows past orders of the user.
- **AddToCartButton**: Button to add items to the cart.
- **AdminSidebar**: Sidebar navigation for admin tasks.
- **UserSidebar**: Navigation sidebar for user tasks.
- **ManageOrders**: Admin interface for managing orders.
- **ManageProducts**: Admin interface for managing products.
- **ManageUsers**: Admin interface for managing users.
- **AdminOrderList**: Lists all orders for admin review.
- **AddProduct**: Interface for adding new products to the catalog.

### Assets & Testing
- **Global Styles**: [CSS Stylesheet](https://github.com/krizzna69/shop_frontend/blob/main/src/App.css)
- **Public Assets**: [Manifest File](https://github.com/krizzna69/shop_frontend/blob/main/public/manifest.json)
- **Testing Files**: [Test File](https://github.com/krizzna69/shop_frontend/blob/main/src/App.test.js)

### Structure Overview
- The application integrates various wraps and components to function seamlessly, managing displays and updates as needed.