No funded issue found.
Check out the Issue Explorer
Be the OSS Funding you wish to see in the world.
Looking to fund some work? You can submit a new Funded Issue here .
Time left
Opened
Issue Type
Workers Auto Approve
Project Type
Time Commitment
Experience Level
Permissions
Accepted
Reserved For
Ocean Bounty : UI refactoring for Ocean DApp
oceanprotocol
oceanprotocol
# 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)
[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.
Functionality:
- Display artist - title
- Audio
- 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:
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](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:
## 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.
Setup your profile
Tell us a little about you:
Skills
No results found for [[search]] .
Type to search skills..
Bio Required
[[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Next
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Back
Next
Save
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email:
Email
Back
Save
