Skip to content

NachoMartin123/MusicReact

Repository files navigation

MusicReact

Web application using React 17.0.2, Bootstrap 5.1.3, JQuery 3.6.0, mongodb 4.4.1, mongoose 6.2.4, redux 4.1.2, sass 1.49.8

DEMO

https://drive.google.com/file/d/1Y84fua0yW5lxX8psRQ6H6kr5s0fVZRjJ/view?usp=drive_link

Prototypes made with Adobe XD

Inicio – slider1 Artists Artists– mobile Artist detail Artist detail – mobile About 1

De momento no está 100% dockerizado, pasos para arrancar en local

1 ) Docker arrancar contenedor que contiene el servidor con mongo DB (puesto 27017) image 2) Uso de mongo DB compas para realizar cambios image 3) Desde terminales para front y back, npm start (front en puerto 3000, back en puerto 5000)

make build

build the docker images for backend, frontend and mongodb.

make up

runs the docker images with command "docker-compose up"

To Do

MOBILE VIEW WHEN VIEWPORT < 480

  • get artist of song mediante consulta JOIN BBDD, y no por currentArtist
  • lista de canciones de diferentes aristas ??? ==> lista de me gusta de usuario / crear lista

TEST - UNIT TEST: A unit might be an individual function, method, procedure, module, or object. A unit test isolates a section of code and verifies its correctness - COMPONENT TEST: Tests are performed on each component in isolation from other components. Generally, React applications are made up of several components, so component testing deals with testing these components individually. - SNAPSHOT TEST: A snapshot test makes sure that the user interface (UI) of a web application does not change unexpectedly. It captures the code of a component at a moment in time, so that we can compare the component in one state with any other possible state it might take.

Heroku autodeploy

docker-compose volumes para actualizar cambios de codigo (cuando se instalan nuevos paquetes hay que generar las imagenes de nuevo)

Usuarios? - admin insert new artist/song - update song - create personal list as user

Song detail view????????

Header - change idiom - logIn && sign in buttons

Home - animate.css add animations onScroll

ArtistDetail - sticky header table - obtener artista mediante consulta de id cancion JOIN artist_id

Footer - obtener artista mediante consulta de id cancion JOIN artist_id - random song buttom - like button (si user logged)

About - buy me a coffe link - Fill About parts

Default no found view

Docker + MongoDB persist data with images link reducer to BBDD