Luokat: Kaikki

jonka Dennys J Marquez 30 päivää sitten

1944

Dennys J Marquez - Senior Frontend Developer

Mapa mental profesional interactivo de Dennys José Márquez Reyes (Dennys J. Marquez), Senior Frontend Developer con 8+ años de experiencia formal y más de 15 años de trayectoria en tecnología. Este esquema visual, desarrollado con Mindomo, estructura de forma clara sus habilidades técnicas y blandas, proyectos destacados, certificaciones, metodologías ágiles y contribuciones en comunidades como GitHub, Dev.to y Medium. Incluye un portafolio técnico interactivo con experiencias en React, Angular, Vue.js, Node.js, Next.js y Server-Side Rendering (SSR), junto con conocimientos en ciberseguridad, UX/UI, gestión de equipos y arquitectura frontend. Una representación visual integral que permite explorar en profundidad su evolución profesional, formación y aportes didácticos en el desarrollo web.

Dennys J Marquez - Senior Frontend Developer

JIMMY VILLA
► Ingeniero Civil Informático | Full Stack | Java | Spring Boot | Angular | React | Vue | SQL | ETL | SOLID

28 de abril de 2025, Adevcom - Compañero , recomendación en https://www.linkedin.com/in/dennysjmarquez/

Dennys es un desarrollador Frontend Senior con experiencia sólida en Angular, React, Next.js, Node.js y otras tecnologías modernas. Se destaca por su enfoque técnico, la aplicación de buenas prácticas y su capacidad para desarrollar soluciones escalables y de alta calidad. Su habilidad para enfrentar retos complejos lo convierte en un recurso valioso para cualquier equipo de desarrollo.

─────
JALID CHAER
► Ingeniero en Informática

22 de octubre de 2023, Clicredit - Compañero , recomendación en https://www.linkedin.com/in/dennysjmarquez/

Trabajé con Dennys durante 3 años, es un excelente compañero de trabajo, muy detallista en su trabajo y ha aportado excelentes soluciones a los proyectos que hemos trabajado.

─────

HUGO BS
► Co-fundador en Fonpasa SA

10 de mayo de 2023, Clicredit - Supervisor, recomendación en https://www.linkedin.com/in/dennysjmarquez/

Tuve el placer de trabajar con Dennys durante los últimos cuatro años en el desarrollo de una aplicación y sistema web. Durante este tiempo, Dennys demostró un alto nivel de conocimiento técnico para resolver los desafíos que se presentaron durante el desarrollo.

Es un programador web dedicado y comprometido, que se esfuerza por entregar tareas con calidad dentro de los plazos establecidos. Recomiendo encarecidamente su contratación como miembro de cualquier equipo de desarrollo, ya que su pasión por la programación y su compromiso lo convierten en un gran activo. Estoy seguro de que su determinación garantizará el éxito en cualquier proyecto en el que participe.

─────

GUILLERMO RAMÍRE
► IT Workflow Specialist

11 de mayo de 2023, Clicredit - Supervisor, recomendación en https://www.linkedin.com/in/dennysjmarquez/

He tenido la oportunidad de trabajar con Dennys durante los últimos 3 años y ha demostrado tener altas capacidades para el desarrollo de aplicaciones en entornos web.
Trabaja de forma dedicada e incansable para conseguir los objetivos del proyecto, enfocándose en la calidad y en el cumplimiento de los requisitos.

Recomiendo su valoración y contratación, dado que es un importante activo para las organizaciones en las que pueda trabajar.

─────

FEDERICO SANTA COLOMA
► Director de tecnología

13 de septiembre de 2019, BONDAREA - Supervisor, recomendación en https://www.linkedin.com/in/dennysjmarquez/

Dennys ha demostrado ser un desarrollador con plenas capacidades técnicas y creatividad suficiente para alcanzar los objetivos.
De forma metódica y ordenada, siempre cumplió con los requerimientos y realizó las entregas con prolijidad ejemplar.

─────

Recomendaciones

Video Resume 2025 Dennys Jose Marquez Reyes

Video Curriculum 2025 - Dennys José Márquez Reyes 8+ años de experiencia


Este videocurrículum sintetiza parte de mi recorrido profesional, desde mis inicios con HTML y JavaScript hasta proyectos modernos usando Angular, React, Next.js y otras tecnologías clave del frontend.


He trabajado en equipos distribuidos y multidisciplinarios en países como Argentina, Panamá, España y Chile, participando en el desarrollo de aplicaciones web y móviles tanto en entornos startup como en estructuras empresariales más formales.


Me he desempeñado principalmente como frontend senior, con experiencia full stack en proyectos puntuales.


Durante el video, hago referencia a herramientas, prácticas y contextos reales: componentes complejos, formularios dinámicos, optimización de flujos, arquitectura de software, integración continua, metodologías ágiles y tecnologías como Spring Boot, React Native, TypeScript, entre otras, todo abordado desde un enfoque práctico, técnico y orientado a resultados.


También mencionó parte de mi participación en comunidades técnicas a través de tutoriales y contenidos compartidos en plataformas como YouTube y Dev.to.


Este material forma parte de esta Cartografía Profesional interactiva.


En mi sitio web personal, pueden explorar con mayor profundidad mis proyectos, herramientas y experiencia.






Habilidades Técnicas y Blandas

Proyectos

Mis proyectos en mi portafolio:
https://dennysjmarquez.dev/portfolio

Joomla

Joomla 1.5 | Hrauseo Consultores
Joomla 1.5 | La casita de azúcar
Joomla 1.5 | Prosper import c.a
Joomla 1.5 | Faegovensa c.a - use VirtueMart para la tienda online

HTML 5, CSS 3 y javaScript

Maquetado de un diseño de Adobe Illustrator CC 2018, HTML5, CSS3, JavaScript, jQuery, Bootstrap 4, BREF Bondarea Render Framework

Node.js y Express.js

Node.js y Express.js | Sessions, ataques CSRF como hacerlo y evitarlo, Token CSRF y implementación
Back-End para el proyecto de ( Angular 10 | angular-adv-adminpro ), Node.js, Express.js, MongoDB, Mongoosejs, CRUD, JWT, express-validator, google sign in, Paginaciones de datos, y mucho más...
Back-End para el proyecto de (React | Calculadora de Inversión en Criptomoneda), Node.js, Express.js, Messari API, axios, cors, parsear CSV, inyección de dependencias
Servidor para el proyecto de ( Angular 13 | Plataforma de Movies )

Node.js, Express.js, cors, este servidor sirve un archivo JSON como dB en un único endPoint protegido por un token de auth0.


Db de Películas con su Título, descripción, tipo de película, imagen y fecha
TDD guía de tests con Jest, inyección de dependencias, test unitarios, y test de integración con superTest
Vue.js 2 | Desarrollo de un listado de productos con carrito de compras

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub

Demo en línea: Ver demo funcional

Video explicativo: Ver presentación en Google Drive


---------


Desarrollé una aplicación web interactiva con Vue.js 2 para gestionar un listado de productos con carrito de compras, que permite actualizar datos en tiempo real sin necesidad de recargar la página. Este proyecto integra diversas funcionalidades avanzadas y patrones de diseño del ecosistema Vue para simular un entorno de comercio electrónico completo.


Tecnologías, técnicas y prácticas aplicadas:















Este proyecto refleja una integración coherente de diversas herramientas y funcionalidades del ecosistema Vue 2.




Vue.js 2 | Demostraciones técnicas con Vue.js 2

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub


---------


Desarrollé una colección de pequeños proyectos y ejemplos funcionales con Vue.js 2, cuyo propósito principal fue compartir y enseñar los fundamentos y características del framework de forma clara y aplicada.


Lista de ejemplos interactivos disponibles:


  1. Vue.js 2 | Directiva v-model
  2. Vue.js 2 | Props
  3. Vue.js 2 | Formulario y la Directiva v-show
  4. Vue.js 2 | Watchers
  5. Vue.js 2 | Directivas a medida
  6. Vue.js 2 | Ejecutar métodos @click
  7. Vue.js 2 | Creación y uso de plugins
  8. Vue.js 2 | Computed Properties
  9. Vue.js 2 | Slots y template
  10. Vue.js 2 | Mixins
  11. Vue.js 2 | Bucles con la Directiva v-for
  12. Vue.js 2 | Acceso a los datos de un componente padre
  13. Vue.js 2 | Emitir eventos
  14. Vue.js 2 | Carga dinámica de componentes
  15. Vue.js 2 | Filters o Pipes como los de Angular
  16. Vue.js 2 | Condicionales: Directivas v-if, v-else-if, v-else
  17. Vue.js 2 | Acceso a los datos de un componente hijo
  18. Vue.js 2 | Acceso a métodos de un componente hijo


Cada uno de estos ejemplos es una pieza independiente que ilustra un concepto o técnica específica, permitiendo a quienes los usan experimentar en tiempo real, explorar la reactividad y comprender el comportamiento del framework desde la práctica.


Estos pedacitos de código cubren temas esenciales como el enlace de datos con v-model, manejo de propiedades (props), directivas condicionales (v-if, v-show), eventos (@click, emit), watchers, computed properties, uso de slots, filtros personalizados, mixins, plugins, carga dinámica de componentes, y la interacción entre componentes padre e hijo.

Además, integré validaciones con VeeValidate, manejo básico de rutas con Vue Router y simulación de backend con JSON Server para ejercicios CRUD, complementando así el aprendizaje con escenarios cercanos a aplicaciones reales.


Cada ejemplo está diseñado para ser ejecutado directamente en el navegador, con código documentado y mensajes en consola que facilitan el seguimiento de la lógica interna. Este enfoque modular y visual permitió que otros desarrolladores y estudiantes pudieran avanzar progresivamente, desbloqueando y comprendiendo cada pieza por separado.





React 16 | SSR - Server Side Rendering a tope, Mi Portafolio V1, código fuente liberado

Tipo: Proyecto técnico personal avanzado


Repositorio: Código fuente en GitHub

Video : Ver video explicativo


---------


Este proyecto representa la primera versión de mi portafolio profesional, desarrollado como un sistema SSR (Server Side Rendering) para React, desarrollada desde cero sin dependencias de frameworks como Next.js. 


Motivación Técnica


Mi decisión de construir un sistema SSR personalizado surgió de la necesidad de:




Evolución del proyecto


Inicialmente, el proyecto fue desarrollado sobre Webpack 4. Con el tiempo, los cambios estructurales introducidos por Webpack 5 y la carga de mantenimiento asociada a la configuración dual cliente-servidor motivaron la migración hacia una arquitectura más mantenible utilizando Next.js.


A pesar de esa evolución, construir un sistema SSR manualmente me proporcionó una base técnica sólida que facilita el aprovechamiento consciente de frameworks modernos, comprendiendo que abstraen y cómo lo hacen.


Arquitectura Técnica Detallada de mi proyecto


1. Sistema de Renderizado Universal


Proceso de Renderizado (SSR → Hidratación)


// Flujo simplificado del renderizado
1. Cliente solicita ruta → 2. Express.js procesa → 3. getInitialData() obtiene datos
4. React renderiza en servidor → 5. HTML+datos enviados → 6. Hidratación en cliente


Componentes clave del renderizado:



Variable isClient - Detección de Entorno


const isClient = typeof window !== 'undefined';

// Uso condicional para librerías que requieren DOM
if (isClient) {
  // Código que requiere window/document
  const analytics = require('./analytics');
}

2. Sistema de Gestión de Datos Pre-renderizado


Método getInitialData


Cada ruta implementa un método estático que se ejecuta en el servidor antes del renderizado:


// Ejemplo de implementación en una página
static async getInitialData({ req, res, match }) {
  const projectId = match.params.id;
  const projectData = await apiService.getProject(projectId);
  return {
    project: projectData,
    metadata: {
      title: projectData.title,
      description: projectData.description
    }
  };
}


