NextJs Messenger Clone

Nextjs-mesenger-clon

Una aplicación de chat en tiempo real totalmente receptiva hecha con NextJS 13 (enrutador de aplicaciones), MongoDB, Tailwind CSS, Pusher, Next-Auth y Cloudinary.

• NextJS (13.4.x)
• Reaccionar (18.x)
• MongoDB (6.x)
• CSS de viento de cola (3.x)
• Empujador (5.x)
• Siguiente Auth (4.x)
• TypeScript (5.x)
• Production Build Script

Demostración en vivo

Ver una demostración en vivo en Vercel

Características

• Actualización de chat en tiempo real con Pusher
• Chat grupal
• Eliminar la historia del chat
• Alojamiento de imágenes con nube
• Soporte de tema dinámico (modo claro y oscuro)
• Soporte para pantallas de escritorio y móviles

Instalación

Configurar MongoDB

1. Navegue a https://www.mongodb.com/atlas/database y regístrese

2. Buscar y seleccionar Build a Database
   Seleccione el nivel gratuito y presione Create en la parte inferior
   

3. Crear un usuario (tenga en cuenta la contraseña)
   Desplácese hacia abajo para Add entries to your IP Access List
   Ingrese 0.0.0.0/0 y presione Add Entry
   

4. Presione Go to Databases
   

5. Haga clic en Connect y seleccione MongoDB for VSCode
   Copie la cadena de conexión y guárdela en un bloc de notas
   Reemplace <password> con su contraseña establecida en el paso 3
   Agregue test al final de la cadena de conexión (ex. connectionstring/test )
   

Configurar la autenticación de Github

1. Navegue a https://github.com/
   Haga clic en el menú desplegable de su perfil en la parte superior derecha
   Haga clic en Settings
   

2. Haga clic en Developer settings
   Haga clic en OAuth Apps
   Haga clic en New OAuth App
   

3. Da un nombre a tu aplicación
   Escriba http://localhost:3020/ en la Homepage URL y los campos Authorization callback URL .
   Haga clic en "Aplicación de registro"
   

4. Copie la Client Id y anótelo
   Haga clic en Generate a new client secret , copiarlo y anótelo hacia abajo
   

Configurar la autenticación de Google

1. Navegue a https://console.cloud.google.com y cree un nuevo proyecto
   

2. Navegue al proyecto recién creado y busque API & Services
   

3. Ir a OAuth consent screen
   Haga clic en el campo External
   Haga clic en CREATE
   

4. Haga clic en el campo App name y dale un nombre
   En el campo de correo de usuario, seleccione su correo electrónico
   Desplácese hacia abajo hasta Developer contact information y escriba su correo electrónico
   Haga clic SAVE AND CONTINUE hasta que esté en el paso Summary
   

5. Ir a Credentials
   Haga clic en CREATE CREDENTIALS
   Seleccione OAuth client ID
   

6. Seleccione Web application como tipo de aplicación
   Desplácese hacia abajo a Authorized redirect URIs y agregue http://localhost:3020/api/auth/callback/google
   Haga clic en CREATE
   Copie la CLient ID y Client Secret y anótelo
   

Configurar nube

1. Navegue a https://console.cloudinary.com e inicie sesión
   Ir al Dashboard y anote el Cloud name
   

2. Ir a la configuración
   Luego ve a Upload
   

3. Haga clic Add upload preset
   Cambiar Signing Mode a Unsigned
   Haga clic en Save copiar el nombre preestablecido recién agregado y anótelo hacia abajo
   

Empuje de configuración

1. Navegue a https://dashboard.pusher.com/channels
   Haga clic en Create app (o Get Started )
   Dale un nombre a la aplicación
   Seleccione React para frontend y Node.js para backend
   Crea la aplicación
   

2. Ir a App Keys
   Observe los valores
   

Proyecto de configuración

1. Repo de clon/descargar
2. Cree un archivo llamado .env.local en el directorio raíz de su proyecto, escriba lo siguiente en CMD/PowerShell

    cp env.example .env.local
   

3. Dentro del archivo .env.local , agregue las teclas MongoDB, Pusher, Cloudinary, GitHub y Google de los pasos anteriores
4. yarn install para instalar las dependencias (ejecute npm install yarn si no tiene hilo instalado)
5. yarn prisma db push para crear las colecciones DB
6. prisma generate para crear el cliente prisma

Uso

Desarrollo

yarn dev

• Construir la aplicación continuamente (HMR habilitado)

Producción

yarn build yarn start

• Construir la aplicación una vez (HMR deshabilitado) a /.next/

---

Todos los comandos

Dominio	Descripción
yarn dev	Construir la aplicación continuamente (HMR habilitado)
yarn build	Construir la aplicación una vez (HMR deshabilitado) a /.next/
yarn start	Construcción de producción de ejecución

Ver también

• Se tomaron algunas ideas de diseño de Facebook Messenger
• Algunas ideas de implementación para este proyecto están tomadas de Josh y Antonio
• El proyecto fue arrancado con create-next-app