React + TypeScript + Vite

🏔️ Hutsuls

Современное веб-приложение для сообщества Hutsuls, построенное с использованием React, Vite, TypeScript и Bun. Приложение оптимизировано для production использования с Docker и включает продвинутое логирование с отслеживанием IP-адресов.

✨ Особенности

🚀 Супер быстрая разработка с Bun и Vite
🎯 Полная типизация с TypeScript
🐳 Production-ready Docker с multi-stage builds
📊 Продвинутое логирование с IP-трекингом и аналитикой
🌍 Мультиязычность (UA/EN)
🎨 Современный UI с адаптивным дизайном
📱 Мобильная оптимизация
🔧 Hot Module Replacement для быстрой разработки
🛡️ Безопасность с настроенными CSP заголовками
📈 Мониторинг и health checks
⚡ Оптимизированная сборка с code splitting

🚀 Быстрый старт

Предварительные требования

Bun >= 1.0.0
Docker и Docker Compose (опционально)
Node.js >= 18.0.0 (как fallback)

Автоматическая установка

# Клонируйте репозиторий
git clone https://github.com/pavlotech/Hutsuls.git
cd Hutsuls

# Запустите автоматическую настройку
chmod +x scripts/setup.sh
./scripts/setup.sh

Ручная установка

# Установите зависимости
bun install

# Запустите dev сервер
bun run dev

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

Команды разработки

# Разработка
bun run dev              # Запуск dev сервера
./scripts/dev.sh         # Расширенный dev режим

# Сборка
bun run build            # Production сборка
./scripts/build.sh       # Расширенная сборка с проверками

# Проверки
bun run type-check       # Проверка TypeScript
bun run lint             # Линтинг кода
bun run lint:fix         # Автоисправление линтера

# Предварительный просмотр
bun run preview          # Просмотр production сборки

Docker команды

# Быстрые команды
./scripts/docker.sh deploy    # Полный production деплой
./scripts/docker.sh dev       # Development режим в Docker
./scripts/docker.sh logs      # Просмотр логов
./scripts/docker.sh status    # Статус сервисов

# Управление сервисами
docker-compose up -d          # Запуск сервисов
docker-compose down           # Остановка сервисов
docker-compose logs -f        # Просмотр логов

🏗️ Архитектура

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

Hutsuls/
├── src/
│   ├── App.tsx              # Главный компонент
│   ├── main.tsx             # Точка входа
│   ├── index.css            # Глобальные стили
│   ├── services/
│   │   └── logger.ts        # Сервис логирования
│   └── assets/              # Статические ресурсы
├── public/                  # Публичные файлы
├── scripts/                 # Утилиты и скрипты
├── nginx/                   # Конфигурация Nginx
├── docker-compose.yml       # Docker Compose конфигурация
├── Dockerfile              # Multi-stage Docker образ
├── vite.config.ts          # Конфигурация Vite
└── package.json            # Зависимости и скрипты

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

Фронтенд: React 19 + TypeScript + Vite
Сборщик: Bun (основной), Node.js (fallback)
Стили: CSS3 с CSS-in-JS поддержкой
Иконки: Iconify React
Контейнеризация: Docker + Docker Compose
Веб-сервер: Nginx (production)
Логирование: Кастомный сервис с IP-трекингом

📊 Логирование и мониторинг

Приложение включает продвинутую систему логирования:

Возможности логгера

🌐 IP-адрес трекинг с геолокацией
📱 Детальная информация о браузере и устройстве
⚡ Performance мониторинг
🎯 Пользовательские действия и взаимодействия
💾 Локальное хранение логов с ротацией
🚨 Автоматическая отправка критических ошибок
📈 Статистика сессий и аналитика

Просмотр логов

# В браузере (DevTools Console)
# Логи автоматически выводятся с цветным форматированием

# Docker логи
docker-compose logs -f app       # Логи приложения
docker-compose logs -f nginx     # Логи Nginx

# Nginx access логи с IP
docker exec hutsuls-nginx tail -f /var/log/nginx/hutsuls_access.log

🐳 Docker deployment

Production развертывание

# Автоматическое развертывание
./scripts/docker.sh deploy

# Или пошагово
./scripts/build.sh                    # Сборка приложения
docker-compose build                  # Сборка образов
docker-compose up -d                  # Запуск сервисов

Доступные порты

3333 - Основное приложение (Bun serve)
3334 - Nginx reverse proxy
5173 - Development сервер (только dev)

Мониторинг

# Статус сервисов
./scripts/docker.sh status

