Proyecto final de Codo a Codo - React

Integrantes

Integrante	GitHub	LinkedIn
Arrayaran, Gonzalo	GonzaloArray
De Franchi, María Belén	Belendefranchi	mariabelendefranchi
Galmes, Ignacio	igalmes
Gonzalez Roister, Santiago	gogoroisler
Molina Numa	numamolina
Vargas Giron, Roque	roquevargas
Zapata, Claudia
Gonzalez, Oscar	oskygon

🛠️Tecnologías:

• HTML5

• CSS3

• JavaScript

• React: react-dom, react-router-dom, hooks (useState, useEffect).

• Bootstrap

• sweet alert 2 para los alertas

• html2canvas

• vite para armar la aplicación.

:tv: Demo:

(En construcción)

Links útiles:

Objetivo

Integrar todos los contenidos vistos durante de la cursa de React en Codo a Codo en una interfaz, prototipo y diseño web funcional.

Consignas

Desarrollar una aplicación web completa en react con js, la misma podrá ser un formato establecido como Humaya sobre un producto o servicio o bien un Netflix con el uso de la api TMDB.

Esta aplicación deberá ser de arquitectura distribuida, sectorizada, comentada y contener un diseño de interfaz (front end) que muestre la información, una base de datos que almacene algún dato del sitio y debe contar con al menos una API.

La idea es que, además de servirte para aplicar lo aprendido, puedas ser publicada en la red de codo a codo a modo de portfolio y usarlo como carta de presentación en el mercado laboral.

El sitio debe contener todos los temas vistos durante la cursada incorporados y tener partes editables, tales como un favorito, login etc.

TIEMPO DE ENTREGA Y FORMA

La fecha límite de entrega del trabajo es la fecha de cierre del curso.

El proyecto integrador está diseñado para el trabajo en grupo, esto requiere que cada integrante del grupo disponga tiempo para el trabajo con sus compañeros, coordinándose por cualquier canal, implementando el uso de Git, Github.

Pueden compartir con el resto de los grupos sus inquietudes en los foros o grupo de Whatsapp e ir creciendo con la interacción al compartir sus resultados o consultas.

• Primera fecha de entrega: (a definir)

• Segunda fecha de entrega: (a definir)

La entrega del trabajo debe realizarse de la siguiente manera:

• Repositorio con el nombre: comisión-número de grupo-nombre del proyecto. Ejemplo: 22805-grupo2-tiendafeliz

• Link del proyecto alojado en algún prestador gratuito como Netlify, webhost etc.

• PDF con la información del diseño de interfaz, prototipado y explicación de las partes del sitios diseñadas, alojado en un link.

• Se debe completar los datos en el cuadro de grupos con la información pedida para la entrega.

CONTENIDOS OBLIGATORIOS

• Variables let

• Estructuras de control (if - while - do-while)

• Bucles (for, forEach, map)

• Arrays en react

• Manipulación del Dom por medio de componentes/react renderizados

• Eventos en react

• Componentes con props

• Hooks (useState - useEffect - useContext- pueden usar otros)

• Asincronismo (fetch - async await )

• Apis

• Base de datos no relacional (firebase - mongo)

• Bootstrap 5

• Html2canvas

• Librerías externas vistas como animate.css / sweetalert2 / slick etc.

• paginado del contenido

• React Router

• Codificación

• Formulario de contacto

• Login simple acorde al sitio.

• Galería de imágenes interactiva

• Sitio web sectorizado, comentado, organizado y acorde al diseño presentado en el pdf en cuanto a su estructura y funcionabilidad.

• Implementación de teoría del color/psicología del color/diseño responsive/ diseño de accesibilidad/ diseño de interfaces.

Para hacer controles sobre el trabajo deben agregarme como colaboradora, tengan presente trabajar por ramas para armar el código.

El grupo debe elegir el tema e informarlo, una vez elegido no se podrá modificar.

Es sumamente importante antes de comenzar a codear el hacer un boceto digital o en papel para plasmar las ideas sobre el diseño y evitar tener que hacerlo en forma improvisada.

