feat: remove Capitalize component and update Card and Cart components to use direct string manipulation for titles and descriptions

feat: add launch configuration for debugging in VSCode
fix: update Home component to use Tilt with improved speed and gyroscope options

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000/react-shop",
+            "webRoot": "${workspaceFolder}/src"
+        }
+    ]
+}

src/App.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
 
 // Variables
 
@@ -52,7 +52,7 @@ $breakpoints: $xs, $sm, $md, $lg, $xl;
 	padding: 0;
 	margin: 0;
 	box-sizing: border-box;
-  font-family: "Nanum Gothic Coding", monospace;
+	font-family: "Sansation", sans-serif;
 }
 
 a {
@@ -144,13 +144,14 @@ a {
 
 		.nav-quantity {
 			@include flex-center();
-      height: 25px;
-      width: 25px;
-      background-color: $PersianGreen;
+			height: 36px;
+			width: 36px;
+			background-color: $OuterSpaceCrayola;
+			border: 1px solid $PersianGreen;
 
 			margin-left: 5px;
 			border-radius: 50%;
-      font-size: 14px;
+			font-size: 16px;
 		}
 	}
 }
@@ -187,18 +188,19 @@ a {
 	flex-direction: column;
 	justify-content: space-between;
 
-  @include hover-animation();
+	.card-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		min-height: 480px;
+	}
 
 	button {
-    border: 1px solid $PersianGreen;
 		border-radius: 20px;
 		outline: none;
-    // background-color: $Cultured;
-    // background-color: $PersianGreen;
-    // color: $Cultured;
-    color: $PersianGreen;
-    font-size: 1.2rem;
-    font-weight: 700;
+		background-color: $OuterSpaceCrayola;
+		color: $Cultured;
+		font-size: 1rem;
 		cursor: pointer;
 		height: 1.5rem;
 		margin-top: 0.5rem;
@@ -225,6 +227,7 @@ a {
 	.description {
 		font-size: 12px;
 		line-height: 1.5;
+		flex-grow: 1;
 	}
 
 	.category,
@@ -281,7 +284,7 @@ a {
 			}
 			h3 {
 				font-weight: 400;
-        margin-bottom: .3rem;
+				margin-bottom: 0.3rem;
 			}
 			button {
 				border: none;
@@ -346,9 +349,9 @@ a {
 			border-radius: 5px;
 			font-weight: 400;
 			letter-spacing: 1.1px;
-      border: 0.5px solid $SolidPink;
-      color: $SolidPink;
-      background: none;
+			background-color: $SolidPink;
+			border: none;
+			color: $Cultured;
 			outline: none;
 			cursor: pointer;
 			font-size: 1.2rem;
@@ -370,7 +373,7 @@ a {
 			button {
 				@include hover-animation();
 				border: none;
-        border-radius: 5px;
+				border-radius: 50px;
 				outline: none;
 				background-color: $OuterSpaceCrayola;
 				color: $Cultured;
@@ -421,21 +424,21 @@ a {
 				& > div > p {
 					margin-top: 1rem;
 				}
-        button{
+				button {
 					font-size: 1rem;
 					margin-left: auto;
 					margin-right: auto;
 				}
 			}
-      .price{
+			.price {
 				margin-bottom: 1rem;
-        &::before{
+				&::before {
 					content: "Price:";
 				}
 			}
-      .total-price{
+			.total-price {
 				margin-top: 1rem;
-        &::before{
+				&::before {
 					content: "Total Price:";
 				}
 			}
@@ -469,6 +472,7 @@ a {
 .back-to-home {
 	font-size: 1.4rem;
 	margin-top: 3rem;
+	color: $PersianGreen;
 }
 
 .go-to-cart {

src/components/Capitalize.jsx

@@ -1,11 +0,0 @@
-
-const Capitalize = ({ children, text })=> {
-  // ensure we always work with a string
-  const value = (children ?? "").toString();
-  if (!value) return null;
-
-  const capitalized = value.replace(/\b\w/g, (c) => c.toUpperCase());
-  return <>{capitalized}</>;
-}
-
-export default Capitalize

src/components/Card.jsx

@@ -1,8 +1,6 @@
-import { useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { addToCart, getTotals } from '../features/cartSlice';
-
-import  Capitalize  from './Capitalize';
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { addToCart, getTotals } from "../features/cartSlice";
 
 const Card = ({ product }) => {
 	const dispatch = useDispatch();
@@ -15,34 +13,34 @@ const Card = ({ product }) => {
 	const handleAddToCart = (product) => {
 		dispatch(addToCart(product));
 	};
-
 	return (
-		<>
-			<h3 className='title'>{Capitalize(product?.title  ?? "")}</h3>
-			<div className='image-container'>
-				<img src={product.images[0]} alt={Capitalize(product?.title ?? "")} />
+		<div className="card-container">
+			<h3 className="title">{product.title}</h3>
+			<div className="image-container">
+				<img src={product.images[0]} alt={product.title} />
 			</div>
-			<div className='category'>
-				<span>{Capitalize(product?.category ?? "")}</span>
-				<span>{Capitalize(product?.brand ?? "")}</span>
+			<div className="category">
+				<span>{product.category}</span>
+				<span>{product.availabilityStatus}</span>
 			</div>
-			<p className='description'>{Capitalize(product?.description ?? "")}</p>
+			<p className="description">{product?.description}</p>
+
 			<div>
-				<p className='discount'>
-					<span>Discount: </span>
-					<span>{product.discountPercentage}%</span>
+				<p className="discount">
+					<span>Discount:</span>
+					<span>{Math.round(product.discountPercentage)} %</span>
 				</p>
-				<p className='price'>
-					<span>Price:</span>
-					<span>€{product.price}</span>
-				</p>
-				<p className='stock'>
+				<p className="stock">
 					<span>Stock:</span>
 					<span>{product.stock}</span>
 				</p>
+				<p className="price">
+					<span>Price:</span>
+					<span>€{product.price}</span>
+				</p>
 			</div>
 			<button onClick={() => handleAddToCart(product)}>Add to cart</button>
-		</>
+		</div>
 	);
 };
 

src/components/Cart.jsx

@@ -8,7 +8,6 @@ import {
 	getTotals,
 } from '../features/cartSlice';
 
-import  Capitalize  from './Capitalize';
 import BackHomeButton from './BackHomeButton';
 
 const Cart = () => {
@@ -55,7 +54,7 @@ const Cart = () => {
 									<div className='cart-product'>
 										<img src={cartItem.images[0]} alt={cartItem.title} />
 										<div>
-											<h3>{Capitalize(cartItem.title)}</h3>
+											<h3>{cartItem.title}</h3>
 											<p>{cartItem.description}</p>
 											<button onClick={() => handleRemoveFromCart(cartItem)}>
 												Remove
@@ -73,7 +72,8 @@ const Cart = () => {
 										</button>
 									</div>
 									<div className='total-price'>
-										€{cartItem.price * cartItem.cartQuantity}
+										
+										€{Math.round((cartItem.price * cartItem.cartQuantity) * 100)/100}
 									</div>
 								</div>
 							))}
@@ -85,9 +85,9 @@ const Cart = () => {
 							<div className='cart-checkout'>
 								<div className='subtotal'>
 									<span>Subtotal</span>
-									<span className='amount'>€{cart.cartTotalAmount}</span>
+									<span className='amount'>€{Math.round(cart.cartTotalAmount * 100)/100}</span>
 								</div>
-								<button>Checkout</button>
+								<button className='button' >Checkout</button>
 							</div>
 						</div>
 						<div className='continue-shopping'>

src/components/Home.jsx

@@ -17,12 +17,16 @@ const Home = () => {
 					<>
 						{data.products?.map((product) => (
 							<Tilt
+								key={product.id}
 								options={{
 									reverse: true,
-									speed: 1200,
+									speed: 300,
+			
 									easing: "cubic-bezier(.09,.67,.54,.76)",
+									gyroscope: true,
 								}}>
-								<article className="card-list" key={product.id}>
+								<article className="card-list" >
+							
 									<Card  product={product} />
 								</article>
 							</Tilt>

src/features/cartSlice.js

@@ -1,7 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toast } from 'react-toastify';
-import Capitalize  from '../components/Capitalize';
-import GoToCartButton from '../components/GoToCartButton';
 
 const initialState = {
 	cartItems: localStorage.getItem('cartItems')
@@ -27,29 +25,24 @@ const cartSlice = createSlice({
 			if (itemIndex >= 0) {
 				state.cartItems[itemIndex].cartQuantity += 1;
 
-				let multipleItemsText = `Increased ${Capitalize(
+				let multipleItemsText = `Increased ${
 					state.cartItems[itemIndex].title
-				)} quantity to ${state.cartItems[itemIndex].cartQuantity}`;
+				} quantity to ${state.cartItems[itemIndex].cartQuantity}`;
 
-
-
-				toast.info(
-					window.location.href.indexOf('cart') !== -1 ? (
-						multipleItemsText
-					) : (
-						<GoToCartButton text={multipleItemsText} />
-					),
-					toastifyOptions
-				);
+				// Show a toast when quantity is increased
+				if (window.location.href.indexOf('cart') !== -1) {
+					toast.info(multipleItemsText, toastifyOptions);
+				} else {
+					toast.info(multipleItemsText, toastifyOptions);
+					// Optionally, trigger a UI update to show GoToCartButton elsewhere
+				}
 			} else {
 				const tempProduct = { ...action.payload, cartQuantity: 1 };
 				state.cartItems.push(tempProduct);
-				let firstItemText = `${Capitalize(action.payload.title)} added to cart`
+				let firstItemText = `${action.payload.title} added to cart`
 
-				toast.success(
-					<GoToCartButton text={firstItemText} />,
-					toastifyOptions
-				);
+				toast.success(firstItemText, toastifyOptions);
+				// Optionally, trigger a UI update to show GoToCartButton elsewhere
 			}
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
@@ -59,7 +52,7 @@ const cartSlice = createSlice({
 			);
 			state.cartItems = nextCartItems;
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
-			toast.error(`${Capitalize(action.payload.title)} removed from cart`, toastifyOptions);
+			toast.error(`${action.payload.title} removed from cart`, toastifyOptions);
 		},
 		decreaseCart(state, action) {
 			const itemIndex = state.cartItems.findIndex(
@@ -68,7 +61,7 @@ const cartSlice = createSlice({
 			if (state.cartItems[itemIndex].cartQuantity > 1) {
 				state.cartItems[itemIndex].cartQuantity -= 1;
 				toast.info(
-					`Decreased ${Capitalize(action.payload.title)} cart quantity`,
+					`Decreased ${action.payload.title} cart quantity`,
 					toastifyOptions
 				);
 			} else if (state.cartItems[itemIndex].cartQuantity === 1) {
@@ -77,19 +70,19 @@ const cartSlice = createSlice({
 				);
 				state.cartItems = nextCartItems;
 				toast.error(
-					`${Capitalize(action.payload.title)} removed from cart`,
+					`${action.payload.title} removed from cart`,
 					toastifyOptions
 				);
 			}
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
-		clearCart(state, action) {
+		clearCart(state) {
 			state.cartItems = [];
 			toast.error(`Cart cleared`, toastifyOptions);
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
 		getTotals(state, action) {
-			let { total, quantity } = state.cartItems.reduce(
+			let { total: cartTotalAmount, quantity: cartTotalQuantity } = state.cartItems.reduce(
 				(cartTotal, cartItem) => {
 					const { price, cartQuantity } = cartItem;
 					const itemTotal = price * cartQuantity;
@@ -104,8 +97,8 @@ const cartSlice = createSlice({
 					quantity: 0,
 				}
 			);
-			state.cartTotalQuantity = quantity;
-			state.cartTotalAmount = total;
+			state.cartTotalQuantity = cartTotalQuantity;
+			state.cartTotalAmount = cartTotalAmount;
 		},
 	},
 });