/women-fronted-metal-bands

A list of metal bands with women as lead vocalist (with focus on women that can growl)

Primary LanguageTypeScript

List of women fronted metalbands

A list of metal bands with women as lead vocalist (with focus on women that can growl)

Header image written women fronted metal bands

Access app on the link:

https://women-fronted-metal-bands.netlify.app

VERSION 1.0 OF THE SITE

teste This project is a list of the bands of diferent metal genres and also an way of me to pratice frontend.

You can filter bands by how much growling the singer is capable of doing.

Index

Table of Contents

📖 Features

✅ Done

  • Display list as table
    • option to change to grid
    • Filter data
    • Pagination
    • Show/Hide columns
    • Change page size
  • Download as .csv
    • all data
    • filtered data
  • Use deezer API
    • Uses a proxy to use api (/proxy/server.js) - and deployed on render free plan
    • Save data already requested by api (tracks/artist) on localstorage
    • Get image of the band on click of row/on playing track
    • Be able to listen to a preview of a song on the page
      • When track ends play next
      • When band doesn't have a top track - show toast and play next
  • Button to play a random track
  • Published on Nettlify
  • Graphs
  • Add liked songs to a list:
    • open modal and show list
      • be able to remove item from list
    • Export as csv
  • Make site responsive
  • API to get data - with Netlify serveless functions
    • All data on redis
      • Using redis JSON and SEARCH to filter data and get data for charts

✍️ Todo

for later

  • Create playlist or add liked songs list to a playlist on deezer

🧰 Tech Stack

  • Vite
  • React
  • Typescript
  • Tailwind CSS
  • SWR
  • Lucide React - icons
  • Papaparse - json to csv
  • Radix-UI - unstyled components
  • Nivo - charts

🚀 How to run locally

  1. Install packages

    npm i

    or

    yarn i

  2. Install netlify globally

npm install netlify-cli -g

2.1 Run netlify dev npm netlify dev 

or

```
yarn netlify dev
```

  1. Run dev server

    npm run dev

    or

    yarn dev

Sources

Method of data collecting

  1. Bands got on the list if they had:
  • at least one official site:
    • home page (active or archived)
    • streaming page
    • bandcamp
    • official youtube channel
    • soundcloud
    • last.fm
    • blog
  • or having their music saved/archived by fans on some available website
  1. The band detail information when possible was obtained from their official sites but some comes from fan archives/wikis so there may be incorrect data about the bands.

Links

I got some of the bands and the information on this list from the following:

Printscreen of site

Printscreen