Características del sistema:



3. Sistema de Cache Inteligente


Implementación con node-cache


const NodeCache = require('node-cache');
const cache = new NodeCache({ stdTTL: 1800 }); // 30 minutos

// Estrategia de cacheado por URL hash
const cacheKey = crypto.createHash('md5').update(req.url).digest('hex');
const cachedData = cache.get(cacheKey);

if (cachedData && CACHE_ENABLED) {
  return cachedData;
}


Características del cache:



Cache Doble (Frontend + Backend):



4. Configuración de Webpack Personalizada


Webpack 4 - Configuración Dual


El proyecto incluye configuraciones separadas para cliente y servidor:


webpack.client.js:


// Configuración optimizada para el cliente
module.exports = {
  target: 'web',
  entry: './src/client.js',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        }
      }
    }
  }
};


webpack.server.js:


// Configuración optimizada para el servidor
module.exports = {
  target: 'node',
  entry: './src/server.js',
  externals: nodeExternals(),
  optimization: {
    minimize: false
  }
};


Características de la configuración:



5. Sistema de Carga Dinámica con react-universal-component


Implementación de Lazy Loading


import universal from 'react-universal-component';

const HomePage = universal(import('./pages/Home'), {
  loading: () => <div>Cargando...</div>,
  error: () => <div>Error al cargar la página</div>
});


Beneficios de la carga dinámica:



6. Integración con Firestore y Flamelink CMS


Configuración de Firestore


// Configuración de conexión a Firestore
const firebaseConfig = {
  apiKey: process.env.VITE_API_KEY,
  authDomain: process.env.VITE_AUTH_DOMAIN,
  projectId: process.env.VITE_PROJECT_ID,
  storageBucket: process.env.VITE_STORAGE_BUCKET,
  messagingSenderId: process.env.VITE_MESSAGING_SENDER_ID,
  appId: process.env.VITE_APP_ID
};


Flamelink como Headless CMS



7. Gestión de Metadatos y SEO


Sistema de Meta Tags Dinámicos


// Componente para gestión de metadatos
function MetaTags({ title, description, image, url }) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  );
}


Optimizaciones SEO implementadas:


Stack Tecnológico Completo


Frontend Framework



Backend & Build Tools



Database & CMS



Styling & UI



Development Tools



Estructura del Proyecto Detallada


portfolio-react-ssr-v1/
├── public/                 # Assets estáticos públicos
│   ├── images/            # Imágenes y multimedia
│   ├── fonts/             # Fuentes tipográficas
│   └── favicon.ico        # Favicon del sitio
├── static/                # Output del build compilado
│   ├── client/            # Assets del cliente
│   └── server/            # Bundle del servidor
├── webpack/               # Configuración de Webpack
│   ├── webpack.client.js  # Config para cliente
│   ├── webpack.server.js  # Config para servidor
│   └── webpack.common.js  # Configuración compartida
├── src/
│   ├── routes/            # Definición de rutas
│   │   └── index.js       # Configuración central de rutas
│   ├── pages/             # Componentes de página
│   │   ├── Home/          # Página principal
│   │   ├── About/         # Página sobre mí
│   │   ├── Projects/      # Lista de proyectos
│   │   └── Contact/       # Página de contacto
│   ├── components/        # Componentes reutilizables
│   │   ├── Header/        # Navegación principal
│   │   ├── Footer/        # Pie de página
│   │   ├── Layout/        # Layout principal
│   │   └── common/        # Componentes comunes
│   ├── services/          # Servicios y APIs
│   │   ├── firebase.js    # Configuración Firebase
│   │   ├── flamelink.js   # Cliente Flamelink
│   │   └── api.js         # Servicios de API
│   ├── utils/             # Utilidades y helpers
│   │   ├── cache.js       # Gestión de cache
│   │   ├── seo.js         # Helpers para SEO
│   │   └── constants.js   # Constantes globales
│   ├── styles/            # Estilos globales
│   │   ├── scss/          # Archivos Sass
│   │   └── css/           # CSS compilado
│   ├── client.js          # Entry point del cliente
│   └── server.js          # Entry point del servidor
├── .env                   # Variables de entorno
├── .env.example          # Ejemplo de variables
├── package.json          # Dependencias y scripts
├── babel.config.js       # Configuración Babel
└── README.md             # Documentación del proyecto


Optimizaciones de Performance


1. Optimizaciones de Renderizado



2. Optimizaciones de Red



3. Optimizaciones de Cache



Consideraciones sobre Redux y Estado Global


Estado de Redux en v1


En esta primera versión, Redux no fue implementado debido a:



Preparación para Redux


Sin embargo, se establecieron las bases para futura integración:


// Wrapper preparado para Redux
function withRedux(Component) {
  return function WrappedComponent(props) {
    // Lógica para hidratación de estado Redux
    const store = configureStore(props.initialState);
    return (
      <Provider store={store}>
        <Component {...props} />
      </Provider>
    );
  };
}


Estrategia de Migración a Redux


  1. State normalization: Normalizar estructura de datos
  2. Action creators: Crear acciones para cada operación
  3. Reducers: Implementar reducers para cada dominio
  4. Middleware: Integrar redux-thunk para async operations
  5. DevTools: Integrar Redux DevTools para debugging


Evolución y Lecciones Aprendidas


Desafíos Enfrentados


  1. Webpack complexity: Configuración dual cliente/servidor
  2. Bundle optimization: Evitar duplicación de código
  3. Hydration mismatches: Sincronización cliente-servidor
  4. Development workflow: Hot reload en entorno SSR


Soluciones Implementadas


  1. Configuración modular: Separación clara de configs
  2. Externals optimization: Exclusión de módulos de Node.js
  3. Consistent rendering: Asegurar mismo output en ambos entornos
  4. Development server: Configuración optimizada para desarrollo


Impacto y Aprendizajes


Métricas de Performance



Conocimientos Adquiridos


  1. SSR fundamentals: Comprensión profunda de renderizado universal
  2. Performance optimization: Técnicas avanzadas de optimización
  3. Build tooling: Dominio de Webpack y herramientas de build
  4. State management: Gestión de estado en aplicaciones SSR


Aplicabilidad


Este proyecto sirve como:







React 18 | Calculadora de Inversión en Criptomoneda

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub

Demo: Ver demo funcional


---------


Aplicación web desarrollada para simular inversiones en tres criptomonedas (Bitcoin, Ethereum y Cardano), con proyecciones anuales basadas en retornos mensuales estimados.


Permite visualizar el balance final en dólares y su equivalente en criptoactivos, acompañado de una tabla informativa con datos actualizados de mercado.


La solución combina procesamiento backend, consumo de APIs externas y una interfaz interactiva enfocada en claridad y usabilidad.


Características técnicas y funcionalidad:





Tecnologías empleadas:







React 18 | MicroFrontends con Vite, React, Redux y i18next

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub

Demo: Ver demo funcional


---------


Este proyecto es una demostración práctica de cómo construir una arquitectura de microfrontends escalable y eficiente utilizando React 18, Vite con Module Federation, Redux y i18next.


La arquitectura de microfrontends permite dividir aplicaciones grandes y monolíticas en módulos independientes que pueden ser desarrollados, probados e implementados de forma autónoma, facilitando el mantenimiento y la escalabilidad.


Características técnicas y aportes clave:



Tecnologías empleadas:



Instrucciones para probar la demo:






React 18 - Next.js 14 | con SSR, Redux, Material-UI y TSS-React

Tipo: Proyecto técnico personal


Repositorio: Ver demo funcional


---------


Desarrollé una plantilla base para aplicaciones construidas con Next.js 14, enfocada en Server-Side Rendering (SSR), gestión global del estado con Redux, componentización de interfaz con Material-UI y aplicación eficiente de estilos mediante TSS-React con soporte completo para hidratación desde el servidor.


Este proyecto surgió como respuesta a problemas técnicos concretos que enfrenté al integrar Redux y Material-UI con SSR en versiones anteriores de Next.js, donde eran comunes las configuraciones manuales y soluciones no sostenibles.


Durante el proceso de migración de varios entornos de Next.js 13 hacia 14, identifiqué incompatibilidades en la forma en que Material-UI manejaba los estilos durante el renderizado del lado del servidor.


Para resolverlo, integre TSS-React, una solución compatible con SSR que eliminó los saltos de estilo (FOUC) y mejoró la experiencia visual desde la primera carga.


Tecnologías utilizadas:



Características técnicas implementadas:



Este proyecto representa una solución aplicada a desafíos reales de arquitectura front-end en entornos con renderizado híbrido, integrando herramientas de uso común en ecosistemas React.





Troyanos y Virus

Troyano Visual Basic 6, Web Scraping Taringa, Creación del sitio web www.tec.web44.net para mi servicio técnico

WordPress

WordPress 3.6 | Theme parecido al fabuloso deviantART

PHP - MySQL

MVC, Composer, PHP 5, doctrine/dba, nested sets, JavaScript, JQuery, CSS3, HTML5 | Un CMS parecido a WordPress y lo llame Scorpion CMS
LitElement 2 | Componente de Fecha sin Calendario, se le pueden cambiar los estilos, bordes, colores del texto, fondo, idioma, también tiene la opción de mostrar los nombres de los meses, lo tengo publicado en
Polydile · GitHub y en npm
LitElement 2 | Todo List
Angular 6 | Formularios con la lógica en el componente o en el Templete, Las dos formas de crear Formularios en Angular
Angular 6 | Consumo de la Api Rest - Spotify
Angular 8 | Explicando parte de mi experiencia, una lista de usuarios, que se pueden editar, agregar y eliminar de una Base de datos de MySQL con un Backend sencillo construido en PHP para servir la base de datos, Tips y buenas prácticas
Angular 7 | Pequeña imitación de LinkedIn
Angular 8 | RxJS - Comunicación entre Componentes usando al BehaviorSubject
Angular 8 | Drag y Drop de archivos y Upload a Firebase con ProgressBar
Angular 10 | angular-adv-adminpro, MEAN, Google auth, JWT, Lazyload, upload de archivos, Guards, Pipes, Zona admin, dashboard y mucho más...
Angular 13 | Plataforma de Movies

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub

Demo: Ver demo funcional


Documentación: https://dennysjmarquez.medium.com/angular-13-cl%C3%A1sica-plataforma-de-movie-7906b13eaee3


---------


Este proyecto fue concebido como una plataforma clásica de películas para practicar e integrar diversas funcionalidades clave de Angular 13. Usé Bootstrap 5 para la interfaz, estructurando el código por módulos y aplicando lazy-loading para mejorar el rendimiento en la carga de rutas.


La funcionalidad principal incluye un listado de películas con capacidad de ordenamiento (por nombre y año) y filtrado combinado por tipo (movie / series) y año de lanzamiento.


Para ello, desarrollé componentes específicos y encapsulé la lógica de ordenamiento en utilidades separadas. También creé una directiva personalizada (input-only-numbers) que limita el input del filtro de año exclusivamente a valores numéricos.


Utilicé ReactiveFormsModule para manejar el filtro de año, con validaciones aplicadas mediante FormControl y validadores como pattern, maxLength, min y max, controlando el rango permitido en tiempo real.


Implementé pruebas unitarias con Jasmine (jasmine-core ~4.0.0) y ejecuté pruebas sobre funciones de ordenamiento, filtrado, suscripción a servicios (spyOn + callFake), comportamiento del guard, y estructura general de los componentes, validando tanto el comportamiento funcional como las restricciones del DOM y la lógica de negocio.


