For this challenge, I built a Product List with Cart application using Angular. The project focuses on creating a seamless e-commerce experience, allowing users to browse products, add them to a shopping cart, and view their selected items dynamically. The app features interactive product cards, real-time cart updates, and smooth transitions between states, all powered by Angular for a responsive and efficient user experience.

Key Features:

Dynamic Product List: The page displays a list of products, each with an image, title, price, and an "Add to Cart" button. The product list is managed with Angular’s ngFor directive to loop through data.

Shopping Cart: Users can add products to the cart, view the total price, and remove items. The cart updates in real-time with Angular’s two-way data binding.

State Management: The app uses Angular services to manage the state of the cart, ensuring that product quantities and cart totals are updated across components efficiently.

Responsive Design: The layout adapts seamlessly to all screen sizes, ensuring a smooth experience on both mobile and desktop devices.

Interactive UI: The app includes interactive features like hover effects, modal windows for the cart, and smooth transitions when adding/removing products.

Cross-Browser Compatibility: The application was tested across multiple browsers to ensure a consistent look and performance on all platforms.

This challenge helped me improve my skills in Angular, TypeScript, and state management, while enhancing my ability to build interactive, data-driven web applications with real-time updates.