Upgrade to Vue 3 / Migrate to Next.js

[gianpaj]

Hello all! This is a cool but old vue1 website :)

Check https://walnut.tv/

• it's about watching videos from YouTube channels or subreddits – see channels.js
• I would love to upgrade the site to either Vue 3 or Next.js (react)

Notice that some challenges are (for me):

• navigation menu
• video player

Requirements:

• load fast
• Same functionality as well as look and feel.
• do not play the video at first load or when navigating.
• do not load the youtube iframe. it's a massive
• keep track of played videos. see localStorage.setItem('videosWatched', t);

Everything is in one big all.js file (sorry ). That's my fault 😿

It should be organised in components, etc. (of course) :D

Feel free to reach out on Telegram @gianpaj

Thank you so much!

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 200.0 USD (199.9 USD @ $1.0/USD) attached to it.

• 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's Discord
  • $1,886,112.59 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 1 week, 4 days from now. Please review their action plans below:

1) bloemenstraat has been approved to start work.

Considering the project is already present and we are only requested to port it to Vue, the job shouldn't take me more than 5 days. I already have previous experience with both Vue and React.

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@bloemenstraat Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[Bloemenstraat]

I'm really sorry, when I saw you first approved the other guy for work, I didn't bother checking if I was approved. Now, since I've been approved, I'll start the work. Could you please confirm that you still wish for me to complete the bounty?

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gianpaj]

I'm really sorry, when I saw you first approved the other guy for work, I didn't bother checking if I was approved. Now, since I've been approved, I'll start the work. Could you please confirm that you still wish for me to complete the bounty?

Yes please . Go ahead

Let me know if you need anything

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@bloemenstraat Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@bloemenstraat Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@arukio Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@bloemenstraat due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@bloemenstraat due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@bloemenstraat due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[github-actions[bot]]

Stale issue message

[gianpaj]

/bounty $210

[algora-pbc[bot]]

💎 $210 bounty created by gianpaj 🙋 If you start working on this, comment /attempt #85 along with your implementation plan 👉 To claim this bounty, submit a pull request that includes the text /claim #85 somewhere in its body 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to gianpaj/walnut.tv!

👉 Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @Wr4th100	Jan 27, 2024, 1:18:33 PM	#232
🔴 @amdev88	Jan 27, 2024, 1:38:49 PM	WIP
🔴 @rishi-raj-jain	Jan 27, 2024, 3:10:55 PM	WIP
🟢 @Anshul1811	Jan 27, 2024, 4:19:38 PM	WIP

[Wr4th100]

/attempt #85

Algora profile	Completed bounties	Tech	Active attempts	Options
@Wr4th100	1 bounty from 1 project			Cancel attempt

[amdev88]

/attempt #85

Options

• Cancel my attempt

[Anshul1811]

Can I get assigned? /attempt #85

Algora profile	Completed bounties	Tech	Active attempts	Options
@Anshul1811	2 bounties from 1 project	TypeScript		Cancel attempt

[amdev88]

Hello, @gianpaj can you please explain a bit about your requirement, if possible ?

[gianpaj]

Hello all! This is a cool but old vue1 website :)

Check https://walnut.tv/

• it's about watching videos from youtube channels or subreddits
• see channels.js
• I would love to upgrade the site to either Vue 3 or Next.js (react)

Notice that some challenges are (for me):

• navigation menu
• video player

Requirements:

• load fast
• do not play the video at first load or when navigating.
• do not load the youtube iframe. it's a massive
• keep track of played videos. see localStorage.setItem('videosWatched', t);

Everything is in one big all.js file (sorry ). That's my fault 😿

It should be organised in components, etc. (of course) :D

Feel free to reach out on Telegram @gianpaj

Thank you so much!

[gianpaj]

assigned to @Wr4th100 . first time using Algora. I hope that works

[gianpaj]

Also, migrating to Next.JS (React) or Astro (React) works :)

[Wr4th100]

Hey @rishi-raj-jain! I'm currently working on this right now... Would be finishing it in a day or two...

If I run into any issues and can't wrap this up, I will let you know.

[algora-pbc[bot]]

💡 @Wr4th100 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[gianpaj]

Well done @Wr4th100 ! Works very good.

Just an issue for visibility here as well.

• I'm getting this error locally
• i added the YOUTUBE_API_KEY in the .env file

But YouTube is blocking the requests

Is it possible because they're coming from the server?

These are the current restrictions of the YouTube API

Can you make them client-only since we don't want any caching and don't need the requests to YouTube to go through the server?

[Wr4th100]

Can you make them client-only since we don't want any caching and don't need the requests to YouTube to go through the server?

I have made the YouTube API client-only. Also added .env.example. Please try it now.

[algora-pbc[bot]]

🎉🎈 @Wr4th100 has been awarded $210! 🎈🎊

• Share on socials
• Give feedback

[gianpaj]

Thank you so much Roshan! 👏

[Wr4th100]

Thank you so much Roshan! 👏

Thanks a lot! Have a great day ✨✨