A Simple Music Application using React JS, a JavaScript library to make awesome UI by Facebook, Node JS, Express JS and MongoDB.
This application uses component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.
tsc is used to transpile all JSX code to vanilla JavaScript code. For UI creation HTML5 and CSS3 are used.
This is a responsive web application for viewing in both Mobile and Desktop.
Back end is implemented using Node JS, Express JS and MongoDB Atlas.
- Code is rewritten with latest version of React JS and Node JS.
- Latest features of JavaScript i.e. ESNext is used.
- Routing is written using React Router.
- This is Full Stack Simple Music Application.
- All the song details are stored in the MongoDB Atlas. This example uses a free/ shared account. So Please use it wisely.
- Application is loaded with the songs.
- Listening of the songs is supported.
- Searching from the list of songs is possible.
- Information about the song (Movie, Album, Artist) is available on click of the
iicon. - Changing the rating is supported.
- All the ratings are saved in the database i.e. persistant.
- Listing of Top 5 songs based on their rating is available.
Clone the repository:
$ git clone https://github.com/anijitsao/react-app-simple-music-app.gitNavigate inside the directory and Install all the necessary dependecies:
$ cd react-app-simple-music-app
# installing dependencies
$ npm installRun the server:
$ npm run server:start
Open the web browser and typehttp://localhost:3000 in the address bar to load the application.
tested with latest version of 
Google Chrome and 
Mozilla Firefox
Some screens of the application is given below for better understanding.
Desktop as well as Mobile version of the screenshots are given side by side.
Initial screen
After loading the songs
Top 5 Songs
Showing information of a song
Searching and showing searched songs
