Preguntas de entrevista para desarrollador full stack junior

Empieza por los fundamentos full stack

Una entrevista para full stack junior suele comprobar si puedes explicar cómo funciona una aplicación web sencilla desde el navegador hasta la base de datos: HTML y CSS estructuran la página, JavaScript añade comportamiento, React gestiona el estado de la interfaz, Node.js ejecuta lógica de servidor, las APIs conectan las capas, SQL guarda datos y Git mantiene el trabajo revisable.

Usa esta guía para practicar primero respuestas breves y claras. Después, conecta cada respuesta con un proyecto pequeño que hayas construido. En un rol junior no suelen esperar arquitectura avanzada, pero sí fundamentos claros, buenos hábitos de depuración y explicaciones honestas de los trade-offs.

Cómo prepararte

• Practica explicar un proyecto desde un evento de UI hasta una petición API y una consulta a base de datos.
• Habla de errores que corregiste, no solo de funcionalidades terminadas.
• Mantén respuestas prácticas: define el concepto, da un ejemplo pequeño y menciona un error común.

---

HTML y CSS

1. Explica el Modelo de Caja en CSS.

Respuesta: El Modelo de Caja de CSS es la base del diseño en la web. Cada elemento se representa como una caja rectangular.

• Contenido: El texto o la imagen real.
• Padding: Área transparente alrededor del contenido (dentro del borde).
• Border: Un borde que rodea el padding y el contenido.
• Margin: Área transparente fuera del borde (crea espacio entre los elementos).

Frecuencia: Muy Común Dificultad: Fácil

---

2. ¿Cuál es la diferencia entre display: block, inline e inline-block?

Respuesta:

• Block: Comienza en una nueva línea y ocupa todo el ancho disponible (por ejemplo, <div>, <p>).
• Inline: No comienza en una nueva línea y solo ocupa el ancho necesario. Las propiedades width y height no tienen efecto (por ejemplo, <span>, <a>).
• Inline-block: Como los elementos inline, pero puedes establecer width y height. Útil para grids o menús de navegación.

Frecuencia: Común Dificultad: Fácil

---

3. ¿Qué es HTML Semántico y por qué es importante?

Respuesta: HTML Semántico significa usar etiquetas que transmiten el significado del contenido, no solo su apariencia.

• Ejemplos: <header>, <nav>, <article>, <footer> en lugar de solo <div>s.
• Importancia:
  • Accesibilidad: Los lectores de pantalla usan estas etiquetas para ayudar a los usuarios con discapacidad visual a navegar.
  • SEO: Los motores de búsqueda comprenden mejor la estructura y la importancia del contenido.
  • Legibilidad: El código es más fácil de entender para los desarrolladores.

Frecuencia: Común Dificultad: Fácil

---

4. Explica Flexbox vs. CSS Grid.

Respuesta:

• Flexbox: Un modelo de diseño unidimensional (fila O columna). Lo mejor para alinear elementos dentro de un contenedor o distribuir el espacio (por ejemplo, una barra de navegación).
• CSS Grid: Un modelo de diseño bidimensional (filas Y columnas). Lo mejor para definir el diseño general de una página (por ejemplo, header, sidebar, contenido principal, footer).

Frecuencia: Común Dificultad: Media

---

JavaScript

5. ¿Cuál es la diferencia entre var, let y const?

Respuesta:

• var: Ámbito de función (o ámbito global). Se puede redeclarar y actualizar. Se eleva a la parte superior de su ámbito (hoisting).
• let: Ámbito de bloque (solo existe dentro de {}). Se puede actualizar pero no redeclarar en el mismo ámbito.
• const: Ámbito de bloque. No se puede actualizar ni redeclarar. Debe inicializarse durante la declaración. Utiliza esto por defecto a menos que necesites reasignar.

Frecuencia: Muy Común Dificultad: Fácil

---

6. Explica async y await.

