React Firebase Chat

Ejercicio de práctica en ReactJs y Firebase

Video del proyecto en funcionamiento (tag v2.0.0)

Funcionalidades:

• Comunicación entre usuarios
  • Conectados
  • Se crea una sala de chat o se usa una existente
• Listar usuarios conectados en la sala de chat
  • Para que un usuario cuente como conectado debe:
    • Conectarse
    • Enviar mensajes
    • Mover el mouse en el chat
  • Para que los usuarios en el chat se enteren que un usuario está conectado debe:
    • Revisar en la db si el tiempo en el que actualizó su sesión es menor a 2 segundos
• Enviar enlaces y mostrar un card
  • Se obtienen los metadatos al poner el enlace
  • Se muestran la card con los metadatos cuando se listan todos los mensajes
• Enviar imágenes
  • Se pueden pegar desde el porta papeles
  • Se pueden mandar desde el selector de archivos
• Enviar videos
  • Se pueden mandar desde el selector de archivos

NOTA: No se necesita confirmación de correo para el registro, sólo que el correo tenga el formato correcto

Realtime database rules

{
    "rules": {
        "chatrooms": {
            "$room": {
                ".read": "auth != null",
                "messages": {
                    "$messageID": {
                        ".write": "!data.exists()",
                        ".validate": "root.child('/chatrooms/'+$room+'/users/'+auth.uid).exists() &&  newData.hasChildren(['username', 'message']) && newData.child('username').isString() && newData.child('message').isString()"
                    }
                },
                "users": {
                    "$userID": {
                        ".write": "(!data.exists() && $userID === auth.uid) || ($userID === auth.uid)",
                        ".validate": "newData.hasChildren(['username', 'time']) && newData.child('username').isString() && newData.child('time').isNumber()"
                    }
                }
            }
        }
    }
}

Storage rules

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    match /chatrooms/{room}/img/{imgName} {
    	allow write: if request.resource.contentType.matches('image/.*') && request.resource.contentType == resource.contentType;
    }
    match /chatrooms/{room}/vid/{vidName} {
    	allow write: if request.resource.contentType.matches('video/mp4') && request.resource.contentType == resource.contentType;
    }
  }
}