DOCUMENTACIÓN

Deberán desarrollar la documentación correspondiente en un archivo PDF explicando las cosas usadas para cada sector de la web.

Dejando las capturas de pantalla de las modificaciones y partes agregadas, las funciones usadas, declaraciones de variables y todo lo necesario para armar un detalle del trabajo realizado. Tener en cuenta colocar comentarios bandera que den pie al documento de la elaboración del trabajo y ayuden a comprender la lógica usada para el diseño.

:computer: -> en este link se puede ver la documentación

EVALUACIÓN

Se evaluará la incorporación de todos los contenidos mencionados anteriormente, al igual que la participación en grupo.

La calificación tendrá una nota numérica del 1 al 10, se debe contener el 75% de los contenidos incluidos (api, asincronismo, hooks y componentes obligatorios) para poder aprobar. Se tomará al front-end como parte a evaluar a acorde a lo visto en la primera etapa del desarrollo de interfaces en un 25%, el desarrollo del sitio con su back-end como el 75%. La nota final será entregada el último día hábil del mes con su certificación de cursada, teniendo en cuenta examen final y presentismo.

MODELO WEB

• MENÚ DE NAVEGACIÓN: Barra de navegación con logo y datos del paginado del sitio, puede tener diferentes formatos, estructura, y diseño. Puede contener un login de cliente.

• ENCABEZADO: Desarrollar una intro del sitio que destaque, con las cualidades fundamentales del mismo y dando acción a un incentivo directo con algún acceso al formulario de contacto, servicio etc. por medio de algo llamativo (call to action)

• SECCIONES: Armar las secciones del sitio acorde al menú de navegación, recordar que no es necesario hacer un página onepage, la estructura de diseño es acorde a su producto o servicio. Debe contener la información principal, recordar poner partes que usen renderizados, interactivas con el usuario o que aporten las funcionabilidades de los contenidos vistos, como el pop up de info de cokkies, o salto de pagina (router), etc.

• PRODUCTO PRINCIPAL: Tener presente las secciones diferenciadas por prioridad del servicio o producto elegido.

• PRODUCTO SECUNDARIO: Armar secciones de acuerdo al diseño para mostrar diferentes partes del producto o servicio, marcando cortes del proceso.

• SECCIONES SECUNDARIAS: Armar las secciones del sitio , que permitan llevar a partes del sitio, que interactúen con los usuarios o aporten información relevante. Pueden ser suscripciones a newsletter, condiciones de pago, prestaciones secundarias etc.

• CONTACTO: Armar las secciones del sitio , que permitan llevar a partes del sitio, que interactúen con los usuarios o aporten información relevante. Pueden ser suscripciones a newsletter, condiciones de pago, prestaciones secundarias etc.

• API / BD: implementación de api acorde al contenido y base de datos no relacional para los lugares necesarios.

• FOOTER: implementación los enlaces necesarios y relevantes al sitio planteado, recordar incorporar en el último renglón los enlaces a los linkedin de todos los integrantes.

RECORDAR

• El sitio tiene que tener alguna parte editable por el usuario, por ejemplo el agregar o quitar de favoritos, agregar a alguna lista de pendiente, carrito etc.

• Las partes del lado del usuario deben ser renderizadas sin que el sitio recargue.

• Dentro del código debe estar todo correctamente comentado y distribuido para el mejor trabajo grupal y posterior corrección.

• No incorporar cosas que no se dominan en el general del grupo, y de ser así deben ser explicadas para todos sus compañeros para que todos tengan conocimiento del contenido.

• El día (a confirmar) se realizará una charla expositiva de cada tp por los integrantes del grupo hacia el resto de compañeros.

• Todos deben participar y debe tener al menos 5 commits, recordar el trabajo de grupo en ramas y la línea de producción final.

• Si aparecen conflictos deben tomar captura de los mismos y resguardarlos en un archivo pdf como muestra, y explicación de la resolución del mismo. Debe presentarse al menos 1.