Initial commit

3aa42b7d · Nurasyl · 3aa42b7d · 3aa42b7d · 3aa42b7d · 3aa42b7d
Commit 3aa42b7d authored Jul 25, 2024 by Nurasyl
64 changed files
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    // project: './tsconfig.json',
+  },
+  plugins: ['react-refresh', 'react', '@typescript-eslint'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/react-in-jsx-scope': 0,
+  },
+};
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
+npm run lint
\ No newline at end of file
--- a/.husky/pre-push
+++ b/.husky/pre-push
+npm run lint
\ No newline at end of file
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    // project: "./tsconfig.json",
+  },
+  plugins: ['react-refresh', 'react', '@typescript-eslint'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/react-in-jsx-scope': 0,
+  },
+};
--- a/client/.gitignore
+++ b/client/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/client/.prettierignore
+++ b/client/.prettierignore
+node_modules
+build
+.next
+dist
\ No newline at end of file
--- a/client/.prettierrc.cjs
+++ b/client/.prettierrc.cjs
+module.exports = {
+  tabWidth: 2,
+  singleQuote: true,
+  trailingComma: "es5",
+  printWidth: 100,
+  useTabs: false,
+};
--- a/client/README.md
+++ b/client/README.md
+# Eslint_Prettier_VScode
--- a/client/index.html
+++ b/client/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint-fix": "eslint --fix 'src/**/*.{js,ts,tsx}'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.12",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
+    "@reduxjs/toolkit": "^2.1.0",
+    "axios": "^1.6.7",
+    "path": "^0.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.2",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
--- a/client/public/vite.svg
+++ b/client/public/vite.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
--- a/client/src/App.css
+++ b/client/src/App.css
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
+import { Container, CssBaseline } from '@mui/material';
+import { Route, Routes } from 'react-router-dom';
+import { AppToolbar } from './components/UI/AppToolbar';
+import { Products } from './containers/Products';
+import { NewProductForm } from './containers/NewProductForm';
+function App() {
+  return (
+    <>
+      <CssBaseline />
+      <header>
+        <AppToolbar />
+      </header>
+      <main>
+        <Container maxWidth="xl" sx={{ mt: 10 }}>
+          <Routes>
+            <Route path="/" element={<Products />} />
+            <Route path="/products/new" element={<NewProductForm />} />
+          </Routes>
+        </Container>
+      </main>
+    </>
+  );
+}
+export default App;
--- a/client/src/assets/react.svg
+++ b/client/src/assets/react.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
--- a/client/src/components/ProductForm.tsx
+++ b/client/src/components/ProductForm.tsx
+import { IProduct } from "@/containers/Products";
+import { Box, Button, Grid, TextField } from "@mui/material";
+import { ChangeEvent, FormEvent, useState } from "react";
+import { FileInput } from "./UI/Form/FileInput";
+interface Props {
+  onProductFormSubmit: (product: Omit<FormData, "id">) => Promise<void>
+}
+export function ProductForm({onProductFormSubmit}: Props) {
+  const [product, setProduct] = useState<Omit<IProduct, "id">>({
+    description:"",
+    price:0,
+    title:"",
+    image:""
+  });
+  const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData: FormData = new FormData();
+    Object.entries(product).forEach(([key, value]) => {
+      if (typeof value === "object") {
+        formData.append(key, value);
+      } else {
+        formData.append(key, `${value}`);
+      }
+    });
+    onProductFormSubmit(formData);
+  }
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const {name, value} = e.target;
+    setProduct((prevProduct) => {
+      return {...prevProduct, [name]: value}
+    });
+  }
+  const onChangeFile = (e: ChangeEvent<HTMLInputElement>) => {
+      if(e?.target?.files?.[0]) {
+        const name = e.target.name
+        const file = e.target.files[0]
+        setProduct(prevState => ({...prevState, [name]: file}))
+      }
+  }
+  return <Box 
+      component={"form"} 
+      autoComplete="off" 
+      onSubmit={submitFormHandler}
+      paddingY={2}
+    >
+      <Grid container direction="column" spacing={2}>
+        <Grid item xs>
+          <TextField 
+            fullWidth 
+            variant="outlined" 
+            id="title" 
+            name="title" 
+            label="Title"
+            value={product.title}
+            onChange={inputChangeHandler}
+          />
+        </Grid>
+        <Grid item xs>
+          <TextField 
+            fullWidth 
+            variant="outlined" 
+            id="price" 
+            name="price" 
+            label="Price"
+            value={product.price}
+            onChange={inputChangeHandler}
+          />
+        </Grid>
+        <Grid item xs>
+          <TextField 
+            fullWidth 
+            variant="outlined" 
+            id="description" 
+            name="description" 
+            label="Description"
+            value={product.description}
+            onChange={inputChangeHandler}
+          />
+        </Grid>
+        <Grid item xs>
+          <FileInput
+            onChange={onChangeFile}
+            name="image"
+            label="image"
+          />
+        </Grid>
+        <Grid item xs>
+          <Button type="submit" color="primary" variant="contained">
+            Create
+          </Button>
+        </Grid>
+      </Grid>
+    </Box>;
+}
--- a/client/src/components/UI/AppToolbar.tsx
+++ b/client/src/components/UI/AppToolbar.tsx
+import { AppBar, Toolbar, Typography, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+const StyledLink = styled(Link)(() => ({
+  color: 'inherit',
+  textDecoration: 'none',
+  ['&:hover']: { color: 'inherit' },
+}));
+export function AppToolbar() {
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h6" component={StyledLink} to={'/'}>
+            Computer parts shop
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </>
+  );
+}
--- a/client/src/components/UI/Form/FileInput.tsx
+++ b/client/src/components/UI/Form/FileInput.tsx
+import { Button, Grid, TextField, styled } from "@mui/material";
+import { ChangeEvent, useRef, useState } from "react";
+interface Props {
+ name: string;
+ label: string;
+ onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+const HiddenInputFile = styled("input")({display: 'none'});
+export function FileInput({name, label, onChange}: Props) {
+ const inputRef = useRef<HTMLInputElement>(null);
+ const [fileName, setFileName] = useState("");
+ const activeInput = () => {
+   if (inputRef.current) {
+     inputRef.current.click();
+   }
+ }
+ const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+   if (e?.target?.files?.[0]) {
+     setFileName(e.target.files[0].name);
+   } else {
+     setFileName("");
+   }
+   onChange(e);
+ }
+ return <>
+   <HiddenInputFile
+     type="file"
+     name={name}
+     onChange={onFileChange}
+     ref={inputRef}
+   />
+   <Grid container direction={"row"} spacing={2} alignItems={"center"}>
+     <Grid item xs>
+       <TextField
+         variant="outlined"
+         fullWidth
+         label={label}
+         value={fileName}
+         disabled
+         onClick={activeInput}
+       />
+     </Grid>
+     <Grid item>
+       <Button variant="contained" onClick={activeInput}>Browse</Button>
+     </Grid>
+   </Grid> 
+ </>
+}
\ No newline at end of file
--- a/client/src/containers/NewProductForm.tsx
+++ b/client/src/containers/NewProductForm.tsx
+import { ProductForm } from "@/components/ProductForm";
+import { createProduct } from "@/features/productsSlice";
+import { useAppDispatch } from "@/store/hook";
+import { Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+export function NewProductForm() {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const onProductFormSubmit = async (product: Omit<FormData, "id">) => {
+    await dispatch(createProduct(product));
+    navigate("/");
+  }
+  return <>
+    <Typography variant="h4">New product</Typography>
+    <ProductForm onProductFormSubmit={onProductFormSubmit}/>
+  </>
+}
\ No newline at end of file
--- a/client/src/containers/ProductItem.tsx
+++ b/client/src/containers/ProductItem.tsx
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Grid,
+  IconButton,
+  Typography,
+} from '@mui/material';
+import { IProduct } from './Products';
+import { ArrowForward } from '@mui/icons-material';
+import { Link } from 'react-router-dom';
+interface Props {
+  product: IProduct;
+}
+const apiUrl = 'http://localhost:8000'
+export function ProductItem({ product }: Props) {
+  const { title, price, id, description, image } = product;
+  let cardImage = `${apiUrl}/uploads/unnamed.png`
+  if(image && image !== '') {
+    cardImage = `${apiUrl}/uploads/${image}`
+  }
+  return (
+    <Grid item xs={12} sm={12} md={6} lg={4}>
+      <Card sx={{ minWidth: 275 }}>
+        <CardHeader title={title} />
+        <CardMedia
+         image={cardImage}
+         title={title}
+         sx={{height: 200}}
+       >
+       </CardMedia>
+        <CardContent>
+          <Typography variant="body2">{description}</Typography>
+          <strong style={{ marginLeft: '10px' }}>Price: {price} KZT</strong>
+        </CardContent>
+        <CardActions>
+          <IconButton component={Link} to={`/products/${id}`}>
+            <ArrowForward />
+          </IconButton>
+        </CardActions>
+      </Card>
+    </Grid>
+  );
+}
--- a/client/src/containers/Products.tsx
+++ b/client/src/containers/Products.tsx
+import { fetchProducts } from '@/features/productsSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hook';
+import { Button, Grid, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { ProductItem } from './ProductItem';
+export function Products() {
+  const dispatch = useAppDispatch();
+  const { products } = useAppSelector((state) => state.products);
+  useEffect(() => {
+    dispatch(fetchProducts());
+  }, [dispatch]);
+  return (
+    <Grid container spacing={2}>
+      <Grid item container direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+        <Grid item>
+          <Typography variant="h4">Products</Typography>
+        </Grid>
+      </Grid>
+      <Grid item container direction={'row'} spacing={1}>
+        {products.map((product) => (
+          <ProductItem key={product.id} product={product} />
+        ))}
+      </Grid>
+      <Grid item>
+        <Button color="primary" component={Link} to={'/products/new'}>
+          Add product
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
+export interface IProduct {
+  id: string;
+  title: string;
+  description: string;
+  price: number;
+  image: string
+}
--- a/client/src/containers/Products2.tsx
+++ b/client/src/containers/Products2.tsx
+import { Link } from 'react-router-dom';
+import { Typography, Grid, Button } from '@mui/material';
+export function Products() {
+  return (
+    <Grid container direction="column" spacing={2}>
+      <Grid item container direction="row" justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <Typography variant="h4">Products</Typography>
+        </Grid>
+        <Grid item>
+          <Button color="primary" component={Link} to={'/products/new'}>
+            Add product
+          </Button>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}
--- a/client/src/features/productsSlice.ts
+++ b/client/src/features/productsSlice.ts
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { IProduct } from "@/containers/Products";
+import { axiosApiClient } from "../helpers/axiosApiClient";
+interface State {
+  products: IProduct[];
+  error: Error | null;
+  loading: boolean;
+}
+const initialState: State = {
+  products: [],
+  error: null,
+  loading: false
+};
+export const fetchProducts = createAsyncThunk('fetch/products', async () => {
+  return await axiosApiClient.get<IProduct[]>('/products').then(res => res.data);
+});
+export const createProduct = createAsyncThunk('create/product', 
+  async (payload: Omit<FormData, "id">) => {
+    return axiosApiClient.post<IProduct>("/products/create", payload)
+      .then(res => res.data);
+});
+const productsSlice = createSlice(
+  {
+    name: 'products',
+    initialState,
+    reducers: {},
+    extraReducers(builder) {
+      builder.addCase(fetchProducts.fulfilled, (state, action) => {
+        state.products = action.payload;
+        state.loading = false;
+      }).addCase(fetchProducts.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error as Error;
+      })
+      .addCase(fetchProducts.pending, (state) => {
+        state.loading = true;
+      })
+    },
+  }
+)
+export default productsSlice.reducer;
--- a/client/src/helpers/axiosApiClient.ts
+++ b/client/src/helpers/axiosApiClient.ts
+import axios from "axios";
+export const axiosApiClient = axios.create({
+  baseURL: "http://localhost:8000"
+});
\ No newline at end of file
--- a/client/src/index.css
+++ b/client/src/index.css
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.tsx';
+import store from './store';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </Provider>
+  </React.StrictMode>
+);
--- a/client/src/store/hook.ts
+++ b/client/src/store/hook.ts
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import { AppDispatch, RootState } from '.';
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
\ No newline at end of file
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
+import { configureStore } from '@reduxjs/toolkit';
+import productsReducer from '../features/productsSlice.ts';
+const store = configureStore({
+  reducer: {
+    products: productsReducer,
+  }
+})
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export default store;
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@components/*": ["./src/components/*"],
+      "@features/*": ["./src/features/*"],
+    }
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
\ No newline at end of file
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from "path";
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@features': path.resolve(__dirname, './src/features'),
+      '@components': path.resolve(__dirname, './src/components'),
+    },
+  },
+})
--- a/package-lock.json
+++ b/package-lock.json
+{
+  "name": "webinar_42",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "webinar_42",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "ultra-runner": "^3.10.5"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ansi-split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-split/-/ansi-split-1.0.1.tgz",
+      "integrity": "sha512-RRxQym4DFtDNmHIkW6aeFVvrXURb11lGAEPXNiryjCe8bK8RsANjzJ0M2aGOkvBYwP4Bl/xZ8ijtr6D3j1x/eg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micro-memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/micro-memoize/-/micro-memoize-4.1.2.tgz",
+      "integrity": "sha512-+HzcV2H+rbSJzApgkj0NdTakkC+bnyeiUxgT6/m7mjcz1CmM22KYFKp+EVj1sWe4UYcnriJr5uqHQD/gMHLD+g==",
+      "dev": true
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pid-cwd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pid-cwd/-/pid-cwd-1.2.0.tgz",
+      "integrity": "sha512-8QQzIdBmy4bd2l1NKWON1X8flO5TQQRzU2uRDua/XaxSC0iJ+rgbDrlX76t0W3DaJ7OevTYpftyvQ6oMe3hclQ==",
+      "dev": true
+    },
+    "node_modules/ps-list": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/ps-list/-/ps-list-7.2.0.tgz",
+      "integrity": "sha512-v4Bl6I3f2kJfr5o80ShABNHAokIgY+wFDTQfE+X3zWYgSGQOCBeYptLZUpoOALBqO5EawmDN/tjTldJesd0ujQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shellwords-ts": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shellwords-ts/-/shellwords-ts-3.0.1.tgz",
+      "integrity": "sha512-GabK4ApLMqHFRGlpgNqg8dmtHTnYHt0WUUJkIeMd3QaDrUUBEDXHSSNi3I0PzMimg8W+I0EN4TshQxsnHv1cwg==",
+      "dev": true
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
+      "dev": true
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ultra-runner": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/ultra-runner/-/ultra-runner-3.10.5.tgz",
+      "integrity": "sha512-0U2OPII7sbvtbu9rhDlUUkP4Au/DPz2Tzbnawd/XwDuUruDqd+t/Bmel3cLJxl3yMLHf0OY0TMcIx9zzxdlAZw==",
+      "dev": true,
+      "dependencies": {
+        "ansi-split": "^1.0.1",
+        "chalk": "^4.1.0",
+        "cross-spawn": "^7.0.3",
+        "fast-glob": "^3.2.5",
+        "globrex": "^0.1.2",
+        "ignore": "^5.1.8",
+        "json5": "^2.2.0",
+        "micro-memoize": "^4.0.9",
+        "npm-run-path": "4.0.1",
+        "pid-cwd": "^1.2.0",
+        "ps-list": "^7.2.0",
+        "shellwords-ts": "^3.0.0",
+        "string-width": "^4.2.0",
+        "tslib": "2.1.0",
+        "type-fest": "^0.21.2",
+        "wrap-ansi": "^7.0.0",
+        "yamljs": "^0.3.0",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "ultra": "bin/ultra.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yamljs": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/yamljs/-/yamljs-0.3.0.tgz",
+      "integrity": "sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "glob": "^7.0.5"
+      },
+      "bin": {
+        "json2yaml": "bin/json2yaml",
+        "yaml2json": "bin/yaml2json"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "webinar_42",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "ultra -r dev"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "ultra-runner": "^3.10.5"
+  }
+}
--- a/server/.eslintrc.js
+++ b/server/.eslintrc.js
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  env: {
+    es6: true,
+    node: true,
+  },
+  rules: {
+    'no-var': 'error',
+    semi: 'error',
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'no-multi-spaces': 'error',
+    'space-in-parens': 'error',
+    'no-multiple-empty-lines': 'error',
+    'prefer-const': 'error',
+  },
+};
--- a/server/.gitignore
+++ b/server/.gitignore
+.env
+.env.*
+node_modules
+dist
+build
+.idea
+.vscode
--- a/server/.prettierrc
+++ b/server/.prettierrc
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 150,
+  "tabWidth": 2
+}
--- a/server/data/products.json
+++ b/server/data/products.json
+[
+  {
+    "title": "Lorem ipsum",
+    "description": "Dolor si amet",
+    "price": 500,
+    "id": "0.9133269846292313"
+  },
+  {
+    "title": "Lorem ipsum 2",
+    "description": "Dolor si amet",
+    "price": 500,
+    "id": "0.09792516360811865"
+  },
+  {
+    "title": "Lorem ipsum 3",
+    "description": "Dolor si amet",
+    "price": 500,
+    "id": "0.5230269041392861"
+  },
+  {
+    "description": "Ideal for a zombie",
+    "price": "687645",
+    "title": "Griffiths-grr",
+    "id": "0.7259402088168749"
+  },
+  {
+    "description": "asdasd",
+    "price": "0222",
+    "title": "test",
+    "image": "",
+    "id": "0.30067479554039167"
+  },
+  {
+    "description": "ssss",
+    "price": "0333",
+    "title": "sss",
+    "image": "",
+    "id": "0.8912701822634759"
+  },
+  {
+    "description": "fffffffffff",
+    "price": "022222",
+    "title": "fffffffffff",
+    "image": "169fc2c0-e96f-4971-9cb6-480c6a39362e.jpeg",
+    "id": "0.2281329580756415"
+  },
+  {
+    "description": "aaaaaaaaaaaaaaa",
+    "price": "022",
+    "title": "aaaaaaaaaaaaaa",
+    "image": "e6d98dfa-d11a-4381-a4df-1cd5730b6afe.jpeg",
+    "id": "0.7119914504529552"
+  }
+]
\ No newline at end of file
--- a/server/fsDemo.ts
+++ b/server/fsDemo.ts
+import * as fs from 'fs';
+const fileName = 'test.txt';
+fs.writeFile(fileName, 'Hello world', (err) => {
+  if (err) {
+    console.log(err);
+  }
+  console.log('File was created');
+});
--- a/server/nodemon.json
+++ b/server/nodemon.json
+{
+  "watch": [ "src" ],
+  "ignore": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    ".git",
+    "node_modules"
+  ],
+  "ext": "ts",
+  "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/index.ts"
+}
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/multer": "^1.4.11",
+    "class-transformer": "^0.5.1",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "multer": "^1.4.5-lts.1",
+    "nanoid": "^3.3.6",
+    "reflect-metadata": "^0.2.1",
+    "save": "^2.9.0",
+    "save-dev": "^0.0.1-security",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.4.2",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "nodemon": "^3.0.1",
+    "prettier": "^3.0.0",
+    "tsconfig-paths": "^4.2.0"
+  }
+}
--- a/server/public/.gitkeep
+++ b/server/public/.gitkeep
--- a/server/public/uploads/169fc2c0-e96f-4971-9cb6-480c6a39362e.jpeg
+++ b/server/public/uploads/169fc2c0-e96f-4971-9cb6-480c6a39362e.jpeg
--- a/server/public/uploads/e6d98dfa-d11a-4381-a4df-1cd5730b6afe.jpeg
+++ b/server/public/uploads/e6d98dfa-d11a-4381-a4df-1cd5730b6afe.jpeg
--- a/server/public/uploads/unnamed.png
+++ b/server/public/uploads/unnamed.png
--- a/server/src/app.ts
+++ b/server/src/app.ts
+import express from 'express';
+import { Application, RequestHandler } from 'express';
+import { AppInit } from './interfaces/AppInit.interface';
+import { IRoute } from './interfaces/IRoute.interface';
+class App {
+  public app: Application;
+  public port: number;
+  constructor(appInit: AppInit) {
+    this.app = express();
+    this.port = appInit.port;
+    this.initAssets();
+    this.initMiddlewares(appInit.middlewares);
+    this.initRoutes(appInit.controllers);
+  }
+  private initMiddlewares(middlewares: RequestHandler[]) {
+    middlewares.forEach((middleware) => {
+      this.app.use(middleware);
+    });
+  }
+  private initRoutes(routes: IRoute[]) {
+    routes.forEach((route) => {
+      this.app.use(route.path, route.router);
+    });
+  }
+  private initAssets() {
+    this.app.use(express.json());
+    this.app.use(express.static('public'))
+  }
+  public listen() {
+    this.app.listen(this.port, () => {
+      console.log(`App listening  on the http://localhost:${this.port}`);
+    });
+  }
+}
+export default App;
--- a/server/src/config.ts
+++ b/server/src/config.ts
+import path from "path"
+const rootPath = path.resolve(__dirname, '..')
+const config = {
+  rootPath,
+  uploadPath: path.join(rootPath, 'public/uploads')
+}
+export default config
\ No newline at end of file
--- a/server/src/controllers/article.controller.ts
+++ b/server/src/controllers/article.controller.ts
+import { RequestHandler } from 'express';
+import { ArticleService } from '../services/article.service';
+export class ArticleController {
+  private service: ArticleService;
+  constructor() {
+    this.service = new ArticleService();
+  }
+  getAllArticles: RequestHandler = (req, res): void => {
+    const articles = this.service.getAllArticles();
+    res.send(articles);
+  };
+  getArticle: RequestHandler = (req, res): void => {
+    const article = this.service.getArticle(req.params.id);
+    res.send(article);
+  };
+  createArticle: RequestHandler = (req, res): void => {
+    const article = this.service.createArticle(req.body);
+    res.send(article);
+  };
+}
--- a/server/src/controllers/product.controller.ts
+++ b/server/src/controllers/product.controller.ts
+import { ProductService } from '@/services/product.service';
+import { RequestHandler } from 'express';
+import { plainToInstance } from 'class-transformer';
+import { ProductDto } from '@/dto/product.dto';
+export class ProductController {
+  private service: ProductService;
+  constructor() {
+    this.service = new ProductService();
+  }
+  getAllProducts: RequestHandler = (req, res): void => {
+    const products = this.service.getAllProducts();
+    res.send(products);
+  };
+  getProduct: RequestHandler = (req, res): void => {
+    const product = this.service.getProduct(req.params.id);
+    res.send(product);
+  };
+  createProduct: RequestHandler = (req, res): void => {
+    const productDto = plainToInstance(ProductDto, req.body);
+    if (req.file) productDto.image = req.file.filename;
+    const product = this.service.createProduct(productDto);
+    res.send(product);
+  };
+}
--- a/server/src/dto/product.dto.ts
+++ b/server/src/dto/product.dto.ts
+import { Expose } from 'class-transformer';
+export class ProductDto {
+  @Expose() title!: string;
+  @Expose() description!: string;
+  @Expose() price!: number;
+  @Expose() image!: string;
+}
--- a/server/src/index.ts
+++ b/server/src/index.ts
+import cors from 'cors';
+import App from './app';
+import logger from './middlewares/logger';
+import { ArticleRoute } from './routes/article.route';
+import { ProductRoute } from './routes/product.route';
+const app = new App({
+  port: 8000,
+  middlewares: [logger(), cors()],
+  controllers: [new ArticleRoute(), new ProductRoute()],
+});
+app.listen();
--- a/server/src/interfaces/AppInit.interface.ts
+++ b/server/src/interfaces/AppInit.interface.ts
+import { RequestHandler } from 'express';
+import { IRoute } from './IRoute.interface';
+export interface AppInit {
+  port: number;
+  middlewares: RequestHandler[];
+  controllers: IRoute[];
+}
--- a/server/src/interfaces/IArticle.interface.ts
+++ b/server/src/interfaces/IArticle.interface.ts
+export interface IArticle {
+  id: string;
+  title: string;
+  description: string;
+}
--- a/server/src/interfaces/IProduct.interface.ts
+++ b/server/src/interfaces/IProduct.interface.ts
+export interface IProduct {
+  id: string;
+  title: string;
+  description: string;
+  price: number;
+  image: string
+}
--- a/server/src/interfaces/IRoute.interface.ts
+++ b/server/src/interfaces/IRoute.interface.ts
+import { Router } from 'express';
+export interface IRoute {
+  path: string;
+  router: Router;
+}
--- a/server/src/middlewares/logger.ts
+++ b/server/src/middlewares/logger.ts
+import { RequestHandler } from 'express';
+const logger = (): RequestHandler => (req, res, next) => {
+  console.log(`Request logged: ${req.method}, ${req.path}`);
+  next();
+};
+export default logger;
--- a/server/src/middlewares/storage.ts
+++ b/server/src/middlewares/storage.ts
+import multer from "multer";
+import path from "path";
+import { randomUUID } from "crypto";
+import config from "@/config";
+const storage = multer.diskStorage({
+    destination: (req, file, cb) => {
+        cb(null, config.uploadPath);
+    },
+    filename: (req, file, cb) => {
+        cb(null, randomUUID() + path.extname(file.originalname));
+    },
+})
+const upload = multer({storage})
+export default upload
\ No newline at end of file
--- a/server/src/routes/article.route.ts
+++ b/server/src/routes/article.route.ts
+import { Router } from 'express';
+import { ArticleController } from '../controllers/article.controller';
+import { IRoute } from '../interfaces/IRoute.interface';
+export class ArticleRoute implements IRoute {
+  public path = '/articles';
+  public router = Router();
+  private controller: ArticleController;
+  constructor() {
+    this.controller = new ArticleController();
+    this.init();
+  }
+  private init() {
+    this.router.get('/', this.controller.getAllArticles);
+    this.router.get('/:id', this.controller.getArticle);
+    this.router.post('/create', this.controller.createArticle);
+  }
+}
--- a/server/src/routes/product.route.ts
+++ b/server/src/routes/product.route.ts
+import { ProductController } from '@/controllers/product.controller';
+import upload from '@/middlewares/storage';
+import { Router } from 'express';
+export class ProductRoute {
+  public path = '/products';
+  public router = Router();
+  private controller: ProductController;
+  constructor() {
+    this.controller = new ProductController();
+    this.init();
+  }
+  private init() {
+    this.router.get('/', this.controller.getAllProducts);
+    this.router.get('/:id', this.controller.getProduct);
+    this.router.post('/create', upload.single('image') ,this.controller.createProduct);
+  }
+}
--- a/server/src/services/article.service.ts
+++ b/server/src/services/article.service.ts
+import { IArticle } from '../interfaces/IArticle.interface';
+export class ArticleService {
+  private articles: IArticle[] = [];
+  getAllArticles = (): IArticle[] => {
+    return this.articles;
+  };
+  getArticle = (id: string): IArticle => {
+    const article = this.articles.find((article) => article.id === id);
+    if (article) return article;
+    else throw new Error('invalid id');
+  };
+  createArticle = (data: IArticle): IArticle => {
+    const newArticle = {
+      id: Math.random().toString(),
+      title: data.title,
+      description: data.description,
+    };
+    this.articles.push(newArticle);
+    return newArticle;
+  };
+}
--- a/server/src/services/product.service.ts
+++ b/server/src/services/product.service.ts
+import { IProduct } from '@/interfaces/IProduct.interface';
+import path from 'path';
+import * as fs from 'fs';
+import { ProductDto } from '@/dto/product.dto';
+const filePath = path.join(__dirname, '../../data');
+export class ProductService {
+  private products: IProduct[] = [];
+  constructor() {
+    this.init();
+  }
+  init(): void {
+    try {
+      const fileContent = fs.readFileSync(`${filePath}/products.json`);
+      this.products = JSON.parse(fileContent.toString());
+    } catch (e) {
+      this.products = [];
+    }
+  }
+  save(): void {
+    fs.writeFileSync(`${filePath}/products.json`, JSON.stringify(this.products, null, 2));
+  }
+  getAllProducts = (): IProduct[] => {
+    return this.products;
+  };
+  getProduct = (id: string): IProduct => {
+    const product = this.products.find((product) => product.id === id);
+    if (product) {
+      return product;
+    }
+    throw new Error('Invalid id');
+  };
+  createProduct = (data: ProductDto): IProduct => {
+    const product = {
+      ...data,
+      id: Math.random().toString()
+    };
+    this.products.push(product);
+    this.save();
+    return product;
+  };
+}
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "pretty": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "importHelpers": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}