Visit the Deploy
Build a React.js Music Application
React.js (Next.js)APIs:Use Shazam API to gather music data Use Shazam Core API to gather artist details and recommended tracks Use IP Geolocation API to get the user’s locationLibraries:You may use any libraries and packages you might need in your code You may also use any UI kit you prefer (Material UI, Tailwind, Plain CSS…) You may use Redux Toolkit to keep the API calls organized
Music PlayerUsers can click on any song, and a music player will appear. The player must include basic controls such as previous song, next song, and pause/play buttons. Additional details such as the song’s name, author, volume, repeat, and duration controls are a plus.HomepageUsers can choose a genre and get top songs for that genreExploreUsers can select a country and get top songs for that countryMusic for Specific CountryShow the top songs for the user’s countryArtists PageUsers can see a list of the most famous artistsArtist Details PageUsers can see additional information about the artist and all of their most popular songs.Song Details PageUsers can see additional information about the song, such as the song’s music video and lyrics and a list of similar songs.
Search FunctionalityUsers can start typing artists or song names, and results based on their search will show up.Exceptional DesignMake your design stand out; everyone loves a beautiful user interface. Brand it as a real app and stay consistent with the colors, icons, and design.Additional FeaturesHave you thought of some possible extra functionalities with APIs mentioned above? Go wild!Clean CodeWe cannot emphasize enough how important this is! Keep the code clean and use as many React best practices as possible.
