./live-coding

enunciados + leetcode

Enunciados como los de una entrevista real para resolver por tu cuenta, con el tiempo que te darían, y problemas de LeetCode recomendados para cada tecnología y seniority. Nada se corrige acá: resolvelo en tu editor, en voz alta, y marcá lo que ya practicaste.

# 1. tecnología

[x]Frontend · React.jsweb, hooks, Next.js [ ]Frontend · iOSSwift, SwiftUI, UIKit [ ]Frontend · AndroidKotlin, Jetpack Compose [ ]Frontend · React NativeExpo, iOS y Android [ ]Backend · Node.jsExpress, NestJS [ ]Backend · PythonDjango, FastAPI [ ]Backend · JavaSpring Boot [ ]Backend · .NETC#, ASP.NET Core [ ]AI engineeringconstruir agentes de IA [ ]Agentic engineeringdesarrollar con agentes [ ]Quality engineeringtesting manual y automatizado

# 2. seniority

[ ]Junior [x]Semi-senior [ ]Senior

# ejercicios (resolvelos por tu cuenta, con el tiempo que darían en la entrevista)

01Autocomplete con debounce y tecladoQue manejes efectos asíncronos con cancelación y race conditions, manejo de foco y teclado, y accesibilidad en un componente real.60 min

Construí un componente Autocomplete para buscar ciudades. Mockeá la API con una función searchCities(query: string, signal?: AbortSignal): Promise<{ id: string, name: string, country: string }[]> que resuelve después de un delay aleatorio de 100 a 800 ms y filtra una lista fija.

Mientras el usuario escribe se muestran sugerencias debajo del input. Se puede navegar con flechas, elegir con Enter y cerrar con Escape. Al elegir una ciudad, el input muestra su nombre y la lista se cierra.

Ojo: como el delay es aleatorio, una respuesta vieja puede llegar después de una nueva. La UI nunca debería mostrar resultados de una búsqueda que ya no corresponde al texto actual.

# requisitos

-Las búsquedas se hacen con debounce de 300 ms y solo a partir de 2 caracteres.
-Cada búsqueda nueva cancela la anterior con AbortController, o como mínimo ignora respuestas viejas.
-Estados claros de carga, error y sin resultados.
-Navegación con flechas arriba y abajo, Enter para seleccionar y Escape para cerrar.
-Accesibilidad básica: role="combobox", role="listbox", aria-activedescendant y aria-expanded.
-Click fuera del componente cierra la lista.

# si te sobra tiempo, te van a preguntar

-¿Cómo cachearías resultados de queries ya hechas?
-¿Cómo extraerías la lógica a un hook reutilizable como useAutocomplete?
-¿Cómo testearías la race condition entre respuestas?
-¿Qué cambiarías si la lista de sugerencias pudiera tener miles de ítems?

02Tabla paginada con orden del servidorQue sepas sincronizar estado con la URL, manejar fetching dependiente de parámetros y cuidar la experiencia mientras carga.45 min

Tenés que mostrar una tabla de órdenes que vienen de fetchOrders({ page, pageSize, sortBy, sortDir }): Promise<{ items: Order[], total: number }>, donde Order es { id: string, customer: string, amount: number, createdAt: string }. Mockeá la función con un array de 137 órdenes y un delay de 500 ms.

La tabla muestra 10 órdenes por página, se puede ordenar haciendo click en los encabezados de customer, amount y createdAt, y tiene controles de página anterior y siguiente con el texto Página 3 de 14.

# requisitos

-Página, orden y dirección viven en la URL (query params) para que un refresh o un link compartido mantengan la vista.
-Cambiar el orden vuelve a la página 1.
-Mientras carga la página siguiente se siguen viendo los datos anteriores con un indicador de carga, sin saltos de layout.
-Los montos y fechas se formatean con Intl.NumberFormat e Intl.DateTimeFormat.
-Los botones se deshabilitan en la primera y última página.

# si te sobra tiempo, te van a preguntar

-¿Cómo evitarías mostrar datos de una página vieja si el usuario hace click rápido varias veces?
-¿Qué cambiaría si lo hicieras con Server Components en Next.js?
-¿Cómo prefetchearías la página siguiente?

03Implementá Promise.allQue entiendas a fondo cómo funcionan las promesas y el orden de ejecución asíncrona en JavaScript.30 min

Implementá promiseAll(items) que se comporte como Promise.all sin usarlo. Recibe un array que puede mezclar promesas y valores comunes, y devuelve una promesa que resuelve con un array de resultados en el mismo orden de entrada.

Ejemplo: promiseAll([1, Promise.resolve(2), new Promise(r => setTimeout(() => r(3), 100))]) resuelve con [1, 2, 3]. Si cualquiera rechaza, la promesa devuelta rechaza con ese mismo error apenas ocurre.

# requisitos

-El orden de los resultados respeta el orden de entrada, no el orden en que resuelven.
-Los valores que no son promesas se tratan como ya resueltos.
-Un array vacío resuelve inmediatamente con [].
-Rechaza con el primer error y no espera al resto.

# si te sobra tiempo, te van a preguntar

-Ahora implementá promiseAllSettled.
-¿Cómo limitarías la cantidad de promesas corriendo en paralelo a n?
-¿Cuál es la diferencia entre Promise.all, Promise.race y Promise.any?

