Music Melon and learning so much more about CSS styling

I've decided to build a Spotify clone. to diversify my GitHub portfolio and show I'm not just a one trick pony focusing on tabletop RPGs. not that I wont be building more in that realm. There is just to much to make with all the information Dungeons and Dragons offers.

anyway with this Spotify clone I am calling MUSIC MELON. I wanted a simple API connect with a button click to get users logged in then a search bar and player and when the search wasn't populated to show the song lyrics. Cool I got my checklist of what I wanted and took to the documentation for Spotifys API and installed some nifty nodes.

getting into I knew I wanted to make it look really good. music and aesthetics go hand and hand to the artist albums to the shows they put on its all an expression of the artists view. So I looked into increasing my CSS knowledge, and man was I missing so much.

I want to talk about bootstraps inline CSS and how nifty it is to get everything up and going. in the past I utilized style sheets and definitely appreciate them for my more robust projects in the past. However for this I just needed a super quick way to build the look and feel. since this wasn't gonna be a to crazy version just yet. I wanted something that looked nice out of the box and could see that on my updated DOM.

As you can see below in the className for the <Container /> I've utilized some bootstrap inline css. d-flex to create a flex box for my button justify-content-center for centering the button and align-items-center for the button content to be centered.

<Container
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "100vh" }}
      >
        <a className="btn btn-success btn-lg" href={AUTH_URL}>
          Login With Spotify
        </a>
      </Container>

These are some of the more simple tags you can use and there are many. check out the included link for all of the possible uses.
https://getbootstrap.com/docs/4.0/utilities/borders/

Use the left index looking under Utilities to find some amazing simple to use styling to get your page looking the way you need to. version 2 will definitely be more robust. adding some custom images and some more functionality like lyrics look up and a fun equalizer.