Check out the Issue Explorer
Looking to fund some work? You can submit a new Funded Issue here.
# Ocean Bounty : UI refactoring for Ocean DApp
## How can you help?
We are working on a dApp using React (for frontend) and Express.js (for node.js server). We are using material UI theme for React. We have created an easy music player to work with Spotify. We want you to change the player and playlist to a different design and also change the implementation to a framework that is able to use different music providers (SoundCloud, Apple Music, YouTube Music,...) but for now will only work with one (Spotify).
We already have some implementation of the app. See components diagram below.
[Link to Github Repo](https://github.com/oceanprotocol/musicmap)
## What needs to be done?
#### 1. Playlist UI redesign
We want to change the current playlist view to something more user friendly (see screenshot and .SVG file for all colors and styling). In a nutshell we want the following changes:
Add top banner with gradient that holds title, add track button, genre statistics, and user login button + back to main button (placeholder).
Change the playlist attribute order, font, font size, entry height, color.
Leave space and possibility to add additional functionality later (see screenshot with all functionality, not part of this bounty).
Font used is Liberation Sans. We have provided a mock-up for after additional bounties and released for clarification but only the v1.0 should be implemented now.
[Link to full view](https://github.com/oceanprotocol/musicmap/blob/master/specs/nexus%20portal%20-%20v2.0.png)
![Screenshot of desired view](https://github.com/oceanprotocol/musicmap/blob/master/specs/nexus%20portal%20%E2%80%93%20v1.0.png)
![nexus portal v1 0](https://user-images.githubusercontent.com/39778584/51844764-52fbd800-2316-11e9-9806-d093be89ce34.png)
[SVG mock-up file of UI](https://github.com/oceanprotocol/musicmap/blob/master/specs/nexus%20portal%20-%20v2.0.svg)
#### 2. Player UI redesign
We want to tweak the current generic music player with some cosmetic changes into a more stylized and compact design. Basically we are looking at a horizontal slim bottom bar with the same functionality as the current music player. The player can be seen on the previous UI screenshots.
- Display artist - title
- Navigation buttons: previous - pause/play - next
- Current time
- Status bar
- Total duration
- Music control buttons: repeat - shuffle - volume
- Hamburger button: placeholder with extra functions
*Custom icons* for the player can be found [here](https://github.com/oceanprotocol/musicmap/blob/master/specs/mm-playericons.zip).
#### 3. Generic Player Framework
The current implementation of the music player is programmed to work directly and only with Spotify. We need you to refactor the code so it treats Spotify as one possible third party provider, among others that we will implement in the future. So basically creating and implementing player interface for Spotify.
## We are very happy when
[ ] All functionalities of the player work without any bugs.
[ ] Test coverage is above 70%.
[ ] The code is merged into the master branch of the repo in both the ‘clients’ and the ‘server’ folder, depending on the component.
**Note** > All PRs for this implementation goes in this repo:
## Seen this problem before?
Any help solving this is welcome. Feel free to leave any comments and help someone else to solve it. We might airdrop tokens to someone even if not directly completing bounty.
## Questions & Reviews
Pull requests will be reviewed by one of the maintainers or long-term contributors. In case of any additional questions feel free to ask in this thread and we will do our best to add the missing info :)
## Things to know
The bounty lifecycle process including payout will be managed using [Gitcoin](https://gitcoin.co/explorer?network=mainnet&keywords=oceanprotocol&order_by=-web3_created).
We'll be responding to your questions here, but for discussion and clarification we recommend to join also our [Gitter channel](https://gitter.im/oceanprotocol/Lobby) where our tech community is accessible.
In order to see the PROCN balance in your wallet you'll need to reference the related token contract with address _0xf2aabdd898a0139195b2b5da7387d43a45ded254_. If you use a Metamask plugin you'll find the the exact steps [here](https://metamask.zendesk.com/hc/en-us/articles/360015489011-Managing-ERC20-Tokens).
Lastly, even if it is a contest bounty, we will reward all valuable contributions and efforts. We greatly appreciate the value our open source community brings to Ocean and will always award some tokens to all great contributions! :smiley:
Once the project was reviewed and merged in the master branch, you will receive the reward. PROCN is a proto-Ocean token. Bounty hunters that earn PROCN will be able to convert them 1:1 to Ocean tokens on network launch (Ocean Token will be valued at at 0.22 EUR on network launch). Network launch is expected to happen by Mar 31, 2019. Until then PROCN will be locked and non-transferrable in the ETH wallet to which it is delivered to.