[retroactive] Enhance Livepeer Explorer Mobile Responsiveness & Update Dependencies [$1800]

[rickstaa]

Overview

Livepeer explorer is the first point of interaction and information on Livepeer, most of the users use standard resolution screens to view the pages but some might use mobile screens. The quality of experience of explorer should be comparable from any devices.

Problem

The Livepeer Explorer (https://explorer.livepeer.org/) currently exhibits display issues on mobile devices, specifically on the Governance and Treasury pages. Text and image elements overflow their containers, creating a suboptimal user experience. Image reflecting the issue is added in the Additional Information section.

Desired Solution

This bounty aims to address these responsiveness issues and simultaneously update the project's dependencies to their latest versions.

Bounty Requirements

1. Mobile Responsiveness Enhancement: Diagnose and resolve the layout issues affecting the Governance and Treasury pages (and any other affected pages) on mobile devices. This includes, but is not limited to:
2. Dependency Updates: Update all project dependencies listed in package.json for both the explorer and design-system repo https://github.com/livepeer/explorer/blob/main/package.json and https://github.com/livepeer/design-system/blob/main/package.json to their latest stable versions. Provide a clear summary of the updated dependencies and their versions in your submission.
3. Thorough Testing: Conduct comprehensive testing to verify that the implemented changes resolve the responsiveness issues without introducing regressions or negatively impacting other functionalities of the explorer or the design-system. Testing should cover various mobile devices, browsers, and screen sizes.

Applicant Requirements

• Proficiency with React and Next.js.
• Experience with responsive web design principles and techniques (e.g., CSS media queries, flexbox, grid).
• Understanding of web application deployment and debugging processes.

Scope Exclusions

None

Implementation Tips

• Clone both https://github.com/livepeer/explorer and https://github.com/livepeer/design-system, thoroughly examine the codebase for necessary changes components and styles related to the Governance and Treasury pages. When updating dependencies, pay attention to any breaking changes introduced by newer versions and address them accordingly.
• Consider using browser developer tools to inspect the layout and identify the root causes of the responsiveness issues.
• Refer to the official documentation for Next.js and React for guidance on best practices for responsive design.
• Checkout the branch https://github.com/livepeer/explorer/tree/upgrade_next_and_eslint where some work on the dependencies updates is complete so utilise the work to expedite your work.

How to Apply

1. Express Your Interest: Fill out this form, making sure to specify the bounty you are interested in
2. Wait for Review: Our team will review expressions of interest and select the best candidate.
3. Get Assigned: If selected, we'll contact you and assign the bounty to you.
4. Start Working: Dive into your task! If you need assistance or guidance, join the discussions in the #developer-lounge channel on our Discord server.
5. Submit Your Work: Create a pull request in the relevant repository and request a review.
6. Notify Us: Ping us on Discord when you’re pull request is ready for review.
7. Receive Your Bounty: We'll arrange the bounty payment once your pull request is approved.
8. Gain Recognition: Your valuable contributions will be showcased in our project's changelog.

Contact Information

For questions or clarifications, please contact: [email protected]

FAQs

How is payment made?

Bounties are paid out in LPT on the Arbitrum network. On acceptance of your application, we will ask for an Arbitrum-compatible wallet address from you for which we can send payment.

Additional information

• screenshot from the treasury page in mobile version.
  

[Cooldee0317]

Hi, @rickstaa
How are you?
I always keep an eye on this livepeer project and joined all community meetings, and I would love to contribute to this project.
Can you assign this task to me?
I try to fill the form you provide but I can't find any forms on it.
Looking forward to the opportunity to contribute to Livepeer project.

Thanks

[benya7]

Hi! I want to apply to this bounty 🙂 but the link form isn't working. Can you please fix it? Thanks!

[scapula07]

Hi @rickstaa . I'm Eneche and i am interested in this bounty. I am very heavy on the frontend and proficient in React and nextjs. I have strong ethics on delivering on solid and on time. I am very familiar with the livepeer explorer codebase and have in the past experimented on messaging on the explorer.
I am a open-source contribute with keen interest on the Livepeer ecosystem and stacks. I will definitely like if this task is assigned to me ,as i have completed bounty task in the past.

[0xcodercrane]

Hi, @rickstaa
I am a open source contributor, please assign this task to me. I will do this in a short time perfectly.

[lukiod]

@rickstaa updating dependencies should be easy with dependabot or it is like someone need to check them manually?

[rickstaa]

@Cooldee0317, @benya7, @scapula07, @0xcodercrane, @lukiod —thank you all for your enthusiasm in working on the explorer!

This bounty was intended as a retroactive reward for the work already completed by @JJassonn69. It seems the retroactive label wasn’t correctly added due to an automation issue—apologies for the confusion!

@JJassonn69 has already completed the work, which can be found here:

• 🔗 Code: [GitHub Repository](https://github.com/JJassonn69/explorer/tree/explorer)
• 🌐 Live Preview: [Explorer on Vercel](https://explorer-theta-tan.vercel.app/)

I appreciate your interest in front-end bounties, and I’ll be posting more opportunities soon. Stay tuned! 🚀