Productivity Music App For Developers

Productivity Music App For Developers Using ReactJs

Productivity Music App For Developers Using ReactJs with source code for free is available for download. UnMusic is a simple audio player application available for developers. To download scroll down to the bottom of this post click and click the download button.

Prerequisite

Sign up for the following services and grab the API keys:

  • Contentful – CMS for managing the contents of the app (20000 Records & 2,000,000 API Calls/month in free tier)
  • Cloudinary – Content Delivery service for hosting audio files for streaming (25 GB/month in free tier)
  • Amplitude – App usage analytics (Optional)
  • Sentry – Error monitoring in production (Optional)

Contentful Model Creation

  • Create two models in the Contentful dashboard named Playlist and Track.
Productivity Music App For Developers
contentful settings
  • Playlist model for saving the list of tracks, which will contain the following fields:
  • Track model for saving the track information, which will contain the following fields:

Cloudinary Assets Hosting

Productivity Music App For Developers

  • Login into your Cloudinary account and create the folder and upload all of your MP3 files
  • Copy the public URL for each file by clicking on the Copy URL button

Installation

  • Clone the repository by running git clone [email protected]:unmusic/unmusic.github.io.git
  • Get inside the /web folder
  • Add a file named .env.local and replace it with contents of .env.sample
  • Make sure you update all the environment variables below:
    • REACT_APP_CONTENTFUL_SPACE_ID
    • REACT_APP_CONTENTFUL_ACCESS_TOKEN
    • REACT_APP_AMPLITUDE_API_KEY (Optional)
    • REACT_APP_SENTRY_DSN (Optional)
  • Install all the dependencies by running npm install
  • Run npm start to start the application in the development mode. The app will be running at http://localhost:3000.

How To Run Productivity Music App For Developers using React Project

Running this project is simple. Simply follow these steps.

  • Firstly check that node js is installed on your pc. If Not download and install.
  • secondly, you have to open the code folder on any code editor.
  • If you are using Vs Code, simply open the code editor and your project.Then open a new terminal (ctrl + shift + ~ ==> will open a new terminal).
  • run this command `npm install`
  • then `npm start
  • If you want to run without a code editor directly, then follow these steps: Open a terminal(command prompt or git bash)
  • goto your project root directory(cd folder name)
  • then again type `npm install` and then after installation `npm start`

Download The Productivity Music App For Developers using React Project with Source Code For Free:
Click the Download Button Below to Start Downloading


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.