https://qlty.sh/gh/Masterofowls/projects/simple-react-full-stack
Полнофункциональное realtime чат-приложение, построенное на основе React + Node.js + Express + Socket.IO. Пользователи могут обмениваться текстовыми сообщениями, эмодзи, GIF-анимациями и изображениями в реальном времени. Поддерживаются ответы на сообщения, @упоминания с автодополнением, отображение количества пользователей онлайн, а также сохранение сессии между перезагрузками. Приложение оптимизировано для мобильных устройств и работает как PWA.
👉 https://simple-react-full-stack.onrender.com
Ссылка работает в режиме инкогнито. При первом входе введите любое имя (1–20 символов) — регистрация и пароль не требуются.
Проект создан на основе туториала из каталога Project Based Learning — JavaScript:
- Оригинальный туториал: Learn Webpack for React
- Базовый шаблон: simple-react-full-stack
Базовый шаблон содержал только заготовку React + Express + Webpack без какой-либо функциональности. Поверх него реализовано:
| Фича | Описание |
|---|---|
| Realtime чат | Обмен сообщениями через Socket.IO с мгновенной доставкой |
| Имена пользователей | Экран ввода имени, отображение автора у каждого сообщения |
| Emoji picker | Встроенная панель выбора эмодзи с поиском по категориям |
| GIF search | Поиск и отправка GIF через GIPHY API |
| Загрузка изображений | Отправка фотографий (JPEG/PNG/GIF/WebP, до 5 МБ) через multer |
| Ответы на сообщения | Reply-to с цитированием оригинала |
| @Упоминания | Автодополнение @username с подсветкой в тексте |
| Индикатор набора | «User is typing…» в реальном времени |
| Онлайн-счётчик | Количество пользователей онлайн |
| Выход (Logout) | Кнопка выхода с очисткой сессии |
| Сохранение сессии | Имя сохраняется в localStorage — не нужно вводить заново после перезагрузки |
| PWA | Service Worker, manifest.json, установка на главный экран |
| Mobile-first CSS | Адаптивная вёрстка с 100dvh, safe-area insets, touch-friendly |
| SEO | robots.txt, sitemap.xml, meta-теги |
Вход в чат, отправка сообщений, эмодзи, GIF, загрузка изображений, ответы и @упоминания.
| Слой | Технологии |
|---|---|
| Frontend | React 16, Socket.IO Client, CSS (dark theme, responsive) |
| Backend | Node.js, Express, Socket.IO, Multer |
| API | GIPHY API (поиск GIF) |
| Сборка | Webpack 4, Babel 7, css-loader, style-loader |
| Деплой | Render (Web Service) |
| PWA | Service Worker, Web App Manifest |
# Клонировать репозиторий
git clone https://github.com/Masterofowls/simple-react-full-stack.git
cd simple-react-full-stack
# Установить зависимости
npm install
# Запуск в режиме разработки (frontend + backend)
npm run dev
# Или сборка и запуск продакшн-версии
npm run build
npm startПриложение будет доступно на http://localhost:3000 (dev) или http://localhost:8080 (production).
Авторизация через логин/пароль отсутствует. Для входа в чат достаточно ввести любое отображаемое имя (от 1 до 20 символов). Регистрация не требуется — проверяющий может войти сразу.
src/
├── client/
│ ├── index.js # Точка входа React + SW регистрация
│ ├── App.js # Главный компонент чата
│ ├── EmojiPicker.js # Компонент выбора эмодзи
│ ├── GifPicker.js # Компонент поиска GIF
│ └── app.css # Стили (dark theme, mobile-first)
└── server/
└── index.js # Express + Socket.IO сервер
public/
├── index.html # HTML-шаблон
├── manifest.json # PWA манифест
├── sw.js # Service Worker
├── robots.txt # SEO
└── sitemap.xml # Карта сайта
MIT