Проект: Messenger

Описание:

Аналог приложения Messenger для обмена сообщениями в режиме реального времени.

Возможности приложения:

• Авторизация пользователя через Google или GitHub
• Обмен сообщениями в режиме реального времени
• возможность отправки изображений
• Статус о прочтении сообщения
• Статус активности пользователя (Online/Offline)
• Создание групповых чатов
• Настройка профиля

Используемые технологии:

• Адаптивная верстка для всех устройств
• Для стилизации элементов страницы используется TailwindCSS
• Авторизация пользователя реализована с помощью NextAuth
• Загрузка файлов и изображений реализована при помощи Uploadcare
• Для обмена сообщениями в режиме реального времени используется Pusher
• Работа с формами реализована при помощи React-hook-form
• Обработка ошибок сервера реализована при помощи React-hot-toast
• Для работы с базой данных используется Prisma
• Для Code Style используется ESLint совместно с Airbnb

Ссылка на сайт

Stacks:

• TypeScript
• Next.js 13
• Prisma
• MongoDB
• Tailwind CSS
• Eslint
• Node v18.x

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

1. Склонировать проект на свой компьютер

git clone https://github.com/SergeyKazarinov/messenger.git

2. Перейти в папку с проектом и установить зависимости в проекте

npm install

3. Чтобы запустить проект, необходимо добавить следующие переменные среды в файл .env

DATABASE_URL=
NEXTAUTH_SECRET=
GITHUB_ID=
GITHUB_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=

4. Установить Prisma

npx prisma db push

5. Запустить проект

npm run dev