Платформа для проведения технических собеседований с LLM-анализом кода. веб-интерфейс для совместного редактирования кода в реальном времени (Monaco), с чатом, списком участников, комментариями и интеграциями с LLM через бэкенд и WebSocket.
Авторство: Весь фронтенд от идеи заказчика до MVP (проектирование, дизайн, архитектура, реализация) выполнен одним разработчиком — мной @adelsspace
Код можно посмотреть в папке frontend
live demo http://notbadcode.com/
- React 19 + TypeScript
- Vite — сборка и dev-сервер
- Redux Toolkit + RTK Query — глобальное состояние и API-интеграция
- socket.io-client — realtime через WebSocket
- @monaco-editor/react (Monaco Editor) — редактор кода (подсветка, курсоры, выделения)
- Sass (scss) — стили
- ESLint — линтинг
- Docker + Nginx — production Dockerfile для сборки и отдачи /dist через nginx
- Прочие:
react-router-dom,
- Java 17
- Maven
- Spring Boot Web
- WebSocket
- Spring Data JPA
- PostgreSQL
- Kafka/rabbit/redis
- JUnit5
- Testcontainers
- Liquibase
- Совместное редактирование кода в реальном времени (синхронизация текста, курсоров и выделений).
- Подсветка синтаксиса для многих языков (JS/TS, Python, Java и т.д.).
- Встроенный чат для участников комнаты.
- Список участников и индикация активности.
- Комментарии/аннотации.
- Создание комнаты (генерация UUID + возврат
adminToken). - Авторизация администратора комнаты (через admin token / RoomAuth).
- Переключение темы (light/dark), управление шрифтом редактора.
- Модальное окно для отправки запросов к LLM (GptModal) — интеграция реализована через бэкенд.
- Кнопки управления редактором, копирование URL, базовые настройки UX.
- Node.js (рекомендуется LTS — Node 18+)
- npm (или yarn/pnpm)
Бэкенд API (локально или удалённо) для обработки
/apiроутов и выдачи WebSocket URL.
- Собрать образ бэкенда по инструкции
- Запустить команду:
docker-compose up -d --build
# из корня проекта (где package.json)
npm installnpm run devОткройте http://localhost:5173 (или адрес, который выдаст Vite).
По умолчанию фронтенд делает запросы к
/api. Для работы в development обеспечьте:
- локальный бэкенд, обслуживающий
/api, или- прокси/настройку
VITE_API_BASE_URL/ изменениеbaseUrlвsrc/store/api/roomApi.ts.
npm run build
npm run previewВ репозитории есть Dockerfile, который собирает приложение и отдаёт /dist через nginx (порт в образе — 3000).
Примеры:
docker build -t frontend:latest .
docker run -p 3000:3000 frontend:latest- RTK Query настроен с
baseQuery: fetchBaseQuery({ baseUrl: "/api" })(файл:src/store/api/roomApi.ts). socketServiceзапрашиваетgetWebSocketUrl, затем подключается кio(wsConnectUrl, ...). Бэкенд должен возвращать корректныйwsConnectUrl.- Если бэкенд на другом хосте — используйте переменные окружения (Vite
VITE_API_BASE_URL) или proxy.
createRoom— создание комнаты (возвращаетadminToken).getWebSocketUrl— получение WebSocket URL.addUser— регистрация пользователя в комнате.getRoom— получение информации о комнате.addAdmin— привязка admin token.- Комментарии: отдельный
commentApi.
Смотpите src/types/api.types.ts для ожидаемых DTO.
src/pages— страницы (Home, Room, NotFound)src/components— UI-компоненты (CodeEditor, Chat, UsersList, GptModal и пр.)src/store— Redux store, slices, RTK Query apisrc/services— socketService и т.п.src/hooks— кастомные хукиsrc/styles— SCSS и переменныеsrc/utils— утилитыpublic— статические файлы
npm run dev— dev servernpm run build— production buildnpm run preview— preview собранного билдаnpm run lint— ESLint
- Все этапы фронтенда — от идеи до MVP — выполнены одним разработчиком (проектирование, дизайн, архитектура, реализация) — @adelsspace
- Для вопросов по коду и сборке — укажите контакт/issue в репозитории.