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

filzasaleem/project-music-releases-vite-week4

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A project by Filza Saleem and Lina Dam

Music Releases

The Music Releases app is designed to showcase albums and singles, focusing on the implementation of React components and props.

Dependency Installation & Startup Development Server

1.Run npm i to install dependencies. 2. Use code . to open the code in Visual Studio Code. 3. Start the development server with npm run dev in your terminal.

The challange

The app seamlessly displays both singles and albums, featuring a sidebar as well. Notably, when an album involves multiple artists, their names are presented with commas, and the last one is separated by an "&". The app incorporates CSS hover effects and includes SVG icons when hover over an image. The app is responsive.

Technologies Used

React:

The core of the app is built using React, a JavaScript library for building user interfaces.

Props:

Props are employed to pass data between React components, facilitating the dynamic display of music releases.

Future work

As the Music Releases app evolves, there are key areas for improvement and expansion:

Styling Sidebar:

Enhance the visual appeal and user experience by refining the styling of the sidebar. hamburger menue can be added for the sidebar.

API Integration:

Transition from using a JSON file to a dynamic API for fetching music release data. This allows for real-time updates and a more seamless user experience with the latest releases.

By addressing these areas, the Music Releases app can continue to evolve into a more feature-rich and visually appealing platform.

View it Live

Experience the Music App live: Filza's music App .

Instructions

For detailed instructions on this project, refer to the instructions.md file.

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 63.4%
  • CSS 32.6%
  • HTML 4.0%