K-Connect Frontend k-connect.ru

🌟 О проекте

K-Connect — современная социальная платформа, разработанная для объединения людей через креативный контент. Наш фронтенд построен на React.js с Material UI для создания отзывчивого и приятного пользовательского интерфейса.

✨ Ключевые функции

• Лента контента: Публикация и просмотр постов с изображениями, видео и аудио
• Профили пользователей: Персонализированные профили с уникальными юзернеймами
• Система достижений: Бейджи и очки за активность
• Уведомления: Web Push и системные уведомления
• Музыкальный плеер: Встроенная поддержка воспроизведения и загрузки треков
• Темная тема: Полностью адаптивный дизайн для ночного использования
• И очень много чего, что невозможно расписать!

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

Требования

• Node.js 14+ и npm/yarn
• Доступ к бэкенду K-Connect API (или моковый сервер)

Установка

# Клонирование репозитория
git clone https://github.com/kconnect-labs/k-connect-frontend.git
cd k-connect-frontend

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

# или с yarn
yarn install

Запуск для разработки

npm run start
# или
yarn start

Сервер разработки запустится на http://localhost:3005.

Сборка для продакшн

npm run build
# или
yarn build

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

frontend/
├── public/           # Статические файлы
├── src/
│   ├── components/   # React компоненты
│   │   ├── Post/     # Компоненты постов
│   │   └── ...
│   ├── config/       # Конфиги 
│   ├── context/      # Контексты для авторизации/Музыки
│   ├── contextS/      # Контексты для авторизации Мессенджера
│   ├── hooks/        # Хуки
│   ├── pages/        # Компоненты страниц
│   ├── services/     # Сервисы (API, уведомления)
│   ├── utils/        # Утилиты (форматирование дат, изображения)
│   ├── App.js        # Корневой компонент
│   └── index.js      # Точка входа
└── package.json      # Зависимости и скрипты

🔧 Основные зависимости

• React: Библиотека пользовательского интерфейса
• Material UI: Компоненты Material Design
• Axios: HTTP-клиент для API-запросов
• React Router: Маршрутизация
• Web Push: Нативные Push-уведомления

🌐 Интеграция с бэкендом

Фронтенд взаимодействует с бэкендом через REST API. Все запросы к API настроены с использованием axios и централизованы в сервисах.

🛠️ Разработка

При разработке обратите внимание на:

1. Стиль кода: Следуйте принятым в проекте правилам форматирования
2. Производительность: Оптимизируйте рендеринг компонентов и загрузку ресурсов
3. Оптимизация изображений: Используйте встроенные утилиты для WebP-конвертации

Разработано QSOUL