- Expexperiencia
- Recomendaciones
Estudios
Experiencia
Full Stack Developer | Angular | Spring BootAdevcom Ltda - Jornada completafeb. 2024 - actualidad - 1 año 3 mesesSantiago de Chile (Remote Job)Proyecto: Requerimientos Normativos, Instituto de Salud Laboral (ISL)
Participé en un proyecto enfocado en la prevención de riesgos laborales, cuyo objetivo fue desarrollar un sistema de gestión de denuncias de accidentes de trabajo y enfermedades profesionales (DIAT/DIEP).
Mi rol principal es el desarrollo Frontend, proporcionando soporte a dos desarrolladores full-stack y colaborando con un equipo que incluye especialistas en UI/UX, QA, un Scrum Master y un gestor de proyecto.Contribuciones Clave:
FrontEnd
◉ Creación de componentes usando proyección de contenido y pasando contexto de plantilla con ng-template y ng-container.
◉ Implementación de Template Driven Forms y Reactive forms.
◉ Creación de validaciones personalizadas (Validators) para ciertos inputs.
◉ Uso de FormBuilder y FormArray para gestionar colecciones de campos dinámicos dentro de los formularios.
◉ Desarrollo de servicios avanzados para la gestión de grandes cantidades de datos relacionados en formularios anidados y dinámicos, así como para la gestión de datos, mejorando la eficiencia en el desarrollo en un 50% asegurando así la entrega de funcionalidades clave con un rencor de tiempo, lo que optimizo el proceso interno y el cumplimiento de los objetivos estratégicos de la empresa.Centralicé el manejo de formularios complejos (con pestañas, subpestañas) mediante el servicio creado FormService, eliminando la dependencia de librerías como Redux y simplificando la comunicación entre componentes.
Implementé el servicio creado DataContextService para compartir datos entre componentes de forma reactiva, optimizando el flujo de información y mejorando el rendimiento.
◉ Desarrollo de directivas personalizadas (Directives) para manejar características especiales.
◉ Implementación de Guardianes (Guards) para restringir el acceso a ciertas pantallas y módulos mediante un sistema de roles.
◉ Creación de Interceptores para manejar errores globales en las peticiones HTTP.
BackEnd
◉ Despliegue en entorno local para los BackEnds del proyecto y manejo de dependencias
◉ Desarrollo de controladores REST para la gestión y consumo de datos.
◉ Creación de consultas personalizadas utilizando @Query en los repositorios de Spring Data JPA.
◉ Manipulación de listas y otras estructuras de datos en Java.
◉ Uso de la programación funcional de Java 8, incluyendo streams.
▬ Tecnologías utilizadas: Angular 13.1.4, Java 8, Spring Boot 3, SQL Server
▬ Herramientas : DBeaver (SQL Server), FortiClient VPN▬ Librerías Frontend: ng-bootstrap, bootstrap, sweetalert2, ng-select, keycloak-angula, keycloak-js, moment, angular-feather, ngx-extended-pdf-viewer
▬ Librerías Backend: spring-boot-starter-data-jpa, com.microsoft.sqlserver (Microsoft SQL Server JDBC Driver), Lombok, springfox-swagger2 (Springfox Swagger), javax.json-api - json (Javax JSON API y JSON), javax.ws.rs-api - resteasy-client (Javax WS RS API y Resteasy Client)
React DeveloperEpidata - Jornada completaene. 2023 - jun. 2023 - 6 mesesArgentina (Remote Job)Participación en la creación de un Sistema Integral de RRHH para el Ministerio de Desarrollo Productivo Argentina (MDP) como parte de un equipo de alto rendimiento.
Junto con dos desarrolladores BackEnd, dos desarrolladores FrontEnd (incluyéndome), un especialista en Control de Calidad (QA), un UI/UX designer, un analista funcional, un líder técnico, y un gerente de proyecto, trabajamos en colaboración para cumplir con los objetivos del proyecto en los plazos establecidos, y asegurar la calidad del software.
En particular, he contribuido en:
◉ Creación de un sistema de inicio de sesión basado en autenticación LDAP para la App, esta solución permitió a los usuarios acceder utilizando sus credenciales existentes, mejorando la seguridad y simplificando el proceso de inicio de sesión, mi trabajo contribuyó al éxito del proyecto al satisfacer las necesidades específicas del cliente.
◉ Creación de un sistema integral para la gestión de módulos, roles, asignación de permisos y usuarios en la aplicación, permitiendo una gestión más eficiente y segura de los permisos y accesos de los usuarios en la aplicación.
◉ Desarrollo de diferentes pantallas para ver, crear, editar y eliminar información de un agente.
◉ Creación de diferentes PDFs para mostrar reportes y documentos.
◉ Dedicación, trabajo en equipo, proactividad, y mejora de procesos.
◉ Creación de modelos de datos para las interfaces basados en supuestos endPoints del BackEnd, permitiendo mostrar el progreso del proyecto al cliente antes de contar con la información real, facilité a mis compañeros de BackEnd enfocarse en solicitudes críticas al ocuparme de la creación de los modelos de datos mientras estaban ocupados, utilicé los modelos de datos como base para que mi compañero de BackEnd desarrollara los endPoints necesarios con información real, mejorando así la eficiencia del equipo.
▬ Tecnologías utilizadas: TypeScript, React (React Function Component), React Hooks: (useState, useEffect, useCallback, React.memo), Vite, Redux, Tailwind CSS, Docker.▬ Librerias: axios, clsx, primeicons, sass, sweetalert2, universal-cookie, PrimeReact - React UI Component Library, cleave.js, redux-thunk, React Router Dom, React Hook Form, React-pdf
Credit Agile, Inc - Servicio clicredit.com3 años 10 meses- React SSR – Next.js DeveloperJornada parcialfeb. 2021 - may. 2023 - 2 años 3 mesesPanamá (Remote Job)
Refactoring y desarrollo del FrontEnd con React renderizando del lado del servidor con Next.js
En este desarrollo e implementado y usado:
◉ SEO optimización para lograr una buena puntuación en Google Lighthouse, PageSpeed Insights, haciendo uso de las recomendaciones de Web Vitals, obtener una buena puntuación en PageSpeedInsights es fundamental para el SEO y la mejora de la experiencia del usuario, la carga rápida de las páginas, FCP, LCP
Aplicación de técnicas para optimizar al máximo la App, como el uso ejemplo: de defer en los scripts, y el uso de next/dynamic import, entre otros como el evitar en lo posible el cambio súbito del diseño que desplace el contenido hacia abajo el uso de altos por defecto Ver más aquí.
◉ Next-routes para el manejo de las rutas y el pattern de las mismas.◉ Redux para el manejo del estado y el uso de la librería: redux-thunk para poder manejar peticiones asíncronas como fetch en las acciones de Redux.
◉ React Class Component, React Function Component.
◉ React Hooks, useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback.
◉ Uso de React.memo y React.createContext.
◉ Creación de custom Hooks, tal como useForm, parecido a React Hook Form y a Formik, a diferencia que este es superflexible y configurable, puedes adaptarlo a lo que quieras o necesites, es muy, pero muy versátil, lo tiene todo manejo de validaciones por defecto, a medida y asíncronas nativamente, puedes controlar múltiples form e inputs, sus valores puedes cambiarlos y sacarlos del flujo de valores del form y aun así afectara sus validaciones la validación del form entre otro...
Este custom Hooks pude manejar los mensajes de error de las validaciones de forma por defecto, globales, dinámicos, según la configuración que apliques,también tiene una integración perfecta con Material-UI, tiene la posibilidad de resetear los valores de los inputs a medida ideal para input que se oculta, el manejo de las validaciones asíncronas de forma nativa es ideal para validaciones que necesitan ser procesadas según algún valor de una base de datos, construí esto a semejanza con las validaciones asíncronas de Angular.
Este custom Hooks es muy versátil y práctico puedes obtener los valores de todos los inputs u obtener el que necesites..
◉ Material-UI: React UI framework.◉ Next-i18next para el manejo de los idiomas de la Web.
◉ Uso de getInitialProps y getServerSideProps para pasar la data al componente desde el servidor para que renderice tanto del lado del Back como en el Front.
◉ Creación de una Api interna mediante el uso de la librería next-connect, y manejo dinámico del Router de Next.js cosas como […paran].js [[…paran]].js para recibir los parámetros en las rutas al estilo Express.
◉ Creación de un sistema de sesiones con express, se proteger las páginas mediante las sesiones y roles haciendo uso del método getServerSideProps que proporciona Next.js para este tipo de cosas.
- React Native DeveloperJornada parcialago. 2019 - jul. 2021 - 2 añosPanamá (Remote Job)
En este desarrollo tuve la oportunidad de conocer las 3 formas diferentes de implementar a React Native, (Expo, ExpoKit y la normal React Native al desnudo completo)
Esto me doto del pleno conocimiento para poder seleccionar la correcta versión a usar en un caso específico.
Resumo de la siguiente manera:
En la versión Expo no se puede controlar la versión del Android de la App, como la mayor o mínima, esta versión de React Native ofrece la facilidad de que compilar en línea tanto para Android como para IOS, también se firma la App en automático para poder agregarla a las tiendas móviles, en esta versión no se pueden instalar módulos nativos ni hacer uso de ellos.
En la versión ExpoKit, si se puede controlar la versión del Android de la App, pero ya no se puede compilar en línea y se tiene que firmar la App manualmente, tampoco se pueden instalar módulos nativos, ni hacer empleo de ellos, esta versión es un desudo parcial solo para controlar la versión del Android a la que va dirigida la App.
En la versión de React Native al desnudo completo, si se pueden instalar módulos nativos, al igual que se pueden usar módulos nativos personalizados, en esta versión se tiene que compilar manualmente la App, e igual su firma se tiene que hacer manualmente, esta versión no tiene restricción alguna y por ello es la más usada y recomendada para proyectos que requieren funcionalidades que en ninguna de las otras versiones existen.
Esta última versión fue la que elegí para la creación de la App de esta empresa.
➔ DESCRIPCIÓN:
Esta App cuenta con:
◉ Un sistema de Task persistentes que al reiniciar el móvil o al apagarlo estas continúan funcionados en el fondo use: react-native-background-fetch
◉ Un sistema para la Geolocalización, Tracking.
◉ Notificaciones Push, FireBase.
◉ Cloud Functions, para hacer un mantenimiento de la base de datos.
◉ Captura de la cámara y subida de archivos.
◉ Visor de Imágenes y archivos PDF.
◉ Uso de FingerPrint use: react-native-fingerprint-scanner para iniciar la App.
◉ Use RxJs y implemente un servicio global con BehaviorSubject para el manejo de la data entre compnentes.
◉ Cree un Layout con el uso de: createBottomTabNavigator, createStackNavigator de react-navigation para poder tener un Header y Footer siempre disponible en todas las pantallas, según el caso.
◉ Creación de un módulo nativo para manejar un servicio Headless JS que gestiona una notificación persistente que evita que el sistema mate nuestra App en segundo plano, pudiendo así tomar puntos de geolocalización, hacer el Tracking, mismo servicio reanima nuestra app al reiniciar el móvil.
◉ Creación de un módulo nativo en de Android para el consumo de la API del clima de openweathermap.org con el objetivo de disfrazar la notificación persistente, ya que esta hace que la App mantenga una instancia viva, aunque este la App cerrada, Android no puede matarla.
Javascript Developer FrontEndBONDAREA - Jornada completadic. 2017 - sep. 2019 - 1 año 10 mesesArgentina (Remote Job)Participación activa en la creación de BREF Bondarea Render Framework, un sistema que renderiza una página web entera a partir de datos en un JSON.
Más información en: https://howtocreateapps.com/fetch-and-display-json-html-javascript/ y https://www.w3schools.com/js/js_json_html.asp
Este desarrollo se basó en Vanilla JS, Bootstrap 3, Bootstrap 4, jQuery 3, y consiste en el renderizado del lodo del FrontEnd usando los datos de una API.
Trate de utilizar lo más mínimo de jQuery en las funciones de renderizado, buscando que fueran lo más rápido posible y utilice Vanilla JS al 100%, pura concatenación de string 💪
Este sistema reconoce cada bloque del "DataFrame" cargando los archivos necesarios para su renderizado, mandando cada bloque a su función específica para que lo procese y retorne un HTML y JavaScript según el caso.
Se empleó eval para mandar código JavaScript a medida en el JSON como un extra a las funciones de tipo "fnRender", también es posible mandar HTML en el JSON.
Haciendo empleo de los componentes de Bootstrap, cree diferentes fnRenders que serian los múltiples "bloques de renderizado", siendo el más complejo el renderizado de una tabla.
Esta se compone de grupos horizontales, verticales y con posiciones pegajosas de las columnas y filas, también posee búsqueda dentro de la tabla y Sort de la misma.
---
Aparte de este desarrollo, maquete un sitio web, Landing y zona de admin, para un cliente de Bondarea, se me entrego un diseño en Adobe Illustrator 2018 el cual hice funcionar con HTTML 5, CSS 3 y mi amigo JavaScript.
HERRAMIENTAS Y TECNOLOGÍAS USADAS:
➔ FRONT-END:◉ Desarrollos web avanzados con JavaScript
◉ Renderizando de datos JSON
◉ Manejo avanzado del DOM
◉ Maquetado a partir de diseños de Adobe illustrator CC 2018
◉ HTML-5, CSS-3➔ CONTROL DE VERSIONES Y GESTIÓN DE PROYECTOS:
◉ GIT
◉ Bitbucket- Soporte visual1.1 -Maquetado a partir de diseño en Adobe illustrator CC 2018, "Landing"
Landing - Print Screen #1Maquetado a partir de diseño en Adobe illustrator CC 2018, tecnologías herramientas y librerías usadas: HTML5 | CSS3 | JavaScript | Bootstrap 3 | JQuery | Jssor Slider ...
Landing - Print Screen #2Maquetado a partir de diseño en Adobe illustrator CC 2018, tecnologías herramientas y librerías usadas: HTML5 | CSS3 | JavaScript | Bootstrap 3 | JQuery | Jssor Slider ...2.3 -Maquetado a partir de diseño en Adobe illustrator CC 2018, "Landing Mobile"
Landing Mobile - Print Screen #1Maquetado a partir de diseño en Adobe illustrator CC 2018, tecnologías herramientas y librerías usadas: HTML5 | CSS3 | JavaScript | Bootstrap 3 | JQuery | Jssor Slider ...
Full Stack Web DeveloperClick Result group Ltd - Clickresult.es - Jornada completaoct. 2016 - dic. 2017 - 1 año 3 mesesEspaña (Remote Job)En este Job...
◉ Hice una modificación al CMS "Simple CMS" de phpjabbers para darle a este CMS algunas características de wix.com y websitebuilder.com, tales como sesiones de contenido, siendo capaces de ser editadas con CKeditor 4 de forma inline mucho más fácil y con multitud de Plugins a elegir.
◉ Creación y modificación de plugins CKeditor 4.
◉ Creación de un sistema que edita en el Front-end dinámicamente los CSS, JS y HTML del sitio web.
◉ Cree un sistema de múltiples idiomas para "STIVA Blog Script", en este sistema se puede redactar un mismo POST en varios idiomas cambiando las banderas de los idiomas en el mismo POST.
El usuario cuando visita el blog, el sistema detecta el idioma del browser que el usuario está usando y muestra el POST, esto se realizó con la intención: si se tiene visitas de ejemplo de USA y España o de china, el usuario puede instalar los idiomas acordes al flujo de visitantes y tener el control de las traducciones de los POST porque es escrito manualmente y no en automático el sistema elige el POST acorde al idioma del browser y lo muestra.
HERRAMIENTAS Y TECNOLOGÍAS USADAS:
➔ FRONT-END:◉ CKeditor.
◉ JavaScript, JQuery, JQuery UI.
◉ HTML5, CSS3.
◉ iframeResizer.js https://github.com/davidjbradshaw/iframe-resizer
◉ jquery.mCustomScrollbar.js http://manos.malihu.gr/jquery-custom-content-scroller
◉ jquery.resize.js https://github.com/sdecima/javascript-detect-element-resize
◉ jquery.validate.min.js
◉ position-calculator.min.js https://github.com/tlindig/position-calculator
◉ ace editor 1.2.5 https://ace.c9.io
◉ masterslider.min.js 2.50.0 https://www.masterslider.com/
➔ BACK-END:
◉ PHP 5.6.25
◉ Conexion remota a las base de datos usando MySQL Workbench
◉ MySQL 5.6.17
◉ kcfinder 3.12
◉ PHP Simple HTML DOM Parser https://sourceforge.net/projects/simplehtmldom/----
Más información en: https://github.com/dennysjmarquez/portfolio/tree/master/2016
- Soporte visual1.1 -CKeditor 4 Plugin msliderJQuery
CKeditor 4 Plugin msliderJQuery - Print Screen #1Este Plugin de CKeditor 4 msliderJQuery, creado para el CMS al estilo wix.com, fue basado en el Plugin de www.masterslider.com ...
CKeditor 4 Plugin msliderJQuery - Print Screen #2Este Plugin de CKeditor 4 msliderJQuery, creado para el CMS al estilo wix.com, fue basado en el Plugin de www.masterslider.com ...
CKeditor 4 Plugin msliderJQuery - Print Screen #3Este Plugin de CKeditor 4 msliderJQuery, creado para el CMS al estilo wix.com, fue basado en el Plugin de www.masterslider.com ...