Propósito del proyecto
En el proyecto trabajamos dos personas: mi pareja y yo, ambos alumnos del bootcamp y con un nivel de conocimientos parecido.
Después de terminar el bootcamp quisimos crear un proyecto lo más parecido posible a una web del mundo real. Decidimos crear una tienda online de venta de guías turísticas sobre la ciudad de Sarajevo. El contenido es real, las guías no.
Los requisitos eran: React, React Router y Firebase como backend de datos y Auth. y en el proceso, utilizar y aprender más sobre VSC, Vite, EsLint, Prettier, GitHub y Netlify.
Aprender a trabajar en equipo y sin guía.
Mi papel en el proyecto
Utilizando la app Figma he creado el diseño y la UI.
Posteriormente, analicé el diseño para traducirlo en HTML y CSS, estructuré el proyecto en VSC, investigué en la web cómo conectar con Firestore. Leí la documentación, aprendí y escribí el código.
Excepto en la parte de CSS reset, todo el código ha sido escrito por mí. Era una promesa no copiar el código de nadie, sino leer la documentación en MDN y buscarme la vida. Seguramente por eso hay errores de principiante, pero la web funciona bien y he aprendido muchísimo.
Web stack y explicación
Lugar de trabajo: Visual Studio Code. Vite con complementos EsLint y Prettier.
Figma: diseño, UI y UX.
CSS: La transformación del diseño en una app real se realizó utilizando APIs modernas de CSS. Para el layout he usado flexbox y grid y también container query, que fue realmente divertido aprender y usar. Alguna experimentación con clip-path y variables CSS.
React Router: Rutas relativas, rutas anidadas. Carga de rutas anidadas por defecto en outlet usando index. Parámetros de consulta para filtrado de datos, useLocation para capturar la ruta. Link, NavLink para enlaces. isActive en NavLinks. useNavigate para redirección si el usuario no está autenticado, etc...
React: Componentes reutilizables, props. Uso de renderizado condicional. Control de formulario con estado a través de value y onChange. useEffect para consulta de red y algunas otras oportunidades. useState, useRef. React context en dos lugares, uno para almacenar datos y otro para el carrito de compras.
Firebase: Conexión con Firestore. Iniciar aplicación, obtener datos de la colección de formularios. Dado que el conjunto de datos es muy pequeño, he cargado todo a la vez y en un react context. Seguro que en una aplicación más seria, los datos se descargarán de firebase según sea necesario por filtrado en getDocs(). Autenticación, iniciar sesión con correo electrónico y contraseña y onAuthStateChanged listener para permitir que el usuario registrado ingrese en el área protegida (rutas). Iniciar y cerrar sesión.
Netlify: Conexión de mi formulario de React, reglas de redirección para pushState en React. Implementación continua a través de GitHub.
Extras: reactMarkdown, vite-plugin-svgr
Git: commits, branches, merge, restore, push
