¡Leschat! | Mensajero en tiempo real | Pern-Graphql
Aplicación de chat en tiempo real hecha con Pern + GraphQL - Características privadas, globales y de grupos Mensajes
Manifestación
Implementado en Netlify (front-end) y Heroku (back-end)
Construido con
Interfaz
- ReactJS - Frontend Framework
- Cliente Apollo - Biblioteca de administración estatal para administrar datos locales y remotos con GraphQL
- Suscripciones de Apollo: obtenga actualizaciones en tiempo real desde su servidor GraphQL
- API de contexto con ganchos: para el estado del usuario, chat seleccionado, tostadas de tostadas, tema, etc.
- React Router - para enrutamiento general y navegación
- React Hook Form - Para formas flexibles
- Material -UI con muchas personalizaciones de CSS - Biblioteca UI
- Sí, para la validación de formulario
- Fecha -fns - para manipular y formatear fechas
Back-end
- Node.js - Entorno de tiempo de ejecución para JS
- Apollo Server: para construir un servidor API GraphQL autocompletador
- SUSCRIPCIONES DE APOLLO: las suscripciones son operaciones GraphQL que miran eventos emitidos desde Apollo Server.
- PostgreSQL - Base de datos SQL de origen abre para almacenar datos
- SECLELIZE - NODEJS ORM para bases de datos basadas en SQL
- Token web JSON: un estándar para asegurar/autenticar las solicitudes HTTP
- Bcrypt.js - para contraseñas de hash
- Dotenv - para cargar variables de entorno desde un archivo .env
Características
- Autenticación (Iniciar sesión/ registrar con nombre de usuario y contraseña)
- Chat en tiempo real usando cuencas web
- Mensajes privados con todos los usuarios registrados
- Global Channel para chat de todos los usuarios de un lugar
- Creación de grupos con usuarios de elección
- Los usuarios pueden salir del grupo después de recibir su agregado
- Group Creator puede agregar/eliminar miembros del grupo
- Group Creator puede eliminar el grupo y sus mensajes junto con él
- Group Creator puede cambiar el nombre del nombre de dicho grupo
- Gestión de errores con mensajes descriptivos
- Notificaciones de tostadas para acciones: crear grupos, eliminar a los usuarios, etc.
- Cargando hilanderos para procesos de recuperación relevantes
- Fechas formateadas para agregar/actualizar preguntas/respuestas/comentarios
- Modo oscuro alternar con almacenamiento local Guardar
- UI receptiva adecuada para todas las pantallas
Capturas de pantalla
Escritorio/tableta
Móvil
Uso
Variable Env:
Cree un archivo .env en el directorio del servidor y agregue lo siguiente:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Cliente:
Abra el cliente/src/backendurls.js y cambie el objeto "backendurls" a:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Ejecutar el servidor de desarrollo del cliente:
cd client
npm install
npm start
Servidor:
Abra el servidor/config/config.json y actualice los valores de las claves de desarrollo para que coincidan con sus credenciales locales de PostgreSQL.
Instale 'SECLELIZE-CLI' y 'Nodemon' como paquetes globales, si aún no lo ha hecho.
Ejecute este comando para migrar la tabla SQL a su propia PSQL local: sequelize db:migrate
Ejecutar el servidor de desarrollo de backend:
cd server
npm install
npm run dev
