frontendcafe/cmyk-lime

Lime - CMYK

Bienvenidos al proyecto Lime de CMYK del Frontend Café!

Iniciar el proyecto

npm install
npm run dev

Abrir http://localhost:3000 para ver el proyecto.

Nombres

Coordinador: Maximiliano Blanco

Referente: Alan(ScorpionConMate)

Equipo:

Alejandro Berrini

Gilberto (@Rortan)

David Lipshitz

Antonella Cardozo

Jonatan Merce

@Kapi

cmyk-lime's Issues

Create the About Page

Crear la pagina de about con la informacion del proyecto.

RUTA: /about

No crear el navegador hacia Home y no preocuparse por el routing. Solamente preocuparse por el elemento main, texto y layout.

Incluir los nombres de todos como aparecen en el README. Confirmar si quieren que se use un nick o su nombre real en el about del proyecto.
Agregando el equipo cambia el layout, hablar con el diseñador Mauro sobre como sugiere poner todos los nombres que faltan.

Crear paginas 11, 12, 13

Crear una carpeta en pages llamada "punto", ahi crear distintas paginas por cada numero listado.

11
12
13

Librerias:
https://popmotion.io/learn/morph-svg/
https://github.com/notoriousb1t/polymorph

Assets: https://xd.adobe.com/view/ba2208aa-3883-4449-a2b9-dd0130f18aff-ef71/flow/

Crear un componente canvas que pinte una linea verde

Las animaciones por ejemplo en la pantalla 9, donde se mueve la carita y aparece una linea verde por detras, seria ideal tener un sistema que pinte esa linea y no usar un svg que hacemos aparecer.
La idea es crear un componente que ocupe todo el viewport y conectarlo con el drag de framer motion. Decirle donde empezar la linea, hacia donde seguir y cuando dejar de pintar.

Crear paginas 9 y 10

Crear una carpeta en pages llamada "punto", ahi crear distintas paginas por cada numero listado.

09 - arriaba
10 - abajo

Librerias:
https://popmotion.io/learn/morph-svg/
https://github.com/notoriousb1t/polymorph

Assets: https://xd.adobe.com/view/ba2208aa-3883-4449-a2b9-dd0130f18aff-ef71/flow/

Agregar nombre de @aeb89 al README

Crear un PR en la rama dev con tu nombre agregado al README.

Agregar nombre de @Rortan al README

Crear un PR en la rama dev con tu nombre agregado al README.

Conectar una Supabase bucket y crear un demo de audio

Conectar un Bucket de archivos de la org CMYK-lime de Supabase para descargar un archivo de audio.

Crear un cliente de "supabase" que se conecte al bucket con las credenciales de api para la ORG. (paquete "@supabase/supabase-js"). El modulo a usar no es SQL, son los buckets de STORAGE. No crear una nueva, las credenciales para acceder se dan si o si por email, pedirme acceso.

Crear una carpeta "demos" dentro de pages y ahi crear una pagina "audio" donde hay que crear un boton que tenga como accion darle play a un audio que el framework nextjs descarga de nuestro bucket de supabase.

Usar una frase corta como test.

Se pueden crear o descargar un ejemplo desde https://freesound.org/
Investigar el mejor formato para web, por tamaño y que no se pierdan las palabras o mucha calidad.

Cargar api keys de supabase como variables de entorno:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_KEY

Crear paginas 7 y 8

Crear una carpeta en pages llamada "punto", ahi crear distintas paginas por cada numero listado.

07 - arriaba
08 - abajo

Librerias:
https://popmotion.io/learn/morph-svg/
https://github.com/notoriousb1t/polymorph

Assets: https://xd.adobe.com/view/ba2208aa-3883-4449-a2b9-dd0130f18aff-ef71/flow/

Agregar nombre de @jonimerce al README

Crear un PR en la rama dev con tu nombre agregado al README.

Agregar nombre de @Sailornina al README

Crear un PR en la rama dev con tu nombre agregado al README.

Crear paginas de intro con sus animaciones

Crear una carpeta en pages llamada "punto", ahi crear distintas paginas por cada numero listado.

---

00 - Splash
01 - Intro
02 - Soy un punto
03 - Si juegas conmigo
04 - Muchas cosas

Librerias:
https://popmotion.io/learn/morph-svg/
https://github.com/notoriousb1t/polymorph

Assets: https://xd.adobe.com/view/ba2208aa-3883-4449-a2b9-dd0130f18aff-ef71/flow/

Crear las paginas 05 y 06

Crear una carpeta en pages llamada "punto", ahi crear distintas paginas por cada numero listado.

05 - Crecer
06 - Pequeño

Librerias:
https://popmotion.io/learn/morph-svg/
https://github.com/notoriousb1t/polymorph

Assets: https://xd.adobe.com/view/ba2208aa-3883-4449-a2b9-dd0130f18aff-ef71/flow/

Agregar el nombre de ScorpionConMate al README

Crear un PR en la rama dev con tu nombre agregado al README.

Crear Bottom Navigation component

Crear una carpeta components en el nivel principal (root folder).

Crear un componente llamado BottomNav y otro BottomNavButton que acepte un icono, un texto y una ruta. Usar componente apropiado para crear links provisto por NextJS, buscar en la docu que elemento se usa para linkear a una ruta dentro de la app.

Crear pagina info con texto lorem

Crear una nueva "Page" dentro de la carpeta pages.

Ruta: /info

Incluir texto lorem y por el momento no incluir el bottom navigation de Home.

Fonts: Amatic SC (Bold) y Roboto (Regular)

Agregar nombre de @Kapi al README

Crear un PR en la rama dev con tu nombre agregado al README.

Soporte mobile para paginas 05 y 06

Investigar que es lo que se necesita para poder hacer que la app soporte eventos Mobile e implementarlos.

Agregar nombre de @davidLip() al README

Crear un PR en la rama dev con tu nombre agregado al README.