mate-academy · maximtsyrulnyk · Mar 8, 2026 · Mar 9, 2026 · Mar 9, 2026 · Mar 10, 2026
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -90,7 +90,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': ['error'],
-    '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/indent': "off",
     '@typescript-eslint/ban-types': ['error', {
         extendDefaults: true,
         types: {

diff --git a/.github/deploy.yml b/.github/deploy.yml
@@ -0,0 +1,23 @@
+name: Github Page Deploy Workflow
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - run: npm ci
+      - run: npm run build
+      - name: Deploy
+        uses: crazy-max/ghaction-github-pages@v1
+        with:
+          target_branch: gh-pages
+          build_dir: build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
@@ -141,3 +141,4 @@ Show `input:search` in the header when a page contains a `ProductList` to search
 1. Save the `Search` value in the URL as a `?query=value` to apply on page load.
 2. Show `There are no phones/tablets/accessories/products matching the query` instead of `ProductList` when needed.
 3. Add `debounce` to the search field.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://maximtsyrulnyk.github.io/react_phone-catalog/ ) and add it to the PR description.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <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/png" href="/favicon.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",
@@ -36,6 +36,7 @@
     "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",
@@ -79,5 +80,20 @@
       "_comment": "Add `cypressComponents: true` to enable component tests",
       "cypress": true
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.tsx": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   }
 }
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/img/banner-1.jpg b/public/img/banner-1.jpg
diff --git a/public/img/banner-2.jpg b/public/img/banner-2.jpg
diff --git a/public/img/banner-3.jpg b/public/img/banner-3.jpg
diff --git a/public/img/banner-4.jpg b/public/img/banner-4.jpg
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,19 @@
-// not empty
+@import './styles/reset';
+@import './styles/fonts';
+@import './styles/variables';
+@import './styles/mixins';
+@import './styles/typography';
+
+
+.App {
+  display: flex;
+  flex-direction: column;
+}
+
+html,
+body {
+  background-color: var(--page-bg);
+  color: var(--text-main);
+
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,71 @@
+import { HashRouter, Route, Routes } from 'react-router-dom';
 import './App.scss';
+import { HomePage } from './modules/HomePage';
+import { NotFoundPage } from './modules/NotFoundPage';
+import { Layout } from './components/Layout';
+import { ThemeProvider } from './context/ThemeContext';
+import { CartPage } from './modules/CartPage';
+import { CartProvider } from './context/CartContext';
+import { FavouritesProvider } from './context/FavoritesContext';
+import { FavouritesPage } from './modules/FavouritesPage';
+import { CategoryPage } from './modules/CategoryPage';
+import { CategoriesType, PathType } from './types/Types';
+import { ProductDetailsPage } from './modules/ProductDetailsPage';
 
 export const App = () => (
   <div className="App">
-    <h1>Product Catalog</h1>
+    <ThemeProvider>
+      <CartProvider>
+        <FavouritesProvider>
+          <HashRouter>
+            <Routes>
+              <Route path={PathType.HOME} element={<Layout />}>
+                <Route index element={<HomePage />} />
+
+                <Route
+                  path={PathType.PHONES}
+                  element={
+                    <CategoryPage
+                      title={'Mobile phones'}
+                      category={CategoriesType.PHONES}
+                    />
+                  }
+                ></Route>
+                <Route
+                  path={PathType.TABLETS}
+                  element={
+                    <CategoryPage
+                      title={'Tablets'}
+                      category={CategoriesType.TABLETS}
+                    />
+                  }
+                ></Route>
+                <Route
+                  path={PathType.ACCESSORIES}
+                  element={
+                    <CategoryPage
+                      title={'Accessories'}
+                      category={CategoriesType.ACCESSORIES}
+                    />
+                  }
+                ></Route>
+
+                <Route
+                  path={PathType.FAVOURITES}
+                  element={<FavouritesPage />}
+                ></Route>
+                <Route path={PathType.CART} element={<CartPage />}></Route>
+                <Route
+                  path="/product/:productId"
+                  element={<ProductDetailsPage />}
+                />
+
+                <Route path="*" element={<NotFoundPage />}></Route>
+              </Route>
+            </Routes>
+          </HashRouter>
+        </FavouritesProvider>
+      </CartProvider>
+    </ThemeProvider>
   </div>
 );
diff --git a/src/api/fetchClient.ts b/src/api/fetchClient.ts
@@ -0,0 +1,11 @@
+const BASE_URL = 'api';
+
+export async function getData<TData>(url: string): Promise<TData> {
+  const response = await fetch(`${BASE_URL}${url}`);
+
+  if (!response.ok) {
+    throw new Error(`Error fetching data: ${response.statusText}`);
+  }
+
+  return response.json();
+}
diff --git a/src/api/products.ts b/src/api/products.ts
@@ -0,0 +1,67 @@
+import {
+  CatalogProducts,
+  CategoriesType,
+  PathType,
+  Product,
+} from '../types/Types';
+import { getData } from './fetchClient';
+
+export const getProducts = () => {
+  return getData<CatalogProducts[]>(`${PathType.PRODUCTS}.json`);
+};
+
+export const getPhones = async () => {
+  const products = await getProducts();
+
+  return products.filter(product => product.category === CategoriesType.PHONES);
+};
+
+export const getTablets = async () => {
+  const products = await getProducts();
+
+  return products.filter(
+    product => product.category === CategoriesType.TABLETS,
+  );
+};
+
+export const getAccessories = async () => {
+  const products = await getProducts();
+
+  return products.filter(
+    product => product.category === CategoriesType.ACCESSORIES,
+  );
+};
+
+export const getProductById = async (category: string, itemId: string) => {
+  let path = '';
+
+  switch (category) {
+    case CategoriesType.PHONES:
+      path = PathType.PHONES;
+      break;
+    case CategoriesType.TABLETS:
+      path = PathType.TABLETS;
+      break;
+    case CategoriesType.ACCESSORIES:
+      path = PathType.ACCESSORIES;
+      break;
+    default:
+      throw new Error('Unknown category');
+  }
+
+  const products = await getData<Product[]>(`${path}.json`);
+
+  const product = products.find(item => item.id === itemId);
+
+  if (!product) {
+    throw new Error('Product not found');
+  }
+
+  return product;
+};
+
+export const getSuggestedProducts = async () => {
+  const products = await getProducts();
+
+  return [...products].sort(() => Math.random() - 0.5).slice(0, 12);
+};
diff --git a/src/assets/logo/logo-d.svg b/src/assets/logo/logo-d.svg
diff --git a/src/assets/logo/logo-l.svg b/src/assets/logo/logo-l.svg
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,63 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+@import '../../styles/typography';
+
+.breadcrumbs {
+  margin-top: 24px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  grid-column: 1 / -1;
+
+  @include respond-to('tablet') {
+    margin-bottom: 40px;
+  }
+
+  &__home {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--text-main);
+
+    @include hover-transition(color);
+
+    @include hover {
+      color: var(--icon-color);
+    }
+  }
+
+  &__link {
+    @include small-text;
+
+    font-weight: 600;
+    color: var(--text-main);
+    text-decoration: none;
+
+    @include hover-transition(color);
+
+    @include hover {
+      color: var(--text-main);
+    }
+
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  &__separator {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--icon-color);
+  }
+
+  &__link,
+  &__current {
+    @include small-text;
+
+    font-weight: 600;
+    color: var(--text-secondary);
+    line-height: 1;
+  }
+}