- About this Project
- Why?
- Some Observations about this App
- Links
- Features
- Getting Started
- Dependencies ans Tools
- Support tools
- Contributing
- License
The idea of the App is: "Reproduce some features of the Spotify App, providing a simple way to implement the existing layouts".
PS: The Spotify was just the context chosen by me for this project, but all the code inside this app can be reused for any app that has audio-streaming as domain, so you can reuse everything here in your next music-player, podcast-library or anything inside this context!
This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!
Email-me: [email protected]
Connect with me at LinkedIn.
Also, you can use this Project as you wish, be for study, be for make improvements or earn money with it!
It's free!
1 - There's no functionality of the menu items, the buttons are only for UI matters.
If you want to test the App in the Production mode, the links is here:
-
Choose an album, artist or playlist
-
Playlists
- Create, Edit and Remove your Playlists (Admin)
- Play musics, pause, next, previous
- Shuffle Musics from Album
- Repeat Musics from Album
- Play/Pause the current Playlist
- Next/Previous podcast on the Playlist
-
Albums
- Create, Edit and Remove your Albums (Admin)
- Play musics, pause, next, previous
- Shuffle Musics from Album
- Repeat Musics from Album
- Play/Pause the current Music
- Next/Previous podcast on the Album List
-
Artists
- Create, Edit and Remove your Artist (Admin)
- Play musics, pause, next, previous
- Shuffle Musics from Artist
- Repeat Musics from Artist
- Play/Pause the current Music
- Next/Previous podcast on the Artist List
To run this project in the development mode, you'll need to have a basic environment to run a React JS App, that can be found here. The server with some sample musics run in Firebase, so you can just change the Firebase setup and run your own Firebase project.
Cloning the Repository
$ git clone https://github.com/hygorchristian/Music-Player-Web
$ cd Music-PLayer-Web
Installing dependencies
$ yarn
or
$ npm install
With all dependencies installed and the environment properly configured, you can now run the app:
Development
$ yarn start
or
$ npm run start
Production
$ yarn build
or
$ npm run build
Then run the file located at /build/index.html
- React JS - A JavaScript library for building user interfaces
- MATERIAL-UI - React components for faster and easier web development. Build your own design system, or start with Material Design.
- Firebase - Firebase provides the tools and infrastructure you need to develop
- Redux - A Predictable State Container for JS Apps
- Styled Components - Visual primitives for the component age.
- Redux - React State Manager
- Redux-Saga - Side-Effect middleware for Redux
- React Router Dom - Router lib
- react-sound - Sound component to play audio in your web apps. Backed by the mighty soundmanager2 library.
- redux-persist - persist and rehydrate a redux store
- reduxsauce - Some aesthetic toppings for your Redux meal.
- seamless-immutable - Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.
- ESlint - Linter
- Reactotron - Inspect React and React Native Apps With Ease
- Prettier - Code Formatter
- Babel - JavaScript Compiler
- Image-Resize - Resize the Images
- Firebase - Cloud Service
You can send how many PR's do you want, I'll be glad to analyse and accept them! And if you have any question about the project...
Email-me: [email protected]
Connect with me at LinkedIn
Thank you!
This project is licensed under the MIT License - see the LICENSE.md file for details