Skip to content

LyricFinder Webapp using ReactJs,ContextApi and Bootstrap. The WebApp displays the Top 10 Global Tracks. On Searching for a Song,it displays the top 10 results and on clicking the specific track,shows the lyrics on a new page along with release date,genre and album name..

Notifications You must be signed in to change notification settings

raghav2404/Lyric-Finder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lyric Finder WebApp using ReactJS ,Context Api and Bootstrap.Displays the Top10 tracks and allows user to search for Lyrics of any song using Musixmatch Api.

https://lyricfinder-raghav24.netlify.app/

1)npx create-react-app to start 2) Used React Router to Route between links. 3)Components: Navbar Title Search Track Tracks(Top 10 and currently searched) Lyrics

  1. The track and lyrics data is fetched from the Musixmatch api,authenticated using API Key using 'axios' http client to handle server requests.
  2. Used Bootstrap to style the cards and display in components,Moment to modify date in Lyrics.
  3. Context Api which keeps the state(tracks) and provider which provides track data to consumer class components.
  4. The WebApp displays the Top 10 Global Tracks. On Searching for a Song,it displays the top 10 results and on clicking the specific track,shows the lyrincs on a new page along with release date,genre and album name.
  5. 'npm run build' and then hosted on Netlify

About

LyricFinder Webapp using ReactJs,ContextApi and Bootstrap. The WebApp displays the Top 10 Global Tracks. On Searching for a Song,it displays the top 10 results and on clicking the specific track,shows the lyrics on a new page along with release date,genre and album name..

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published