Web Frontend: Прототип панели администратора для управления резервуарами

Проект представляет собой прототип панели администратора для управления резервуарами. В проекте реализована возможность выполнения CRUD-операций с резервуарами:

• получить список резервуаров;
• добавить новый резервуар;
• изменить информацию о резервуаре;
• удалить резервуар;
• заблокировать / разблокировать резервуар. Также реализовали функционал поиска резервуара по имени.

В проекте использовали функциональные компоненты, хуки и управление состоянием.

Проект создан с помощью инструмента для сборки и разработки фронтенд-приложений - Vite и JavaScript-библиотеки - React.

Для обработки запросов API с клиентской стороны было решено создать сервер, так как прямые запросы к API не работали из-за ограничений CORS (Cross-Origin Resource Sharing).

CORS — это механизм безопасности, который ограничивает доступ к ресурсам между различными доменами. Проблемы с CORS возникали при попытке клиента отправить запросы напрямую к API, находящемуся на другом домене или порту.

Для решения этой проблемы был создан сервер-прокси, который принимает запросы от клиента и перенаправляет их к API. Это позволяет избежать ограничений CORS, так как сервер и клиент теперь работают на одном домене, и запросы обрабатываются через этот сервер.

Адаптивность дизайну добавили используя Tailwind CSS.

Технологии

• Язык программирования: typescript;
• Управление состоянием: Zustand;
• HTTP-клиент: Axios;
• Линтер: typescript-eslint
• Стили: Tailwind CSS

Развертывание проекта

1. Клонирование репозитория

Склонируйте этот репозиторий на свою машину:

2. Установка зависимостей

Установите все зависимости с помощью pnpm:

3. Запуск

Запустите сервер:

Запустите приложение:

4. Docker

Для запуска приложения в Docker:

Соберите Docker-образ:

Запустите контейнер: