Code Monkey home page Code Monkey logo

chira's Introduction

Chira

Página web similar a "WhatsApp" o "Telegram". (Aún en desarrollo)

Tecnologías


Mongodb Express React Node Socket Firebase Javascript SASS Figma


Cuentas de prueba

Puedes entrar con tu número de teléfono o bien usar alguno de estos usuarios de prueba:

Nombre de usuario: tachancka
Número de teléfono: +54 11 99999999
Código de verificación: 123456

Nombre de usuario: petete
Número de teléfono: +54 11 88888888
Código de verificación: 123456

Nombre de usuario: rodolfo
Número de teléfono: +54 11 77777777
Código de verificación: 123456

Funcionalidades


Chat en tiempo real

  • Contiene un chat para el envío y recibimiento de mensajes en tiempo real. Cada mensaje se muestra con su contenido, fecha de creación, y su ícono de "visto". Hecho con Socket.io

Chats de grupo

  • Cuenta con un sistema de creación de grupos en donde se podrán agregar más de dos contactos, elegir un nombre para el grupo y seleccionar una foto. Cada grupo cuenta con su chat en tiempo real.

Búsqueda de mensajes

  • Sistema de búsqueda de mensajes a través de su contenido. Una vez ingresado el mensaje a buscar, se mostrará una lista con todos los mensajes semejantes. Al hacer click en alguno de ellos, se trasladará hacia la posición exacta del mismo junto a un notable fondo coloreado.

Subir y previsualizar fotos/imágenes.

  • El sistema permite seleccionar una foto o imagen de forma local, para posteriormente ser enviada hacia un contacto o chat de grupo. Además, al hacer click en una foto ya enviada, se podrá visualizarla con un mayor tamaño.

Sistema de emojis

  • Cuenta con una lista de gran variedad de emojis, en donde se podrán buscar por medio de un buscador, para luego ser enviados a un chat particular.

Perfil de contacto/grupo

  • Si se clickea en la parte superior del chat, se abrirá una pestaña lateral con la información del contacto, nombre, número de celular y foto de perfil, o en el caso de un chat de grupo, nombre del mismo, foto e integrantes que lo componen.

Editar foto de perfil o chat de grupo

  • Dentro de las opciones de perfil o chat de grupo, se podrá cambiar la foto por una nueva a través del sistema de subida de imágenes anterior mencionado.

Agregar y buscar contactos

  • Posee un botón inferior para buscar y agregar contactos por su nombre de usuario, a través de un buscador.

Sistema de notificación por mensaje nuevo.

  • Cada mensaje entrante será notificado en la sección de contactos a través de un ícono, representando un mensaje nuevo sin leer.

Sistema de "visto".

  • Si un usuario tiene mensajes sin leer, al acceder al chat correspondiente y hacer click en la barra para enviar mensajes, se colocará automáticamente *** un doble tick*** representando la lectura de mensajes. Todo en tiempo real.

Historial de mensajes

  • Los mensajes son almacenados en una base de datos dentro de MongoDB. Al ingresar dentro de un chat, se enviará una petición a ésta, y se mostrarán todos los mensajes del chat seleccionado.

Registro e ingreso con autenticación por número de celular

  • Al momento de crear una cuenta o ingresar a la misma, la página enviará un código de autenticación al número de celular ingresado en el formulario, el cual deberá ser ingresado para acceder a la misma. Proceso realizado con Firebase Auth.

Sistema de notificaciones de errores

  • La página cuenta con un sistema de notificaciones que informará al usuario cuando haya algún error con la base de datos, api's, datos erróneos, etc.

Diseño responsivo

  • Posee un diseño adaptable a distintas resoluciones y dispositivos móviles


Aviso

El proyecto cuenta con una variedad de fallos en proceso de revisión y corrección.



chira's People

Contributors

gabrielcarames avatar

Stargazers

Manu avatar kpyto avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.