+
+ );
+}
+
+export default Counter;
diff --git a/week1/prep-exercises/1-counter/1-counter/src/index.css b/week1/prep-exercises/1-counter/1-counter/src/index.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/week1/prep-exercises/1-counter/1-counter/src/main.tsx b/week1/prep-exercises/1-counter/1-counter/src/main.tsx
new file mode 100644
index 0000000000..db032b748c
--- /dev/null
+++ b/week1/prep-exercises/1-counter/1-counter/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ );
+}
+
+export default App;
diff --git a/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/assets/react.svg b/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/assets/react.svg
new file mode 100644
index 0000000000..6c87de9bb3
--- /dev/null
+++ b/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/components/Hobby.tsx b/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/components/Hobby.tsx
new file mode 100644
index 0000000000..552fa9f1c3
--- /dev/null
+++ b/week1/prep-exercises/possible-qa-exercises/1-extreme-hobbies/extreme-hobbies/src/components/Hobby.tsx
@@ -0,0 +1,9 @@
+type HobbyProps = {
+ hobby: string;
+};
+
+function Hobby({ hobby }: HobbyProps) {
+ return My Hobbies
+-
+ {hobbies.map((item, index) => (
+
+
+ );
+}
+
+export default App;
diff --git a/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/assets/exercise2.png b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/assets/exercise2.png
new file mode 100644
index 0000000000..8a2fc2d8ad
Binary files /dev/null and b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/assets/exercise2.png differ
diff --git a/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/components/Guarantee.tsx b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/components/Guarantee.tsx
new file mode 100644
index 0000000000..81820dfb83
--- /dev/null
+++ b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/components/Guarantee.tsx
@@ -0,0 +1,18 @@
+
+type GuaranteeProps = {
+ img: string;
+ title: string;
+ description: string;
+};
+
+function Guarantee({ img, title, description }: GuaranteeProps) {
+ return (
+ SORRY CUSTOMER DIDN'T PAY FOR EXTRA STYLES
+ +Our Guarantees
+
+
+
+ 
+
+ );
+}
+
+export default Guarantee;
diff --git a/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/index.css b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/index.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/main.tsx b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/main.tsx
new file mode 100644
index 0000000000..bef5202a32
--- /dev/null
+++ b/week1/prep-exercises/possible-qa-exercises/2-perfect-customer-service/vite-project/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+ {title}
+{description}
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/week2/prep-exercises/assignment/src/assets/react.svg b/week2/prep-exercises/assignment/src/assets/react.svg
new file mode 100644
index 0000000000..6c87de9bb3
--- /dev/null
+++ b/week2/prep-exercises/assignment/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week2/prep-exercises/assignment/src/components/Person.jsx b/week2/prep-exercises/assignment/src/components/Person.jsx
new file mode 100644
index 0000000000..89038086d9
--- /dev/null
+++ b/week2/prep-exercises/assignment/src/components/Person.jsx
@@ -0,0 +1,18 @@
+const Person = ({ person }) => {
+ if (!person) {
+ return Loading...
; // Добавим для видимости
+ }
+
+ return (
+
+
+ );
+};
+
+export default Person;
\ No newline at end of file
diff --git a/week2/prep-exercises/assignment/src/components/PersonController.jsx b/week2/prep-exercises/assignment/src/components/PersonController.jsx
new file mode 100644
index 0000000000..95f037df21
--- /dev/null
+++ b/week2/prep-exercises/assignment/src/components/PersonController.jsx
@@ -0,0 +1,35 @@
+// 1. Импортируем React и хуки
+import React, { useState, useEffect } from 'react';
+import Person from './Person';
+
+const PersonController = () => {
+ const [person, setPerson] = useState(null);
+
+ // getPerson на уровне компонента
+ const getPerson = async () => {
+ try {
+ const response = await fetch('https://randomuser.me/api?results=1');
+ const data = await response.json();
+
+ const formattedPerson = {
+ firstName: data.results[0].name.first,
+ lastName: data.results[0].name.last,
+ email: data.results[0].email
+ };
+
+ setPerson(formattedPerson);
+ } catch (error) {
+ console.error('Error fetching person:', error);
+ }
+ };
+
+ // useEffect вызывает getPerson один раз
+ useEffect(() => {
+ getPerson();
+ }, []); // ← НЕТ комментария ESLint, пока не будет ошибки
+
+ return Person Details
+-
+
- First name: {person.firstName} +
- Last name: {person.lastName} +
- Email: {person.email} +
+
+ );
+}
+
+export default App;
diff --git a/week3/prep-exercises/1-check-screen-size/src/assets/react.svg b/week3/prep-exercises/1-check-screen-size/src/assets/react.svg
new file mode 100644
index 0000000000..6c87de9bb3
--- /dev/null
+++ b/week3/prep-exercises/1-check-screen-size/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week3/prep-exercises/1-check-screen-size/src/avatars/avatarData.ts b/week3/prep-exercises/1-check-screen-size/src/avatars/avatarData.ts
new file mode 100644
index 0000000000..49b65951ef
--- /dev/null
+++ b/week3/prep-exercises/1-check-screen-size/src/avatars/avatarData.ts
@@ -0,0 +1,13 @@
+export const hats = ['beanie', 'none', 'none2', 'none3', 'none4', 'none5', 'turban'] as const;
+export const hatColors = ['red', 'blue', 'green', 'black'] as const;
+
+export const accessories = ['none', 'shades', 'roundGlasses', 'tinyGlasses'] as const;
+export const clothings = ['naked', 'shirt', 'dressShirt', 'vneck', 'tankTop', 'dress'] as const;
+export const clothingColors = ['red', 'blue', 'green', 'black'] as const;
+
+export const graphics = ['none', 'react', 'vue', 'redwood', 'gatsby', 'graphQL'] as const;
+
+// функция для случайного выбора значения из массива
+export function getRandomAvatars by screen size
+ {isBig &&
+
+
+
+
+ {/* button for all products */}
+
+
+ {/* API categories */}
+ {categories.map((category) => (
+
+ ))}
+
+ );
+}
+
+export default Categories;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/components/HeartButton.css b/week3/project/ecommerce/src/components/HeartButton.css
new file mode 100644
index 0000000000..535a7dc0bf
--- /dev/null
+++ b/week3/project/ecommerce/src/components/HeartButton.css
@@ -0,0 +1,31 @@
+/* src/components/HeartButton.css */
+.heart-button {
+ background: white;
+ border: none;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+ z-index: 10;
+ padding: 0;
+}
+
+.heart-button--absolute {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+.heart-button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.heart-button__icon {
+ width: 20px;
+ height: 20px;
+}
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/components/HeartButton.tsx b/week3/project/ecommerce/src/components/HeartButton.tsx
new file mode 100644
index 0000000000..1ecac744e8
--- /dev/null
+++ b/week3/project/ecommerce/src/components/HeartButton.tsx
@@ -0,0 +1,39 @@
+// src/components/HeartButton.tsx
+import { useFavourites } from '../context/FavouritesContext.tsx';
+import './HeartButton.css';
+
+interface HeartButtonProps {
+ productId: number;
+ isAbsolute?: boolean;
+}
+
+function HeartButton({ productId, isAbsolute = true }: HeartButtonProps) {
+ const { toggleFavourite, isFavourite } = useFavourites();
+ const favourite = isFavourite(productId);
+
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ toggleFavourite(productId);
+ };
+
+ // Определяем классы в зависимости от пропсов === classes based on props
+ const buttonClassNames = `heart-button ${isAbsolute ? 'heart-button--absolute' : 'heart-button--static'}`;
+
+ return (
+
+ );
+}
+
+export default HeartButton;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/components/Navbar.css b/week3/project/ecommerce/src/components/Navbar.css
new file mode 100644
index 0000000000..f2573a3511
--- /dev/null
+++ b/week3/project/ecommerce/src/components/Navbar.css
@@ -0,0 +1,40 @@
+/* src/components/Navbar.css */
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ background-color: #f8f9fa;
+ border-bottom: 1px solid #dee2e6;
+}
+
+.nav-left {
+ font-size: 24px;
+ font-weight: bold;
+ color: #213547;
+}
+
+.nav-right {
+ display: flex;
+ gap: 20px;
+}
+
+.nav-link {
+ text-decoration: none;
+ color: #6c757d;
+ font-size: 16px;
+ padding: 8px 16px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+ color: #495057;
+ background-color: #e9ecef;
+}
+
+.nav-link.active {
+ color: #213547;
+ font-weight: 600;
+ background-color: #e0e0e0;
+}
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/components/Navbar.tsx b/week3/project/ecommerce/src/components/Navbar.tsx
new file mode 100644
index 0000000000..0d7589f7b3
--- /dev/null
+++ b/week3/project/ecommerce/src/components/Navbar.tsx
@@ -0,0 +1,39 @@
+// src/components/Navbar.tsx
+import { NavLink, useLocation } from 'react-router-dom';
+import './Navbar.css';
+
+function Navbar() {
+ const location = useLocation();
+
+ // Определяем, какая страница активна === Determine active page
+ const getPageTitle = () => {
+ if (location.pathname === '/favourites') {
+ return 'Favourites';
+ }
+ return 'Products';
+ };
+
+ return (
+
+ );
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/components/ProductList.tsx b/week3/project/ecommerce/src/components/ProductList.tsx
new file mode 100644
index 0000000000..ecdac1f901
--- /dev/null
+++ b/week3/project/ecommerce/src/components/ProductList.tsx
@@ -0,0 +1,35 @@
+// src/components/ProductList.tsx
+import { Link } from 'react-router-dom';
+import HeartButton from './HeartButton';
+
+interface Product {
+ id: number;
+ title: string;
+ price: number;
+ image: string;
+}
+
+interface ProductsListProps {
+ products: Product[];
+}
+
+function ProductsList({ products }: ProductsListProps) {
+ return (
+
+ {products.map((product) => (
+
+ );
+}
+
+export default ProductsList;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/context/FavouritesContext.tsx b/week3/project/ecommerce/src/context/FavouritesContext.tsx
new file mode 100644
index 0000000000..913e096854
--- /dev/null
+++ b/week3/project/ecommerce/src/context/FavouritesContext.tsx
@@ -0,0 +1,44 @@
+import { createContext, useContext, useState, type ReactNode, useEffect } from 'react';
+
+interface FavouritesContextType {
+ favouriteIds: number[];
+ toggleFavourite: (id: number) => void;
+ isFavourite: (id: number) => boolean;
+}
+
+const FavouritesContext = createContext
+
+
+ ))}
+
+ 
+
+
+ {product.title}
+${product.price.toFixed(2)}
+Loading favourites...
;
+ }
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ return (
+
+
+ );
+}
+
+export default FavouritesPage;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/pages/HomePage.css b/week3/project/ecommerce/src/pages/HomePage.css
new file mode 100644
index 0000000000..f6f2338645
--- /dev/null
+++ b/week3/project/ecommerce/src/pages/HomePage.css
@@ -0,0 +1,29 @@
+/* src/pages/HomePage.css */
+.home-page {
+ padding: 20px;
+}
+
+.home-page-loading {
+ padding: 20px;
+ text-align: center;
+ color: #666;
+ font-size: 16px;
+}
+
+.home-page-error {
+ padding: 20px;
+ text-align: center;
+ color: #ff4757;
+ background: #ffeaea;
+ border-radius: 8px;
+ margin: 20px;
+ font-size: 14px;
+}
+
+.home-page-categories {
+ padding: 8px;
+}
+
+.home-page-products {
+ padding: 8px;
+}
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/pages/HomePage.tsx b/week3/project/ecommerce/src/pages/HomePage.tsx
new file mode 100644
index 0000000000..bcbb7b0f4a
--- /dev/null
+++ b/week3/project/ecommerce/src/pages/HomePage.tsx
@@ -0,0 +1,73 @@
+// src/pages/HomePage.tsx
+import { useState } from "react";
+import Categories from "../components/Categories";
+import ProductsList from "../components/ProductList";
+import useFetch from "../hooks/useFetch";
+import "./HomePage.css";
+
+interface Product {
+ id: number;
+ title: string;
+ price: number;
+ image: string;
+ category: string;
+}
+
+function HomePage() {
+ const [selectedCategory, setSelectedCategory] = useState+ Favourites ({favouriteIds.length}) +
+ {favouriteProducts.length > 0 ? ( ++ No favourites yet. Add some products from the Products page! +
+ )} +Loading products...
;
+ }
+
+ // Показываем ошибку, если есть === Show error if exists
+ if (error) {
+ return Error: {error}
;
+ }
+
+ return (
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/pages/ProductPage.css b/week3/project/ecommerce/src/pages/ProductPage.css
new file mode 100644
index 0000000000..a3d0370661
--- /dev/null
+++ b/week3/project/ecommerce/src/pages/ProductPage.css
@@ -0,0 +1,80 @@
+/* src/pages/ProductPage.css */
+.product-page {
+ padding: 20px;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.product-page-loading {
+ padding: 20px;
+ text-align: center;
+ color: #666;
+}
+
+.product-page-error {
+ padding: 20px;
+ text-align: center;
+ color: #ff4757;
+}
+
+.product-page-not-found {
+ padding: 20px;
+}
+
+.product-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #eee;
+}
+
+.product-title-section {
+ flex: 1;
+}
+
+.product-title {
+ margin: 0 0 8px 0;
+ font-size: 24px;
+ color: #213547;
+}
+
+.product-price {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #213547;
+}
+
+.heart-button-container {
+ margin-left: 20px;
+ margin-top: 25px;
+}
+
+.product-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.product-image {
+ max-width: 300px;
+ height: auto;
+ margin: 0 auto;
+ display: block;
+}
+
+.product-section {
+ margin-bottom: 16px;
+}
+
+.product-section h3 {
+ margin-bottom: 8px;
+ color: #213547;
+ font-size: 18px;
+}
+
+.product-section p {
+ color: #555;
+ line-height: 1.5;
+}
diff --git a/week3/project/ecommerce/src/pages/ProductPage.tsx b/week3/project/ecommerce/src/pages/ProductPage.tsx
new file mode 100644
index 0000000000..9b6dc74b05
--- /dev/null
+++ b/week3/project/ecommerce/src/pages/ProductPage.tsx
@@ -0,0 +1,87 @@
+// src/pages/ProductPage.tsx
+import { useParams } from 'react-router-dom';
+import HeartButton from '../components/HeartButton';
+import useFetch from '../hooks/useFetch';
+import './ProductPage.css';
+
+interface ProductDetails {
+ id: number;
+ title: string;
+ price: number;
+ description: string;
+ category: string;
+ image: string;
+ rating: {
+ rate: number;
+ count: number;
+ };
+}
+
+function ProductPage() {
+ const { id } = useParams();
+
+ // Используем useFetch хук для загрузки товара === Use useFetch hook to load product
+ const {
+ data: product,
+ loading,
+ error
+ } = useFetch
+ {/* Категории рендерим только если они загрузились === Render categories only if they are loaded */}
+ {categories && (
+
+
+
+ {/* Товары рендерим только если они загрузились === Render products only if they are loaded */}
+ {products &&
+ Loading product details...
;
+ }
+
+ // Показываем ошибку, если есть === Show error if exists
+ if (error) {
+ return Error: {error}
;
+ }
+
+ // Если товар не найден === If product not found
+ if (!product) {
+ return Product not found
;
+ }
+
+ return (
+
+ {/* Заголовок и цена === Show title and price */}
+
+ );
+}
+
+export default ProductPage;
\ No newline at end of file
diff --git a/week3/project/ecommerce/src/utils/categories.ts b/week3/project/ecommerce/src/utils/categories.ts
new file mode 100644
index 0000000000..8541c80221
--- /dev/null
+++ b/week3/project/ecommerce/src/utils/categories.ts
@@ -0,0 +1,2 @@
+export const normalizeCategory = (value: string): string =>
+ value.toLowerCase().replace("fake:", "").trim();
\ No newline at end of file
diff --git a/week3/project/ecommerce/tsconfig.app.json b/week3/project/ecommerce/tsconfig.app.json
new file mode 100644
index 0000000000..a9b5a59ca6
--- /dev/null
+++ b/week3/project/ecommerce/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week3/project/ecommerce/tsconfig.json b/week3/project/ecommerce/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/week3/project/ecommerce/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week3/project/ecommerce/tsconfig.node.json b/week3/project/ecommerce/tsconfig.node.json
new file mode 100644
index 0000000000..8a67f62f4c
--- /dev/null
+++ b/week3/project/ecommerce/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week3/project/ecommerce/vite.config.ts b/week3/project/ecommerce/vite.config.ts
new file mode 100644
index 0000000000..8b0f57b91a
--- /dev/null
+++ b/week3/project/ecommerce/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
+
+
+
+
+
+ {product.title}
+${product.price.toFixed(2)}
+
+
+
+
+
+
+
+
+
+ Description
+{product.description}
+
+
+
+ Category
+{product.category}
+
+
+ Rating
+{product.rating.rate} / 5 ({product.rating.count} reviews)
+