Leschat! | Mensageiro em tempo real | Pern-graphql
Aplicativo de bate -papo em tempo real feito com Pern + GraphQL - apresenta mensagens privadas, globais e em grupo
Demonstração
Implantado no netlify (front-end) e heroku (back-end)
Construído usando
Front-end
- ReactJs - Frontend Framework
- Apollo Client - Biblioteca de Gerenciamento de Estado para gerenciar dados locais e remotos com grafql
- Assinaturas Apollo - Obtenha atualizações em tempo real do seu servidor grafql
- API de contexto com ganchos - para estado do usuário, bate -papo selecionado, tostas notícias, tema etc.
- Router React - para roteamento e navegação geral
- Formulário de gancho de reação - para formas flexíveis
- Material -UI com muitas personalizações CSS - Biblioteca da interface do usuário
- Sim - para validação de formulário
- Date -FNs - para manipular e formatar as datas
Back-end
- Node.js - ambiente de tempo de execução para JS
- Servidor Apollo - para construir um servidor de API graphql de auto -documentação
- Assinaturas da Apollo - As assinaturas são operações do GraphQL que assistem a eventos emitidos pelo Apollo Server.
- PostgreSQL - Open -source SQL Database para armazenar dados
- Sequelização - Nodejs ORM para bancos de dados baseados em SQL
- JSON Web Token - Um padrão para proteger/autenticar solicitações HTTP
- BCrypt.js - Para senhas de hash
- Dotenv - para carregar variáveis de ambiente de um arquivo .env
Características
- Autenticação (login/ registro com nome de usuário e senha)
- Bate-papo em tempo real usando web-sockets
- Mensagens privadas com todos os usuários registrados
- Canal global para todos os usuários no chat
- Criação de grupos com usuários de escolha
- Os usuários podem sair do grupo depois de adicionar
- O criador do grupo pode adicionar/remover membros do grupo
- O criador do grupo pode excluir o grupo, e suas mensagens junto com ele
- O criador do grupo pode renomear o nome do referido grupo
- Gerenciamento de erros com mensagens descritivas
- Restas de brindes para ações: criação de grupos, remoção de usuários etc.
- Carregando spinners para processos de busca relevante
- Datas formatadas para adicionar/atualizar perguntas/respostas/comentários
- Modo escuro alternação com salário local salvar
- UI responsiva adequada para todas as telas
Capturas de tela
Desktop/tablet
Móvel
Uso
Env variável:
Crie um arquivo .env no diretório do servidor e adicione o seguinte:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Cliente:
Open Client/Src/backendurls.js e altere o objeto "backendurls" para:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Execute o servidor de desenvolvimento do cliente:
cd client
npm install
npm start
Servidor:
Abra o servidor/config/config.json e atualize os valores das chaves de desenvolvimento para corresponder às suas credenciais locais de postgreSQL.
Instale 'Sequelize-cli' e 'Nodemon' como pacotes globais, se você ainda não o fez.
Execute este comando para migrar a tabela SQL para seu próprio PSQL local: sequelize db:migrate
Execute o servidor de desenvolvimento de back -end:
cd server
npm install
npm run dev