# Health checks
curl http://localhost:3333/health     # App health
curl http://localhost:3334/health     # Nginx health

# Просмотр ресурсов
docker stats hutsuls-app hutsuls-nginx

🔧 Конфигурация

Environment переменные

# .env файл
NODE_ENV=production
PORT=3333
HOST=0.0.0.0
VITE_APP_VERSION=1.0.0
VITE_BUILD_DATE=2024-01-01T00:00:00Z

Vite конфигурация

Приложение использует оптимизированную Vite конфигурацию с:

Code splitting для лучшего кэширования
Asset оптимизация
TypeScript интеграция
Development и production режимы

Nginx конфигурация

Gzip сжатие
Rate limiting
Security headers
Статическое кэширование
Reverse proxy для API

🔒 Безопасность

CSP (Content Security Policy) заголовки
XSS защита
CSRF protection
Rate limiting
Secure Docker контейнеры (non-root пользователь)
Минимальные Docker образы (Alpine Linux)

🌍 Интернационализация

Поддерживаемые языки:

🇺🇦 Украинский (UA) - по умолчанию
🇬🇧 Английский (EN)

Конфигурация языков в config.json и public/config.json.

📈 Производительность

Оптимизации

Bun для сверхбыстрой установки зависимостей
Vite для мгновенного HMR
esbuild для быстрой сборки
Code splitting для оптимального загрузки
Asset optimization для минимального размера
Docker multi-stage builds для production

Метрики

Время сборки: ~5-10 секунд
Bundle размер: ~200-500KB (gzipped)
First Contentful Paint: <1.5s
Time to Interactive: <2s

🤝 Вклад в проект

Fork репозиторий
Создайте feature ветку (git checkout -b feature/amazing-feature)
Commit изменения (git commit -m 'Add amazing feature')
Push в ветку (git push origin feature/amazing-feature)
Создайте Pull Request

Разработка

# Настройка development окружения
./scripts/setup.sh

# Запуск в dev режиме
./scripts/dev.sh

# Проверки перед commit
bun run lint
bun run type-check
bun run build

📋 Troubleshooting

Частые проблемы

Bun не установлен

curl -fsSL https://bun.sh/install | bash
source ~/.bashrc

Docker не запускается

sudo systemctl start docker
sudo usermod -aG docker $USER

Ошибки типизации

bun run type-check
# Проверьте tsconfig.json

Проблемы с портами

# Проверьте занятые порты
lsof -i :3333
lsof -i :3334

📄 Лицензия

Этот проект лицензирован под MIT License - см. LICENSE файл для деталей.

👥 Команда

Pavel - @pavlotech - Основной разработчик

📞 Поддержка

💬 Discord: Hutsuls Server
🐛 Issues: GitHub Issues
📧 Email: support@hutsuls.com

Сделано с ❤️ для сообщества Hutsuls

Discord Landing

Стабильный лендинг для Discord сервера с автоматическим fallback механизмом.

🚀 Быстрый старт

С Docker (рекомендуется для сервера):

# Сборка и запуск
docker-compose up --build -d

# Мониторинг
./monitor.sh

# Автоматический деплой
./deploy.sh

Локальная разработка:

# Установка зависимостей
bun install

# Разработка
bun run dev

# Сборка
bun run build

# Предварительный просмотр
bun run preview

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
emblems		emblems
nginx		nginx
public		public
scripts		scripts
src		src
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
Dockerfile.simple		Dockerfile.simple
QUICKFIX.md		QUICKFIX.md
README.md		README.md
TROUBLESHOOTING.md		TROUBLESHOOTING.md
bun.lock		bun.lock
bun.lockb		bun.lockb
config.json		config.json
docker-compose.simple.yml		docker-compose.simple.yml
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

React + TypeScript + Vite

🏔️ Hutsuls

✨ Особенности

🚀 Быстрый старт

Предварительные требования

Автоматическая установка

Ручная установка

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

Команды разработки

Docker команды

🏗️ Архитектура

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

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

📊 Логирование и мониторинг

Возможности логгера

Просмотр логов

🐳 Docker deployment

Production развертывание

Доступные порты

Мониторинг

🔧 Конфигурация

Environment переменные

Vite конфигурация

Nginx конфигурация

🔒 Безопасность

🌍 Интернационализация

📈 Производительность

Оптимизации

Метрики

🤝 Вклад в проект

Разработка

📋 Troubleshooting

Частые проблемы

📄 Лицензия

👥 Команда

📞 Поддержка

🚀 Быстрый старт

С Docker (рекомендуется для сервера):

Локальная разработка:

Expanding the ESLint configuration

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages