Beatpoints is a music streaming web application built using React, React Three Fiber, and Styled Components for the graphical user interface. This project uses a 3D representation that is synchronized with the music playback. The graphical component's shape, color, and position change in response to the data received from the Spotify Web API.
It should be noted that using Beatpoints requires a premium Spotify account since some of the API features used are only available to premium subscribers.
Additionally, Beatpoints displays information about the artist, album, and song, as well as a karaoke-style lyrics visualization.
- React: A widely used JavaScript library for creating user interfaces.
- React Three Fiber: A library that enables the creation of complex and visually appealing 3D graphics in React.
- Drei: A set of utility tools that enhances React Three Fiber functionalities..
- Styled Components: A CSS-in-JS library that simplifies the styling process..
- Tween: A library utilized for creating animations.
- Axios: A HTTP library for making requests.
- Spotify Web API
- Lyrics: https://github.com/PabloMesquida/spotify-lyrics-api
- Express: Framework for Node.js. https://github.com/PabloMesquida/beatpoints-server
- GLSL
Finally, Beatpoints is hosted and deployed on Vercel.
