Ru Tesla Chargers Frontend

Интерфейсное приложение для поиска и просмотра зарядных станций Tesla с возможностью фильтрации, отзывами и интерактивными картами.

Особенности

• 🗺️ Интерактивная карта с отображением зарядных станций Tesla
• 🔍 Фильтрация станций по мощности
• 📊 Детальная информация о каждой станции
• ⭐ Отзывы пользователей и рейтинги станций
• 📱 Адаптивный интерфейс для мобильных и десктопных устройств
• 📍 Кластеризация маркеров для улучшения навигации на карте
• 📏 Расчет расстояния и сортировка станций относительно вашего расположения

Технический стек

• Vue 3 с Composition API
• TypeScript для улучшенной типизации
• Pinia для управления состоянием
• Яндекс Карты API для отображения карт
• Адаптивный дизайн для различных устройств

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

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

git clone https://github.com/herenickname/ru-tesla-chargers.git
cd ru-tesla-chargers

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

npm install

3. Создайте файл .env в корневой директории и добавьте API ключ для Яндекс Карт:

VITE_YANDEX_MAPS_API_KEY=ваш_ключ_яндекс_карт

4. Запустите проект в режиме разработки:

npm run dev

5. Или соберите проект для продакшена:

npm run build

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

├── src/
│   ├── components/       # Vue компоненты
│   │   ├── ChargerMapYandex.vue       # Компонент карты с маркерами
│   │   ├── ChargingStationsList.vue   # Список станций с фильтрами
│   │   └── ChargingStationDetails.vue # Детальная информация о станции
│   ├── stores/           # Pinia хранилища данных
│   │   └── chargingStations.ts        # Хранилище для станций зарядки
│   ├── types/            # TypeScript типы и интерфейсы
│   │   ├── models.ts                 # Определение типов данных
│   │   └── stations-reviews.data.ts  # Тестовые данные станций
│   ├── utils/            # Вспомогательные функции
│   │   └── colors.ts                 # Генерация цветов для провайдеров
│   ├── App.vue           # Корневой компонент
│   └── main.ts           # Точка входа приложения
├── .env                  # Переменные окружения
└── package.json          # Зависимости проекта