Real-Time Chat Application

Це повноцінний застосунок для обміну повідомленнями в режимі реального часу, побудований на сучасних технологіях веб-розробки. Проєкт складається з клієнтської частини (React) та серверної частини (Node.js), які взаємодіють через WebSockets.

Основні можливості

• Авторизація користувачів: Простий вхід за допомогою імені користувача.
• Керування кімнатами: Можливість створювати нові чат-кімнати, перейменовувати їх або видаляти (якщо ви власник).
• Обмін повідомленнями: Миттєве отримання та відправка повідомлень за допомогою Socket.io.
• Автоматичне створення БД: При старті сервер перевіряє наявність бази даних у PostgreSQL і створює її автоматично, якщо вона відсутня.

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

Backend

• Node.js та Express: Основа сервера.
• Socket.io: Забезпечує зв'язок у реальному часі.
• Sequelize ORM: Робота з базою даних.
• PostgreSQL: Надійне сховище даних.
• TypeScript: Типізація для підвищення якості коду.

Frontend

• React 19: Бібліотека для створення інтерфейсу.
• Vite: Швидкий інструмент для збірки проєкту.
• Sass (SCSS): Препроцесор для стилізації.
• Socket.io-client: Клієнтська частина для роботи з сокетами.
• TypeScript: Забезпечує строгу типізацію на клієнті.

Вимоги до оточення

Для успішного запуску вам знадобляться:

• Node.js (версія 18.x або новіша)
• PostgreSQL (запущений локально або у Docker)
• npm або yarn

Інструкція із запуску

1. Клонування проєкту та встановлення залежностей

Виконайте команду в кореневій директорії для встановлення залежностей обох частин проєкту:

npm install

Ця команда автоматично запустить npm install у папках backend та frontend.

2. Налаштування бази даних

Створіть файл .env у директорії backend/ за зразком:

PORT=5000
DB_NAME=chat_db
DB_USER=ваш_користувач_postgres
DB_PASSWORD=ваш_пароль
DB_HOST=localhost
DB_PORT=5432

3. Запуск сервера (Backend)

Перейдіть у папку сервера та запустіть його:

cd backend
npm start

Сервер автоматично синхронізує моделі з базою даних. При першому запуску буде створено необхідні таблиці.

4. Запуск клієнта (Frontend)

Відкрийте новий термінал, перейдіть у папку фронтенду та запустіть режим розробки:

cd frontend
npm run dev

Після цього застосунок буде доступний за адресою, вказаною в терміналі (зазвичай http://localhost:5173).

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

• /backend — логіка сервера, робота з базою даних та обробка сокет-подій.
• /frontend — користувацький інтерфейс на React.
• /backend/src/models — моделі даних Sequelize (кімнати та повідомлення).
• /backend/src/sockets — обробники подій Socket.io.
• /frontend/src/components — основні UI-компоненти чату.