mate-academy · IvanovvvIhor · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Nice Gadgets</title>
+    <link rel="icon" href="img/icons/Icons/falicone.png">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

diff --git a/public/api/products.json b/public/api/products.json
@@ -1001,7 +1001,7 @@
     "fullPrice": 1056,
     "price": 980,
     "screen": "6.1' IPS",
-    "capacity": "32GB",
+    "capacity": "128GB",
     "color": "midnight",
     "ram": "6GB",
     "year": 2022,
@@ -2715,4 +2715,4 @@
     "year": 2022,
     "image": "img/phones/apple-iphone-14-pro/gold/00.webp"
   }
-]
+]
diff --git a/public/img/icons/Arrow_Left.png b/public/img/icons/Arrow_Left.png
diff --git a/public/img/icons/Arrow_Right.png b/public/img/icons/Arrow_Right.png
diff --git a/public/img/icons/Home.png b/public/img/icons/Home.png
diff --git a/public/img/icons/Icons/Phone catalog (V2) Original.zip b/public/img/icons/Icons/Phone catalog (V2) Original.zip
diff --git a/public/img/icons/Logo.png b/public/img/icons/Logo.png
diff --git a/public/img/icons/ToTop.png b/public/img/icons/ToTop.png
diff --git a/public/img/icons/burgerMenu.png b/public/img/icons/burgerMenu.png
diff --git a/public/img/icons/cart.png b/public/img/icons/cart.png
diff --git a/public/img/icons/close.png b/public/img/icons/close.png
diff --git a/public/img/icons/down.png b/public/img/icons/down.png
diff --git a/public/img/icons/left.png b/public/img/icons/left.png
diff --git a/public/img/icons/like.png b/public/img/icons/like.png
diff --git a/public/img/icons/minus.png b/public/img/icons/minus.png
diff --git a/public/img/icons/noneLike.png b/public/img/icons/noneLike.png
diff --git a/public/img/icons/plus.png b/public/img/icons/plus.png
diff --git a/public/img/icons/right.png b/public/img/icons/right.png
diff --git a/public/img/icons/search.png b/public/img/icons/search.png
diff --git a/public/img/icons/up.png b/public/img/icons/up.png
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,35 @@
-// not empty
+// not empty
+@import './variables';
+
+*{
+  margin: 0;
+  padding: 0;
+}
+
+.App{
+  font-family: $font-family;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  min-height: 100vh;
+}
+
+.is-hidden{
+  display: none;
+}
+
+.line{
+  height: 1px;
+  width: 100%;
+  background-color: $Elements;
+  margin: 0;
+}
+
+.no-scroll {
+  overflow: hidden;
+  height: 100vh;
+}
+
+.pages{
+  flex-grow: 1;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,32 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+
 import './App.scss';
+import { Header } from './components/Header/Header';
+import { HomePage } from './Pages/HomePage';
+import { Footer } from './components/Footer/Footer';
+import { Catalog } from './Pages/Catalog/Catalog';
+import { ItemCard } from './Pages/ItemCard';
+import { Favorites } from './Pages/Favorites';
+import { Cart } from './Pages/Cart';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  return (
+    <div className="App">
+      <Header />
+      <h1 className="is-hidden">Product Catalog</h1>
+      <section className="pages">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/:category/:product" element={<ItemCard />} />
+          <Route path="/:category" element={<Catalog />} />
+          <Route path="/favorites" element={<Favorites />} />
+          <Route path="/cart" element={<Cart />} />
+          <Route path="*" element={<h1>Page not found</h1>} />
+        </Routes>
+      </section>
+      <div className="line" />
+      <Footer />
+    </div>
+  );
+};
diff --git a/src/ItemsProvider.tsx b/src/ItemsProvider.tsx
@@ -0,0 +1,73 @@
+import React, { createContext, useState, ReactNode, useEffect } from 'react';
+import { Product } from './types/product';
+
+interface CartContextType {
+  cartItems: CartItemType[];
+  setCartItems: React.Dispatch<React.SetStateAction<CartItemType[]>>;
+}
+
+export interface CartItemType {
+  product: Product;
+  quantity: number;
+}
+
+interface FavoritesContextType {
+  favoritesItems: Product[];
+  setFavoritesItems: React.Dispatch<React.SetStateAction<Product[]>>;
+}
+
+export const CartContext = createContext<CartContextType | null>(null);
+
+export const FavoritesContext = createContext<FavoritesContextType | null>(
+  null,
+);
+
+export const useCart = () => {
+  const context = React.useContext(CartContext);
+
+  if (!context) {
+    throw new Error('useCart must be used within a ItemsProvider');
+  }
+
+  return context;
+};
+
+export const useFavorites = () => {
+  const context = React.useContext(FavoritesContext);
+
+  if (!context) {
+    throw new Error('useFavorites must be used within a ItemsProvider');
+  }
+
+  return context;
+};
+
+export const ItemsProvider = ({ children }: { children: ReactNode }) => {
+  const [cartItems, setCartItems] = useState<CartItemType[]>(() => {
+    const saved = localStorage.getItem('cartItems');
+
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  const [favoritesItems, setFavoritesItems] = useState<Product[]>(() => {
+    const saved = localStorage.getItem('favoritesItems');
+
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  useEffect(() => {
+    localStorage.setItem('cartItems', JSON.stringify(cartItems));
+  }, [cartItems]);
+
+  useEffect(() => {
+    localStorage.setItem('favoritesItems', JSON.stringify(favoritesItems));
+  }, [favoritesItems]);
+
+  return (
+    <CartContext.Provider value={{ cartItems, setCartItems }}>
+      <FavoritesContext.Provider value={{ favoritesItems, setFavoritesItems }}>
+        {children}
+      </FavoritesContext.Provider>
+    </CartContext.Provider>
+  );
+};
diff --git a/src/Pages/Cart/Cart.module.scss b/src/Pages/Cart/Cart.module.scss
@@ -0,0 +1,109 @@
+@use "sass:color";
+@import '../../variables';
+@import '../../utils/mixins';
+
+.cart {
+  @include inline-padding;
+  @include grid;
+
+  padding-bottom: 80px;
+  column-gap: 24px;
+  min-height: calc(100vh - 48px - 96px);
+  align-content: flex-start;
+
+  &__back {
+    grid-column: 1 / -1;
+    width: 66px;
+    height: 16px;
+    border: none;
+    background-color: $white;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 40px;
+    margin-bottom: 16px;
+    text-decoration: none;
+    color: $Secondary;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+    font-size: 32px;
+    font-weight: 800;
+    margin-bottom: 32px;
+    color: $Primary;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    @include on-desktop { grid-column: 1 / span 16; }
+
+    @include on-tablet { grid-column: 1 / span 24; }
+
+    @include on-phone { grid-column: 1 / -1; }
+  }
+
+  &__line {
+    height: 1px;
+    width: 100%;
+    background-color: $Elements;
+    margin-block: 24px;
+  }
+
+  &__summary {
+    border: 1px solid $Elements;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: fit-content;
+    width: 100%;
+    padding: 24px;
+    box-sizing: border-box;
+
+    @include on-desktop { grid-column: 18 / span 7; }
+
+    @include on-tablet {
+      grid-column: 1/-1;
+      margin-top: 32px;
+    }
+
+    @include on-phone {
+      grid-column: 1/-1;
+      margin-top: 32px;
+    }
+  }
+
+  &__total {
+    font-family: Mont, sans-serif;
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -1%;
+    color: $Primary;
+  }
+
+  &__count {
+    font-size: 14px;
+    color: $Secondary;
+  }
+
+  &__checkout {
+    width: 100%;
+    height: 48px;
+    background-color: $Primary;
+    color: white;
+    border: none;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.3s;
+
+    &:hover {
+      background-color: color.scale($Primary, $lightness: 10%);
+    }
+  }
+}
diff --git a/src/Pages/Cart/Cart.tsx b/src/Pages/Cart/Cart.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCart } from '../../ItemsProvider';
+import { CartItem } from '../../components/CartItem/CartItem';
+import styles from './Cart.module.scss';
+
+export const Cart = () => {
+  const { cartItems, setCartItems } = useCart();
+  const navigate = useNavigate();
+
+  const totalPrice = useMemo(() => {
+    return cartItems.reduce(
+      (sum, item) => sum + item.product.price * item.quantity,
+      0,
+    );
+  }, [cartItems]);
+
+  const totalQuantity = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+
+  const handleCheckout = () => {
+    const isConfirmed = window.confirm(
+      'Checkout is not implemented yet. Do you want to clear the Cart?',
+    );
+
+    if (isConfirmed) {
+      setCartItems([]);
+    }
+  };
+
+  return (
+    <section className={styles.cart}>
+      <button
+        onClick={() => {
+          navigate(-1);
+        }}
+        className={styles.cart__back}
+      >
+        <img src="img/icons/Arrow_Left.png" alt="Back" />
+        Back
+      </button>
+
+      <h1 className={styles.cart__title}>Cart</h1>
+
+      <article className={styles.cart__container}>
+        {cartItems.map(item => (
+          <CartItem key={item.product.id} item={item} />
+        ))}
+      </article>
+
+      <article className={styles.cart__summary}>
+        <p className={styles.cart__total}>${totalPrice}</p>
+        <p className={styles.cart__count}>Total for {totalQuantity} items</p>
+        <div className={styles.cart__line} />
+
+        <button
+          className={styles.cart__checkout}
+          onClick={handleCheckout}
+          disabled={cartItems.length === 0}
+        >
+          Checkout
+        </button>
+      </article>
+    </section>
+  );
+};
diff --git a/src/Pages/Cart/index.ts b/src/Pages/Cart/index.ts
@@ -0,0 +1 @@
+export { Cart } from './Cart';