Respuesta: async y await (introducidos en ES2017) hacen que el código asíncrono se vea y se comporte más como código síncrono.

• async: Colocado antes de una función, asegura que la función devuelve una Promise.
• await: Utilizado dentro de una función async, pausa la ejecución hasta que la Promise se resuelva.
• Beneficio: Más limpio y legible que encadenar .then() y .catch().

Frecuencia: Común Dificultad: Media

---

7. ¿Qué es el DOM?

Respuesta: El DOM (Document Object Model) es una interfaz de programación para documentos web. Representa la página para que los programas (JavaScript) puedan cambiar la estructura, el estilo y el contenido del documento. El DOM representa el documento como nodos y objetos.

Frecuencia: Común Dificultad: Fácil

---

8. ¿Cuál es la diferencia entre == y ===?

Respuesta:

• == (Igualdad Débil): Compara valores después de realizar la coerción de tipo (convirtiéndolos a un tipo común). Por ejemplo, 5 == "5" es true.
• === (Igualdad Estricta): Compara tanto el valor como el tipo. No hay coerción de tipo. Por ejemplo, 5 === "5" es false.
• Buena Práctica: Siempre usa === para evitar errores inesperados.

Frecuencia: Común Dificultad: Fácil

---

React

9. ¿Qué es el DOM Virtual?

Respuesta: El DOM Virtual es una copia ligera del DOM real que se mantiene en la memoria.

• Proceso: Cuando el estado cambia, React actualiza primero el DOM Virtual. Luego compara el nuevo DOM Virtual con el anterior (diffing) y calcula la forma más eficiente de actualizar el DOM real (reconciliación).
• Beneficio: Minimiza la manipulación directa del lento DOM real, mejorando el rendimiento.

Frecuencia: Común Dificultad: Media

---

10. ¿Qué son Props y State?

Respuesta:

• Props (Propiedades): Datos de solo lectura que se pasan de un componente padre a un componente hijo. Permiten que los componentes sean reutilizables y dinámicos.
• State (Estado): Datos gestionados dentro del componente. Puede cambiar con el tiempo (por ejemplo, la entrada del usuario, la respuesta de la API). Cuando el estado cambia, el componente se vuelve a renderizar.

Frecuencia: Muy Común Dificultad: Fácil

---

11. ¿Qué son los React Hooks? Nombra algunos comunes.

Respuesta: Los Hooks son funciones que permiten a los componentes funcionales usar características de React como estado, contexto, refs y efectos.

• useState: Guarda estado local del componente, como el valor de un formulario o una pestaña seleccionada.
• useEffect: Sincroniza un componente con algo externo a React, como cargar datos o suscribirse a un evento. No debe usarse para cualquier cálculo.
• useContext: Lee contexto compartido sin pasar props manualmente por todos los niveles.
• Consejo de entrevista: Menciona las Rules of Hooks: llamar hooks en el nivel superior de un componente React o custom hook, no dentro de bucles ni condiciones.

Frecuencia: Común Dificultad: Media

---

Node.js y Backend

12. ¿Qué es Node.js y por qué es de un solo hilo?

Respuesta: Node.js es un entorno de ejecución de JavaScript construido sobre el motor V8. Ejecuta JavaScript en un hilo principal, pero puede manejar muchas tareas de I/O porque el event loop coordina el trabajo asíncrono.

• Hilo principal: Ejecuta tus callbacks de JavaScript.
• I/O no bloqueante: Las operaciones de archivos, red y base de datos pueden delegarse al sistema operativo o a libuv y continuar cuando el resultado esté listo.
• Límite importante: El JavaScript muy intensivo en CPU puede bloquear el event loop. Para trabajo pesado, usa worker threads, una cola de trabajos o sácalo del flujo de la petición.
• Buen ejemplo: Un servidor API que espera muchas llamadas de base de datos o de red.

Frecuencia: Común Dificultad: Media

---

13. ¿Qué es NPM y package.json?

Respuesta:

