lab5

2024-01-12 11:26:04 +04:00 · 2024-01-12 11:26:04 +04:00 · a47178cf13
commit a47178cf13
parent b95a010cf6
95 changed files with 2399 additions and 3 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}
--- a/README.md
+++ b/README.md
@ -1,3 +1,6 @@
-# PIbd-22_Internet_programming
-
-Интернет-программирование
+Реализация
+- регистрация, вход, выход
+- отправка отзыва
+- поиск направления
+- поиск новости по тегу
+- редактирование новостей администратором
--- a/data.json
+++ b/data.json
--- a/list.txt
+++ b/list.txt
@ -0,0 +1,32 @@
+user {
+    id,
+    login,
+    FIO,
+    email,
+    birthDate,
+    password,
+}
+
+letter {
+    id,
+    email,
+    theme,
+    question
+}
+
+news {
+    id,
+    title,
+    date,
+    tage,
+    text,
+    image
+}
+
+direction {
+    id,
+    code,
+    faculty,
+    name,
+    subjects
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Тольяттинский государственный университет</title>
+</head>
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="./src/main.jsx"></script>
+</body>
+
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "sourceMap": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/json-server.json
+++ b/json-server.json
@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
+{
+  "name": "univercity",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "internet-programming 2023",
+  "scripts": {
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "6.4.2",
+    "axios": "^1.6.1",
+    "bootstrap": "^5.3.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.2",
+    "react-hot-toast": "^2.4.1",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.18.0",
+    "redux": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "8.50.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "http-server": "14.1.1",
+    "json-server": "0.17.4",
+    "npm-run-all": "4.1.5",
+    "react-hook-form": "^7.49.2",
+    "vite": "4.4.9"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,53 @@
+html {
+    width: 100%;
+}
+
+body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    background-color: #e5e5e5;
+    font-family: Arial;
+    /* для закрепления подвала внизу страницы*/
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 800px) {
+    body {
+        font-size: small;
+    }
+}
+
+.btn {
+    background-color: #012362;
+    border: 0px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+table {
+    font-size: 13pt;
+    border: 2px solid;
+    border-left: 10px solid;
+    border-right: 10px solid;
+}
+
+@media (max-width: 800px) {
+    table {
+        font-size: 10pt;
+    }
+}
+
+@media (max-width: 500px) {
+    table {
+        font-size: 8pt;
+    }
+}
+
+thead {
+    font-style: italic;
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,26 @@
+import './App.css';
+import PropTypes from 'prop-types';
+import Content from './components/content/Content';
+import Header from './components/header/Header.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
+import Footer from './components/footer/Footer.jsx';
+import { UserProvider } from './providers/UserProvider';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <UserProvider>
+          <Header />
+          <Navigation routes={routes}></Navigation>
+          <Content />
+          <Footer />
+      </UserProvider>
+    </>
+  )
+}
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/api/ApiClient.js
+++ b/src/components/api/ApiClient.js
@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+  constructor(message = '') {
+    super(message);
+    this.name = 'HttpError';
+    Object.setPrototypeOf(this, new.target.prototype);
+    toast.error(message, { id: 'HttpError' });
+  }
+}
+
+function responseHandler(response) {
+  if (response.status === 200 || response.status === 201) {
+    const data = response?.data;
+    if (!data) {
+      throw new HttpError('API Error. No data!');
+    }
+    return data;
+  }
+  throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+  if (error === null) {
+    throw new Error('Unrecoverable error!! Error is null!');
+  }
+  toast.error(error.message, { id: 'AxiosError' });
+  return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+  baseURL: 'http://localhost:8081/',
+  timeout: '5000',
+  headers: {
+    Accept: 'application/json',
+  },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
--- a/src/components/api/ApiDirection.js
+++ b/src/components/api/ApiDirection.js
@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiDirection {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+    
+      async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+    
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiDirection;
--- a/src/components/api/ApiNews.js
+++ b/src/components/api/ApiNews.js
@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiNews {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+    
+      async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+    
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiNews;
--- a/src/components/api/ApiService.js
+++ b/src/components/api/ApiService.js
@ -0,0 +1,41 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+  constructor(url) {
+    this.url = url;
+  }
+
+  async getAll(expand) {
+    return ApiClient.get(`${this.url}${expand || ''}`);
+  }
+
+  async get(id, expand) {
+    return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+  }
+
+  async create(body) {
+    return ApiClient.post(this.url, body);
+  }
+
+  async getByLogin(login) {
+    return ApiClient.get(`${this.url}?login=${login}`);
+  }
+
+  async getByEmail(email) {
+    return ApiClient.get(`${this.url}?email=${email}`);
+  }
+
+  async getAllForUser(userId) {
+    return ApiClient.get(`${this.url}?userId=${userId}`);
+  }
+
+  async update(id, body) {
+    return ApiClient.put(`${this.url}/${id}`, body);
+  }
+
+  async delete(id) {
+    return ApiClient.delete(`${this.url}/${id}`);
+  }
+}
+
+export default ApiService;
--- a/src/components/api/contactApiService.js
+++ b/src/components/api/contactApiService.js
@ -0,0 +1,34 @@
+import { ApiClient } from './ApiClient';
+
+// id,
+// email,
+// theme,
+// question
+
+class contactApiService {
+  constructor(url) {
+    this.url = url;
+  }
+
+  async getAll(expand) {
+    return ApiClient.get(`${this.url}${expand || ''}`);
+  }
+
+  async get(id, expand) {
+    return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+  }
+
+  async create(body) {
+    return ApiClient.post(this.url, body);
+  }
+
+  async update(id, body) {
+    return ApiClient.put(`${this.url}/${id}`, body);
+  }
+
+  async delete(id) {
+    return ApiClient.delete(`${this.url}/${id}`);
+  }
+}
+
+export default contactApiService;
--- a/src/components/content/Content.css
+++ b/src/components/content/Content.css
@ -0,0 +1,37 @@
+#content {
+    width: 80%;
+    margin: 1.5% 10% 1.5% 10%;
+    padding: 30px;
+    padding-left: 5%;
+    padding-right: 5%;
+    background-color: white;
+    color: #012362;
+    font-size: 13pt;
+    text-align: justify;
+    line-height: 2em;
+    /* для закрепления подвала внизу страницы*/
+	flex: 1 0 auto;
+}
+
+@media (max-width: 800px) {
+    #content {
+        width: 100%;
+        margin: 1.5% 0% 1.5% 0%;
+    }
+}
+
+/* центр для изображений*/
+#content img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#content a{
+    color: #06c;
+}
+
+#content a:hover{
+    color: #f07c41;
+    text-decoration: none;
+}
--- a/src/components/content/Content.jsx
+++ b/src/components/content/Content.jsx
@ -0,0 +1,12 @@
+import './Content.css'
+import { Outlet } from 'react-router-dom';
+
+const Content = () => {
+    return (
+    <div id="content">
+        <Outlet />
+    </div>
+    );
+};
+
+export default Content;
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
@ -0,0 +1,24 @@
+#footer { 
+    width: 100%;
+    background-color: #012362;
+    text-align: center;
+    font-family: Arial;
+    font-size: 15px; /* в header'e 20px*/
+    color: white;
+    line-height: 1.5em;
+    padding: 14px 0px 14px 0px;
+    /* для закрепления подвала внизу страницы*/
+	flex: 0 0 auto;
+}
+
+#footer ul {
+	margin: 0px;
+} 
+
+#footer li {
+    display: inline-flex;
+}
+
+#footer li:not(:last-of-type) {
+	margin-right: 3%;
+}
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@ -0,0 +1,18 @@
+import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <div id="footer">
+            <ul>
+                <li>Адреса и контакты:</li>
+                <li>432027, г. Тольятти, ул. Ларина, д.32</li>
+                <li>+7 (8332) 43-06-55</li>
+            </ul>
+            dex_moth, {year}
+        </div>
+    );
+};
+
+export default Footer;
--- a/src/components/header/Header.css
+++ b/src/components/header/Header.css
@ -0,0 +1,29 @@
+#header { 
+    width: 100%;
+    background-color: #012362;
+    text-align: center;
+    font-family: Arial;
+    font-size: 20px;
+    color: white;
+    padding: 10px 0px 10px 0px;
+    /* для закрепления подвала внизу страницы*/
+	flex: 0 0 auto;
+}
+
+#header a {
+    text-decoration: none;
+    color: white;
+}
+
+#header a:hover {
+    text-shadow: 1px 1px 8px #06c;
+}
+
+#logo {
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+#logo:hover {
+    filter: drop-shadow(0px 2px 16px #06c);
+}
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@ -0,0 +1,14 @@
+import './Header.css'
+import universityLogo from '../../assets/logo.png';
+
+const Header = () => {
+    
+    return (
+        <div id="header">
+            <a href="/"><img id="logo" src={universityLogo} height="50px"/></a>
+            <a href="/">Тольяттинский государственный политехнический университет</a>
+        </div>
+    );
+};
+
+export default Header;
--- a/src/components/modal/Modal.css
+++ b/src/components/modal/Modal.css
@ -0,0 +1,3 @@
+.modal-title {
+    font-size: 1.2rem;
+}
--- a/src/components/modal/ModalConfirm.jsx
+++ b/src/components/modal/ModalConfirm.jsx
@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+
+const ModalConfirm = ({ show, title, message, onConfirm, onClose, }) => (
+    createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+                <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                    <Modal.Title>{title}</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>
+                    {message}
+                </Modal.Body>
+
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button className='col-5 m-0 me-2' onClick={() => onClose()}>Нет</Button>
+                    <Button className='col-5 m-0 ms-2' onClick={() => onConfirm()}>Да</Button>
+                </Modal.Footer>
+        </Modal>,
+        document.body,
+    )
+);
+
+ModalConfirm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    message: PropTypes.string,
+    onConfirm: PropTypes.func,
+    onClose: PropTypes.func,
+  };
+  
+  export default ModalConfirm;
--- a/src/components/modal/ModalForm.jsx
+++ b/src/components/modal/ModalForm.jsx
@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+
+const ModalForm = ({ show, title, validated, onSubmit, onClose, children, }) => (
+  createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+            <Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
+                <Modal.Body>
+                    {children}
+                </Modal.Body>
+
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button className='col-5 m-0 me-2'
+                        onClick={() => onClose()}>
+                        Отмена
+                    </Button>
+                    <Button className='col-5 m-0 ms-2' type='submit'>
+                        Сохранить
+                    </Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>,
+        document.body,
+  )
+);
+ModalForm.propTypes = {
+  show: PropTypes.bool,
+  title: PropTypes.string,
+  validated: PropTypes.bool,
+  onSubmit: PropTypes.func,
+  onClose: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default ModalForm;
--- a/src/components/modal/ModalHook.jsx
+++ b/src/components/modal/ModalHook.jsx
@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const showModalDialog = () => {
+    setShowModal(true);
+  };
+
+  const hideModalDialog = () => {
+    setShowModal(false);
+  };
+
+  return {
+    isModalShow: showModal,
+    showModal: showModalDialog,
+    hideModal: hideModalDialog,
+  };
+};
+
+export default useModal;
--- a/src/components/navigation/Navigation.css
+++ b/src/components/navigation/Navigation.css
@ -0,0 +1,53 @@
+.navbar {
+    width: 100%;
+    background-color: white;
+    color: #012362;
+    font-family: Arial;
+    text-align: center;
+}
+
+.navbar-brand, .nav-item  {
+    margin-left: 5em;
+}
+
+@media (min-width: 800px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 2em;
+    }
+}
+
+@media (min-width: 1280px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 6em;
+    }
+}
+@media (min-width: 1600px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 8em;
+    }
+}
+@media (min-width: 1920px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 12em;
+    }
+}
+@media (min-width: 2100px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 17em;
+    }
+}
+
+.navbar-brand, .nav-link {
+    font-size: 14pt;
+    text-decoration: none;
+    color: #012362;
+}
+
+.navbar-brand:hover, .nav-link:hover {
+    color: #f07c41;
+    text-decoration: underline;
+}
+
+.navbar-brand:focus, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
+    color: #06c;
+}
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { UserContext } from '../../providers/UserProvider';
+import useUser from '../../providers/hooks/UserHook';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+import { Person } from 'react-bootstrap-icons';
+import './Navigation.css'
+
+const Navigation = ({ routes }) => {
+
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+    // зашёл ли пользователь
+    const { user } = useContext(UserContext);
+    // админ?
+    const isAdmin = user && user.login === 'admin';
+    // функция выхода из профиля
+    const { userLogout } = useUser();
+
+    console.log(user);
+
+    return (
+        <Navbar expand="md" bg="purple">
+            <Container>
+                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/news'}>
+                    Новости
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls='main-navbar' />
+                <Navbar.Collapse id='main-navbar'>
+                    <Nav className='me-auto link' activeKey={location.pathname}>
+                        {pages.map((page) => (
+                            <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                            {page.title}
+                          </Nav.Link>
+                        ))}
+                    </Nav>
+                    {user ? (
+                        <Nav className='me-auto link'>
+                            <Nav.Link as={Link} key="/profile" to='/profile'>
+                                <Person className='me-2'/>{user.login}
+                            </Nav.Link>
+                            {isAdmin && (
+                                <Nav.Link as={Link} key='/adminnews' to='/adminnews'>Админка</Nav.Link>
+                            )}
+                            <Nav.Link as={Link} onClick={userLogout} to='/'>Выйти</Nav.Link>
+                        </Nav>
+                    ) :
+                    (
+                        <Nav className='me-auto link'>
+                            <Nav.Link as={Link} key='/login' eventKey='/login' to='/login'>Войти</Nav.Link>
+                            <Nav.Link as={Link} key='/registration' eventKey='/registration' to='/registration'>Зарегистрироваться</Nav.Link>
+                        </Nav>
+                    )
+                    }
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/src/components/navigation/components/NavLogic.jsx
+++ b/src/components/navigation/components/NavLogic.jsx
@ -0,0 +1,44 @@
+// import { useContext } from 'react';
+// import AdminNav from './components/AdminNav.jsx';
+// import ExitNav from './components/ExitNav.jsx';
+// import LoginNav from './components/LoginNav.jsx';
+// import ProfileNav from './components/ProfileNav.jsx';
+// import RegistrationNav from './components/RegistrationNav.jsx';
+// import ContactsNav from './components/Contacts.jsx';
+// import UniversityNav from './components/UniversityNav.jsx';
+// import AbiturientNav from './components/AbiturientNav.jsx';
+
+// const NavLogic= () => {
+//     const user = useContext(UserContext);
+//     console.log("user=" + user);
+
+//     if (user != null) {
+//       return (
+//           <>
+//             <UniversityNav/>
+//             <AbiturientNav/>
+//             <ContactsNav/>
+//             <RegistrationNav/>
+//             <LoginNav/>
+//             <RegistrationNav/>
+//             <ProfileNav/>
+//             <AdminNav/>
+//             <ExitNav/>
+//           </>
+//       );
+//     }
+//     else {
+//       return (
+//          <>
+//           <UniversityNav/>
+//           <AbiturientNav/>
+//           <ContactsNav/>
+//           <RegistrationNav/>
+//           <LoginNav/>
+//           <RegistrationNav/>
+//          </>
+//     );
+//     }
+//   };
+
+// export default NavLogic;
--- a/src/components/navigation/components/components/AbiturientNav.jsx
+++ b/src/components/navigation/components/components/AbiturientNav.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const AbiturientNav = () => {
+    <>
+        <Nav.Link as={Link} to = {'/abiturient' ?? '/'}>
+            Поступающему
+        </Nav.Link>
+    </>
+}
+
+export default AbiturientNav;
--- a/src/components/navigation/components/components/AdminNav.jsx
+++ b/src/components/navigation/components/components/AdminNav.jsx
@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+// {
+//   pages.map((page) =>
+//   <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+//       {page.title}
+//   </Nav.Link>)
+
+const AdminNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/admin' ?? '/'}>
+        Страница администратора
+    </Nav.Link>
+    </>
+}
+
+export default AdminNav;
--- a/src/components/navigation/components/components/Contacts.jsx
+++ b/src/components/navigation/components/components/Contacts.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const ContactsNav = () => {
+    <>
+        <Nav.Link as={Link} to = {'/contacts' ?? '/'}>
+            Контакты
+        </Nav.Link>
+    </>
+}
+
+export default ContactsNav;
--- a/src/components/navigation/components/components/ExitNav.jsx
+++ b/src/components/navigation/components/components/ExitNav.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const ExitNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/'}>
+        Выйти
+    </Nav.Link>
+    </>
+}
+
+export default ExitNav;
--- a/src/components/navigation/components/components/LoginNav.jsx
+++ b/src/components/navigation/components/components/LoginNav.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const LoginNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/login' ?? '/'}>
+        Войти
+    </Nav.Link>
+    </>
+}
+
+export default LoginNav;
--- a/src/components/navigation/components/components/NewsNav.jsx
+++ b/src/components/navigation/components/components/NewsNav.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const NewsNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/news' ?? '/'}>
+        Новости
+    </Nav.Link>
+    </>
+}
+
+export default NewsNav;
--- a/src/components/navigation/components/components/ProfileNav.jsx
+++ b/src/components/navigation/components/components/ProfileNav.jsx
@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import { Nav } from 'react-bootstrap';
+
+const ProfileNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/profile' ?? '/'}>
+        Профиль
+    </Nav.Link>
+    </>
+}
+
+export default ProfileNav;
--- a/src/components/navigation/components/components/RegistrationNav.jsx
+++ b/src/components/navigation/components/components/RegistrationNav.jsx
@ -0,0 +1,12 @@
+import { Nav } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const RegistrationNav = () => {
+    <>
+    <Nav.Link as={Link} to = {'/registration' ?? '/'}>
+        Зарегистрироваться
+    </Nav.Link>
+    </>
+}
+
+export default RegistrationNav;
--- a/src/components/navigation/components/components/UniversityNav.jsx
+++ b/src/components/navigation/components/components/UniversityNav.jsx
@ -0,0 +1,12 @@
+import { Nav } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const UniversityNav = () => {
+    <>
+        <Nav.Link as={Link} to = {'/university' ?? '/'}>
+            Об университете
+        </Nav.Link>
+    </>
+}
+
+export default UniversityNav;
--- a/src/components/services/DirectionApiService.js
+++ b/src/components/services/DirectionApiService.js
@ -0,0 +1,5 @@
+import ApiDirection from "../api/ApiDirection";
+
+const DirectionApiService = new ApiDirection('directions');
+
+export default DirectionApiService;
--- a/src/components/services/NewsApiService.js
+++ b/src/components/services/NewsApiService.js
@ -0,0 +1,5 @@
+import ApiNews from '../api/ApiNews';
+
+const NewsApiService = new ApiNews('news');
+
+export default NewsApiService;
--- a/src/components/services/UsersApiService.js
+++ b/src/components/services/UsersApiService.js
@ -0,0 +1,5 @@
+import ApiService from '../api/ApiService';
+
+const UsersApiService = new ApiService('users');
+
+export default UsersApiService;
--- a/src/components/utils/Base64.js
+++ b/src/components/utils/Base64.js
@ -0,0 +1,15 @@
+const getBase64 = async (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            resolve(fileContent);
+        };
+        reader.onerror = () => {
+            reject(new Error('Oops, something went wrong with the file reader.'));
+        };
+        reader.readAsDataURL(file);
+    });
+};
+
+export default getBase64;
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,84 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import Abiturient from './pages/Abiturient/Abiturient.jsx';
+import Admin from './pages/Admin/Admin.jsx';
+import AdminNews from './pages/AdminNews/AdminNews.jsx';
+import Contacts from './pages/Contacts/Contacts.jsx';
+import ErrorPage from './pages/Errorpage/ErrorPage.jsx';
+import Login from './pages/Login/Login.jsx';
+import Main from './pages/Main/Main.jsx';
+import News from './pages/News/News.jsx';
+import Profile from './pages/Profile/Profile.jsx';
+import Registration from './pages/Registration/Registration.jsx';
+import RegistrationSuccess from './pages/RegistrationSuccess/RegistrationSuccess.jsx';
+import University from './pages/University/University.jsx';
+
+const routes = [
+  {
+    path: '/university',
+    element: <University />,
+    title: 'Об университете',
+  },
+  {
+    path: '/abiturient',
+    element: <Abiturient />,
+    title: 'Поступающему',
+  },
+  {
+    path: '/admin',
+    element: <Admin />
+  },
+  {
+    path: '/adminnews',
+    element: <AdminNews />
+  },
+  {
+    path: '/registration',
+    element: <Registration />,
+  },
+  {
+    path: '/contacts',
+    element: <Contacts />,
+    title: 'Контакты',
+  },
+  {
+    path: '/news',
+    element: <News />,
+  },
+  {
+    index: true,
+    path: '/',
+    element: <Main />
+  },
+  {
+    path: '/login',
+    element: <Login />,
+  },
+  {
+    path: '/profile',
+    element: <Profile />,
+  },
+  {
+    path: '/registration_success',
+    element: <RegistrationSuccess />
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/src/pages/Abiturient/Abiturient.jsx
+++ b/src/pages/Abiturient/Abiturient.jsx
@ -0,0 +1,63 @@
+import SearchHook from './hooks/SearchHook';
+import { Form, Table, Container, Row, Col, InputGroup } from 'react-bootstrap';
+
+const Abiturient = () => {
+
+    const { searchTerm, searchName, searchFaculty, handleChange, handleChange2, handleChange3, searchResults } = SearchHook();
+
+    return (
+        <>
+            <div className="text-center">
+                <h3>Список направлений</h3>
+            </div>
+            <Form id="directions" >
+                <Container className='mb-4'>
+                    <Row sm={2} className="justify-content-md-center">
+                    <Col xl={3} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Факультет:</InputGroup.Text>
+                                <Form.Control id="faculty" placeholder="ФИСТ" value={searchFaculty} onChange={handleChange3}/>
+                            </InputGroup>
+                        </Col>
+                        <Col md={6} xl={4} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Направление:</InputGroup.Text>
+                                <Form.Control id="direction" placeholder="Программная инженерия" value={searchName} onChange={handleChange2}/>
+                            </InputGroup>
+                        </Col>
+                        <Col md={6} xl={5} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Предметы:</InputGroup.Text>
+                                <Form.Control id="subjects" placeholder="Информатика" value={searchTerm} onChange={handleChange}/>
+                            </InputGroup>
+                        </Col>
+                    </Row>
+                </Container>
+            </Form>
+            <Table className="mt-2" bordered hover>
+                <thead>
+                    <tr>
+                        <th scope="col">Код</th>
+                        <th scope="col">Факультет</th>
+                        <th scope="col">Наименование направления</th>
+                        <th scope="col" className='w-50'>Требуемые баллы ЕГЭ</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                    searchResults.map((line) =>
+                    <tr key={line.id}>
+                        <td scope="col">{line.code}</td>
+                        <td scope="col">{line.faculty}</td>
+                        <td scope="col">{line.name}</td>
+                        <td scope="col">{line.subjects}</td>
+                    </tr>
+                    )
+                    }
+                </tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Abiturient;
--- a/src/pages/Abiturient/hooks/SearchHook.jsx
+++ b/src/pages/Abiturient/hooks/SearchHook.jsx
@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import DirectionApiService from '../../../components/services/DirectionApiService';
+
+const useDirection = () => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        const data = await DirectionApiService.getAll();
+        setLines(data ?? []);
+    };
+
+      // для поиска
+      const [searchTerm, setSearchTerm] = useState("");
+      const [searchName, setSearchName] = useState("");
+      const [searchFaculty, setSearchFaculty] = useState("");
+      const [searchResults, setSearchResults] = useState([]);
+      
+    const handleChange = ( event ) => {
+          setSearchTerm(event.target.value);
+      };
+
+    const handleChange2 = ( event ) => {
+        setSearchName(event.target.value);
+    };
+  
+    const handleChange3 = ( event ) => {
+        setSearchFaculty(event.target.value);
+    };
+
+      useEffect(() => {
+          getLines();
+          const results = lines.filter(line =>
+              line.subjects.toLowerCase().includes(searchTerm)
+          );
+          const results2 = results.filter(line =>
+            line.name.toLowerCase().includes(searchName)
+          );
+          const results3 = results2.filter(line =>
+            line.faculty.toLowerCase().includes(searchFaculty)
+          );
+
+          setSearchResults(results3);
+      }, [searchTerm, searchName, searchFaculty, linesRefresh]);
+  
+      return {
+          searchResults,
+          handleLinesChange,
+          handleChange,
+          handleChange2,
+          handleChange3
+    };
+}
+
+export default useDirection;
--- a/src/pages/Admin/Admin.jsx
+++ b/src/pages/Admin/Admin.jsx
@ -0,0 +1,28 @@
+import { Button, Container } from 'react-bootstrap';
+import { Navigate } from 'react-router-dom';
+import { useContext } from 'react';
+import { UserContext } from '../../providers/UserProvider';
+import { Link } from 'react-router-dom';
+
+const Admin = () => {
+    const { user } = useContext(UserContext);
+    const isAdmin = user && user.login === 'admin';
+
+    if (!isAdmin) {
+        return <Navigate to='/' replace />;
+    }
+
+    return (
+        <>
+            <div className="text-center">
+                <h3>Кабинет администратора</h3>
+            </div>
+            <br/>
+            <Container>
+                <Link to='/adminnews'><Button>Таблица новостей</Button></Link>
+            </Container>
+        </>
+    );
+};
+
+export default Admin;
--- a/src/pages/AdminNews/AdminNews.jsx
+++ b/src/pages/AdminNews/AdminNews.jsx
@ -0,0 +1,25 @@
+import { Navigate } from 'react-router-dom';
+import { useContext } from 'react';
+import { UserContext } from '../../providers/UserProvider';
+import News from './components/News';
+
+const AdminNews = () => {
+    const { user } = useContext(UserContext);
+    const isAdmin = user && user.login === 'admin';
+
+    if (!isAdmin) {
+        return <Navigate to='/' replace />;
+    }
+
+    return (
+        <>
+            <div className="text-center">
+                <h3>Кабинет администратора</h3>
+                <h4>Таблица новостей</h4>
+            </div>
+            <News/>
+        </>
+    );
+};
+
+export default AdminNews;
--- a/src/pages/AdminNews/components/News.jsx
+++ b/src/pages/AdminNews/components/News.jsx
@ -0,0 +1,38 @@
+import useLines from "../hooks/useLines";
+import NewsTable from "./NewsTable";
+import NewsTableRow from "./NewsTableRow";
+import ModalConfirm from '../../../components/modal/ModalConfirm';
+import ModalForm from '../../../components/modal/ModalForm';
+import NewsForm from "./NewsForm";
+import NewsDelete from '../hooks/NewsDeleteHook';
+import NewsFormModal from '../hooks/NewsFormHook';
+import { Button } from "react-bootstrap";
+
+const News = () =>
+{
+    const { lines, handleLinesChange } = useLines();
+    const { isDeleteModalShow, showDeleteModal, handleDeleteConfirm, handleDeleteCancel, } = NewsDelete(handleLinesChange);
+    const {isFormModalShow, isFormValidated, showFormModal, currentItem, handleItemChange, handleFormSubmit, handleFormClose, } = NewsFormModal(handleLinesChange);
+
+    return (
+        <>
+        <Button onClick={() => showFormModal(0)}>Добавить новость</Button>
+        <NewsTable>
+            {
+                lines.map((line, index) =>
+                <NewsTableRow key={line.id}
+                    index={index} post={line}
+                    onDelete={() => showDeleteModal(line.id)}
+                    onEditInPage={() => showFormModal(line.id)}    
+                />)
+            }
+        </NewsTable>
+        <ModalConfirm show={isDeleteModalShow} onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel} title='Удаление' message='Удалить элемент?' />
+        <ModalForm show={isFormModalShow} validated={isFormValidated} onSubmit={handleFormSubmit} onClose={handleFormClose} title='Редактирование'>
+            <NewsForm item={currentItem} handleChange={handleItemChange} />
+        </ModalForm>
+        </>
+    );
+};
+
+export default News;
--- a/src/pages/AdminNews/components/NewsForm.jsx
+++ b/src/pages/AdminNews/components/NewsForm.jsx
@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { Form, InputGroup } from 'react-bootstrap';
+
+const NewsForm = ({item, handleChange}) => {
+    return (
+        <>
+            <div className='text-center'>
+                <img src={item.image || "https://via.placeholder.com/200"} className="rounded" alt="placeholder" style={{ width: "100%", height: "330px" }}/>
+            </div>
+            <br/>
+            <Form.Group controlId="title">
+                <Form.Label>Заголовок:</Form.Label>
+                <Form.Control name="title" value={item.title} type="text" placeholder="Заголовок" required onChange={handleChange} />
+            </Form.Group>
+            <br/>
+            <Form.Group controlId="date">
+                <Form.Label>Дата:</Form.Label>
+                <Form.Control name="date" value={item.date} type="date" placeholder="01.01.2024" required onChange={handleChange}/>
+            </Form.Group>
+            <br/>
+            <Form.Group controlId="text">
+                <Form.Label>Текст новости:</Form.Label>
+                <Form.Control name="text" value={item.text} type="text" as="textarea" placeholder="2-3 предложения" rows={4} required onChange={handleChange}/>
+            </Form.Group>
+            <br/>
+            <Form.Group controlId="tage">
+                <Form.Label>Тэги:</Form.Label>
+                <Form.Control name="tage" value={item.tage} type="text" placeholder="праздник программирование" required onChange={handleChange}/>
+            </Form.Group>
+            <br/>
+            <Form.Label>Изображение:</Form.Label>
+            <InputGroup>
+                <Form.Control id="image" type="file" onChange={handleChange}/>
+            </InputGroup>
+        </>
+    );
+};
+
+NewsForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+  };
+
+
+export default NewsForm;
+
--- a/src/pages/AdminNews/components/NewsTable.jsx
+++ b/src/pages/AdminNews/components/NewsTable.jsx
@ -0,0 +1,29 @@
+import { Table } from "react-bootstrap";
+import PropTypes from 'prop-types';
+
+const NewsTable = ({ children }) => {
+    return (
+    <Table className="mt-4" hover bordered>
+        <thead>
+        <tr>
+            <th scope = "col">№</th>
+            <th scope = "col" className ="w-10">Название</th>
+            <th scope = "col" className = "w-30">Дата</th>
+            <th scope = "col" className = "w-50">Описание</th>
+            <th scope = "col">Теги</th>
+            <th scope = "col"></th>
+            <th scope = "col"></th>
+        </tr>
+        </thead>
+        <tbody>
+            {children}
+        </tbody>
+    </Table>
+    )
+}
+
+NewsTable.propTypes = {
+    children : PropTypes.node,
+}
+
+export default NewsTable;
--- a/src/pages/AdminNews/components/NewsTableRow.jsx
+++ b/src/pages/AdminNews/components/NewsTableRow.jsx
@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { PencilFill, Trash3 } from 'react-bootstrap-icons';
+
+const NewsTableRow = ({ index, post, onDelete, onEditInPage }) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <tr>
+            <th scope="row">{index}</th>
+            <td>{post.title}</td>
+            <td>{post.date}</td>
+            <td>{post.text}</td>
+            <td>{post.tage}</td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><PencilFill /></a></td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
+        </tr>
+    );
+};
+
+NewsTableRow.propTypes = {
+    index: PropTypes.number,
+    post: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEditInPage: PropTypes.func,
+}
+
+export default NewsTableRow;
--- a/src/pages/AdminNews/hooks/NewsDeleteHook.jsx
+++ b/src/pages/AdminNews/hooks/NewsDeleteHook.jsx
@ -0,0 +1,34 @@
+import { useState } from 'react';
+import NewsApiService from '../../../components/services/NewsApiService';
+import useModal from '../../../components/modal/ModalHook';
+
+const NewsDelete = (usersChangeHandle) => {
+
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const showModalDialog = (id) => {
+        showModal();
+        setCurrentId(id);
+    };
+
+    const onClose = () => {
+        hideModal();
+    };
+
+    const onDelete = async () => {
+        console.log('Новость удалена' + currentId);
+        await NewsApiService.delete(currentId);
+        usersChangeHandle();
+        onClose();
+    };
+
+    return {
+        isDeleteModalShow: isModalShow,
+        showDeleteModal: showModalDialog,
+        handleDeleteConfirm: onDelete,
+        handleDeleteCancel: onClose,
+    };
+};
+
+export default NewsDelete;
--- a/src/pages/AdminNews/hooks/NewsFormHook.jsx
+++ b/src/pages/AdminNews/hooks/NewsFormHook.jsx
@ -0,0 +1,38 @@
+import { useState } from 'react';
+import useModal from '../../../components/modal/ModalHook';
+import NewsItemForm from './NewsItemFormHook';
+
+const NewsFormModal = (handleLinesChange) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+    const { item, validated, handleSubmit, handleChange, resetValidity, } = NewsItemForm(currentId, handleLinesChange);
+
+    const showModalDialog = (id) => {
+        setCurrentId(id);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+    
+      const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+          onClose();
+        }
+    };
+
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default NewsFormModal;
--- a/src/pages/AdminNews/hooks/NewsItemFormHook.jsx
+++ b/src/pages/AdminNews/hooks/NewsItemFormHook.jsx
@ -0,0 +1,84 @@
+import { useState } from 'react';
+import NewsItem from './NewsItemHook.jsx';
+import NewsApiService from '../../../components/services/NewsApiService';
+import getBase64 from '../../../components/utils/Base64.js';
+
+const NewsItemForm = (id, usersChangeHandle) => {
+    const { item, setItem } = NewsItem(id);
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getNewsObject = (formData) => {
+        const title = formData.title;
+        const date = formData.date;
+        const tage = formData.tage;
+        const text = formData.text;
+        const image = formData.image.startsWith('data:image') ? formData.image : '';
+
+        return {
+            title: title.toString(),
+            date: date.toString(),
+            tage: tage.toString(),
+            text: text.toString(),
+            image,
+        };
+    };
+
+    const handleChange = (event) => {
+        if (event.target.type === 'file') {
+            handleImageChange(event);
+            return;
+        }
+        const inputName = event.target.name;
+        const inputValue = event.target.value;
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleImageChange = async (event) => {
+        const { files } = event.target;
+        const file = await getBase64(files.item(0));
+        setItem({
+            ...item,
+            image: file,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        const body = getNewsObject(item);
+
+        if (form.checkValidity()) {
+
+            if (id === undefined || id === 0) {
+                await NewsApiService.create(body);
+            } else {
+                await NewsApiService.update(id, body);
+            }
+
+            if (usersChangeHandle)
+                usersChangeHandle();
+            console.log('Новость сохранена');
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default NewsItemForm;
--- a/src/pages/AdminNews/hooks/NewsItemHook.jsx
+++ b/src/pages/AdminNews/hooks/NewsItemHook.jsx
@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import NewsApiService from '../../../components/services/NewsApiService';
+
+const NewsItem = (id) => {
+    const emptyItem = {
+        id: '',
+        title: '',
+        date: '',
+        tage: '',
+        text: '',
+        image: '',
+    };
+
+    const [item, setItem] = useState({ ...emptyItem });
+    
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await NewsApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+    console.log(item);
+
+    useEffect(() => {
+        getItem(id);
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default NewsItem;
--- a/src/pages/AdminNews/hooks/useLines.jsx
+++ b/src/pages/AdminNews/hooks/useLines.jsx
@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import NewsApiService from '../../../components/services/NewsApiService';
+
+const usePosts = () => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        const data = await NewsApiService.getAll();
+        data.reverse();
+        setLines(data ?? []);
+    };
+
+    useEffect(() => { getLines(); }, [linesRefresh]);
+
+    return {
+        lines,
+        handleLinesChange
+    };
+}
+
+export default usePosts;
--- a/src/pages/Contacts/Contacts.jsx
+++ b/src/pages/Contacts/Contacts.jsx
@ -0,0 +1,30 @@
+import { Container, Row, Col } from "react-bootstrap";
+import imgLetter from "./assets/letter.jpg";
+import ContactsForm from './components/ContactsForm';
+
+const Contacts = () => {
+    return (
+        <>
+            <Container >
+                <Row className="justify-content-md-center" sm={1} lg={2}>
+                    <Col>
+                        <div className="text-center">
+                            <h3>Обратная связь</h3>
+                            Вы можете задать нам любой вопрос, обратиться с предложением или сообщить о проблеме. Для этого заполните приведённую форму.
+                            <br/>
+                            Мы с радостью вам ответим!
+                            <br/><br/>
+                            <img src={imgLetter} height="220px" alt="Здание университета"/>
+                            <br/>
+                        </div>
+                    </Col>
+                    <Col>
+                        <ContactsForm/>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    );
+};
+
+export default Contacts;
--- a/src/pages/Contacts/assets/letter.jpg
+++ b/src/pages/Contacts/assets/letter.jpg
--- a/src/pages/Contacts/components/ContactsForm.jsx
+++ b/src/pages/Contacts/components/ContactsForm.jsx
@ -0,0 +1,41 @@
+import { Form, FormLabel, Button } from "react-bootstrap";
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import useSubmit from './hooks/ContactsHook.jsx';
+
+const ContactsForm = () => {
+    const { register, handleSubmit } = useForm();
+    const navigate = useNavigate();
+    const { onSubmit } = useSubmit();
+
+    const makeSubmit = async (data) => {
+        onSubmit(data);
+        alert('Ваше письмо успешно отправлено!');
+        navigate('/');
+    };
+
+    return (
+        <Form id="contacts-form" onSubmit = {handleSubmit(async (data) => {await makeSubmit(data);})}>
+            <Form.Group controlId="email">
+                <FormLabel>Email:</FormLabel>
+                <Form.Control {...register('email')} type="email" name="email" required />
+            </Form.Group>
+            <br/>
+            <Form.Group controlId="theme">
+                <FormLabel>Тема:</FormLabel>
+                <Form.Control {...register('theme')} type="text" name="theme" required />
+            </Form.Group>
+            <br/>
+            <Form.Group controlId="question">
+                <FormLabel>Ваш вопрос:</FormLabel>
+                <Form.Control {...register('question')} type="text" as="textarea" name="question" rows={4} required />
+            </Form.Group>
+            <br/>
+            <div className="text-center">
+                <Button variant="primary" type="submit">Отправить</Button>
+            </div>
+        </Form>
+    )
+}
+
+export default ContactsForm;
--- a/src/pages/Contacts/components/hooks/ContactsHook.jsx
+++ b/src/pages/Contacts/components/hooks/ContactsHook.jsx
@ -0,0 +1,33 @@
+import contactApiService from '../services/contactAPIservice.js';
+
+const useSubmit = () => {
+
+// id,
+// email,
+// theme,
+// question
+
+  const getNewLetter = (formData) => {
+    const emailt = formData.email;
+    const themet = formData.theme;
+    const questiont = formData.question;
+    
+    return {
+      email: emailt,
+      theme: themet,
+      question: questiont,
+    };
+
+  };
+  
+  const onSubmit = async (data) => {
+    console.log(data);
+    const newLetter = getNewLetter(data);
+    const curLetter = await contactApiService.create(newLetter);
+    return 3;
+  };
+
+  return { onSubmit };
+};
+
+export default useSubmit;
--- a/src/pages/Contacts/components/services/contactAPIservice.js
+++ b/src/pages/Contacts/components/services/contactAPIservice.js
@ -0,0 +1,5 @@
+import ApiService from '../../../../components/api/contactApiService';
+
+const contactsAPIservice = new ApiService('letters');
+
+export default contactsAPIservice;
--- a/src/pages/Errorpage/ErrorPage.jsx
+++ b/src/pages/Errorpage/ErrorPage.jsx
@ -0,0 +1,24 @@
+import imgError from './assets/cat2.png'
+import { useNavigate } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <>
+                <br/><br/>
+                <div className="text-center">
+                <h2>Ой!</h2>
+                <h4>
+                    Мы не нашли эту страницу :C
+                </h4>
+                <br/>
+                <img src={imgError} height="80%"/>
+                </div>
+                <Button className="w-10 mt-5" onClick={() => navigate(-1)}>Вернуться назад</Button>
+        </>
+    );
+};
+
+export default ErrorPage;
--- a/src/pages/Errorpage/assets/cat2.png
+++ b/src/pages/Errorpage/assets/cat2.png
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@ -0,0 +1,9 @@
+#image {
+    width: 100%;
+}
+
+@media (max-width: 800px) {
+    #image {
+        display: none;
+    }
+}
--- a/src/pages/Login/Login.jsx
+++ b/src/pages/Login/Login.jsx
@ -0,0 +1,31 @@
+import "./Login.css";
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import imgLetter from "./assets/students.jpg";
+import LoginForm from "./components/LoginForm";
+
+const Login = () => {
+   
+    return (
+    <>
+        <Container >
+            <Row>
+                <Col sm={12} lg={4} className="me-3">
+                    <h3>Вход</h3>
+                    <h4>Личный кабинет</h4>
+                    <LoginForm/>
+                    <h5>Не получается войти?</h5>
+                    <h6>Обратитесь к <a href="./contacts">администратору</a>.</h6>
+                    <h6>Если у вас ещё нет учётной записи, <a href="./registration">зарегистрируйтесь</a>.</h6>
+                </Col>
+                <Col sm={0} lg={7}>
+                    <div id="image" className="text-center">
+                        <img src={imgLetter} className="w-100" alt="Здание университета"/>
+                    </div>
+                </Col>
+            </Row>
+        </Container>
+    </>
+    )
+};
+export default Login;
--- a/src/pages/Login/assets/students.jpg
+++ b/src/pages/Login/assets/students.jpg
--- a/src/pages/Login/components/LoginForm.jsx
+++ b/src/pages/Login/components/LoginForm.jsx
@ -0,0 +1,39 @@
+import { Form, FormLabel, Button } from 'react-bootstrap';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import useSubmit from './hooks/LoginHook';
+
+const LoginForm = () => {
+    const { register, handleSubmit} = useForm();
+    const { onSubmit } = useSubmit();
+    const navigate = useNavigate();
+
+    const makeSubmit = async (data) => {
+        const res1 = await onSubmit(data);
+        if (res1 === 1) {
+          alert('Пользователя с таким логином не существует');
+          return;
+        }
+        if (res1 === 2) {
+          alert('Введен неверный пароль');
+          return;
+        }
+        navigate('/');
+    };
+
+    return (
+    <Form className="mb-5" id="contacts-form" onSubmit={handleSubmit(async (data) => { await makeSubmit(data); })}>
+        <Form.Group controlId="login" className="mb-3">
+            <FormLabel>Логин:</FormLabel>
+            <Form.Control {...register('login')} type="text" name="login" required />
+        </Form.Group>
+        <Form.Group controlId="password">
+            <FormLabel>Пароль:</FormLabel>
+            <Form.Control {...register('password')} type="password" name="password" required />
+        </Form.Group>
+        <Button type="submit" className="mt-4">Войти</Button>
+    </Form>
+    )
+}
+
+export default LoginForm;
--- a/src/pages/Login/components/hooks/LoginHook.jsx
+++ b/src/pages/Login/components/hooks/LoginHook.jsx
@ -0,0 +1,20 @@
+import loginApiService from "../service/loginApiService";
+import useUser from "../../../../providers/hooks/UserHook";
+
+const useSubmit = () => {
+    const {userLogin} = useUser();
+    const onSubmit = async (data) => {
+        const res1 = await loginApiService.getByLogin(data.login);
+        if (res1.length === 0) {
+            return 1;
+          }
+        if (res1[0].password !== data.password) {
+            return 2;
+        }
+        userLogin(res1[0]);
+        return 3;
+    };
+    return { onSubmit};
+};
+
+export default useSubmit;
--- a/src/pages/Login/components/service/loginApiService.js
+++ b/src/pages/Login/components/service/loginApiService.js
@ -0,0 +1,5 @@
+import ApiService from "../../../../components/api/ApiService";
+
+const loginApiService = new ApiService('users');
+
+export default loginApiService;
--- a/src/pages/Main/Main.jsx
+++ b/src/pages/Main/Main.jsx
@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import { Carousel } from 'react-bootstrap';
+import Students1 from './assets/Students1.jpg';
+import Students2 from './assets/Students2.jpg';
+import Students3 from './assets/Students3.jpg';
+
+const Main = () => {
+    return (
+        <>
+            <div className="text-center">
+                <h4>Добро пожаловать на сайт</h4>
+                <h3><b>Государственного политехнического университета</b>!</h3>
+            </div>
+            <div className="text-justify">
+                На нашем сайте вы можете просмотреть <a href="news">последние новости</a>, прочитать <a href="university">информацию о нас</a>, и многое другое....
+                <br/><br/>
+                <Carousel data-bs-theme="dark">
+                    <Carousel.Item interval={1800}>
+                        <img src={Students1} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                    <Carousel.Item interval={1800}>
+                        <img src={Students2} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                    <Carousel.Item interval={1800}>
+                        <img src={Students3} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                </Carousel>
+            </div>
+        </>
+    );
+};
+
+export default Main;
--- a/src/pages/Main/assets/Students1.jpg
+++ b/src/pages/Main/assets/Students1.jpg
--- a/src/pages/Main/assets/Students2.jpg
+++ b/src/pages/Main/assets/Students2.jpg
--- a/src/pages/Main/assets/Students3.jpg
+++ b/src/pages/Main/assets/Students3.jpg
--- a/src/pages/News/News.jsx
+++ b/src/pages/News/News.jsx
@ -0,0 +1,31 @@
+import usePosts from "./hooks/usePosts";
+import PostTemplate from "./components/PostTemplate";
+import { Form, InputGroup } from "react-bootstrap";
+
+const News = () => {
+    const { searchTerm, handleChange, searchResults } = usePosts();
+
+    return (
+        <>
+            <div className="text-center">
+                <h3>Новости</h3>
+            </div>
+            <div className="col-5">
+                <InputGroup className=" mb-3">
+                    <InputGroup.Text id="basic-addon1">Поиск новости по тегу:</InputGroup.Text>
+                    <Form.Control placeholder="праздник программирование" value={searchTerm} onChange={handleChange} />
+                </InputGroup>
+            </div>
+            <br/>
+            <div className="row row-cols-1 row-cols-md-3 g-4">
+            {
+                searchResults.map((line) =>
+                <PostTemplate key={line.id} post={line}/>)
+            }
+            </div>
+            <br/>
+        </>
+    );
+};
+
+export default News;
--- a/src/pages/News/assets/1september.jpg
+++ b/src/pages/News/assets/1september.jpg
--- a/src/pages/News/assets/Halloween.jpg
+++ b/src/pages/News/assets/Halloween.jpg
--- a/src/pages/News/assets/icpc.jpg
+++ b/src/pages/News/assets/icpc.jpg
--- a/src/pages/News/assets/robokross.jpg
+++ b/src/pages/News/assets/robokross.jpg
--- a/src/pages/News/components/PostTemplate.jsx
+++ b/src/pages/News/components/PostTemplate.jsx
@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from './assets/200.png';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const PostTemplate = ({ post }) => {
+    return (
+        <div className="col">
+            <div className="card h-100">
+                <img src={post.image || imgPlaceholder} style={{ width: "100%", height: "330px" }} className="card-img-top" alt={post.title}/>
+                <div className="card-body">
+                    <h5 className="card-title">{post.title}</h5>
+                    <p className="card-text"><small className="text-body-secondary">{post.date}</small></p>
+                    <p className="card-text">{post.text}</p>
+                    <p className="card-text"><small className="text-body-secondary">
+                        {
+                            post.tage.split(" ").map((el) => (
+                                <i key={el}>{el} </i>
+                            ))
+                        }
+                    </small></p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+PostTemplate.propTypes = {
+    post: PropTypes.object,
+}
+
+export default PostTemplate;
--- a/src/pages/News/components/assets/200.png
+++ b/src/pages/News/components/assets/200.png
--- a/src/pages/News/hooks/usePosts.jsx
+++ b/src/pages/News/hooks/usePosts.jsx
@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import NewsApiService from '../../../components/services/NewsApiService';
+
+const usePosts = () => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        const data = await NewsApiService.getAll();
+        data.reverse();
+        setLines(data ?? []);
+    };
+
+
+    // для поиска
+    const [searchTerm, setSearchTerm] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
+    
+    const handleChange = ( event ) => {
+        setSearchTerm(event.target.value);
+    };
+
+    useEffect(() => {
+        getLines();
+        const results = lines.filter(line =>
+            line.tage.includes(searchTerm)
+        );
+        setSearchResults(results);
+    }, [searchTerm, linesRefresh]);
+
+    return {
+        searchResults,
+        handleLinesChange,
+        handleChange
+    };
+}
+
+export default usePosts;
--- a/src/pages/Profile/Profile.jsx
+++ b/src/pages/Profile/Profile.jsx
@ -0,0 +1,41 @@
+import { Container, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { useContext } from 'react';
+import { UserContext } from '../../providers/UserProvider';
+
+const Profile = () => {
+
+    // зашёл ли пользователь
+    const { user } = useContext(UserContext);
+
+    return (
+    <>
+        <div className="text-center">
+            <h3>Профиль</h3>
+        </div>
+        Полная информация о вашем профиле представлена ниже.
+        <br/>
+        <Container>
+            <Row>
+                <div>
+                    <b>ID: </b>{user ? user.id : null}
+                    <br/>
+                    <b>Логин:</b> {user ? user.login : null}
+                    <br/>
+                    <b>ФИО пользователя:</b> {user ? user.FIO : null}
+                    <br/>
+                    <b>Электронная почта:</b> {user ? user.email : null}
+                    <br/>
+                    <b>Дата рождения:</b> {user ? user.birthDate : null}
+                </div>
+                <nav>
+                    <Link to = '/'>
+                        Вернуться на главную
+                    </Link>
+                </nav>
+            </Row>
+        </Container>
+    </>
+    )
+};
+export default Profile;
--- a/src/pages/Registration/Registration.jsx
+++ b/src/pages/Registration/Registration.jsx
@ -0,0 +1,19 @@
+import RegistrationForm from './components/RegistrationForm.jsx';
+
+const Registration = () => {
+    return (
+        <>
+        <div className="text-center">
+            <h3>Регистрация</h3>
+            Регистрация на нашем сайте позволит Вам стать его полноценным участником.
+            <br/>
+            Вы сможете просматривать расписание групп, свои оценки и учебный план.
+            В случае возникновения проблем с регистрацией, обратитесь к <a href="./contacts">администратору</a>.
+        </div>
+       <br/><br/>
+       <RegistrationForm/>
+        </>
+    );
+};
+
+export default Registration;
--- a/src/pages/Registration/components/RegistrationForm.jsx
+++ b/src/pages/Registration/components/RegistrationForm.jsx
@ -0,0 +1,88 @@
+import { Container, Form, Row, Col, Button } from "react-bootstrap";
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import useSubmit from './hooks/RegistrationHook.jsx';
+
+const RegistrationForm = () => {
+    const { register, handleSubmit } = useForm();
+    const navigate = useNavigate();
+
+    const { onSubmit } = useSubmit();
+
+    const makeSubmit = async (data) => {
+
+        if (data.password !== data.checkPassword) {
+            alert('Пароли не совпадают');
+            return;
+        }
+
+        const res = onSubmit(data);
+
+        if (res === 1) {
+            alert('Пользователь с таким логином уже существует');
+            return;
+        }
+        if (res === 2) {
+            alert('Пользователь с таким email уже существует');
+            return;
+        }
+        // if (res === 3) {
+        //     alert('Повторно введённый пароль не совпадает!');
+        //     return;
+        // }
+        navigate('/registration_success');
+      };
+
+    return (
+        <Form onSubmit = {handleSubmit(async (data) => {await makeSubmit(data);})}>
+        <Container >
+            <Row xs={1} lg={3} className='mb-2'>
+                <Col className='mb-2'>
+                    <Form.Group controlId='login'>
+                        <Form.Label>Логин: </Form.Label>
+                        <Form.Control {...register('login')} type="text" name="login" required />
+                    </Form.Group>
+                </Col>
+                <Col className='mb-2'>
+                    <Form.Group controlId='FIO'>
+                        <Form.Label>ФИО: </Form.Label>
+                        <Form.Control {...register('FIO')} type="text" name="FIO" required />
+                    </Form.Group>
+                </Col>
+                <Col className='mb-2'>
+                    <Form.Group controlId='birthDate'>
+                        <Form.Label>Дата рождения: </Form.Label>
+                        <Form.Control {...register('birthDate')} type="date" name="birthDate" required />
+                    </Form.Group>
+                </Col>
+            </Row>
+            <Row xs={1} lg={3}>
+                <Col className='mb-2'>
+                    <Form.Group controlId='email'>
+                        <Form.Label>Email: </Form.Label>
+                        <Form.Control {...register('email')} type="email" name="email" required />
+                    </Form.Group>
+                </Col>
+                <Col className='mb-2'>
+                    <Form.Group controlId='password'>
+                        <Form.Label>Пароль: </Form.Label>
+                        <Form.Control {...register('password')} type="password" name="password" required />
+                    </Form.Group>
+                </Col>
+                <Col className='mb-2'>
+                    <Form.Group controlId='check-password'>
+                        <Form.Label>Проверка пароля: </Form.Label>
+                        <Form.Control {...register('checkPassword')} type="password" name="checkPassword" required />
+                    </Form.Group>
+                </Col>
+            </Row>
+            <br/>
+        </Container>
+        <div className="text-center">
+            <Button variant="primary" type="submit">Зарегистрироваться</Button>
+        </div>
+        </Form>
+    )
+}
+
+export default RegistrationForm;
--- a/src/pages/Registration/components/hooks/RegistrationHook.jsx
+++ b/src/pages/Registration/components/hooks/RegistrationHook.jsx
@ -0,0 +1,40 @@
+import useUser from '../../../../providers/hooks/UserHook.jsx';
+import RegApiService from '../services/regAPIservice.js';
+
+const useSubmit = () => {
+  const { userLogin } = useUser();
+
+  const getNewUser = (formData) => {
+    const logint = formData.login;
+    const FIOt = formData.FIO;
+    const birthDatet = formData.birthDate;
+    const emailt = formData.email;
+    const passwordt = formData.password;
+    
+    return {
+      login: logint,
+      FIO: FIOt,
+      birthDate: birthDatet,
+      email: emailt,
+      password: passwordt,
+    };
+
+  };
+  const onSubmit = async (data) => {
+    const res1 = await RegApiService.getByLogin(data.login);
+    if (res1.length !== 0) {
+      return 1;
+    }
+    const res2 = await RegApiService.getByEmail(data.email);
+    if (res2.length !== 0) {
+      return 2;
+    }
+    const newUser = getNewUser(data);
+    const curUser = await RegApiService.create(newUser);
+    userLogin(curUser);
+    return 3;
+  };
+  return { onSubmit };
+};
+
+export default useSubmit;
--- a/src/pages/Registration/components/services/regAPIservice.js
+++ b/src/pages/Registration/components/services/regAPIservice.js
@ -0,0 +1,5 @@
+import ApiService from '../../../../components/api/ApiService';
+
+const regAPIservice = new ApiService('users');
+
+export default regAPIservice;
--- a/src/pages/RegistrationSuccess/RegistrationSuccess.jsx
+++ b/src/pages/RegistrationSuccess/RegistrationSuccess.jsx
@ -0,0 +1,10 @@
+import React from 'react';
+
+const RegistrationSuccess = () => (
+    <>
+        <div className="text-center">
+            <h3>Регистрация прошла успешно!</h3>
+        </div>
+    </>
+);
+export default RegistrationSuccess;
--- a/src/pages/University/University.jsx
+++ b/src/pages/University/University.jsx
@ -0,0 +1,25 @@
+import imgUniversity from "./assets/University.jpg";
+
+const University = () => {
+    return (
+        <>
+            <div className="text-center">
+            <h3>История ГПУ✨</h3>
+            </div>
+            <p>29 мая 2001 года решением правительства РФ был создан Государственный политехнический университет. Новый ВУЗ был образован на базе Тольяттинского политехнического института и Тольяттинского филиала Самарского государственного педагогического университета.</p>
+            <p>История Политехнического института начинается с вечернего отделения Куйбышевского индустриального института, созданного при Куйбышевгидросторе в 1951 году. Строительство ГЭС остро нуждалось в квалифицированных инженерах. Руководил факультетом Д.Е. Чуркин, а в 1953 году его сменил к.т.н. В.Н. Зубков.</p>
+            <p>1 сентября 1951 года начались занятия 150 студентов. Первое время преподаватели приезжали из Куйбышева, лекции читали многие инженеры-практики со стройки, и сам начальник КГС И.В. Комзин. На отделении было всего два штатных сотрудника: В.Н. Зубков и А.Э. Лившиц. В 1962 году число сотрудников возросло до 90 человек, 8 из них имели ученую степень кандидатов наук.</p>
+            <p>В 1956 году состоялся первый выпуск инженеров-гидростроителей и инженеров-электриков. Постепенно открывались новые специальности, в 1959 году получили дипломы первые инженеры-механики. В 1961 было открыто дневное обучение.</p>
+            <p>В 1961 году были открыты механический факультет (декан В.Н. Зубков) и химико-электротехнический (декан Б.Н. Рачинский). В 1964 году был создан химико-технологический факультет.  В 1966 году были выпущены первые инженеры-технологи химического производства. В 1966 году на трех факультетах обучались 2800 студентов.</p>
+            <p>В октябре 1966 года на базе филиала был образован Тольяттинский политехнический институт. Немалую роль в организации института сыграли потребности в кадрах строящегося ВАЗа, а также наличие материальной базы.</p>
+            <p>Первым ректором нового ВУЗа был назначен профессор, доктор технических наук видный ученый из Куйбышева Арон Наумович Резников. Он сумел привлечь новые квалифицированные кадры и  создал современный институт с высоким учебным и научным потенциалом. Были созданы 13 новых кафедр, в том числе единственная в стране кафедра промышленной пайки. Благодаря А.Н. Резникову через 10 лет в ТПИ работали 7 докторов наук и 151 кандидат наук. За это время почти в 2 раза возрос набор студентов, и в 10 раз возросли объемы научных работ. Наиболее успешными были 80-е гг., когда учёные ТПИ осваивали в год  около 3 млн. руб.</p>
+            <p>Ежегодно ученые института получали десятки свидетельств на изобретения, всего же со времени создания ТПИ было получено   1134 авторских свидетельства на изобретения.</p>
+            <p>ТГУ – современный инновационный вуз. В 2010 году  университет стал победителем конкурса  Правительства РФ на Премию качества за 2009 год, дважды – в 2004 и 2011 году ТГУ стал лауреатом конкурса «Европейское качество» в группе «100  лучших вузов России». В 2011 году ТГУ завоевал  по итогам конкурса  СНГ за достижения в области качества  оказания услуг приз «Признание делового совершенства». Ректор ТГУ М.М. Криштал в 2011 г. удостоен звания «Российский лидер качества», награждён дипломом и медалью,  такую высокую оценку деятельности дала «Всероссийская организация качества».</p>
+            <p>В 2014 году в составе ТГУ 11 институтов, включая институт военного обучения, 44 кафедры, институт дистанционного обучения.</p>
+            <br/>
+            <img src={imgUniversity} height="250px" alt="Здание университета"/>
+        </>
+    );
+};
+
+export default University;
--- a/src/pages/University/assets/University.jpg
+++ b/src/pages/University/assets/University.jpg
--- a/src/providers/UserProvider.jsx
+++ b/src/providers/UserProvider.jsx
@ -0,0 +1,17 @@
+import { createContext, useReducer, useEffect } from 'react';
+import { loadUser, saveUser, userReducer } from './reducer/UserReduser.jsx';
+
+export const UserContext = createContext(null);
+
+export const UserProvider = ({ children }) => {
+  console.log('UserProvider');
+  const [user, dispatch] = useReducer(userReducer, null, loadUser);
+
+  useEffect(() => {
+    saveUser(user || null);
+  }, [user]);
+
+  return <UserContext.Provider value = {{ user, dispatch }}>
+    {children}
+  </UserContext.Provider>;
+};
--- a/src/providers/hooks/UserHook.jsx
+++ b/src/providers/hooks/UserHook.jsx
@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { UserContext } from '../UserProvider.jsx';
+import { userLogout, userLogin } from '../reducer/UserReduser.jsx';
+
+const useUser = () => {
+  const { dispatch } = useContext(UserContext);
+
+  return {
+    userLogout: () => dispatch(userLogout()),
+    userLogin: (user) => dispatch(userLogin(user)),
+  };
+};
+
+export default useUser;
--- a/src/providers/reducer/UserReduser.jsx
+++ b/src/providers/reducer/UserReduser.jsx
@ -0,0 +1,41 @@
+const USER_KEY = 'user';
+const USER_LOGIN = 'user/login';
+const USER_LOGOUT = 'user/logout';
+
+export const saveUser = (user) => {
+  console.log('User save');
+  localStorage.setItem('user', JSON.stringify(user));
+};
+
+export const loadUser = (initialValue = []) => {
+  const userData = localStorage.getItem(USER_KEY);
+  console.log('User load: ' + userData.login);
+  if (userData) {
+    return JSON.parse(userData);
+  }
+  return initialValue;
+};
+
+export const userReducer = (prevUser, action) => {
+  console.log(action);
+  const { user } = action;
+  switch (action.type) {
+    case USER_LOGOUT: {
+      return null;
+    }
+    case USER_LOGIN: {
+      return user;
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type}`);
+    }
+  }
+};
+
+export const userLogout = () => ({
+  type: USER_LOGOUT,
+});
+
+export const userLogin = (user) => ({
+  type: USER_LOGIN, user,
+});
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});