Integré el sistema de autenticación mediante el paquete @auth0/auth0-angular. Durante este proceso, identifiqué un comportamiento en la versión 1.9.0: aunque implementa canLoad y bloquea la carga de módulos protegidos, no redirige automáticamente al login, lo que provoca una pantalla en blanco.


Esto ocurre porque Angular cancela la navegación cuando un guard retorna false, sin generar efectos colaterales, y Auth0 no ejecuta loginWithRedirect() dentro de canLoad. Además, tras autenticarse, la librería redirige por defecto a la ruta raíz (/), ignorando la ruta solicitada si no se pasa explícitamente appState.target.


Para resolverlo, implementé un guard personalizado que abarca canLoad, canActivate y canActivateChild. En particular, en canLoad:



Este enfoque garantiza:



Referencias técnicas


  1. Comunidad Auth0+15GitHub+15Comunidad Auth0+15,
  2. Stack Overflow+6Comunidad Auth0+6GitHub+6
  3. Comunidad Auth0+6Comunidad Auth0+6Comunidad Auth0+6








Angular 13 | Pruebas Unitarias y de integración (Unit testing)

Tipo: Proyecto técnico personal


Repositorio: Código fuente en GitHub

Demo: Ver demo funcional


Documentación: https://dennysjmarquez.medium.com/angular-10-mean-google-auth-jwt-lazyload-upload-de-archivos-guards-pipes-zona-admin-bfa2e5ef9074#db81


---------


Este proyecto tuvo como objetivo el aprendizaje y la aplicación práctica de pruebas unitarias en Angular 13 utilizando Jasmine, implementé en las pruebas tipos de datos , métodos, spies para espiar funciones y mocks para simular servicios.


Utilicé a Jasmine y Karma, apoyándome en utilidades como TestBed, ComponentFixture y DebugElement. Configuré pruebas para formularios reactivos y template-driven, servicios HTTP y rutas parametrizadas mediante RouterTestingModule.


Desarrollé pruebas que cubren desde validaciones básicas hasta integración de componentes complejos, simulación de eventos y navegación.


Implementaciones técnicas específicas


Pruebas Básicas



Pruebas Intermedias



Pruebas de Integración (Nivel Intermedio)



Pruebas Avanzadas de Routing



Configuraciones técnicas avanzadas







Angular 13 | Formularios Anidados Nested Forms Service: Centraliza, sincroniza y valida formularios complejos

Tipo: Proyecto técnico personal


Repositorio: github.com/dennysjmarquez/angular-nested-forms-service


---------


Servicio desarrollado en Angular 13 para la gestión centralizada de formularios anidados distribuidos en múltiples componentes.


Permite coordinar y validar estructuras complejas de formularios que forman parte de un único formulario principal.


El proyecto surge como respuesta a la necesidad de evitar la fragmentación y duplicación en la lógica de formularios distribuidos, especialmente en aplicaciones que manejan pasos, pestañas o estructuras dinámicas.


Proporciona una alternativa técnica controlada a patrones comunes que tienden a volverse verbosos y propensos a errores.


Características Técnicas

Funcionalidad Principal



Diseño y Arquitectura



Tecnologías Utilizadas



Casos de Uso


Escenarios de Aplicación



Implementación Técnica


Registro de Formulario Principal

this.formService.registerRootForms('miFormulario', this.f);


Registro Dinámico de Controles

const nuevoControl = new FormControl('');
this.formService.registerFormElement('miFormulario', 'nuevoControl', nuevoControl);


Obtención de Control Registrado

const control = this.formService.getControl('miFormulario.nuevoControl');


Suscripción a Eventos

this.formService.getFormEventObservable().subscribe(event => {
  if (event.type === 'form' && event.path === 'form-1') {
    this.formService.registerFormElement(
      'form-1',
      'listado',
      new FormControl(this.dataTable)
    );
    this.formEventSubscription.unsubscribe();
  }
});


Problemática y Solución


Durante el desarrollo con Angular, aunque existen Reactive Forms y librerías como NgRx Forms y ngx-formly, ninguna ofrece una solución directa para coordinar formularios anidados distribuidos entre múltiples componentes. Este servicio llena ese vacío funcional sin requerir una curva de aprendizaje alta ni depender de estados globales complejos.


La implementación resuelve la inconsistencia común en desarrollos que requieren alta interacción entre componentes independientes con lógica de formulario, proporcionando un patrón estandarizado y reutilizable.


Este proyecto nace de la experiencia práctica en el manejo de formularios complejos en entornos profesionales, específicamente de patrones desarrollados durante el trabajo en Adevcom (Chile).


En proyectos como el Instituto de Salud Laboral (ISL), las estructuras de formularios anidados eran fundamentales para la gestión de datos empresariales complejos, donde esta solución demostró reducir significativamente la carga técnica asociada a la validación y sincronización de formularios fragmentados.













Angular 13 | FormArray: cestión correcta, y eficiente de campos o grupos repetibles

Tipo: Proyecto técnico personal


Repositorio: Ver demo funcional


---------


Es un componente de formulario dinámico implementado con Angular 13, orientado a la gestión eficiente de grupos de campos repetibles utilizando FormArray.


Es un ejemplo técnico enfocado en la creación, validación y manipulación de estructuras de datos dinámicas en formularios reactivos.


Este componente surge como recurso de referencia reutilizable, especialmente útil para formularios que requieren la adición y eliminación de bloques de campos completos.


Características Técnicas


Implementación Core



Tecnologías Utilizadas



Casos de Uso Aplicables


Escenarios de Implementación



Contexto y Propósito


Este componente responde a una necesidad concreta: gestionar de forma sencilla y controlada campos repetibles en formularios usando FormArray.


Es un ejemplo técnico sencillo, lo hice para ayudar a otros Developers a implementar esta solución de forma eficiente y clara.


Su base surge de trabajos previos con formularios complejos en entornos profesionales, proyectos personales y pruebas técnicas, y terminó de consolidarse durante mi experiencia en Adevcom (Chile).


Desde entonces, lo he adaptado según los requerimientos de cada proyecto o equipo.


Implementación Técnica


Estructura del FormArray


ngOnInit(): void {
  this.form = this.fb.group({
    items: this.fb.array([])
  });
  this.addItem(); // Agregar un grupo de campos al inicio
}


get items(): FormArray {
  return this.form.get('items') as FormArray;
}


createItemGroup(): FormGroup {
  return this.fb.group({
    nombre: [null],
    email: [null]
  });
}


Gestión Dinámica de Campos


addItem(): void {
  this.items.push(this.createItemGroup());
  this.cd.detectChanges();
}


removeItem(index: number): void {
  this.items.removeAt(index);
  this.cd.detectChanges();
}


Validación y Manejo de Errores


<div class="invalid-feedback" *ngIf="f.form.get(['items', i, 'nombre'])?.invalid">
  Campo requerido
</div>


Iteración del FormArray en Template


<div class="form-array" formArrayName="items">
  <ng-container *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
    <input formControlName="nombre" class="form-control" required />
    <input formControlName="email" class="form-control" required />
  </ng-container>
</div>


Valor Técnico


Este proyecto representa una solución práctica para un patrón común en desarrollo de aplicaciones Angular, proporcionando una implementación clara y eficiente que puede ser adaptada a distintos contextos sin comprometer funcionalidad ni rendimiento.


La implementación incluye manejo correcto de detección de cambios, validaciones por grupo y control eficiente del ciclo de vida del formulario.





Tipo: Proyecto técnico personal exploratorio


URL del artículo: dev.to/dennysjmarquez/signalpiperxjs

Estado: En fase de desarrollo y experimentación. No recomendado para producción.


---------


Este proyecto propone una función utilitaria para aplicar operadores de RxJS directamente sobre señales de Angular. La solución busca conectar el paradigma tradicional de programación reactiva basado en observables con el nuevo sistema de señales introducido en Angular 16+ y evolucionado en Angular 17/19.


Motivación Técnica



Arquitectura Técnica


1. Función signalPipeRxjs


export function signalPipeRxjs<R, A>(
  source: Signal<A>,
  initialValueOrOperator?: R | OperatorFunction<[A], R>
): Signal<R>


Flujo interno:


  1. Conversión de la señal a observable mediante toObservable().
  2. Aplicación de operadores RxJS al observable.
  3. Conversión de vuelta a señal mediante toSignal().


Características:



2. Ejemplo práctico


Componente hijo (SearchProductsComponent)


@Component({
  selector: 'app-search-products',
  template: `<input [(ngModel)]="searchProduct" placeholder="Busca un producto" />`,
})
export class SearchProductsComponent {
  searchProduct = model.required<string>();
}


Componente padre (CategoryFilterComponent)


readonly searchProduct = signal<string>('');


readonly onSearch = signalPipeRxjs(
  this.searchProduct,
  pipe(
    debounceTime(500),
    distinctUntilChanged(),
    map(value => value.toUpperCase()),
    tap(value => console.log('Valor transformado:', value))
  )
);


constructor() {
  effect(() => {
    const query = this.onSearch();
    console.log('Buscando:', query);
  });
}


3. Comunicación entre componentes


Directiva model:



Secuencia del flujo de datos:


  1. Usuario introduce texto →
  2. model actualiza la señal del padre →
  3. signalPipeRxjs aplica transformaciones →
  4. effect() ejecuta lógica reactiva con el valor resultante.


Transformaciones aplicadas


Operadores utilizados:



Lecciones aprendidas



Aplicabilidad del proyecto


Este trabajo puede utilizarse como:







Educación Formal

Primer semestre del TSU

Informática en el Instituto Universitario de Tecnología Antonio Ricaurte (IUTAR)

Venezuela Maracay (2006 - 2007)

Gestión de proyectos

Scrum Master + La Revolución Ágil + Liderar Equipos Scrum
Udemy (nov. 2018)

Scrum Master + La Revolución Ágil + Liderar Equipos Scrum


Periodo: Año 2018

Duración: 3 horas


Contenido principal:




🔗 Mostrar credencial


Fundamentos de gestión de equipos IT y programación
LinkedIn Learning (oct. 2020)

Fundamentos de gestión de equipos IT y programación


Periodo: Año 2020

Duración: 2.28 horas


Contenido principal:




🔗 Mostrar credencial


Liderazgo y trabajo en equipo
LinkedIn Learning (oct. 2020)

Liderazgo y trabajo en equipo


Periodo: Año 2020

Duración: 5 horas


Contenido principal:




🔗 Mostrar credencial


Aprende a trabajar con gráficos de Gantt
LinkedIn Learning (ene. 2024)

Aprende a trabajar con gráficos de Gantt


Periodo: Año 2024

Duración: 1.44 horas


Contenido principal:




🔗 Mostrar credencial


Gestión de proyectos: Resolución de problemas
LinkedIn Learning (ene. 2024)

Gestión de proyectos: Resolución de problemas


Periodo: Año 2024

Duración: 55 minutos


Contenido principal:




🔗 Mostrar credencial


UI/UX & Website Design

Flexbox y Grid
EDteam (oct. 2019)

Sass Desde Cero


Periodo: Año 2019

Duración: 5 horas


Contenido principal:




🔗 Mostrar credencial


Sass Desde Cero
EDteam (dic. 2018)

Sass Desde Cero


Periodo: Año 2018

Duración: 4 horas


Contenido principal:




🔗 Mostrar credencial


UX Design: Conceptos básicos para principiantes
Udemy (oct. 2018)

UX Design: Conceptos básicos para principiantes


Periodo: Año 2018

Duración: 1 horas


Contenido principal:




🔗 Mostrar credencial


Photoshop CC 2018
EDteam (ago. 2018))

Photoshop CC 2018


Periodo: Año 2018

Duración: 7 horas


Contenido principal:




🔗 Mostrar credencial


Fundamentos del diseño
EDteam (ago. 2018)

Fundamentos del diseño


