Cómo clonar el proyecto base de Shoppy

Prueba Técnica: E-commerce Profesional con React.js

Clase 2 de 9

Clase 2 / 9

Recursos

Antes de resolver la prueba técnica de la empresa Shoppy, necesitas clonar el repositorio base del proyecto en React, instalar dependencias y posicionarte en la rama correcta. Este recorrido es para quienes vienen del curso práctico de React o quienes llegan directo al laboratorio y quieren entender la estructura inicial.

La clave está en identificar las ramas del repositorio, ejecutar los comandos de Git en orden y validar que el proyecto corre localmente con npm run dev antes de empezar a programar soluciones.

¿Cómo está organizado el repositorio del proyecto base?

El repositorio mezcla dos tipos de ramas que conviene distinguir desde el inicio para no perderte entre el contenido del curso y las soluciones del laboratorio.

Ramas con nombre de clase: corresponden al avance del curso práctico de React, clase por clase.
Ramas con nombre Lab Reto: contienen cada pull request con la solución de los retos de la prueba técnica.
Rama clase 27: es el punto de entrada al laboratorio, el último estado del curso antes de empezar la prueba [0:48].
Rama Lab Reto 10: contiene la solución final de toda la prueba técnica.

Esta separación te permite consultar la solución de cada reto sin perder tu propio avance en una rama paralela.

¿Qué pasos sigues para clonar el proyecto en tu editor?

El flujo de clonado parte del botón Code en GitHub, donde encuentras varias opciones para traer el proyecto a tu máquina. La recomendación es usar GitHub CLI por su simplicidad [1:18].

Copia el comando desde la pestaña GitHub CLI en el botón Code.
Pégalo en la terminal de tu editor y presiona Enter.
Verifica con ls que la carpeta esté creada.
Entra al proyecto con cd curso-react-practico.
Ejecuta git status para confirmar en qué rama estás parado.

Al clonar por defecto quedas en la rama master, pero el punto de entrada real del laboratorio está en otra rama.

¿Qué comando uso para cambiar a la rama del laboratorio? Ejecuta git checkout clase-27 desde la raíz del proyecto. Esa rama tiene el estado final del curso práctico y es donde arranca la prueba técnica.

¿Cómo instalas dependencias y levantas el servidor?

Una vez parado en la rama correcta, falta traer todos los paquetes de Node y arrancar el servidor de desarrollo. Esto se hace con dos comandos consecutivos [2:12].

npm install: descarga todas las dependencias declaradas en el package.json.
npm run dev: levanta el servidor local y te entrega una URL para abrir en el navegador.

Cuando copies esa URL en el navegador y recargues, deberías ver los productos cargados, el search box y el navbar funcionando.

¿Qué hago si npm run dev no muestra la app? Confirma que estás en la rama clase-27, que npm install terminó sin errores y que la URL que copias es exactamente la que imprime la terminal.

¿Qué partes del proyecto debes explorar antes de empezar?

La recomendación es navegar la aplicación como si fueras usuario para detectar qué funciona, qué está vacío y qué necesita arreglo. Ese diagnóstico es la base de la prueba técnica [2:48].

Sign In: actualmente muestra una página en blanco que tendrás que construir.
My Account: también aparece vacía y forma parte de las pantallas a desarrollar.
Carrito de compras: prueba agregar productos y removerlos para entender el estado actual.
Bug visible en la interfaz: hay un pequeño error que se corrige como parte del laboratorio.

Familiarizarte con el search box, el navbar y el flujo de productos te da contexto para abordar cada pull request con criterio, no a ciegas.

¿Por qué importa conocer el proyecto antes de codear?

Llegar a una prueba técnica sin entender la base es la forma más rápida de bloquearte. Cuando ya sabes qué componentes existen, cómo se comunican y qué falta, cada reto deja de ser un problema abstracto y se convierte en una tarea concreta sobre código que ya entiendes.

Dedica unos minutos a hacer click en cada sección, abrir el código en tu editor y revisar cómo está armada la estructura de carpetas. Cuéntame en los comentarios qué parte del proyecto te resultó más confusa al explorarla por primera vez.