SwuerpY Chat

SwuerpY Chat fue una web app donde la gente podía chatear y cargar contenido aleatorio, hasta que un día… ¡desapareció!

Inicios

La idea principal era que el sitio cargara una imagen de Pabluskino sacada de contexto, con un botón que permitía cargar una nueva imagen.

“pabluskino.swuerpy.com”
_{^{Este dominio posiblemente lo use para otra cosa en el futuro.}}

Conforme hacía el sitio, surgieron nuevas ideas:

Y si añado personalización? Y si añado sincronización en tiempo real?

Y si… implemento un chat?

Fue ahí donde empecé a implementar todo lo que tenía pensado. Primero, añadí Socket.IO para la sincronización en tiempo real. La idea era que si un usuario hacía clic en el botón para cargar una nueva imagen, este cambio se reflejaría para todos los demás en el sitio.

Después, añadí soporte para videos y audios. Implementé Node-ID3 para que el sitio mostrara los metadatos de los audios, como carátulas y títulos. Por último, agregué metadatos para videos e imágenes mediante un archivo JSON; este archivo me permitía añadir un título y una descripción de cada archivo.

Resultado:

Seguí implementando más cosas.

Agregué el contador de usuarios y mejoré la sincronización de videos y audios: ahora, si un usuario pausaba, cambiaba el tiempo, subía o bajaba el volumen, estos cambios se reflejaban en los demás.

Después me di cuenta de que a veces podía ser molesto que otros te interrumpieran mientras veías o escuchabas un audio, así que creé un menú de configuración.

Este menú permitía desactivar la sincronización en tiempo real, tanto para videos y audios como para la carga de nuevo contenido.

También implementé una opción para cambiar la apariencia del sitio, donde podías alternar entre los modos claro, oscuro y sistema.

Apariencia

Como ves, el diseño del sitio se inspiraba en el de YouTube, y así fue hasta el final.

Autenticación

Añadí un sistema de autenticación básico con Express JS y SQLite.

Podías registrarte con un nombre, username y una contraseña, no se requería correo (porque sabía que mi código era una mrd y lo iban a vulnerar de una).

:V

Decidí hacer un sistema de perfiles básico.

bUENO, como ven, tenian su perfil y banner, personalizable, obvio, si.

También podías cambiar tu nombre y username.

EL CHAT

YA, POR FIN! A lo que quería llegar: el chat.

La idea era simple: el usuario solo podía enviar mensajes, y eso era todo.

Pero, y si…?

ENVIAR ARCHIVOS

SÍ, podías enviar imágenes, videos y audios!

SOPORTE MARKDOWN

Adapté el Markdown que utiliza Discord a SwuerpY Chat (casi en su totalidad, faltaban los twemojis).

Y, como ves…

RESPONDER MENSAJES

Podías responder mensajes, y ya :V

Al hacer clic en la respuesta te mandaba al mensaje original.

MENCIONES

Podías mencionar a cualquiera!

Al hacerlo, el usuario mencionado reproducía un sonido, igualito a Discord w.

Y, por último, podías editar y eliminar tus propios mensajes… y ya.

Ya tenía mucho avance, solo faltaba optimizar varias partes del sitio y buscar dónde subirlo… HASTA QUE…

Desaparición del sitio

Qué pasó? Cómo lo perdí?

Bueno, yo suelo guardar mis proyectos en mi carpeta de usuario (C:\Users\usuario).

Hace no mucho hice un formateo a mi PC, y yo suelo copiar todo mi contenido a una USB que tengo por ahí. El caso es que pasé todo, menos el contenido de la carpeta de usuario y descargas (sí, también guardo cosas ahí :V).

Al revisar mi USB después, ahí fue donde me di cuenta que valió vrga.

Y ya, no había nada más, me agüité y me dio pereza volver a hacer todo.

Y ps bueno, ese ha sido el difunto SwuerpY Chat, un proyecto que me encantó hacer, pero por la pérdida de archivos, decidí dejarlo como perdido.

Aún tenía varias cosas por hacer, de verdad, ya parecía RobTop, añadía y añadía cosas, y nunca terminaba, pero bueno.

Lo que me faltó hacer

• Personalización avanzada (custom CSS)
• Integración con Twemoji
• Emojis personalizados, similar a Discord
• Crear un sistema de reacciones, tanto para el chat como para la galería, similar a Discord
• Subir más de un archivo a la vez (máximo 10 archivos a la vez)
• Sistema de moderación
• Fijar mensajes
• Sistema de votación similar a Discord
• Diseño responsive para celulares

Xd, bien visionario yo.

Tecnologías Usadas

Para el backend:

• Node.js
• Express.js
• Socket.IO
• SQLite

Para el frontend:

• HTML
• EJS
• CSS
• JavaScript

Imágenes de SwuerpY Chat

Y ya por último, unas capturas de cómo se veía el sitio, tomadas antes de su desaparición.

Gracias por leer.