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
--- 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"]
+}