EXPERIENCIA PARTICULAR

1. NODE.JS + EXPRESS.JS (BACKEND)

Mi experiencia con Node.js proviene fundamentalmente de un conocimiento previo
de ECMAScript 2015, dado que en mi inicio en la programación web PHP presentaba
una dificultad mayor que Javascript como motor backend y decidí aprender las bases
de Node.js. Estos conocimientos han sido una herramienta clave en la programación
de ValenciaJoven dado que Node es el motor subyacente de Next.js.
A. Subida de archivos, procesamiento y borrado
Para poder enviar archivos a una API que almacenara imágenes en un CDN tuve que
construir un servidor funcional a modo de REST API que tuviera acceso al módulo
filesystem (Next.js carece de él), y a la vez demostrar conocimiento de funciones
asíncronas, readableStream y pipe para poder codificar a modo de solicitud HTTP un
proceso cURL, dado que la subida a la nube debe estar automatizada y almacenar las
imágenes en disco desde un string base64 -que mediante métodos regex y
fs.writeFileSync devuelve un archivo de imagen-. Dicha REST API debe esperar a
recibir tantas URIs respuesta de Cloudflare como imágenes se envían, y estas mismas
son el valor de retorno de la REST API al servidor principal desde donde se almacenan
en una base de datos MongoDB que sólo guarda las IDs de las imágenes -que después
se insertarán en los atributos src complementariamente con una URL base del CDN-.
B. Modificación del servidor raíz de Next.js para inclusión de protocolo SSL.
En tanto que Next.js crea un servidor de manera automática que por defecto carece
de protocolo SSL, tuve que crear un archivo server.js que incluyera el módulo https,
fs, y url de Node para leer una llave y certificado OpenSSL e incluirlos como opciones
de inicialización dentro de una estructura express.js que toma el archivo raíz de app.js
y lo replica iniciando un servidor con el mismo contenido pero realizando un reenvío
de puertos automático cada vez que se solicite la página para así tener al usuario
siempre dentro del canal seguro.
C. Rutas API del servidor Next.js
Todas las funcionalidades backend implementadas en ValenciaJoven siguen la misma
estructura que en Node.js + Express.js exceptuando la URL en la que se espera la
misma y que la validación del req.method se realiza manualmente.
export default function handler(req, res) {
res.status(200).json({ text: 'Hello' });
}
Estas funcionalidades implementadas incluyen; registros de empresas con
verificación de CIF, geocodificación simulatánea de la dirección introducida por parte
de Google Geocoding Api y almacenamiento en MongoDB local de los datos, con

Cezar Alexandru Pena Maxim

 hasheo y encriptación de la contraseña; inicio de sesión mediante JWT en cookie con
tiempo de caducidad y que distingue entre diferentes tipos de usuario (usuarios
generales y empresas tienen acceso a diferentes portales de la web); carga de un Mapa
Javascript de Google Maps API para representarlo en /home con coordenadas
específicas donde centrar el mapa y atributos paralelos almacenados en la base de
datos local que permiten mostrar un indicador en el lugar de las coordenadas
obtenidas en el registro de la empresa y así permitir la vista de la tienda desde el
mapa; carga de una lista limitada de anuncios con opción a filtro textual que distingue
cualquier coincidencia de los caracteres tanto en el nombre del anuncio como en el
nombre de la tienda y muestra los resultados coincidentes con un límite de 8 anuncios
por página; paginación de los anuncios; verificación del cookie token JWT cada vez
que carga una de las páginas no estáticas de la red social con redirección automática
al inicio de sesión en caso de que este haya caducado; envío de imágenes asíncrono al
servidor auxiliar de carga a Cloudflare -de uso general tanto para las fotos de perfil,
como de portada o de cada producto en parte-; borrado de imágenes almacenadas en
Cloudflare a partir de las IDs de las mismas almacenada localmente; y subida de
anuncios a la base de datos local con sus respectivos atributos de título, precio,
imágenes, descripción y tienda -esta última se agrega automáticamente a partir del
JWT (que debe ser válido)-.

2. REACT.JS + NEXTUI + BOOTSTRAP (FRONTEND)