Periodo: Año 2018

Duración: 3 horas


Contenido principal:




🔗 Mostrar credencial


Vuejs

Vuejs 2 y Vuex desde 0 con las mejores prácticas
Udemy (jul. 2020)

React Native Expo: Creando un TripAdvisor de Restaurantes


Periodo: Año 2020

Duración: 9.5 horas


Contenido principal:




🔗 Mostrar credencial




React Native Expo: Creando un TripAdvisor de Restaurantes
Udemy (oct. 2019)

React Native Expo: Creando un TripAdvisor de Restaurantes


Periodo: Año 2019

Duración: 33.5 horas


Contenido principal:




🔗 Mostrar credencial




JavaScript

Expresiones Regulares para el Desarrollo Web - RegExp
Udemy (feb.2020)

Expresiones Regulares para el Desarrollo Web - RegExp 


Periodo: Año 2020

Duración: 5.54 horas


Contenido principal:




🔗 Mostrar credencial





Webpack EDteam (dic. 2018)

Webpack


Periodo: Año 2018

Duración: 3 horas


Contenido principal:




🔗 Mostrar credencial

Programación avanzada con JavaScript y ECMAScript 6
campusMVP (ene. 2018)

Programación avanzada con JavaScript y ECMAScript 6


Periodo: Año 2018

Duración: 203.30 horas



🔗 Mostrar credencial


----


Contenido principal:


JavaScript Avanzado


Funciones, ámbitos y estructuras:



Matrices:



Fechas y temporizadores:



Excepciones y depuración:



Programación orientada a objetos (ES5):



Manipulación del DOM y BOM:



Eventos en navegadores:



AJAX:



Modularización e inyección de dependencias:



ECMAScript 6+ (ES2015 y posteriores)


Declaración de variables:



Promises:



Funciones flecha (lambdas):



Notación de objetos:



Símbolos:



Desestructuración y spread/rest:



Nuevas estructuras de datos:



Iteradores y generadores:



Clases y POO moderna:



Proxies:



Otras características ES6:




🔗 Mostrar credencial


PenTesting / CyberSecurity

OWASP Top 10 API + Seguridad en APIs
Udemy (oct. 2022)

OWASP Top 10 API + Seguridad en APIs


Periodo: Año 2022

Duración: 1 hora


Contenido principal:




🔗 Mostrar credencial


Implementación NIST Cybersecurity Framework Udemy (oct. 2022)

Implementación NIST Cybersecurity Framework


Periodo: Año 2022

Duración: 1 hora


Contenido principal:




🔗 Mostrar credencial


Ethical Hacking Profesional
SEGURIDAD CERO (ago. 2022)

Ethical Hacking Profesional


Periodo: Año 2022

Duración: 60 horas


Contenido principal:




🔗 Mostrar credencial


Bases de Datos SQL

Desafíos IT: consultas SQL
LinkedIn Learning (feb. 2024)

Desafíos IT: consultas SQL


Periodo: Año 2024

Duración: 59 minutos


Contenido principal:




🔗 Mostrar credencial


Diplomados / Bootcamps

Programación Web
UneWeb (nov. 2016)

Diplomado de programación web


Periodo: Año 2016

Duración: 240 horas


Contenido principal:  Lógica de programación, HTML4, HTML5, PHP I, PHP II, PHP III, PHP IV, MySQL 1, MySQL 2, JavaScript, Java Nivel I.


🔗 Mostrar credencial


Soft skills

Inteligencia emocional y motivación. Consigue tus objetivos
Udemy (feb. 2019)

Inteligencia emocional y motivación. Consigue tus objetivos


Periodo: Año 2019

Duración: 42 minutos


Contenido principal:




🔗 Mostrar credencial




Cómo desarrollar la inteligencia emocional
LinkedIn Learning (dic. 2020)

Cómo desarrollar la inteligencia emocional


Periodo: Año 2020

Duración: 1.24 hora


Contenido principal:




🔗 Mostrar credencial




Cómo escribir con eficacia
LinkedIn Learning (dic. 2020)

Cómo escribir con eficacia


Periodo: Año 2020

Duración: 1.38 hora


Contenido principal:




🔗 Mostrar credencial




Navegar el cambio en tiempos difíciles
LinkedIn Learning (sept. 2023)

La escucha activa


Periodo: Año 2023

Duración: 53 minutos


Contenido principal:




🔗 Mostrar credencial




Cómo aumentar la resiliencia
LinkedIn Learning (sept. 2023)

La escucha activa


Periodo: Año 2023

Duración: 41 minutos


Contenido principal:




🔗 Mostrar credencial




La escucha activa
LinkedIn Learning (sept. 2023)

La escucha activa


Periodo: Año 2023

Duración: 1.19 hora


Contenido principal:




🔗 Mostrar credencial




Cómo trabajar con gerentes difíciles
LinkedIn Learning (feb. 2024)

Cómo trabajar con gerentes difíciles


Periodo: Año 2024

Duración: 39 minutos


Contenido principal:




🔗 Mostrar credencial




Fundamentos de la resolución de conflictos
LinkedIn Learning (feb. 2024)

Fundamentos de la resolución de conflictos


Periodo: Año 2024

Duración: 1.35 hora


Contenido principal:




🔗 Mostrar credencial




Web Components

Web Components con LitElement
EscuelaIT (ago. 2019)

Web Components con LitElement


Periodo: Año 2019

Duración: 25 horas


Contenido principal:




🔗 Mostrar credencial




Java

Java: Código robusto
LinkedIn Learning (feb. 2024)

Java: Código robusto


Periodo: Año 2024

Duración: 3.42 hora


Contenido principal:




🔗 Mostrar credencial


Java: Servicios web
LinkedIn Learning (feb. 2024)

Java: Servicios web


Periodo: Año 2024

Duración: 1.55 hora


Contenido principal:




🔗 Mostrar credencial


Domina Java
LinkedIn Learning (feb.2024)

Domina Java


Periodo: Año 2024

Duración: 1.33 hora


Contenido principal:




🔗 Mostrar credencial


Angular: De cero a experto - 2018
Udemy (may. 2019)

Angular: De cero a experto - 2018


Periodo: Año 2019

Duración: 35.44 horas


Contenido principal:




🔗 Mostrar credencial




Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN Udemy (jun. 2022)

Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN 


Periodo: Año 2022

Duración: 32.17 horas


Contenido principal:




🔗 Mostrar credencial




Cursos de Especialización en Redes

Cisco CCNA

Estudios en redes de computadoras

(Cisco Networking Academy, CCNA 1-3 UCV Maracay, 2004)

Programa de Networking CCNA – Semestres 1, 2 y 3


Institución / Academia: Academia Local Cisco (ID: 674408), UCV – Núcleo Maracay

Ubicación: Maracay, Venezuela


Periodo: Año 2004

Duración: 220 horas


Contenido principal: Fundamentos de redes, switching, routing y configuración básica de

dispositivos Cisco.


🔗 Mostrar credencial


Software Testing

Introducción al Testing de Software: ¡para Principiantes! Udemy (ene. 2019)

Introducción al Testing de Software: para Principiantes!


Periodo: Año 2019

Duración: 3 horas


Contenido principal:




🔗 Mostrar credencial


TDD en NodeJS, guía de tests con Jest
Udemy (jun. 2022)

TDD en NodeJS – Guía de tests con Jest


Periodo: Año 2022

Duración: 2.5 horas


Contenido principal:




🔗 Mostrar credencial


Arq. Software

Principios SOLID y Clean Code
Udemy (jun. 2022)

Principios SOLID y Clean Code


Periodo: Año 2022

Duración: 6.5 horas


Contenido principal:




🔗 Mostrar credencial


Habilidades Blandas

Superación de obstáculos

Resiliencia

Pensamiento crítico

Inteligencia emocional

Coordinación de metas

Capacidad de adaptación

Habilidades Técnicas

Vue.js

Aunque mi enfoque principal ha estado en otros frameworks, he trabajado con Vue.js en proyectos personales que me han permitido adquirir experiencia práctica con la versión 2 del framework y su ecosistema.



Desarrollo de un Listado de Productos con Carrito de Compras (Julio 2020):



Contribución Didáctica con Vue.js (Sitio Web + GitHub) ( Abril 2021)


He documentado y publicado una serie de implementaciones funcionales sobre Vue.js 2 en mi sitio web personal.


Esta sección presenta ejemplos visuales y código fuente accesible desde mi repositorio en GitHub, donde explico de forma aplicada el funcionamiento de las principales características del framework, como:



Estas contribuciones están disponibles públicamente y funcionan como un soporte para quienes desean aprender los fundamentos de Vue.js 2 desde una base aplicada.





Vite

Experiencia total: 6 meses de uso formal + experiencia aplicada en proyecto personal (diciembre 2023)


He trabajado con Vite en entornos tanto profesionales como personales, utilizándolo como herramienta clave para optimizar la experiencia de desarrollo y configurar entornos modernos de forma eficiente.



Esta combinación de experiencia formal y aplicación personal me permite utilizar Vite en arquitecturas eficientes, facilitando entornos de trabajo rápidos, modulares y bien estructurados.




Tailwind CSS

Experiencia total: 6 meses de uso formal + más de 7 meses si se incluyen proyectos personales

Mi experiencia con Tailwind CSS es sólida y se ha desarrollado tanto en entornos profesionales como en proyectos personales. Lo he utilizado para construir interfaces precisas a partir de diseños, aprovechando su enfoque utilitario para mantener el código limpio y coherente.


Epidata (enero 2023 - junio 2023)



Proyecto personal: Calculadora de Inversión en Criptomoneda (agosto 2023)



Redux / Redux Thunk

Experiencia total: 2 años y 10 meses (uso profesional y personal)

Manejo Redux y Redux Thunk de forma avanzada, aplicándolos en la gestión de estado dentro de aplicaciones React y Next.js tanto en entornos laborales como en proyectos personales.



Utilicé Redux junto con Redux Thunk para la gestión de estado en un entorno SSR con React y Next.js. Integré estas herramientas durante el refactor y desarrollo del frontend, asegurando una lógica predecible y mantenible.



Apliqué Redux y Redux Thunk como adaptador de estado, generando modelos de datos ficticios que permitieron desacoplar la interfaz del backend y acelerar el desarrollo de prototipos funcionales. Esta estrategia mejoró la eficiencia del equipo y facilitó la integración posterior.



Utilicé Redux para compartir estado entre un host y dos microfrontends. Redux fue fundamental para coordinar eventos globales y mantener la sincronización de datos dentro de una arquitectura modular.



Mi experiencia con Redux y Redux Thunk se traduce en soluciones concretas aplicadas en arquitecturas complejas y escalables.




React Native

Experiencia total: 2 años


Mi experiencia con React Native se desarrolló principalmente durante mi etapa como React Native Developer en modalidad remota para Credit Agile, Inc.


Desde agosto de 2019 hasta julio de 2021. Credit Agile, Inc. era una compañía enfocada en la gestión de préstamos y pagos, en este rol, me enfoque en la creación de una aplicación móvil para la gestión de préstamos.


Durante este proyecto trabajé con distintas configuraciones del entorno, incluyendo:



Entre los aspectos más relevantes de mi experiencia destacan:


Desarrollé un sistema de tareas persistentes que continuaban funcionando tras reinicios del dispositivo.


Implementé un sistema de tracking que mostraba la ubicación en tiempo real sobre mapas de Google, proporcionando información al equipo de recuperación de la compañía.


Integré notificaciones automáticas que eran generadas por funciones en la nube, las cuales también ejecutaban tareas de mantenimiento en la base de datos.


Incorporé funcionalidades de captura y carga de imágenes directamente desde el dispositivo.


