Market Order SPA

demo.mov

Описание

Приложение представляет собой одностраничное веб-приложение (SPA) для размещения рыночных ордеров на покупку токенов. Оно реализовано с использованием React, TypeScript, MobX, и Socket.IO. Приложение обновляет данные в реальном времени через WebSocket.

---

Функциональность

1. Создание ордера:

   • Ввод суммы в токенах или долларах.
   • Переключение между вводом в токенах и долларах.
   • Автоматический пересчет значений на основе текущего курса токена.

2. Список ордеров:

   • Отображение всех созданных ордеров.
   • Статусы ордеров обновляются в реальном времени.
   • Информация о времени создания каждого ордера.

3. Текущий курс токена:

   • Отображение курса токена, обновляющегося через WebSocket.

---

Технологии

• Frontend: React, TypeScript, MobX, Bootstrap.
• WebSocket: Socket.IO.
• Сборка: Vite.

---

Установка и запуск

1. Клонируйте репозиторий

git clone https://github.com/AndrewKhizhnyak/market-order.git
cd market-order

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

npm install

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

npm run dev

Откройте браузер и перейдите по адресу: http://localhost:5173.

---

Структура проекта

market-order/
├── public/           # Статические файлы
├── src/
│   ├── components/   # Реакт-компоненты
│   │   ├── CurrentRate.tsx   # Отображение текущего курса
│   │   ├── OrderForm.tsx     # Форма создания ордера
│   │   └── OrderList.tsx     # Список ордеров
│   ├── stores/       # Состояние (MobX)
│   │   ├── OrderStore.ts     # Стор для ордеров
│   │   └── RateStore.ts      # Стор для курса
│   ├── utils/        # Утилиты
│   │   └── websocket.ts      # Настройка WebSocket
│   ├── App.tsx       # Основное приложение
│   └── main.tsx      # Точка входа
├── package.json      # Зависимости проекта
├── tsconfig.json     # Конфигурация TypeScript
├── vite.config.ts    # Конфигурация Vite
└── README.md         # Описание проекта

---

Использование

1. Введите сумму в поле ввода (в токенах или долларах).
2. Переключайтесь между вводом в токенах или долларах с помощью кнопок.
3. Нажмите "Создать ордер" для добавления нового ордера в список.
4. Список ордеров и их статусы обновляются в реальном времени через WebSocket.
5. Текущий курс токена отображается в верхней части страницы.

---

Настройка WebSocket

Приложение ожидает подключения WebSocket-сервера на http://localhost:3000.

---

Демо

• Создание ордера: Введите данные и нажмите "Создать ордер".
• Реальное время: Курс и статусы обновляются через WebSocket.

---

Контакты

Если у вас есть вопросы или предложения, напишите мне! 😊