gitcoinbot
commented
5 years ago Issue Status: 1. Open 2. Started 3. Submitted 4. Done
This issue now has a funding of 5000.0 PROCN attached to it as part of the Ocean Protocol Foundation fund.
- If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
- Want to chip in? Add your own contribution here.
- Questions? Checkout Gitcoin Help or the Gitcoin Slack
- $57,356.33 more funded OSS Work available on the Gitcoin Issue Explorer
Kwinten-C
justinkchen
iamonuwa
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
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
SVG mock-up file of UI
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.
Functionality:
Custom icons for the player can be found here.
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: https://github.com/oceanprotocol/musicmap/
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. We'll be responding to your questions here, but for discussion and clarification we recommend to join also our Gitter channel 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. 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:
Reward
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.