Construí layouts utilizando createBottomTabNavigator, createStackNavigator y un TopFooter personalizado, manteniendo consistencia en los encabezados y pies de página.


Integré un visor para imágenes y archivos PDF.


Creé un módulo para manejar un servicio Headless JS con notificación persistente, evitando que el sistema operativo cerrara la aplicación en segundo plano.

Desarrollé otro módulo para consumir la API de clima de openweathermap.org, utilizando su salida para mantener activa la aplicación mediante una notificación disfrazada.







React

Experiencia total: 4 años y 10 meses (uso profesional y personal)


Mi primer contacto con React marcó un punto de inflexión en mi carrera como desarrollador FrontEnd.


Venía de trabajar con JavaScript puro (Vanilla JS) en Bondarea, allí, en eso de diciembre de 2017 a septiembre de 2019.


Donde incluso contribuí al desarrollo de un framework propio para renderizar estructuras HTML a partir de objetos JSON BREF (Bondarea Render Framework), implicando una manipulación avanzada del DOM.


Al pasar a React, experimenté un cambio de paradigma que me permitió comprender con claridad el funcionamiento del Virtual DOM y su comparación con el DOM tradicional del navegador.


Esto no solo representó un salto técnico, sino también conceptual: pasé de un enfoque procedural y manual a uno declarativo y estructurado.


Fue también en esa etapa donde consolidé mis conocimientos en ES6, iniciando así un camino enfocado en el desarrollo moderno de componentes frontend.


Esa base técnica me permitió adaptarme con naturalidad a React Native, donde el modelo de renderizado ya no utiliza etiquetas HTML, sino componentes específicos como View, Text o Image, lo que representa un cambio profundo en la forma de construir interfaces, trasladando el paradigma declarativo de React al entorno nativo con su propia lógica visual y de comportamiento.


Experiencia profesional:



Trabajé como React Developer, aplicando React junto a TypeScript, Hooks, Redux y Vite.



Me desempeñé como React SSR – Next.js Developer, utilizando React en combinación con Server-Side Rendering mediante Next.js.


Desarrollé hooks personalizados para formularios, entre otras funcionalidades avanzadas relacionadas con el ciclo de vida y la estructura del frontend.


Proyectos personales destacados:



Desarrollé una plantilla de aplicación web con Next.js 14, Server-Side Rendering, Redux y TSS-React para soporte completo de estilos desde el servidor.



Construí una arquitectura de microfrontends escalable con comunicación entre host y submódulos, integración de Redux para estado compartido y sincronización global de idioma.



Aplicación web que proyecta ganancias anuales sobre inversiones en criptomonedas, con manejo de tablas dinámicas e interfaz responsiva.



Desarrollé mi primer portafolio utilizando la tecnología de React con Server-Side Rendering (SSR) sin depender de frameworks como Next.js, construyendo una arquitectura de renderizado desde el servidor totalmente personalizada con React y JavaScript.


Tecnologías utilizadas: React, React Hooks, react-universal-component, express.js, Webpack 4, Babel.


Aspectos clave:



La aplicación genera contenido HTML desde el servidor utilizando React, permitiendo que los usuarios reciban una página completamente renderizada desde el primer request. Esto mejora significativamente el rendimiento de carga inicial y favorece el SEO, al entregar contenido listo para ser indexado.



Implementé un mecanismo de cacheo de datos en el servidor que evita llamadas innecesarias al backend. Utilicé una clave getInitialData por ruta, inspirada en el modelo de Next.js, para recuperar los datos antes del renderizado.



Una vez enviada la página desde el servidor, React se encarga de hidratarla en el cliente, adjuntando los eventos y habilitando la interacción. Este proceso requería un manejo preciso del Virtual DOM para mantener la sincronización entre ambas partes.



La arquitectura fue diseñada como una base escalable para futuros proyectos con SSR. Su estructura modular permite integraciones rápidas y rendimiento optimizado, con enfoque en SEO y experiencia de usuario.


Este proyecto reflejó mi dominio del renderizado isomórfico (SSR + CSR), consolidando prácticas modernas de desarrollo con React y control explícito sobre el ciclo de datos, el entorno de ejecución y la estrategia de carga.


Conocimientos clave en React:





Node.js

Experiencia total: Más de 4 años (uso profesional y personal)


Ámbitos: APIs REST, SSR backend, sesiones, seguridad, rendimiento, pruebas automatizadas y educación técnica.


Node.js ha sido una pieza central en mi stack de desarrollo, sirviendo como núcleo para arquitecturas de backend, renderizado del lado del servidor (SSR) y la construcción de APIs robustas. Mi experiencia con esta tecnología abarca contextos profesionales, educativos y personales.


En Credit Agile, Inc. (febrero 2021 – mayo 2023)



Proyectos personales y educativos



Backend completo con Node.js, Express.js y MongoDB (Mongo Atlas) usando Mongoose, CRUD para hospitales, médicos y usuarios con definición de modelos, esquemas y middleware para manipulación avanzada de datos.


Validaciones con express-validator, rutas protegidas con JWT y control de roles, gestión de subida de archivos con express-fileupload, control de tipo, generación de nombres únicos con uuid y eliminación de archivos previos.


Middleware para protección de endpoints, manejo de errores personalizados y CORS habilitado, implementé paginación en las consultas a la base de datos para mejorar la respuesta del backend.


Las rutas fueron organizadas de forma modular y se estructuraron middlewares reutilizables para validación y control de acceso.



Servidor en Express.js que sirve una base de datos simulada desde un archivo JSON, este backend de Node.js implementa cors para limitar el acceso a la API según origen.


La API cuenta con un único endpoint protegido mediante validación de token emitido por Auth0, el archivo JSON simula una base de datos de películas, incluyendo título, descripción, tipo, imagen y fecha.


La autenticación se gestiona mediante un middleware que valida el encabezado Authorization con el token correspondiente.



Desarrollé un backend con Node.js y Express.js para gestionar la lógica de negocio y comunicarme con la Messari API, usando axios para realizar solicitudes HTTP autenticadas mediante API Key.


Implementé CORS para permitir el acceso desde el frontend, incluso en entornos con orígenes distintos.


Incluí procesamiento de archivos CSV para transformar datos estructurados cuando es requerido.


Apliqué un patrón de inyección de dependencias funcional, pasando explícitamente a los controladores las librerías y funciones necesarias (axios, carga de datos, lógica de cálculo, etc.).


Esto desacopla la lógica de negocio de implementaciones concretas, facilitando la reutilización, pruebas y mantenimiento. Además, contribuye a respetar el principio SOLID de inversión de dependencias (DIP).


Al desacoplar el flujo de ejecución de cualquier implementación concreta, se facilita la reutilización de handlers y la posibilidad de intercambiar dependencias sin modificar su lógica interna.


La estructura modular resultante mejora la claridad y mantenibilidad del código, y permite escalar la funcionalidad sin comprometer la organización.


Utilicé variables de entorno para gestionar configuraciones sensibles a través de .env.

La arquitectura modular del backend facilita la escalabilidad, el mantenimiento y la ejecución de pruebas unitarias.



Guía técnica con ejemplos de pruebas unitarias e integración con SuperTest. Incluye inyección de dependencias y diseño de tests para backends Express.



Proyecto explicativo sobre ataques CSRF y su prevención con tokens en rutas sensibles. Implementado con Node.js y Express, con lógica de protección en sesiones.



Aplicación isomórfica SSR + CSR usando Node.js (con Express), React, Webpack 4 y Babel.



Implementé hidratación eficiente y diseñé una arquitectura modular y reutilizable, inspirada en Next.js pero hecha desde cero.





Next.js

Experiencia total: 2 años y 4 meses (uso profesional)


Ámbitos: Desarrollo web con SSR, optimización SEO, rendimiento y estructuración avanzada de proyectos.


Mi experiencia con Next.js se ha forjado tanto en el ámbito laboral como en proyectos personales, consolidando un dominio avanzado en su uso para el desarrollo web de alto rendimiento y renderizado del lado del servidor (SSR).


Dónde y qué he hecho con Next.js:



Durante mi rol como React SSR – Next.js Developer:




Desarrollé una plantilla de aplicación con:







Material UI

He trabajado con Material UI en diversos contextos, lo que me ha permitido consolidar una experiencia avanzada en esta librería.


A continuación, te detallo dónde y qué he hecho con Material UI:



En mi rol como React SSR – Next.js Developer, una de mis contribuciones fue la migración de Material-UI desde la versión V4 a la V5.


Esto implicó la actualización y adaptación de componentes de la interfaz de usuario para aprovechar las nuevas características y mejoras de rendimiento de la versión más reciente. También trabajé con @emotion/cache en Next.js 11 como parte de este proceso de optimización de estilos y rendimiento.



He desarrollado una plantilla de aplicación web con Next.js 14 donde utilizó Material-UI para proporcionar componentes de interfaz de usuario modernos y personalizables.


Enfrenté desafíos al integrar Material-UI con Next.js y SSR en versiones anteriores, por lo que creé esta plantilla para facilitar la integración.


Para la carga eficiente de estilos desde el servidor, integre TSS-React, ya que los métodos tradicionales de aplicar estilos de Material-UI ya no funcionaban como antes.


Esta plantilla está diseñada para asegurar una interfaz de usuario consistente, moderna y con una experiencia de usuario fluida, eliminando saltos de estilo al cargar los estilos desde el servidor.


Este proyecto es un claro ejemplo de mi capacidad para integrar y utilizar Material UI en arquitecturas avanzadas y resolver problemas específicos de implementación.


Tengo 2 años y 4 meses de experiencia formal trabajando con Material UI en empleos directos, y esta experiencia se complementa con el uso continuo de la librería en mis proyectos personales.




LitElement

Trabaje con LitElement cuando realicé mi curso de LitElement impartido por Escuela IT en el 2019.


El curso lo hice para complementar mi stack como desarrollador frontend y aprender a crear Web Components nativos con LitElement, tecnología que es una evolución de Polymer.


Aunque no he tenido la oportunidad de trabajar formalmente con LitElement, sí he aplicado esta tecnología en proyectos personales que me han permitido entender cómo funciona y sus características.


Como parte de mi aprendizaje desarrollé varios componentes con LitElement:



Este componente fue publicado, documentado y presentado en video.



Esta pieza fue publicada en GitHub, distribuida a través de NPM y acompañada de una demo funcional construida con Storybook. También fue compartida en comunidades especializadas como Polydile.


Estos desarrollos fueron realizados con un enfoque claro en buenas prácticas, buscando producir piezas reutilizables, encapsuladas y altamente configurables.


He compartido codigo, artículos y demostraciones como parte de un compromiso con la divulgación técnica y el software abierto.


NOTA:

Algunos de estos desarrollos se describen con más detalle en la sección de Proyectos de este mapa mental.



-------------

JavaScript ES6

Tengo ya 9 años aplicando tecnología de JavaScript ES6 en proyectos personales y profesionales.


Mi experiencia con JavaScript ES6 es amplia, siendo esta la base fundamental de mi carrera.


Aunque mis primeros acercamientos a esta tecnología surgieron de la exploración personal —escribiendo código directamente desde archivos del sistema en Windows 98—, en enero de 2018 consolidé mis conocimientos con una certificación formal en "Programación avanzada con JavaScript y ECMAScript 6", impartida por campusMVP.


Esta formación me permitió reforzar y estructurar de manera profesional mi dominio sobre las características del lenguaje y el estándar ES6 .


Mi experiencia destacada:



Diseñe y desarrolle BREF (Bondarea Render Framework), un sistema innovador para renderizar páginas web completas a partir de estructuras JSON. Este proyecto implicó manipulación avanzada del DOM con Vanilla JS, concatenación de strings y uso controlado de eval para ejecutar código JavaScript bajo demanda.


