Sound Wave Girls - Project SoundWave - Factoria F5

Equipo Sound Wave Girls

Nos presentamos, somos el equipo Sound Wave Girls y estamos compuestas por:

🎧Lorena Morales

🎧Valentina Ríos

🎧Mónica Blanco

🎧Teresa Villa Mir

Contexto del proyecto

La empresa SoundWave, se ha posicionado en el mercado como la competencia directa de Spotify. La empresa ofrece una calidad de sonido extraordinaria y la una gran variedad de canciones. Actualmente está ganando adeptos a pasos agigantados. No obstante, quieren acelerar el proceso de subscripción a su plataforma, con una nueva campaña de marketing digital.

Nos han contactado por nuestra buena reputación como maquetadoras web, y nos han solicitado el desarrollo de una landing page para buscar nuevos suscriptores. Nuestro equipo es interdisciplinar por lo que la UX Designer ha construido la maqueta que debemos que llevar al código. Posteriormente , el equipo de marketing digital posicionará la página en los navegadores.

🔨Funcionalidades del proyecto

• Funcionalidad 1: Entrar desde la Homepage .
• Funcionalidad 2: Acceder a las distintas páginas a través de los botones de la Homepage.
• Funcionalidad 3: Tener un formulario para ingresar como socio de la app y que confirme la inscripción.
• Funcionalidad 4: Tener un logo interactivo para volver a la página principal.

💻 Tecnologías y 🛠Herramientas

Para realizar el proyecto hemos utilizado las siguientes Tecnologías:

✅ HTML

✅ CSS

✅ Javascript

✅ React.js v.18

✅ React-router-dom v.6

✅ Vite

Y las siguientes Herramientas:

✅ Figma

✅ Visual Studio Code

✅ Trello

✅ Git / GitHub

✅ Vitest

PLANIFICACIÓN

Hemos planificado el proyecto utilizando los marcos de trabajo Scrum y Kanban.

Enlace a Trello: https://trello.com/b/yLJvKb5U/equipo-5

INSTALACIÓN

Instalación:

Pasos para la instalación

A continuación se detallan los pasos para la instalación:

git clone https://github.com/SoundWAVEGIRLS/SoundWave

• npm i

Para que el proyecto inicie:

• npm run dev

Para correr los test:

• npm test
• npm run coverage

¿CÓMO FUNCIONA?

Una vez entramos en la página de inicio, hay tres partes diferenciadas:

NavBar Con funcionales en home page Dicover, Join , JoinNow. El botón funcional Logo estará activo dentro de als páginas Discover y Join.

Contenido

Una vez dentro de la Homepage podemos acceder la página Discover y Join ,

Si se clicka la opción Discover en NavBar accedemos a la página informativa Discover donde se nos informa de las opciones que la app nos facilita. Quedan abiertos los botones Join para ingresar al formulario y el logo para volver a la página principal

Si dentro la Homepage clickar el botón Join o el botón Join en el NavBar para poder ingresar al formulario de inscripción

Una vez esté realizada la inscripción la app nos lo confirmará y ,en el caso que exista algún error al introducir los datos, nos avisará para poder rectificar.

Footer La página tiene un footer Con funcionaldad el cliente ha solicitado Facebook y Linkedin para esta maquetación inicial.

Construido el proyecto con atomic desing:

Figma wireframes

Enlace al diseño wireframes

Figma átomos

Enlace al diseño Atomos en Figma

Figma moleculas

Enlace al diseño Moleculas en Figma

Figma organismos

Enlace al diseño Organismos en Figma

Figma version desktop

Enlace al diseño Versión Desktop en Figma de las tres pantallas de la aplicación

Test Coverage (cobertura de pruebas)