</>playground/devPortafolio

6 sandboxes

Dev Playground

Fragmentos de código que demuestran habilidades reales. Cada pieza cuenta una historia técnica.

// SRP aplicado en TypeScript
class UserRepository {
async create(data) {
return db.users.insert(data);
}

async findById(id) {
Single Responsibility Principle

Demostracion del principio de responsabilidad unica: cada clase tiene una sola razon para cambiar. Separacion limpia de responsabilidades en un servicio de notificaciones.

typescriptSOLIDClean CodeArchitecture
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 2rem;
}

Responsive Card Grid

Grid de tarjetas completamente responsive con CSS Grid y animaciones suaves. Se adapta de 1 a 3 columnas segun el viewport.

cssCSS GridResponsiveAnimation
import { useState, useEffect, useCallback, useRef } from 'react';

function useDebounce(value, delay = 300) {
const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
Custom React Hook: useDebounce

Hook personalizado para debounce de valores. Perfecto para busquedas en tiempo real sin sobrecargar la API.

javascriptReact HooksPerformanceAPI
class AppError extends Error {
constructor(message, statusCode, code) {
super(message);
this.statusCode = statusCode;
this.code = code;
}
}
API REST con Error Handling

Patron robusto de manejo de errores en un API REST con errores tipados y middleware centralizado.

typescriptError HandlingREST APIMiddleware
<div class="app">
<header class="header">Header</header>
<div class="main-wrapper">
<aside class="sidebar">Sidebar</aside>
<main class="content">Main content</main>
</div>
<footer class="footer">Footer</footer>
Flexbox Holy Grail Layout

Layout Holy Grail implementado con Flexbox moderno. Header sticky, footer al fondo y contenido fluido.

htmlFlexboxLayoutResponsive
class EventBus {
constructor() {
this.listeners = new Map();
}

on(event, handler) {
if (!this.listeners.has(event)) this.listeners.set(event, new Set());
Observer Pattern

Implementacion del patron Observer con tipado fuerte para comunicacion desacoplada entre modulos.

typescriptDesign PatternsTypeScriptEvents