Reactive Team

Proyecto React NUMEN

Tabla de contenido

• Reactive Team
  • Tabla de contenido
    • Dudas para revisar con Guille (Tutor)
    • Definiciones que tomamos como equipo (son modificables)
    • Estilos Generales
    • Ramas-Branches
    • Generalidades
    • Componentes
      • Componente 1:
      • Componente 2:
      • Componente 3:
      • Componente 4:
      • Componente 5:
    • Etapas:
    • Mejoras post primer merge:

---

Dudas para revisar con Guille (Tutor)

1. ¿Como manejamos el css que cada uno irá generando? Luego mergeamos en un único archivo css global? O podríamos tener lo que se cruce en uno solo, ej, color, breakpoints, mediaqueries, etc. en uno general y lo particular en css sueltos? (para no tener que retrabajar cada uno lo que sea cross /core)
2. Instagram, podemos usar api de la app? o mockup local?

---

Definiciones que tomamos como equipo (son modificables)

1. CSS puro:
   • Armar mediaqueries/breakpoints
   • Armar roots: color, font, font-size
   • Breakpoints:
     • MS: 320px
     • MM: 375px
     • ML: 425px
     • T: 768px
     • DS: 1024px
     • DM: 1366px
     • DL: 1440px
2. Deseable utilizar SASS
3. Desarrollamos misma temática propuesta por profesor/numen
4. En la carpeta resources estan las fuentes, la imagen de cada componente a desarrollar junto con sus los logos, ilustraciones, imágenes, etc.

---

Estilos Generales

• Colores
  • Primary: #FF8126
  • Background: #FFFFFF
  • Success: #C2E8CE
  • Danger: #E5C0C0
  • Warning: #E2E2BE
  • Info: #C0C8E5

---

Ramas-Branches

• PRINCIPALES:

  • master (versión para entregar)
  • dev (versión en desarrollo)

• SECUNDARIAS: En estas ramas iremos desarrollando los componentes que cada uno vaya eligiendo.

  • hugo
  • ale
  • augusto
  • braian

---

Generalidades

• Call con equipo: Cíclica todos los sábados a las 19 horas a través de canal Discord
• Archivo en FIGMA: Ver Diseño
• Consignas del Proyecto: Ver DPF
• Discribución de Archivos:

---

Componentes

Para no complicarnos y por recomendación de Guille, lo mejor será encargarse cada uno de una parte de la página y desarrollar ese componente conformado con los subcomponentes que a cada uno le parezca oportuno.

Si algún subcomponente se repite en algún otro componente, lo mejor será, para esta primera instancia, hacerlo nuevamente para cada componente, son pocos los casos.

En la siguiente lista están los componentes a desarrollar, cada uno es libre de tomar el que quiera, mientras este sin ser tomado por alguien más.

Para indicar que te encargarás de un componente, solo debes reemplazar el texto "Aún nadie" por tu nombre.

Los estados serán Por hacer, En proceso y Terminado

• Componente 1:

  • Tomado por: Braian
  • Estado: En proceso

• Componente 2:

  • Tomado por: Ale
  • Estado: En proceso - Falta ajustar vista mobile y crear logica JS para agregar al carrito,

• Componente 3:

  • Tomado por: Ale
  • Estado: En proceso - Falta ajustar vista mobile.

• Componente 4:

  • Tomado por: Ale
  • Estado: Por hacer

• Componente 5:

  • Tomado por: Augusto
  • Estado: En proceso

Componente 1:

Componente 2:

Componente 3:

Componente 4:

Componente 5:

---

Etapas:

• Inicialización del Proyecto React
• Definición y Elección de Componentes
• Creación de Ramas
• Unión de Ramas
• Pruebas de funcionamiento integral y arreglos
• Puesta en Producción
• Mejoras e implementaciones extras

---

Mejoras post primer merge:

Requisitos:

1. Al tocar btn Quick Shop y Buy Now que se conecte en backend y sume al globo de notificacion --> Braian
2. Carousel instagram --> ale
3. agregar css al footer / tener cuidado que est[a pisando el UL/LI del navbar --> augusto

NTH:

1. Limitar ancho maximo de cover --> braian (HECHO)
2. sombra paralela al texto del cover para que se vea en mobile --> braian (HECHO)
3. btn browse-brands agregar hover --> braian (HECHO)
4. tell a friend a 1280px; --> ale
5. Button carrito que no te persiga y ajustar visualmente el numero con el circulo --> braian (HECHO)
6. tell a friend, ajustes menores + detalle hover --> ale
7. menu hamburguesa tiene espacio adicional cuando cerras el alert superior --> braian