📈 Биржевой монитор

Веб-приложение для отображения актуальных котировок акций с возможностью поиска, фильтрации и автоматического обновления данных.

https://peter-partner-three.vercel.app/

---

📋 Описание

Биржевой монитор позволяет:

• Просматривать текущие цены акций в реальном времени
• Следить за изменениями котировок
• Искать акции по названию
• Фильтровать акции по их состоянию (растущие / падающие)

---

🛠️ Технологии

• React 18+
• TypeScript
• Material UI
• fetch
• Finnhub API
• recharts

---

⚙️ Функционал

• 🔄 Автоматическое обновление каждые 5 секунд
• 🔍 Поиск акций по названию
• 📉 Фильтрация: «Только растущие» / «Только падающие»
• 📊 График изменения цены (использовал эмуляцию API, ввиду неимения premium Finnhub API KEY)

---

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

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

git clone https://github.com/webDevArtur/peterPartner.git cd peterPartner

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

npm install

3. Получите API ключ от Finnhub.io

1. Зарегистрируйтесь на Finnhub.io
2. Перейдите в личный кабинет
3. Скопируйте ваш API Key

4. Создайте .env файл

В корне проекта создайте файл .env и добавьте:
REACT_APP_FINNHUB_API_KEY=ваш_api_ключ_сюда

5. Запустите проект

npm run dev

Откройте http://localhost:5173/

---

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

src/
├── api/            # Работа с API
├── assets/         # Статические файлы
├── components/     # Компоненты интерфейса
├── constants/      # Константы
├── hooks/          # Кастомные хуки
├── pages/          # Страницы приложения
├── types/          # Типы TypeScript
├── App.tsx         # Главный компонент
└── index.tsx       # Точка входа

---

📌 Фильтрация

• Растущие: текущая цена > цена открытия
• Падающие: текущая цена < цена открытия

---

💡 Дополнительные функции

📊 Графики (Recharts)
⏳ История цен
📱 Адаптивный дизайн

---

🧪 Команды

Команда	Действие
npm run dev	Запуск разработки
npm run build	Production-сборка

---