Responsive Front End Website - BEU Music using React JS

This project is a single page front end web for BEU Music built with React JS framework. I created this project as an exercise to develop front end skills

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Credit
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Live Site URL

Credit

• Figma Web Design & UI Kit i used for this project is published by Dmm Kreativ

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React JS - JS library
• react icons - JS library to add icons

What I learned

I learned how to implement a filter function using react hooks to filter albums based on genres Code snippets, see below:

const allGenres = ['All Genre', ...new Set(AlbumData.map(album => album.genre))];

 const [genreMenu, setGenreMenu] = useState(AlbumData);
 const [buttons, setButtons] = useState(allGenres);
  
  const filter = (button) =>{
    if(button === 'All Genre'){
      setGenreMenu(AlbumData);
        return;
    }
    const filteredData = AlbumData.filter(album => album.genre ===  button);
    setGenreMenu(filteredData)
}

The following screenshot is an example of displaying albums based on pop genre

Continued development

The development of this project can be continued by creating multiple page for each links in navigation bar

Useful resources

• UI/UX Design Resources - This website provide many UI/UX design some are free. I really liked this website and will use it going forward.

Author

• Github - Shabrina Putri
• Instagram - @shabputri_