Dominio del Event Loop y la cola de tareas de JavaScript, asegurando que la interfaz no se bloqueara durante operaciones pesadas.



Implementé un sistema para edición dinámica de CSS, JS y HTML en el frontend, requiriendo inyección y modificación de código en tiempo real con JavaScript. También desarrollé y adapté plugins para CKEditor 4 usando JavaScript.


El manejo de conceptos como hoisting y closures fue clave para organizar el código y mantener el estado en funciones de edición y eventos DOM.



He aplicado técnicas para optimizar el rendimiento de aplicaciones JavaScript, minimizando bloqueos en el hilo principal y mejorando la experiencia de usuario mediante el manejo eficiente de asincronía y eventos.


Implemento estrategias de optimización de algoritmos y estructuras de datos para mejorar la eficiencia computacional del código, lo que contribuye a reducir tiempos de ejecución y consumo de recursos.


Sobre este tema, he publicado un artículo técnico titulado La ciencia de los algoritmos, donde explico conceptos clave y buenas prácticas para aplicar algoritmos eficientes en JavaScript.


Soy un firme defensor de la escritura de código limpio y mantenible, aplicando principios SOLID y patrones de diseño para asegurar que el software sea escalable y fácil de mantener a largo plazo.


Comprendo profundamente las diferencias entre mutabilidad e inmutabilidad en JavaScript, y sé cuándo aprovechar una u otra.


En algunos escenarios, he utilizado la mutabilidad de los objetos para optimizar rendimiento de manera controlada, pero también reconozco los riesgos que conlleva: comportamientos impredecibles, efectos colaterales y dificultades de trazabilidad.


Por ello, aplico principios de inmutabilidad cuando es crucial mantener el control del estado y evitar errores complejos, especialmente en arquitecturas donde la previsibilidad del estado es clave.



Como entusiasta de la ciberseguridad, aplico buenas prácticas de seguridad en el desarrollo JavaScript para proteger las aplicaciones contra vulnerabilidades comunes, fortaleciendo la integridad y confidencialidad de los datos.


Utilizo diariamente características modernas de ES6 como let/const, arrow functions, destructuring, spread/rest, template literals, clases, módulos, promesas y async/await para escribir código limpio, eficiente y mantenible.


Aplico patrones de diseño clásicos y avanzados, como Factory, Singleton y otros, para asegurar escalabilidad y robustez en las aplicaciones.


En mí GitHub comparto código y librerías basadas en JavaScript ES6, y he escrito artículos técnicos y guías sobre buenas prácticas, y algunas arquitecturas.



-------------

Google Cloud

He trabajado con Google Cloud durante aproximadamente 2 años, aplicando esta tecnología para potenciar el desarrollo y despliegue de aplicaciones web y móviles en proyectos profesionales y personales.


Mi experiencia incluye la utilización de servicios como Firebase, Cloud Firestore, Realtime Database y Cloud Functions para gestionar infraestructura en la nube, así como para implementar soluciones escalables, seguras y eficientes.


En mis roles como desarrollador frontend y full stack, he integrado Google Cloud con frameworks modernos como React, Next.js y React Native, aprovechando funcionalidades como bases de datos en tiempo real, autenticación, y automatización de tareas mediante funciones en la nube. Por ejemplo, en aplicaciones móviles con React Native, utilicé Firebase Realtime Database y Cloud Functions para gestionar datos dinámicos y automatizar tareas de mantenimiento, como la eliminación automática de registros antiguos, mejorando la eficiencia y escalabilidad.


He desarrollado habilidades avanzadas en la creación y administración de índices en Firestore para realizar búsquedas eficientes con ordenamientos ascendentes y descendentes, optimizando consultas complejas según los campos de filtro, orden y rango requeridos.


He implementado estrictas reglas de seguridad para proteger las bases de datos en Firestore y Firebase Realtime Database, asegurando que solo usuarios autorizados puedan acceder o modificar la información, lo que fortalece la integridad y confidencialidad de los datos.


También utilizo la Google Cloud Console para activar y configurar servicios esenciales, como el envío de correos electrónicos y la autenticación, gestionando APIs y servicios que mejoran la experiencia del usuario y la seguridad de las aplicaciones.


---


He trabajado con Google Cloud durante aproximadamente 2 años, aplicando esta tecnología para potenciar el desarrollo y despliegue de aplicaciones web y móviles en proyectos profesionales y personales.


Mi experiencia incluye la utilización de servicios como:



En mis roles como desarrollador frontend y full stack, he integrado Google Cloud con:



He desarrollado habilidades avanzadas en la creación y administración de índices en Firestore para realizar búsquedas eficientes con ordenamientos ascendentes y descendentes, optimizando consultas complejas según los campos de filtro, orden y rango requeridos.


He implementado estrictas reglas de seguridad para proteger las bases de datos en Firestore y Firebase Realtime Database, asegurando que solo usuarios autorizados puedan acceder o modificar la información, lo que fortalece la integridad y confidencialidad de los datos.


También utilizo la Google Cloud Console para activar y configurar servicios esenciales, como:




-------------

Git

He trabajado con Git durante ya 9 años y 3 meses, tanto en proyectos personales como en entornos laborales, lo que me ha permitido desarrollar una sólida habilidad técnica en el manejo de esta herramienta de control de versiones.


Desde mis inicios en el desarrollo web, he utilizado Git para gestionar el código fuente de aplicaciones, facilitando la colaboración en equipos pequeños y grandes, así como el control eficiente de versiones y ramas en proyectos complejos.


En mi experiencia profesional, he aplicado Git en diversos roles y proyectos, desde desarrollador Full Stack hasta especialista en frontend con tecnologías como React, Angular, y Next.js. Por ejemplo, durante mi trabajo remoto en Credit Agile, Inc (febrero 2021 - mayo 2023), utilicé Git para manejar versiones en proyectos con React SSR y Next.js, asegurando una integración continua y un flujo de trabajo colaborativo efectivo con otros desarrolladores. También en mi rol como React Developer en Epidata (enero 2023 - junio 2023), Git fue fundamental para coordinar el desarrollo de un sistema integral de RRHH, permitiendo gestionar cambios, resolver conflictos y mantener la calidad del código.


En mis proyectos personales y contribuciones a la comunidad, he documentado buenas prácticas y flujos de trabajo con Git, promoviendo la colaboración efectiva entre frontend y backend, y aplicando principios de desarrollo ágil y control de versiones para mejorar la productividad del equipo.


En resumen, mi experiencia con Git abarca:



Total de años con Git: 9 años y 3 meses, combinando experiencia en proyectos personales y laborales.



-------------

CyberSecurity / Ethical Hacking (OWASP)

Mi involucramiento en Ciberseguridad y Ethical Hacking (OWASP) ha sido una constante a lo largo de mi trayectoria, por motivos de curiosidad, aprendizaje y crecimiento profesional.


Y aunque actualmente mi rol principal es como desarrollador web senior, he cultivado conocimientos específicos en CyberSecurity y Ethical Hacking, especialmente relacionados con OWASP Top 10, lo que me permite identificarme como Jr CyberSecurity en esta área.


Mi contribución en este campo no proviene de un puesto formal dedicado exclusivamente a la ciberseguridad en una empresa, sino de la aplicación directa de estos conocimientos para asegurar mis desarrollos, junto con una formación continua y dedicada.


Estudié para integrar la seguridad como un pilar fundamental en cada línea de código que escribo.


Certificación Profesional y Formación Activa (2022 – 2023):


He dedicado aproximadamente entre 1 y 2 años, desde mediados de 2022 hasta 2023, a la formación en CyberSecurity y Ethical Hacking, con especial atención a los estándares OWASP.



Proyectos Prácticos y Aplicación Real:





Experiencia Previa y Contexto Técnico:


Como ya he comentado en otros apartados, mi interés por la ciberseguridad no es reciente. Entre 2010 y 2011, desarrollé varias soluciones que, si bien no formaban parte de un enfoque formal, reflejan una comprensión temprana de cómo funcionan los sistemas, sus vulnerabilidades y cómo pueden ser manipulados para lograr ciertos fines.



Divulgación Técnica y Aplicación Continua:


Desde 2022 he compartido parte de mi trabajo mediante artículos en Dev.to y otras plataformas, abordando temas como:



En paralelo, mantengo un enfoque constante en aplicar seguridad desde el diseño (Security by Design) en cada proyecto, tanto en frontend como backend, con tecnologías como JavaScript, React, Angular y Node.js.



-------------

API RESTful

Mi experiencia total y activa trabajando con API RESTful, sumando tanto mi rol formal en empresas como los proyectos personales significativos y mis contribuciones, asciende a aproximadamente 9 años y 10 meses.


Aquí te desgloso mi trayectoria y lo que he hecho con API RESTful:



En Adevcom (Chile), como Desarrollador Angular, he proporcionado soporte de Backend desarrollando controladores REST con Spring Boot, realizando consultas JPA y utilizando programación funcional con Java 8 Streams para requerimientos específicos.



Durante mi rol como React SSR – Next.js Developer en Credit Agile, Inc. (Panamá), fui responsable de la creación de una API interna con Node.js y next-connect, una API Gateway con Node.js, y un sistema de sesiones con Express.js para proteger las páginas con roles usando getServerSideProps de Next.js. Esto fue fundamental en el refactoring y desarrollo del FrontEnd con React renderizando del lado del servidor.



Como React Native Developer en Credit Agile, Inc. (Panamá), desarrollé un módulo nativo de Android para el consumo de la API del clima de openweathermap.org en una aplicación móvil para la gestión de préstamos.



En BONDAREA (Argentina), participé activamente en la creación de BREF Bondarea Render Framework, un sistema que renderizaba información de una API en diferentes tipos de componentes Bootstrap.



Trabajé en un sistema de hospitales utilizando el MEAN Stack (MongoDB, Express, Angular 10, Node.js), donde creé un backend robusto con API RESTful, manejando la subida de archivos, autenticación JWT y Google SignIn.



Desarrollé una plataforma de películas con Angular 13, donde el servidor creado con Node.js y Express servía datos de películas como un archivo JSON a través de un único endpoint protegido por un token de Auth0.



Creé una Calculadora de Inversión en Criptomoneda en React que utiliza servicios web RESTful para obtener información actualizada sobre criptomonedas como Bitcoin, Ethereum y Cardano.



Desarrollé un proyecto con Node.js y Express.js enfocado en Sessions y ataques CSRF, donde mostré cómo proteger las rutas sensibles de un servicio REST.



En un proyecto con Vue.js 2 para un listado de productos con carrito de compras, implementé operaciones CRUD con JSON Server y el consumo de una API usando Vuex y Vue Router, manejando operaciones HTTP como GET, POST, PUT y DELETE.



Desarrollé una aplicación web con Angular 6 que consume la API REST de Spotify, gestionando la autenticación con tokens y el manejo de datos asíncronos.



Liberé el código fuente de mi portafolio V1, construido con React y Express, que incluía Server-Side Rendering (SSR) con capacidad de cachear datos recuperados del servidor para el primer renderizado, similar a Next.js, optimizando el SEO.


Además de la experiencia práctica, mi conocimiento sobre API RESTful también se extiende a la divulgación.


En marzo de 2023, publiqué un artículo titulado "Todo lo que necesitas saber sobre API Rest: Glosario de términos esenciales y más", lo que demuestra mi compromiso con el aprendizaje continuo y el intercambio de conocimientos en la comunidad de desarrolladores.


Mi habilidad con las API RESTful es una de mis competencias técnicas clave, junto con el desarrollo con Node.js y Express.js.


Esto me permite no solo crear APIs robustas y eficientes para el backend, sino también consumirlas e integrarlas eficazmente en soluciones frontend complejas.



-------------

TypeScript