React.js es mi mayor fuerte a la hora de realizar desarrollo frontend porque es el
campo en el que más diseños he construido a lo largo del tiempo, aunque en muchas
ocasiones echando mano de frameworks como NextUI y Bootstrap -e incluso de
styled-components cuando un mismo componente fuera a reutilizarse en muchas
ocasiones como por ejemplo la barra de navegación-. Todos mis diseños siguen una
estructura adaptable tanto para escritorio, móvil y tablet. Dejo un enlace a una galería
de imágenes aquí: https://www.icloud.com/sharedalbum/#B0rGY8gBYJfmqTE
Y les invito a visitar la página https://valenciajoven.com para ver el resultado con sus
respectivas animaciones e interactividad. Los productos más relevantes de mi trabajo
en el área frontend han sido:
A. Vista local del mapa con indicadores fijos para las tiendas <Map>
He adaptado el script original de Google Maps Javascript API para incrustarse como
componente <GoogleMap> capaz de tomar la clave de google cloud, coordenadas de
centro, zoom y opciones de gestureHandling que ofrezcan al usuario la posibilidad de
arrastrar el mapa sin tener que utilizar ambos dedos en el scroll del móvil. Este mismo
contiene como {children} un array -a modo de prop- que llega desde la base de datos
local con todas las empresas registradas y sus respectivas coordenadas para mostrar
un indicador, que al pulsarse muestra un modal de pantalla completa con logotipo,
foto de portada, descripción, dirección y datos de contacto de la empresa, y debajo un
grid de todos los productos que la misma ha publicado en la red.

Cezar Alexandru Pena Maxim

B. Tablón de anuncios <ProductGrid>
He construido un visor de anuncios con 8 anuncios por página -paginación conectada
con Backend para sólo solicitar a la base de datos los anuncios de la página en
cuestión, por defecto en un orden de fecha de publicación más reciente-, que permite
a los usuarios de escritorio visualizarlos en una tabla 4x2 mientras que a los usuarios
de móvil en una lista vertical en la que se vean bien detallados uno a uno. Al pulsar en
cada anuncio es cuando cargan todos los props y todas las imágenes del mismo para
economizar procesamiento en el lado del servidor, y ofrecen una vista de swiper de
hasta 3 imágenes -límite establecido por anuncio a la hora de publicarlo- y el nombre
de la tienda y descripción del mismo.
C. Formulario de subida de productos <ProductUpload>
Quizás el componente que más trabajo ha requerido, especialmente para pensar de
qué manera distribuir los elementos del formulario según su proporción y reservarles
un espacio de la pantalla de escritorio coherente, mientras que en móvil se listan los
diferentes elementos verticalmente. He implementado un input de imágenes que
únicamente acepta formatos jpeg/png/gif -los únicos formatos aceptados por
Cloudflare- que a su vez ofrece una vista previa de las imágenes seleccionadas con la
opción de cambiarlas por otras o eliminarlas directamente. Todo este formulario se
envía como formData a una ruta API que manda por separado el array de strings
base64 al servidor Node.js y una vez vuelven las IDs de las imágenes en el CDN se
almacena el producto como tal en la BD local. Toda posible excepción es capturada y
mostrada en un Modal de error que describe al usuario qué ha podido suceder para
que no se haya podido subir correctamente el anuncio -sea que se ha alcanzado el
límite de 8 anuncios ya subidos, o que el servidor de subida está inactivo, o que la
conexión ha fallado… etc-.
D. Panel Empresa <BusinessPanel>
Este componente ofrece una vista al usuario que se registra como empresa de los
diferentes atributos que se mostrarán sobre su tienda cuando esta se muestre en el
mapa, sea descripción, datos de contacto, logotipo, portada, o productos. También ha
requerido de un tiempo de valorar cuánto espacio iba a ocupar cada input o el grid de
productos, y sigue una estructura de 3 elementos en la primera fila -logotipo y
portada, descripción y contacto y futuro visor de últimas ventas-, y la tabla de
productos debajo siguiendo la misma estructura que en el tablón de anuncios, pero
esta vez incluyendo un botón de eliminar producto a la hora de mostrar el modal del
mismo -está enlazado a una solicitud http a Cloudflare que elimine también las
imágenes almacenadas en la nube aparte de los datos almacenados en la colección
productos de mongo-.

Cezar Alexandru Pena Maxim