Propósito del proyecto
Primer proyecto propio hecho con React: Cuando terminamos el curso de react y react router para repasar lo aprendido, nos inspiramos en un viaje que hicimos a Sarajevo. Con este proyecto nuestro próposito ha sido usar las rutas nidadas que permitieran una navegación dinámica y aprender en mi caso, algo de backend que con firebase he adquirido conocimientos.
Preparado en Figma para que todo fuera más fluido por mi compañero que tiene experiencia en esta app y beneficiándonos del trabajo en equipo.
Como es una página ficticia hemos decidido hacer el carrito sin la pasarela de pago que redirecciona a la página proyecto.
Mi papel en el proyecto
En el proyecto trabajamos dos colaboradores.
Mi papel en este proyecto ha sido entender cada paso que dábamos y aplicando todo los conocimentos aprendido.
Implementé hooks populares de React, como useState, useEffect y useContext, para gestionar el estado de la aplicación y mantener la coherencia de los datos en diferentes componentes.
Leyendo la documentación de React y React router he podido ayudar en cada paso que hemos dado, intentando hacer el código sin tener que copiarlo de nadie, entendiendo paso a paso todo lo aprendido. Para mi ha sido una buena experiencia ya que a no tener ningun conociemientos sobre esta materia tuve que esforzarme mucho y quemar muchas horas para que todo me quedara claro y entender cada código y decisión que íbamos tomando.
He sido de mucha ayuda y estoy contenta con el trabajo que he hecho y con los errores que he cometido como principiante. Una buena experincia en este mundo de la codificación.
Web stack y su explicación
A base del diseño que he recibido, he decidido usar las siguientes herramientas para los componentes que contienen layout:
CSS: He ustilizado display grid y flex, para algunos componentes, he usado container-query que permite aplicar estilos a un elemento en función del tamaño del contenedor del elemento. Las fuentes variables la hemos usados para declaraciones de propiedades personalizadas de titulos y párrafos.
React: Componentes, props, formularios con estado, useEffect, useStates, createContext, useRef, createContext. Con el uso de los componentes separamos el interfaz de usuario, reutilizándolos pasandoles props. El formulario como un componente controlado. Usos de los hook ms usados en react para una mejor renderización de la web.
React router: Usando rutas nidadas, rutas relativas, Outles, Link, NavLink, parámetros de búsquedas, useLocation, redering condicional, useNavigate.
Firebase Iniciación de la app, colección, getFirestore, getDocs. Autentificar, onAuthStateChanged, signInWithEmailAndPassword etc...
Git y GitHub: Uso continuo de git con varias ramas main/desarrollo y con pull request via GitHub.
Netlify: Envio de formulario, redirección por el pushstate en react, GitHub desplegado.