Mi experiencia con TypeScript, aunque más reciente en comparación con otras tecnologías, ha sido significativa y me ha permitido mejorar la calidad y mantenibilidad de los proyectos en los que he trabajado.


Desde enero hasta junio de 2023 (6 meses), en mi rol como React Developer en Epidata, utilicé TypeScript para desarrollar aplicaciones frontend robustas y escalables. Durante este periodo, implementé componentes funcionales con React y TypeScript, aprovechando las ventajas de tipado estático para reducir errores en tiempo de desarrollo y mejorar la documentación implícita del código.


A lo largo de mi trayectoria, he incorporado TypeScript en varios proyectos personales y colaborativos, donde he migrado código JavaScript a TypeScript para optimizar la calidad y facilitar el mantenimiento, así como para integrar mejores prácticas de desarrollo.


En mi rol actual en Adevcom (desde febrero de 2024), aunque el foco principal es Angular con TypeScript, aplico esta tecnología de forma constante para construir componentes, servicios y módulos con tipado fuerte, lo que mejora la robustez y escalabilidad del código.


En conjunto, estimo que cuento con alrededor de 2 años y 4 meses de experiencia práctica con TypeScript.


Este total se compone de:



En total, cuento con alrededor de 2 años y 4 meses de experiencia práctica con TypeScript, lo que me permite desarrollar aplicaciones modernas con un enfoque en calidad, escalabilidad y mantenibilidad.



-------------

Angular

Mi dominio en Angular (y TypeScript, su superconjunto) es muy sólido y se extiende a más de 3 años y 4 meses en proyectos reales con versiones que van desde la 6 hasta la 13.


Además, estoy activamente explorando las últimas versiones como Angular 17/19 con Signals, sobre lo cual he publicado artículos y sigo formándome.


He tenido la oportunidad de aplicar mis conocimientos de Angular en diversos contextos y proyectos:


Desarrollo Front-End en Adevcom (Chile)

Febrero de 2024 - 1 año y 4 meses - Angular 13



Soluciones Avanzadas para Formularios en Angular:



Proyectos con Stack MEAN y APIs

(desde agosto de 2020 hasta mayo de 2022) - Angular 10



Abril y mayo de 2022 - Angular 13



Pruebas y Buenas Prácticas

Mayo de 2022 - Angular 13



Otras Contribuciones Relevantes en Angular:

Junio de 2019 - Angular 8



Junio de 2019 - Angular 8



Febrero de 2019 - Angular 7



Diciembre de 2018 - Angular 6



Junio de 2019 - Angular 6



Mi habilidad con Angular, combinada con mi experiencia en TypeScript, me permite construir microfrontends escalables para aplicaciones empresariales y soluciones avanzadas que requieren un alto nivel de detalle y optimización.


Mi experiencia total y activa trabajando con Angular, sumando tanto mi rol formal en empresas como los proyectos personales significativos y otras contribuciones, asciende a aproximadamente 3 años y 4 meses.


Este cálculo se compone de:




-------------

Mi Camino hasta Aquí

Podcast Profesional
Testimonio profesional en Video

Podcast Profesional - testimonio profesional en Video


En este video comparto parte de mi recorrido como desarrollador, desde mis primeros aprendizajes independientes hasta la experiencia formal, incluyendo aprendizajes clave y cómo enfrenté ciertos desafíos en mi carrera.


Pienso que este contenido complementa mi perfil y permite conocer más sobre el trasfondo de mi carrera, las decisiones que me formaron y cómo afrontar los desafíos profesionales desde una perspectiva real y práctica.

Contenidos, aportes digitales

https://www.youtube.com/@dennysjmarquez

https://x.com/infocodes

https://www.behance.net/dennysjmarquez

https://dev.to/dennysjmarquez

https://dennysjmarquez.medium.com/

https://dennysjmarquez.dev/magazine/

Experiencia Laboral (Formal)

Click Result group Ltd (Full Stack Developer)
España · En remoto

Tecnologías: JavaScript, HTML 5, CSS3, PHP 5.6.25, MySQL 5.6.17, CKeditor 4, JQuery
Sistema múltiples idiomas ('STIVA Blog Script ')
Sistema edición dinámica Front-end (CSS, JS, HTML)
Edición en línea (CKeditor 4), Creación/modificación plugins CKeditor 4
Modificación CMS 'Simple CMS ' (phpjabbers): Características de wix.com/websitebuilder.com
Oct. 2016 - Dic. 2017
1 año 3 meses

Credit Agile, Inc
Panamá · En remoto

React Native Developer
Tecnologías: Expo, ExpoKit, React Native, Cloud Functions, RxJs - BehaviorSubject
Módulo nativo Android (Consumo API clima openweathermap.org)
Módulo nativo Android (Servicio Headless JS, Notificación persistente)
Visor Imágenes/PDF
Layouts (Navigators)
Uso cámara y subida archivos
Sistemas: Task persistentes, Geolocalización/Tracking, Notificaciones Push (FireBase)
Implementaciones React Native (Expo, ExpoKit, Nativo)
Creación App móvil gestión préstamos
Agosto 2019 - Julio 2021
2 años
React SSR – Next.js Developer
Tecnologías: React, Next.JS 9-11, React Hooks, Redux, redux-thunk, express-session
Migración Material-UI V4 a V5
Mejora rendimiento carga App (50% con caché)
Sistema Sesiones (Express.js, getServerSideProps)
API interna (Node.js, next-connect), Manejo dinámico Router Next.js, Api Gateway (Node.js)
SEO optimización
Creación: Sistema inactividad/cierre sesión (react-idle-timer), Hooks personalizados (useForm)
Refactoring y desarrollo FrontEnd (SSR con Next.js)
Febrero 2021 - Mayo 2023
2 años 4 meses

Adevcom (Angular Developer)
Chile · En remoto

Tecnologías: Angular 13, Java 8, Spring Boot 3, SQL Server, ng-bootstrap, Keycloak, Swagger, Lombok
Soporte Backend: Despliegue local, Controladores REST (Spring Boot), Consultas JPA, Programación funcional (Java 8 Streams)
Implementación: Directivas, Guards, Interceptores
Optimización: 50% en manejo de datos complejos, Servicios personalizados
Contribuciones: Componentes reutilizables, Formularios (Template Driven/Reactive), Validaciones, Campos dinámicos
Rol: Desarrollo Frontend con Angular 13
Proyecto: Requerimientos Normativos, ISL
Febrero 2024 - Presente
1 año 5 meses

Corpwakd C.A (Proveedor tecnológico / Servicio Técnico Wintel)

Asesoría técnica, Diagnóstico fallas SW/HW, Instalación SW/HW/dispositivos, Optimización SO, Respaldo data, Armado computadoras
Ene. 2012 - Ene. 2014
2 años 1 mes

BONDAREA (JavaScript Developer)
Argentina · En remoto

Tecnologías: JavaScript, Vanilla JS, Bootstrap 3/4, jQuery 3, JSON, DOM, HTML 5, CSS 3, Git, BitBucket, Sourcetree
Maquetación (Adobe Illustrator CC 2018)
Manipulación avanzada del DOM
Creación sistema renderizado (Componentes Bootstrap, Búsqueda, eval, fnRender)
Proyecto: BREF Bondarea Render Framework (renderiza HTML/JS/CSS desde JSON)
Dic. 2017 - Sept. 2019
1 año 10 meses

Epidata (React Developer)
Argentina · En remoto

Tecnologías: TypeScript, React (Function Component, Hooks), Vite, Redux, Tailwind CSS, Docker, MySQL Workbench, PrimeReact
Mejora eficiencia: Modelos datos ficticios (Arquitectura Hexagonal, Redux Thunk)
Contribuciones: Sistema inicio sesión (LDAP), Gestión módulos/roles/permisos/usuarios, Pantallas CRUD agente, Generación PDFs
Equipo de alto rendimiento
Proyecto: Sistema Integral RRHH (MDP Argentina)
Ene. 2023 - Jun. 2023
6 meses

Publicaciones

dev.to

React la guía máxima de buenas prácticas jamás concebida, Principios SOLID, El acrónimo STUPID, Clean Code y Code Smell
Consejos para lograr un software limpio, mantenible, testeable y escalable
La Arquitectura Hexagonal
La deuda tecnológica: el costo oculto de proyectos a largo plazo
Todo lo que necesitas saber sobre API Rest
Colaboración Efectiva FrontEnd/BackEnd
La ciencia de los algoritmos
Primeros pasos, cómo utilizar QR y BlockChain para la trazabilidad de productos
Microfrontends Architecture
Lean Startup y MVPs: Soluciones Ágiles para el Desarrollo de Software
Angular 17/19 | Signals con RxJS usando signalPipeRxjs

medium

Google Hacking, Dorks Hacking, búsquedas avanzadas con Google
RED Team, BLUE Team, PURPLE Team, Ethical Hacking y sus diferencias
La vida y el legado de Mary Parker Follett: influencia olvidada en la gestión moderna
Origen e historia del Management
El Síndrome de Procusto

linkedin

¡Cambiar la perspectiva!. Cuando un problema parezca no tener solución, cambia la perspectiva

Educación y Formación

Perfil Profesional

Conocimientos Adicionales

Interés en Arquitecturas
Patrones / Anti-Patrones (STUPID)
Principios SOLID
Clean Code

Más allá de la técnica

Ser desarrollador frontend no es solo escribir código ni dominar tecnologías, también se trata de saber manejar las presiones, los entornos complejos y las relaciones humanas que existen en cada proyecto.


A lo largo de mi carrera he aprendido que para mantenerse firme en esta profesión no basta con lo técnico: hacen falta resiliencia, paciencia, criterio y claridad emocional. He pasado por entornos laborales retadores, situaciones personales duras y muchas veces he tenido que resolver con lo que había a mano.


Pero también he buscado prepararme de forma seria, estudiar, certificarme y mejorar mi base técnica cada año. El equilibrio entre la experiencia de vida y la formación formal me ha permitido seguir creciendo y aportar valor real.


Mi filosofía para el trabajo:



Considero la programación una fusión de arte y ciencia, me gusta aplicar un enfoque creativo para resolver problemas, lo que denomino "pensar fuera de la caja".


Este enfoque me permite crear e innovar con soluciones poco convencionales, siempre considerando la importancia de no reinventar la rueda innecesariamente.



Para resolver problemas complejos, recomiendo un enfoque sistemático.


Esto garantiza mayor eficiencia, claridad y consistencia, evitando soluciones desorganizadas o incompletas, he aprendido la importancia de cambiar de perspectiva cuando un problema parece no tener solución, ya que a menudo estamos limitados por un enfoque estrecho.


El pensamiento crítico es fundamental, permitiendo ver los problemas desde diferentes ángulos y encontrar soluciones que otros podrían pasar por alto.



Entiendo que nuestro instinto inicial puede ser buscar la solución más rápida, pero mi experiencia me ha enseñado que encontrar la solución correcta es a menudo más importante que encontrar la solución rápida, es crucial detenerse y considerar todas las posibilidades antes de elegir un camino.



Estoy constantemente buscando nueva información y explorando las últimas tendencias para mejorar mis habilidades como programador.


Mi interés no se limita a que el código funcione, sino a que sea eficiente, elegante y fácil de entender.


Para ello, he aplicado en mis desarrollos principios como SOLID, Clean Code y Arquitectura Hexagonal, y procuro evitar los anti-patrones STUPID.



Con los años me he dado cuenta de que esta carrera no se trata solo de tecnología. El código importa, claro, pero no lo es todo. Las experiencias que he vivido —buenas y malas— me obligaron a interesarme por algo más profundo: las personas, los equipos, y las dinámicas que existen detrás de cada proyecto.


