Skip to content

A React app template to display albums. Features include a structured component hierarchy, design fidelity, hover effects, and responsive layouts. Clicking on albums or artists links to external URLs. Components provided; focus on data flow and UI interactions.

Notifications You must be signed in to change notification settings

olgalepisto/project-music-releases-vite

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Music Releases

Music releases assignment to practice the basics of React, mainly components and props. The task was to display images and details of latest music releases from the Spotify API and style the site as close as possible to the provided design.

The Problem

I started the project by creating all the needed componenets. Next up was trying to get the props to pass to the right components - this I had probably the most issues with, so many errors kept occurring. I still clearly have some difficulties in understanding JS methods and writing the correct syntaxes for example for the .map(). But eventually I made it work!

Unfortunately I ran out of time this week and decided to deploy an incomplete version. The thing that doesn't work in my site correctly is the comma separation between the artists. It currently displays the same artist twice with the comma instead of showing the other artist(s) as well. Here I think my lack of knowledge with iterating over arrays comes in - I'm really not sure how to target both of the artists and how to display them. I tried a few different options but this was the only one that at least somehow made the idea work. I'll come back to it later.

View it live

https://olga-musicreleases.netlify.app/

About

A React app template to display albums. Features include a structured component hierarchy, design fidelity, hover effects, and responsive layouts. Clicking on albums or artists links to external URLs. Components provided; focus on data flow and UI interactions.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.3%
  • CSS 33.4%
  • HTML 6.3%