mate-academy · Vovanchu · Nov 19, 2025 · Nov 19, 2025 · Nov 19, 2025 · Nov 29, 2025
diff --git a/.env b/.env
@@ -1 +1,2 @@
 ESLINT_NO_DEV_ERRORS=true
+VITE_API_BASE=/react_phone-catalog/api/
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ raw_reports
 reports
 cypress/screenshots
 cypress/videos
+
+.env
diff --git a/index.html b/index.html
@@ -3,7 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="./public/img/product-not-found.png"
+    />
+
+    <title>Electronics store</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,30 +1,36 @@
 {
+  "homepage": "https://Vovanchu.github.io/react_phone-catalog/",
   "name": "react_phone-catalog",
-  "homepage": "react_phone-catalog",
   "version": "0.1.0",
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mui/material": "^7.3.8",
+    "@reduxjs/toolkit": "^2.11.2",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.2",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/parser": "^7.16.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^5.1.4",
     "cypress": "^13.13.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -36,14 +42,15 @@
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "gh-pages": "^6.1.1",
+    "husky": "^9.1.7",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
     "prettier": "^3.3.2",
     "sass": "^1.77.8",
     "stylelint": "^16.7.0",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^7.3.1"
   },
   "scripts": {
     "start": "mate-scripts start -l",

diff --git a/public/api/phones.json b/public/api/phones.json
@@ -4386,7 +4386,6 @@
     "images": [
       "img/phones/apple-iphone-12/white/00.webp",
       "img/phones/apple-iphone-12/white/01.webp",
-      "img/phones/apple-iphone-12/white/02.webp",
       "img/phones/apple-iphone-12/white/03.webp"
     ],
     "description": [

diff --git a/public/img/CartHurt.png b/public/img/CartHurt.png
diff --git a/public/img/Chevron.png b/public/img/Chevron.png
diff --git a/public/img/ChevronLeft.png b/public/img/ChevronLeft.png
diff --git a/public/img/ChevronRight.png b/public/img/ChevronRight.png
diff --git a/public/img/FavoritesHurt.png b/public/img/FavoritesHurt.png
diff --git a/public/img/Home.png b/public/img/Home.png
diff --git a/public/img/Logo.png b/public/img/Logo.png
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,20 @@
-// not empty
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,18 @@
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { AppRouter } from './router/AppRouter';
 import './App.scss';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+const App = () => {
+  return (
+    <>
+      <Header />
+      <main>
+        <AppRouter />
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default App;
diff --git a/src/UI/Buttons/Icons/CartHurt.svg b/src/UI/Buttons/Icons/CartHurt.svg
diff --git a/src/UI/Buttons/Icons/ChevronRight.png b/src/UI/Buttons/Icons/ChevronRight.png
diff --git a/src/UI/Buttons/Icons/DeleteCart.svg b/src/UI/Buttons/Icons/DeleteCart.svg
diff --git a/src/UI/Buttons/Icons/FavoritesHurtActive.svg b/src/UI/Buttons/Icons/FavoritesHurtActive.svg
diff --git a/src/UI/Buttons/Icons/FavouritesHurtAnactive.svg b/src/UI/Buttons/Icons/FavouritesHurtAnactive.svg
diff --git a/src/UI/Buttons/Icons/Phones.svg b/src/UI/Buttons/Icons/Phones.svg
diff --git a/src/UI/Buttons/Icons/Phones2.svg b/src/UI/Buttons/Icons/Phones2.svg
diff --git a/src/UI/Buttons/Icons/Tablets.svg b/src/UI/Buttons/Icons/Tablets.svg
diff --git a/src/UI/photos/Banner.svg b/src/UI/photos/Banner.svg
diff --git a/src/UI/photos/Logo.svg b/src/UI/photos/Logo.svg
diff --git a/src/UI/photos/banner-accessories.png b/src/UI/photos/banner-accessories.png
diff --git a/src/UI/photos/banner-phones.png b/src/UI/photos/banner-phones.png
diff --git a/src/UI/photos/banner-tablets.png b/src/UI/photos/banner-tablets.png
diff --git a/src/UI/photos/page-not-found.png b/src/UI/photos/page-not-found.png
diff --git a/src/UI/photos/product-not-found.png b/src/UI/photos/product-not-found.png
diff --git a/src/components/BannerCarousel/BannerCarousel.module.scss b/src/components/BannerCarousel/BannerCarousel.module.scss
@@ -0,0 +1 @@
+@use '../../styles/variables' as vars;
diff --git a/src/components/BannerCarousel/BannerCarousel.tsx b/src/components/BannerCarousel/BannerCarousel.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import styles from './BannerCarousel.module.scss';
+
+const banners = [
+  '/img/banner-accessories.png',
+  '/img/banner-phones.png',
+  '/img/banner-tablets.png',
+];
+
+export const BannerCarousel = () => {
+  const [index, setIndex] = useState(0);
+
+  const prev = () => {
+    setIndex(curr => (curr === 0 ? banners.length - 1 : curr - 1));
+  };
+
+  const next = () => {
+    setIndex(curr => (curr === banners.length - 1 ? 0 : curr + 1));
+  };
+
+  return (
+    <div className={styles.carousel}>
+      <button data-cy="carousel-prev" onClick={prev}>
+        ‹
+      </button>
+
+      <img
+        src={banners[index]}
+        alt="carousel banner"
+        className={styles.carousel__img}
+      />
+
+      <button data-cy="carousel-next" onClick={next}>
+        ›
+      </button>
+    </div>
+  );
+};
+
+export default BannerCarousel;
diff --git a/src/components/BannerCarousel/index.ts b/src/components/BannerCarousel/index.ts
@@ -0,0 +1 @@
+export { default as BannerCarousel } from './BannerCarousel';
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,42 @@
+@use '../../styles/_mixins' as mixins;
+
+@use '../../styles/variables' as vars;
+
+.breadcrumbs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 24px 0 0;
+
+  &_link {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-family: vars.$font-primary;
+    font-size: 12px;
+    font-weight: 600;
+    color: vars.$secondary-color;
+
+    @include mixins.tablet {
+      font-size: 10px;
+    }
+
+    @include mixins.mobile {
+      font-size: 8px;
+    }
+  }
+
+  &_arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,50 @@
+// Breadcrumbs.tsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+import HomeIcon from '/img/Home.png';
+import ChevronIcon from '/img/ChevronRight.png';
+import styles from './Breadcrumbs.module.scss';
+
+interface BreadcrumbsProps {
+  category?: string;
+  productName?: string;
+  from: string;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  category,
+  productName,
+  from,
+}) => {
+  const categoryLabel = category
+    ? category.charAt(0).toUpperCase() + category.slice(1)
+    : '';
+
+  return (
+    <div className={styles.breadcrumbs}>
+      <Link to="/" className={styles.breadcrumbs_link}>
+        <img src={HomeIcon} alt="Home" />
+      </Link>
+
+      {category && (
+        <>
+          <span className={styles.breadcrumbs_arrow}>
+            <img src={ChevronIcon} alt="Chevron" />
+          </span>
+          <Link to={from} className={styles.breadcrumbs_link}>
+            {categoryLabel}
+          </Link>
+        </>
+      )}
+
+      {productName && (
+        <>
+          <span className={styles.breadcrumbs_arrow}>
+            <img src={ChevronIcon} alt="Chevron" />
+          </span>
+          <span className={styles.breadcrumbs_link}>{productName}</span>
+        </>
+      )}
+    </div>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		ESLINT_NO_DEV_ERRORS=true
		VITE_API_BASE=/react_phone-catalog/api/
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,3 +13,5 @@ raw_reports @@
     reports
     cypress/screenshots
     cypress/videos
+    .env
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as BannerCarousel } from './BannerCarousel';