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"
+        }
+    ]
+}

package-lock.json

@@ -19,7 +19,8 @@
 				"react-router-dom": "^7.9.4",
 				"react-scripts": "^5.0.1",
 				"react-toastify": "^11.0.5",
-				"sass": "^1.93.2"
+				"sass": "^1.93.2",
+				"vanilla-tilt": "^1.8.1"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -4184,7 +4185,6 @@
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
 			"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.4.0",
 				"@typescript-eslint/scope-manager": "5.62.0",
@@ -16922,6 +16922,7 @@
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
 			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
 			"license": "(MIT OR CC0-1.0)",
+			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -17026,9 +17027,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.9.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"version": "4.9.5",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+			"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
 			"license": "Apache-2.0",
 			"peer": true,
 			"bin": {
@@ -17036,7 +17037,7 @@
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=14.17"
+				"node": ">=4.2.0"
 			}
 		},
 		"node_modules/unbox-primitive": {
@@ -17278,6 +17279,12 @@
 			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
 			"license": "MIT"
 		},
+		"node_modules/vanilla-tilt": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+			"integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+			"license": "MIT"
+		},
 		"node_modules/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -17426,6 +17433,7 @@
 			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
 			"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/bonjour": "^3.5.9",
 				"@types/connect-history-api-fallback": "^1.3.5",

package.json

@@ -15,6 +15,7 @@
 		"react-router-dom": "^7.9.4",
 		"react-scripts": "^5.0.1",
 		"react-toastify": "^11.0.5",
+		"vanilla-tilt": "^1.8.1",
 		"sass": "^1.93.2"
 	},
 	"scripts": {

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'>
+				<p className="stock">
+					<span>Stock:</span>
+					<span>{product.stock}</span>
+				</p>
+				<p className="price">
 					<span>Price:</span>
 					<span>€{product.price}</span>
 				</p>
-				<p className='stock'>
-					<span>Stoc:</span>
-					<span>{product.stock}</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

@@ -1,23 +1,35 @@
-import { useGetProductsQuery } from '../features/productsApi';
-import Card from './Card';
+import { useGetProductsQuery } from "../features/productsApi";
+import Tilt from "./Tilt";
+import Card from "./Card";
 
 const Home = () => {
 	const { data, error, isLoading } = useGetProductsQuery();
 
 	return (
-		<div className='responsive-layout'>
-			<section className='home-container'>
+		<div className="responsive-layout">
+			<section className="home-container">
 				<h2>Products</h2>
 				{isLoading ? (
-					<p className='spinner'></p>
+					<p className="spinner"></p>
 				) : error ? (
 					<p>An error occoured: {error} </p>
 				) : (
 					<>
 						{data.products?.map((product) => (
-							<article className='card-list' key={product.id}>
+							<Tilt
+								key={product.id}
+								options={{
+									reverse: true,
+									speed: 300,
+			
+									easing: "cubic-bezier(.09,.67,.54,.76)",
+									gyroscope: true,
+								}}>
+								<article className="card-list" >
+							
 									<Card  product={product} />
 								</article>
+							</Tilt>
 						))}
 					</>
 				)}

src/components/Tilt.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef } from "react";
+
+import VanillaTilt from "vanilla-tilt";
+
+const Tilt = (props) => {
+  const { options, children } = props;
+  const tilt = useRef(null);
+
+  useEffect(() => {
+    VanillaTilt.init(tilt.current, options);
+  }, [options]);
+
+  return <div ref={tilt}>{children}</div>;
+};
+
+export default 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;
 		},
 	},
 });