Propósito del proyecto
En el proyecto hemos trabajado dos. Mi pareja y yo, ambos alumnos del bootcamp y con parecido nivel de conocimientos.
Después de terminar el bootcamp quísimos crear un proyecto lo mas parecido a una web del mundo real. Hemos decidido crear una tienda online de venta de guías turísticas alrededor de 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 mas sobre VSC, Vite, EsLint, Prettier, GitHub y Netlify.
Aprender a trabajar en equipo y sin guía.
Mi papel en el proyecto
Utilizando Figma app he creado el diseño y UI.
Posteriormente, fue analizar el diseño para traducirlo en HTML y CSS, estructurar el proyecto en VSC, investigar en la web como conectar con Firestore. Leer la documentación, aprender y escribir el código.
Menos en la parte de CSS reset, todo el código ha sido escrito por mi. Era una promesa de no copiar el código de nadie, sino leer la documentación en MDN y buscarme la vida. Seguramente por eso hay errores de principiantes pero la web funciona bien y he aprendido muchísimo.
Web stack y la 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 API modernas de CSS. Para Layout he usado flexbox y grid y también query container que fue realmente divertida aprender y usar. Alguna experimentación con clip-path y CSS variables.
React Router: Rutas relativas, rutas anidadas. Carga de rutas anidadas por defecto en outlet usando index. Query parameters para filtrado de datos, useLocation para capturar la ruta. Link, NavLink para enlaces. isActive en NavLinks. useNavegate para redirección si el usuario no está autenticado, etc...
React: Componentes reutilizables, props. Uso de condicional rendering. Control de formulario con estado a través de value y onChange. useEffect para consulta de red y algunas otros oportunidades. useState, useRef. React context en dos lugares, uno para almacenar datos y segundo para carrito de compras.
Firebase: Conexión con Firestore. Iniciar aplicación, obtener datos colección de formularios. Dado que el conjunto de datos es muy pequeño, he cargando 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 á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 continúa a través de GitHub.
Extras: reactMarkdown, vite-plugin-svgr
Git: Git: commits, Branches, Merge, Restore, push
