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 React JS 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 4.
ES6 module
creation along with import /export
is used. Babel is used to transpile all JSX code to vanilla JavaScript code. To install all the dependecies npm
is used.
For UI creation HTML5 and CSS3 are used. Grid, the new feature of CSS3 is used for layout creation purpose.
Back end is implemented using Node JS, Express JS and MongoDB. Atlas, the Cloud version of MongoDB is used.
This is a responsive web application for viewing in both Mobile and Desktop.
- This is Simple Music Application
- It is a Full Stack Application
- All the song details are stored in the MongoDB Atlas. This is a free/ shared account on Atlas. 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
i
icon - 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 using
git clone https://github.com/anijitsahu/react-app-simple-music-app.git
fromGit Bash / Command Prompt
- Navigate inside the directory by
cd react-app-simple-music-app
- Install all the necessary dependecies by using
npm install
- Navigate to the directory
cd server
- Run the server by
node server.js
- Open the web browser and type
http://localhost:3000
in the address bar to load the application
tested with Google Chrome v70 and
Mozilla Firefox Developer Editon
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.