He aprendido que saber trabajar en equipo es tan importante como escribir buen código. Me ha tocado entender cómo colaborar sin fricciones entre FrontEnd y BackEnd, cómo comunicar con respeto, y cómo liderar sin imponer. A lo largo de mi camino profesional me he topado con entornos muy diferentes, y eso me llevó a estudiar sobre gestión de equipos, liderazgo técnico y salud en el ambiente laboral.


También he visto cómo ciertos comportamientos dañan el trabajo colectivo: el ego, la competencia innecesaria, el exceso de presión, o el famoso "Síndrome de Procusto", donde destacar se vuelve incómodo para otros. En medio de eso, mantenerme centrado en mi pasión por programar, sin perder la calma ni la claridad, ha sido fundamental.


Para mí, escribir buen software no es solo tener lógica o habilidad técnica. Es también saber cómo convivir con otros en un entorno profesional, cómo construir sin destruir, y cómo sostener un ritmo saludable sin apagar la motivación.







Experiencia total en IT

Experiencia total en IT


Más de 15 años representan mi vida en el mundo de la tecnología. Todo comenzó en la época de los ordenadores 386 con MS-DOS y Windows 3.11, donde tuve mis primeras experiencias programando con lenguajes como BASIC usando QBasic, y posteriormente Visual Basic 4 y 6.


También descubrí HTML, JavaScript y VBScript explorando archivos .htt y .hta en Windows 98, lo cual marcó el inicio de mi conexión con el desarrollo web.


Durante esa etapa, desarrollé proyectos propios que me permitieron experimentar y aprender por mi cuenta. Algunos ejemplos:



Todo ese recorrido —con sus aciertos, errores, pausas y momentos difíciles— forma parte de estos 15 años que reflejan no solo cuánto tiempo llevo en tecnología, sino la intensidad y profundidad con la que he vivido este camino.


Mi experiencia formal (9 años)

Los ya 9 años de experiencia formal corresponden al tiempo que he trabajado para empresas.


Durante mucho tiempo me costó conseguir oportunidades por no tener estudios formales, hasta que logré obtener una certificación en el programación Web, un diplomado de UneWeb.


Este diplomado, junto con el desarrollo de un CMS al estilo de Wordpress como proyecto final, fue el punto de inflexión que me permitió acceder a mi primer trabajo formal como Desarrollador Full Stack.



Stack Tecnológico

Stack Tecnológico


Mi especialidad está en JavaScript (ES6+), TypeScript, y frameworks como React y Angular. Tengo experiencia trabajando con:



He tenido el privilegio de trabajar en equipos pequeños, grandes, multidisciplinarios y de alto desempeño. Mi trayectoria incluye una variedad de proyectos que van desde aplicaciones web hasta móviles, y he colaborado con diversas empresas en distintos países, incluyendo Argentina, Panamá, España y Chile.



Mis redes sociales
Sígueme en.

DEV Community 👩💻👨💻
YouTube
Twitter
Behance
Medium
GitHub

Web Personal: https://dennysjmarquez.dev/

Email: dennysjmarquez@gmail.com

LinkedIn: https://www.linkedin.com/in/dennysjmarquez/

Resumen - CV

Resumen
Podcast

Anécdotas Servicio Técnico

Hola Dennys

Creación sitio web tec.web44.net
Web Scraping Taringa (Visual Basic 6)
Mejoró posicionamiento (cientos de posts)
Para sección descargas sitio servicio técnico
Otro programa volcaba datos a .sql (Esquema Spirate)
Extraía info a archivos HTML
Analizaba HTML
Programa para extraer enlaces de descargas
Troyano Visual Basic 6
Descubrió Payoneer
Plataforma Conduit (analítica, pago por instalación)
Llegó a instalarse mundialmente (incl. China)
Liberado en cibercafés (sin Deep Freeze)
Se copiaba a pendrives
Residente en memoria
Instalaba barra, modificaba registro del windows
Aprovechaba autorun Windows XP
Propagar barra de herramientas

Servicio Técnico de PC (Hogar)

Tuvo que dejar estudios (falta de ingresos, trabajo)
Cursó el primer semestre de Informática en el IUTAR
Conoció a Angela (Esposa)
Clienta que motivó formalización
Reparaba PC, vendía partes
Ahorró para publicidad
Montó Taller en casa materna

Periodo Difícil / Transición

Intentó Diseño Gráfico (No Rentable)
Trabajó en Cibercafé
Terminó Bachillerato (Parasistema Nocturno)
Usó Indemnización para comprar PC
Empleos No Relacionados (Gimnasio, Fábrica Plásticos)
Dificultad para encontrar trabajo programador
Falta de Estudios Formales

Proyectos Iniciales

Curso Cisco CCNA (No relacionado con Chats)

En medio del desarrollo de DgChat, mi primer programa en VB funcional, me surgió una duda que se convirtió en obsesión: quería entender exactamente cómo se transmitían los mensajes a través de las redes. Convencido de que necesitaba conocimientos avanzados de redes, me inscribí en un curso intensivo de Cisco CCNA en la UCV de Maracay Venezuela.


La ironía es que mientras esperaba aprender sobre protocolos de aplicación y arquitecturas de sistemas de mensajería, me encontraron estudiando configuraciones de routers, subredes y protocolos de enrutamiento. Fue un verdadero 'palo de ciego', como suelo decir.


Aunque inicialmente me frustró descubrir que el CCNA no tenía la relación directa con programación de chats que yo esperaba, con el tiempo comprendí su valor. Esos conocimientos me dieron:



Hoy veo ese curso como un ejemplo perfecto de cómo a veces los caminos equivocados terminan llevándote a destinos valiosos. Aprendí que en tecnología, ningún conocimiento sobra - solo hay aprendizajes que todavía no han encontrado su aplicación.




DgChat (Visual Basic 6)
Probado en red biblioteca UCV Maracay
Funcionaba con IIS y ASP
Programa de Chat

Inicios

Competición VBScript vs. JavaScript por el dominio de los browser

En los albores de la web interactiva, dos lenguajes de scripting compitieron por definir el futuro del desarrollo web: JavaScript y VBScript. Aunque ambos permitían agregar dinamismo a las páginas web, sus diferencias técnicas y estratégicas marcaron destinos radicalmente distintos.


Orígenes y enfoques


Comparación técnica


Seguridad: La gran diferencia



JavaScript incorporó políticas como Same Origin Policy y sandboxing para reducir riesgos, mientras que VBScript carecía de protecciones robustas, facilitando exploits y ataques. Esto, sumado a su dependencia de entornos Windows sin restricciones, lo convirtió en un blanco frecuente de vulnerabilidades.


El ocaso de VBScript




JavaScript: El estándar indiscutible



Hoy, JavaScript domina no solo en el navegador, sino también en:



La caída de VBScript y el auge de JavaScript ilustran cómo la apertura, la seguridad y la adaptabilidad definen el éxito en la tecnología web. Mientras VBScript quedó obsoleto por su enfoque cerrado y limitado, JavaScript evolucionó para convertirse en el pilar de la web moderna.

Descubrió HTML, JS, VBScript (archivos .htt, .hta Windows 98)
Visual Basic 4 y 6
QBasic (MS-DOS 6.22) I386
MS-DOS / Windows 3.11 (HELP.COM)
Autoaprendizaje
Curiosidad Innata por Tecnología
Contexto Familiar Desafiante

Desde mis primeros años, crecí en un contexto familiar sumamente desafiante y sin apoyo. Esta situación me obligó a desarrollar una fuerte autodeterminación y autogestión desde muy joven. Tuve que tomar decisiones importantes por mi cuenta y abrirme camino sin ningún respaldo.


La falta de apoyo también afectó directamente mi formación académica. No tuve el respaldo necesario para formalizar mis estudios en programación web,


Por lo que mi aprendizaje en tecnología nació de una curiosidad constante y de la iniciativa por comprender a fondo su funcionamiento.


En una etapa inicial, me formé de manera independiente, desarrollando competencias prácticas a través de la exploración técnica continua.


Con el tiempo, logré transformar ese interés en una trayectoria profesional formal, complementandolo con estudios especializados y experiencia en empresas reconocidas del sector tecnológico.


Periodos Difíciles y Transiciones Significativas


Mi vida ha estado llena de obstáculos y cambios abruptos, pero fue mi resiliencia y mi capacidad para pensar fuera de la caja lo que me permitió superarlos. Cada caída me enseñó a levantarme con más fuerza, y cada desafío reforzó mi determinación de seguir adelante, incluso cuando todo parecía estar en mi contra.


A pesar de las dificultades, he logrado forjar mi propio camino, demostrando que, incluso sin apoyo, es posible alcanzar tus metas con perseverancia y pasión.

Nació 1977

Intento Empresa Formal (Toito PC C.A.)

No pudo aguantar punto de equilibrio
Fracasó financieramente (gastos iniciales)
Registró compañía
Alquiló local en otro estado

Momento Muy Difícil

Olvidó programación temporalmente
Trabajó como obrero en finca (aprox 3 años)
Sin acceso a PC, sin programar
Se mudó a chalet propiedad suegro (zona montañosa)

Retorno a Programación

Encontró Diplomado UNEWEB
Finalización Diplomado y Primer Empleo Formal

Obtuvo Primer Empleo Formal (Desarrollador Full Stack)

Proyecto Final: CMS estilo WordPress (Scorpion CMS)

Funcionalidad blog, categorías (Nested Sets), etiquetas, gestor archivos, idiomas

Similar a WordPress (estructura, themes)

Desarrollado desde cero (MVC, Composer, PHP, MySQL, JS, jQuery, CSS3, HTML5)

Retomó y finalizó proyecto (aprox 1 año después)

Obtuvo conexión mejor (antena Ubiquiti NanoStation Loco M2)
Estudió con modem móvil (sin internet en zona)
Educación online asequible
Financió estudios vendiendo semillas de girasol
Cursos Presenciales (PHP/MySQL, Joomla, WordPress) - Insuficientes
Necesidad de Certificaciones (falta estudios/exp. formal en CV)
Busco cursos online con Angela

Incidente Crítico

Superado con Angela
Logró salvar su vida
Resultó herido
Asalto en chalet

Enlaces externos

Dennys J Marquez Web Developer

¡Hola! 🖖 Soy Dennys José Márquez Reyes (también conocido como Dennys J. Márquez), un Front-End Web Developer con ya 9 años de experiencia formal y 15 años en la industria IT. Me apasiona transformar ideas en soluciones digitales innovadoras que marquen la diferencia.


Este espacio no es una vitrina de herramientas o certificaciones. Es una síntesis estructurada de mi trayectoria: cómo pienso, cómo trabajo y cómo he evolucionado profesionalmente.


En el transcurso de mi carrera he transitado por diversos entornos, tecnologías y equipos, aprendiendo que escribir buen código no basta.


Se necesita:



Muchas veces, el verdadero desafío no está en el código, sino en el contexto. Saber cuándo intervenir, cuándo observar, y cómo mantener una postura técnica sólida sin entrar en dinámicas que no aportan al proyecto es parte esencial del oficio.


------


Acompáñame en este recorrido por mi trayectoria, este mapa refleja años de trabajo y evolución constante. Te invito a explorarlo: cada nodo cuenta una parte de lo que he construido y del enfoque que me define.





Hola dennys 1

Mindomo

Lisätietoja Mindomosta
Ohje
Yhteydenotto
Hinnoittelu
Julkinen Mielikartat -galleria
Mielikarttamallit

Lisää tietoja

Blogi
Käyttöehdot
Tietosuojakäytäntö
Security
Accessibility

Ukk

Mitä miellekartoitus oikein on?
How to Mind Map?
Esimerkiksi käsitekarttoja
Mikä on käsitekartoitus?
Mitä käsitekartoitus oikein on?