NextJs Messenger Clone

NextJS-Messenger-Clone

Полностью отзывчивое приложение для чата в реальном времени, сделанное с NextJS 13 (маршрутизатор приложений), MongoDB, Tailwind CSS, толкатель, Next-Auth и Cloudary.

• NextJs (13.4.x)
• Реагировать (18.x)
• Mongodb (6.x)
• Tailwind CSS (3.x)
• Толкатель (5.x)
• Next-Auth (4.x)
• TypeScript (5.x)
• Сценарий производства

Живая демонстрация

Увидеть живую демонстрацию на Vercel

Функции

• Обновление чата в реальном времени с Pusher
• Групповой чат
• Удалить историю чата
• Хостинг изображений с облачным
• Динамическая поддержка темы (легкий и темный режим)
• Поддержка настольных и мобильных экранов

Установка

Настройка Mongodb

1. Перейдите на https://www.mongodb.com/atlas/database and Register

2. Найдите и выберите Build a Database
   Выберите бесплатный уровень и нажмите на Create внизу
   

3. Создайте пользователя (отметьте пароль)
   Прокрутите вниз, чтобы Add entries to your IP Access List
   Введите 0.0.0.0/0 и нажмите Add Entry
   

4. Нажмите, Go to Databases
   

5. Нажмите на Connect и выберите MongoDB for VSCode
   Скопируйте строку подключения и сохраните ее в блокноте
   Замените <password> на установленную пароль на шаге 3
   Добавьте test в конце строки подключения (Ex. connectionstring/test )
   

Установка аутентификации GitHub

1. Перейдите на https://github.com/
   Нажмите на выпадающий в свой правый профиль в правом верхнем углу
   Нажмите Settings
   

2. Нажмите Developer settings
   Нажмите OAuth Apps
   Щелкните New OAuth App
   

3. Дайте имя своему приложению
   Введите http://localhost:3020/ в Homepage URL и Authorization callback URL .
   Нажмите «Зарегистрировать приложение»
   

4. Скопируйте Client Id и отметьте его
   Нажмите Generate a new client secret , «Скопируйте» и запишите его
   

Настройка аутентификации Google

1. Перейдите на https://console.cloud.google.com и создайте новый проект
   

2. Перейдите к недавно созданному проекту и поиску API & Services
   

3. Перейти к OAuth consent screen
   Нажмите на External поле
   Нажмите CREATE
   

4. Нажмите на поле App name и дайте ему имя
   В поле «Пользовательская почта» выберите свою электронную почту
   Прокрутите вниз до Developer contact information и введите электронное письмо
   Нажмите SAVE AND CONTINUE пока вы не выполните на Summary
   

5. Перейти к Credentials
   Нажмите CREATE CREDENTIALS
   Выберите OAuth client ID
   

6. Выберите Web application как тип приложения
   Прокрутите вниз до Authorized redirect URIs и добавить http://localhost:3020/api/auth/callback/google
   Нажмите CREATE
   Скопируйте CLient ID и Client Secret и отметьте его
   

Установка облачной

1. Перейдите на https://console.cloudinary.com и вход в систему
   Перейти на Dashboard и отметьте Cloud name
   

2. Перейти к настройкам
   Затем перейти к Upload
   

3. Нажмите Add upload preset
   Изменить Signing Mode на Unsigned
   Нажмите Save копию недавно добавленное предустановленное имя и отметьте его
   

Настройка толкателя

1. Перейдите к https://dashboard.pusher.com/channels
   Нажмите Create app (или Get Started )
   Дайте приложению имя
   Выберите React для Frontend и Node.js для бэкэнда
   Создайте приложение
   

2. Перейти к App Keys
   Заметьте значения
   

Настройка проекта

1. Клон/скачать репо
2. Создайте файл с именем .env.local в корневом каталоге вашего проекта, введите следующее в Cmd/PowerShell

    cp env.example .env.local
   

3. Внутри файла .env.local добавьте ключи MongoDB, Pusher, Cloudarian, GitHub и Google из предыдущих шагов
4. yarn install для установки зависимостей (запустите npm install yarn если у вас установлена пряжа)
5. yarn prisma db push создать коллекции DB
6. prisma generate для создания клиента Prisma

Использование

Разработка

yarn dev

• Построить приложение непрерывно (HMR включена)

Производство

yarn build yarn start

• Создайте приложение один раз (HMR отключен) до /.next/

---

Все команды

Командование	Описание
yarn dev	Построить приложение непрерывно (HMR включена)
yarn build	Создайте приложение один раз (HMR отключен) до /.next/
yarn start	Запустить производственную сборку

Смотрите также

• Некоторые дизайнерские идеи были взяты из Facebook Messenger
• Некоторые идеи реализации для этого проекта взяты у Джоша и Антонио
• Проект был загружен с Create-Next-App