# leetcode recomendado (Frontend · React.js · Semi-senior)

EasyFunction CompositionDel plan 30 Days of JavaScript: componer funciones es la idea detrás de middlewares, HOCs y pipelines de datos.

EasyTimeout CancellationDel plan 30 Days of JavaScript: cancelar timers es lo mismo que hacés en el cleanup de un useEffect.

MediumDebounceDel plan 30 Days of JavaScript: es de las preguntas más frecuentes en entrevistas de frontend y la base de cualquier búsqueda en vivo.

MediumPromise Time LimitDel plan 30 Days of JavaScript: combinar promesas y timers para poner timeouts a requests, algo que usás en producción.

MediumGroup ByDel plan 30 Days of JavaScript: extender prototipos y agrupar datos, muy común al preparar listas por categoría.

MediumEvent EmitterDel plan 30 Days of JavaScript: el patrón pub/sub detrás de stores, buses de eventos y suscripciones en React.

MediumLongest Substring Without Repeating CharactersEl ejemplo más pedido de sliding window con hash map, un patrón que aparece en muchas variantes.

enunciados + leetcode

# 1. tecnología

# 2. seniority

[ ]Junior [x]Semi-senior [ ]Senior

# ejercicios (resolvelos por tu cuenta, con el tiempo que darían en la entrevista)

01Autocomplete con debounce y tecladoQue manejes efectos asíncronos con cancelación y race conditions, manejo de foco y teclado, y accesibilidad en un componente real.60 min

Ojo: como el delay es aleatorio, una respuesta vieja puede llegar después de una nueva. La UI nunca debería mostrar resultados de una búsqueda que ya no corresponde al texto actual.

# requisitos

-Las búsquedas se hacen con debounce de 300 ms y solo a partir de 2 caracteres.
-Cada búsqueda nueva cancela la anterior con AbortController, o como mínimo ignora respuestas viejas.
-Estados claros de carga, error y sin resultados.
-Navegación con flechas arriba y abajo, Enter para seleccionar y Escape para cerrar.
-Accesibilidad básica: role="combobox", role="listbox", aria-activedescendant y aria-expanded.
-Click fuera del componente cierra la lista.

# si te sobra tiempo, te van a preguntar

-¿Cómo cachearías resultados de queries ya hechas?
-¿Cómo extraerías la lógica a un hook reutilizable como useAutocomplete?
-¿Cómo testearías la race condition entre respuestas?
-¿Qué cambiarías si la lista de sugerencias pudiera tener miles de ítems?

02Tabla paginada con orden del servidorQue sepas sincronizar estado con la URL, manejar fetching dependiente de parámetros y cuidar la experiencia mientras carga.45 min

# requisitos

-Página, orden y dirección viven en la URL (query params) para que un refresh o un link compartido mantengan la vista.
-Cambiar el orden vuelve a la página 1.
-Mientras carga la página siguiente se siguen viendo los datos anteriores con un indicador de carga, sin saltos de layout.
-Los montos y fechas se formatean con Intl.NumberFormat e Intl.DateTimeFormat.
-Los botones se deshabilitan en la primera y última página.

# si te sobra tiempo, te van a preguntar

-¿Cómo evitarías mostrar datos de una página vieja si el usuario hace click rápido varias veces?
-¿Qué cambiaría si lo hicieras con Server Components en Next.js?
-¿Cómo prefetchearías la página siguiente?

03Implementá Promise.allQue entiendas a fondo cómo funcionan las promesas y el orden de ejecución asíncrona en JavaScript.30 min

# requisitos

-El orden de los resultados respeta el orden de entrada, no el orden en que resuelven.
-Los valores que no son promesas se tratan como ya resueltos.
-Un array vacío resuelve inmediatamente con [].
-Rechaza con el primer error y no espera al resto.

# si te sobra tiempo, te van a preguntar

-Ahora implementá promiseAllSettled.
-¿Cómo limitarías la cantidad de promesas corriendo en paralelo a n?
-¿Cuál es la diferencia entre Promise.all, Promise.race y Promise.any?

# leetcode recomendado (Frontend · React.js · Semi-senior)

EasyFunction CompositionDel plan 30 Days of JavaScript: componer funciones es la idea detrás de middlewares, HOCs y pipelines de datos.

EasyTimeout CancellationDel plan 30 Days of JavaScript: cancelar timers es lo mismo que hacés en el cleanup de un useEffect.

MediumDebounceDel plan 30 Days of JavaScript: es de las preguntas más frecuentes en entrevistas de frontend y la base de cualquier búsqueda en vivo.

MediumPromise Time LimitDel plan 30 Days of JavaScript: combinar promesas y timers para poner timeouts a requests, algo que usás en producción.

MediumGroup ByDel plan 30 Days of JavaScript: extender prototipos y agrupar datos, muy común al preparar listas por categoría.

MediumEvent EmitterDel plan 30 Days of JavaScript: el patrón pub/sub detrás de stores, buses de eventos y suscripciones en React.

MediumLongest Substring Without Repeating CharactersEl ejemplo más pedido de sliding window con hash map, un patrón que aparece en muchas variantes.