• NPM (Node Package Manager): El gestor de paquetes predeterminado para Node.js. Te permite instalar y gestionar bibliotecas (dependencias).
• package.json: El archivo de manifiesto para un proyecto de Node.js. Lista metadatos (nombre, versión) y dependencias (bibliotecas necesarias para ejecutar la aplicación).

Frecuencia: Común Dificultad: Fácil

---

14. Explica la diferencia entre GET y POST.

Respuesta:

• GET: Recupera un recurso. Debe ser seguro, es decir, no cambiar intencionalmente el estado del servidor, e idempotente, de modo que repetir la misma petición tenga el mismo efecto.
• POST: Envía datos para que el servidor los procese, a menudo para crear un recurso o activar una acción. No se garantiza que sea idempotente, así que repetir un POST puede duplicar trabajo si la API no lo evita.
• Ejemplo práctico: Usa GET para cargar una lista de productos; usa POST para enviar un pedido o crear un comentario.

Frecuencia: Común Dificultad: Fácil

---

Base de Datos (SQL)

15. ¿Qué es una Clave Primaria y una Clave Foránea?

Respuesta:

• Clave Primaria: Una columna (o conjunto de columnas) que identifica de forma única cada fila en una tabla. No puede ser NULL.
• Clave Foránea: Una columna que enlaza a la Clave Primaria de otra tabla. Establece una relación entre dos tablas.

Frecuencia: Común Dificultad: Fácil

---

16. Explica la diferencia entre INNER JOIN y LEFT JOIN.

Respuesta:

• INNER JOIN: Devuelve los registros que tienen valores coincidentes en ambas tablas.
• LEFT JOIN (o LEFT OUTER JOIN): Devuelve todos los registros de la tabla izquierda y los registros coincidentes de la tabla derecha. Si no hay coincidencia, el resultado es NULL en el lado derecho.

Frecuencia: Muy Común Dificultad: Media

---

17. ¿Qué es la Normalización?

Respuesta: La normalización es el proceso de organizar los datos en una base de datos para reducir la redundancia y mejorar la integridad de los datos.

• Objetivo: Dividir las tablas más grandes en tablas más pequeñas y enlazarlas mediante relaciones.
• Formas: 1NF, 2NF, 3NF (La Tercera Forma Normal suele ser suficiente para la mayoría de las aplicaciones).

Frecuencia: Poco Común (para Juniors) Dificultad: Media

---

General

18. ¿Qué es Git y por qué lo usamos?

Respuesta: Git es un sistema de control de versiones distribuido.

• Uso: Realiza un seguimiento de los cambios en el código fuente durante el desarrollo de software.
• Beneficios: Permite que varios desarrolladores trabajen juntos (colaboración), mantiene un historial de cambios (versionado) y permite volver a estados anteriores si algo se rompe.

Frecuencia: Común Dificultad: Fácil

---

19. ¿Qué es una API?

Respuesta: API significa Application Programming Interface (Interfaz de Programación de Aplicaciones). Es un conjunto de reglas que permite que diferentes aplicaciones de software se comuniquen entre sí. En el desarrollo web, generalmente se refiere a una API REST donde un frontend (Cliente) solicita datos de un backend (Servidor).

Frecuencia: Común Dificultad: Fácil

---

20. ¿Cómo depuras una aplicación web?

Respuesta: Empieza reproduciendo el problema y acotando dónde ocurre: navegador, petición de red, handler del backend o base de datos.

• Frontend: Usa DevTools del navegador: Console para errores, Network para estado y payloads de API, Elements para HTML/CSS y React DevTools cuando aplique.
• Backend: Revisa logs estructurados, IDs de petición, stack traces, variables de entorno y consultas a la base de datos. Usa un depurador si el flujo no está claro.
• Buena respuesta: Explica un bug real que corregiste, qué revisaste primero y cómo confirmaste el arreglo.

Frecuencia: Común Dificultad: Fácil