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

Anna2024WebDev/project-music-releases-vite

 
 

Repository files navigation

Music Releases

This week we started learning about React. Our first project in React was to build a Spotify mockup page.

The Problem

I started by sketching out on paper how I wanted the structure of the components to be, I changed the structure a couple of times. I wanted it to be as simple as possible so It was easy to follow and understand. I finally choose to divide the components based on the different objects and different features that we should cover and items that belonged to each component. Like for example the icons and hoover effects I imported and added to the the CoverImage files since the icons would show on the images when hoovered.

Then I moved on to importing and exporting components and after that moved on to the styling. It was tricky with the styling of each component but also very easy to follow in the end. I looked at my older projects a lot and of course googled and asked chatGPT. At first I forgot to import the CSS files and could not understand why none of the changes I made was reflected in the browser.

If I had more time I would go for the stretch goals and add more hoover effects.

View it live

https://myspotifymockup.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 53.1%
  • CSS 41.9%
  • HTML 5.0%