🌐 Демо: traffic-analyzer.netlify.app

---

🌍 Курсова робота — Карта трафіку

Проєкт: Розробка веб-сервісу для аналізу даних про трафік у містах з візуалізацією на картах

📖 Опис проєкту

Карта трафіку — це веб-сервіс, який дозволяє користувачам переглядати поточний стан дорожнього руху у вибраних містах, використовуючи реальні дані TomTom Traffic API.
Проєкт створено з акцентом на простоту, наочність та швидкодію, у сучасному стилі Glass Nova Theme.

Користувач може:

• Переглядати завантаженість доріг у різних містах.
• Увімкнути або вимкнути темну тему.
• Отримувати повідомлення про своє місцезнаходження (якщо дозволено браузером).
• Надсилати повідомлення про помилки через форму підтримки.
• Користуватися зручним адаптивним інтерфейсом на будь-якому пристрої.

---

🧭 Основні можливості

Функціонал	Опис
🗺️ Інтерактивна карта	Візуалізація дорожнього руху з використанням TomTom API
⚙️ Перемикач теми	Зміна оформлення між світлою і темною темою
📍 Геолокація	Визначення місця користувача та автоматичне відображення трафіку
📨 Форма підтримки	Надсилання повідомлення про помилки або пропозиції
💬 Статуси запитів	Відображення стану завантаження або помилок при отриманні даних
🧾 Футер із соцмережами	Посилання на Telegram, GitHub, Instagram та інші платформи

---

🧩 Технологічний стек

⚛️ Frontend

• React (Vite) — створення односторінкового застосунку (SPA)
• JavaScript (ES6+) — логіка інтерфейсу
• CSS / Glass Nova Theme — сучасне візуальне оформлення
• @react-google-maps/api — відображення карти та шару трафіку
• Fetch API — запити до серверу та зовнішніх API
• OpenWeather API — прогноз погоди
• Geolocation API — визначення координат користувача
• sessionStorage — кешування прогнозу погоди

🖥️ Backend

• Node.js + Express.js — REST API сервер
• CORS, dotenv — безпечна робота з конфігураціями
• TomTom Traffic API — отримання реальних даних про трафік
• FS (File System) — запис звернень користувачів у логи
• Custom Middleware — централізована обробка помилок

🌐 Інтеграції

• Google Maps — карта, шар трафіку, супутниковий вигляд
• OpenWeather — прогноз погоди для міста
• TomTom Traffic API — реальні показники завантаженості доріг

💅 Додатково

• ESLint + Prettier — перевірка та форматування коду (рекомендовано)
• Light/Dark theme toggle — реалізовано через CSS-змінні
• Loading / Error states — візуальний контроль запитів до API
• Glass Nova Theme — фірмовий стиль з неоновими акцентами та прозорими елементами

---

📦 Як запустити:

1. Клонувати репозиторій:

   git clone https://github.com/xadeyll/TrafficLayer.git