NextJs Messenger Clone

NextJS-Messenger-Clone

Um aplicativo de bate-papo em tempo real totalmente responsivo feito com o NextJS 13 (roteador de aplicativos), MongoDB, CAIDWIND CSS, Pusher, Next-Auth e Cloudinary.

• NextJs (13.4.x)
• React (18.x)
• MongoDB (6.x)
• Tailwind CSS (3.x)
• Empurrador (5.x)
• Next-Auth (4.x)
• Datilografado (5.x)
• Script de construção de produção

Demoção ao vivo

Veja uma demonstração ao vivo no vercel

Características

• Atualização de bate-papo em tempo real com empurrador
• Bate -papo em grupo
• Excluir histórico de bate -papo
• Hospedagem de imagem com nuvem
• Suporte ao tema dinâmico (modo claro e escuro)
• Suporte para telas de mesa e móveis

Instalação

Configure o MongoDB

1. Navegue para https://www.mongodb.com/atlas/database e registre

2. Encontre e selecione Build a Database
   Selecione a camada gratuita e pressione Create na parte inferior
   

3. Crie um usuário (anote a senha)
   Role para baixo para Add entries to your IP Access List
   Digite 0.0.0.0/0 e pressione Add Entry
   

4. Pressione Go to Databases
   

5. Clique em Connect e selecione MongoDB for VSCode
   Copie a string de conexão e salve -a em um bloco de notas
   Substitua <password> pela sua senha definida na etapa 3
   Adicionar test no final da sequência de conexão (Ex. connectionstring/test )
   

Configurar autenticação do github

1. Navegue para https://github.com/
   Clique no seu suspensão do seu perfil no canto superior direito
   Clique em Settings
   

2. Clique em Developer settings
   Clique em OAuth Apps
   Clique New OAuth App
   

3. Dê um nome ao seu aplicativo
   TIPO http://localhost:3020/ Na Homepage URL e campos Authorization callback URL .
   Clique em "Registrar aplicativo"
   

4. Copie o Client Id e anote -o
   Clique em Generate a new client secret , copiar e anotar -o
   

Configure a autenticação do Google

1. Navegue para https://console.cloud.google.com e crie um novo projeto
   

2. Navegue até o projeto recém -criado e pesquise a API & Services
   

3. Vá para a OAuth consent screen
   Clique no campo External
   Clique em CREATE
   

4. Clique no campo App name e dê um nome
   No campo de correio do usuário, selecione seu e -mail
   Role para baixo até Developer contact information e digite seu e -mail
   Clique em SAVE AND CONTINUE até que esteja na etapa Summary
   

5. Vá para Credentials
   Clique em CREATE CREDENTIALS
   Selecione OAuth client ID
   

6. Selecione Web application como tipo de aplicativo
   Role para baixo até Authorized redirect URIs e adicione http://localhost:3020/api/auth/callback/google
   Clique em CREATE
   Copie o CLient ID e Client Secret e anote -o
   

Configuração Cloudinary

1. Navegue para https://console.cloudinary.com e login
   Vá para o Dashboard e anote o Cloud name
   

2. Vá para configurações
   Em seguida, vá para fazer Upload
   

3. Clique em Add upload preset
   Alterar Signing Mode para Unsigned
   Clique em Save copie o nome predefinido recém -adicionado e anote -o
   

Configure o empurrador

1. Navegue para https://dashboard.pusher.com/channels
   Clique em Create app (ou Get Started )
   Dê um nome ao aplicativo
   Selecione React para front -end e Node.js para back -end
   Crie o aplicativo
   

2. Vá para App Keys
   Anote os valores do Down
   

Projeto de configuração

1. Clone/Download repo
2. Crie um arquivo chamado .env.local no diretório raiz do seu projeto, digite o seguinte em CMD/PowerShell

    cp env.example .env.local
   

3. Dentro do arquivo .env.local , adicione o MongoDB, Pusher, Cloudinary, Github e Google Keys das etapas anteriores
4. yarn install para instalar as dependências (execute npm install yarn se você não tiver fios instalados)
5. yarn prisma db push para criar as coleções de banco de dados
6. prisma generate para criar o cliente prisma

Uso

Desenvolvimento

yarn dev

• Build App continuamente (HMR ativado)

Produção

yarn build yarn start

• Construir aplicativo uma vez (HMR desativado) para /.next/

---

Todos os comandos

Comando	Descrição
yarn dev	Build App continuamente (HMR ativado)
yarn build	Construir aplicativo uma vez (HMR desativado) para /.next/
yarn start	Executar a construção de produção

Veja também

• Algumas idéias de design foram retiradas do Facebook Messenger
• Algumas idéias de implementação para este projeto são retiradas de Josh e Antonio
• O projeto foi inicializado com Create-Next-App