Proyecto: Crea una red social

Construir un sistema de autenticación básico es uno de los ejercicios más formativos cuando aprendes programación. A través de un reto práctico, se muestra cómo recorrer una base de datos simulada, validar credenciales y mostrar un timeline personalizado, todo utilizando JavaScript desde el navegador.

¿Cómo capturar el usuario y la contraseña del navegador?

El primer paso del reto consiste en permitir que el usuario ingrese sus credenciales. Para esto se utiliza la función prompt(), que despliega un cuadro de diálogo en el navegador y devuelve un string con lo que el usuario escriba [0:52].

javascript const username = prompt("¿Cuál es tu usuario?"); const password = prompt("¿Cuál es tu contraseña?");

• Se declaran dos constantes con const porque estos valores no se reasignan.
• Cada prompt() captura un dato distinto: nombre de usuario y contraseña.
• Los valores quedan almacenados en las variables username y password, listos para usarse en la validación.

Con estas dos líneas, el primer requerimiento queda resuelto: el sistema ya tiene una forma de recibir información del usuario.

¿Cómo validar credenciales contra una base de datos simulada?

La base de datos en este ejercicio es simplemente un arreglo de objetos (array of objects), donde cada objeto contiene un username y un password. Esta estructura es una simplificación de cómo funcionaría una base de datos real en una red social [0:24].

Para recorrer ese arreglo y comparar cada registro con los datos ingresados, se construye una función llamada usuarioExistente que recibe dos parámetros [2:44].

javascript function usuarioExistente(username, password) { for (let i = 0; i < userDatabase.length; i++) { if (userDatabase[i].username === username && userDatabase[i].password === password) { console.log("es correcto"); break; } else { console.log("no es correcto"); } } }

usuarioExistente(username, password);

¿Qué hace el ciclo for en la validación?

El for itera sobre cada elemento del arreglo userDatabase [3:08]. En cada vuelta, la variable i representa la posición actual del objeto que se está evaluando. La condición i < userDatabase.length garantiza que el ciclo se detenga cuando ya no haya más elementos por revisar.

¿Por qué se usa la igualdad estricta?

Dentro del if, se compara con el operador de igualdad estricta (===). Este operador verifica tanto el valor como el tipo de dato, lo cual es más seguro que usar ==. Se evalúan dos condiciones unidas con && (and lógico) [4:30]:

• Que el username del objeto actual sea idéntico al ingresado.
• Que el password del objeto actual sea idéntico al ingresado.

Ambas condiciones deben cumplirse para considerar que las credenciales son válidas.

¿Para qué sirve el break dentro del ciclo?

Sin el break, el ciclo sigue ejecutándose aunque ya haya encontrado una coincidencia. Esto genera validaciones innecesarias sobre los objetos restantes [6:22]. Al agregar break, el loop se interrumpe inmediatamente después de encontrar el registro correcto, evitando recorridos adicionales y optimizando la ejecución.

¿Qué sucede después de la validación?

El tercer y cuarto requerimiento definen el comportamiento según el resultado:

• Credenciales correctas: el sistema muestra un mensaje de bienvenida y presenta el timeline del usuario. Este timeline es otro arreglo de objetos que contiene usernames de personas seguidas y sus mensajes publicados [0:30].
• Credenciales incorrectas: se muestra un mensaje de error indicando que el usuario o la contraseña no existen, y no se despliega ningún contenido adicional [1:15].

Esta lógica condicional con if...else es el patrón fundamental de cualquier sistema de autenticación, desde aplicaciones sencillas hasta plataformas complejas.

El reto puede extenderse agregando atributos como la hora de publicación o respuestas a mensajes dentro del timeline. Si lograste resolverlo por tu cuenta o le añadiste funcionalidades extra, compártelo en los comentarios.