Hi Product Hunt,
We've all had the experience of sharing a video with someone else and enjoying their reactions as much as the video itself. Watch Party brings this experience to your web browser. Watch, comment, and react to videos together. See others react while they watch the video in realtime with you. Browse featured videos by top emoji reactions, or find videos by specific emotions. You can also share your favorite YouTube videos with others by creating your own watch party.
PS: This was built in 48 hours for the Node Knockout, so it’s definitely an MVP! If you're interested, you can see the tech. stack and other details here: https://www.nodeknockout.com/ent...
Report
@wmdmark amazing job on Watch Party any chance you can share a timeline of the building process, where did you start, which part was the most challenging?
@0x1ad2 Hey Dennis, happy to answer this.
We worked on it last weekend (Friday night to Sunday night). Actually got some sleep both nights too. ;)
We came up with the idea a few days before the event. It was important to have a clear vision from the start, otherwise the scope can get out of hand. (We've learned this the hard way from previous hackathons).
We tried to follow this basic timeline which we've found to be really useful for building any product:
Make it work -> Make it beautiful -> Make it fast.
We had 4 people working on it. @aerykpayne worked on design, @wmdmark started on backend, @ethanwutka worked on the "browse" page, and I handled the "watch" page.
Backend work mostly involved structuring Firebase to handle the data. In terms of how we hooked it up, Firebase is essentially readonly from the client, and node/express handles writing to Firebase.
For the frontend, we just faked the data at first and prototyped everything as fast as we could. There was a lot of back and forth and iterating on design with @aerykpayne. By the end of Friday night we had a grid of youtube links and a watch page with some static comments and reactions. Saturday we continued to iterate on design and added the interactive elements. Functionality was all fake at first—it looked like you could leave reactions and comments but nothing stuck if you reloaded the page. By the end of Saturday we'd figured out most of the design and connected Firebase so most of the functionality was real. Sunday was mostly fixing bugs, tweaking design, and adding animation. We didn't quite get to the "make it fast" part, and there are some known issues in older browsers so we can't quite check off "make it work" yet either. But we're still happy with what we were able to finish in 48 hours.
From my perspective the app itself wasn't overly challenging to build—I recently worked on another project that had some similar UI challenges and used the same frontend stack. The most challenging part was knowing when a feature is "good enough"—there's always more refining, more refactoring you can do. This seems to be true outside of the artificial time constraints of a hackathon as well.
Sorry for that wall of text. ;)
TL;DR: Made it work -> Made it beautiful -> Made it fast
(didn't quite make it to that last one)
Report
@robertgonzal_ thanks for the extensive answer! I think you and @aerykpayne@wmdmark@ethanwutka made something spectacular in a short time period. Thanks for the insights and I'll stick to the Make it work -> Make it beautiful -> Make it fast timeline as well sounds very solid 😀
Report
Check out https://guggy.com it can be an awesome way to comment in "Watch Party"
Super addictive. I love the concept, and the UI design around emoji reactions is perfect. Amazing work in 48 hours. 🔥
Report
This is so awesome! It would be so cool to implement just the emoticon reactions + filtering + emoticon bar underneath the videos on other websites. I'd love to use this on my websites curated video feed.
Pathwright
Easyful
Product Hunt
Easyful
Product Hunt
AI Starter | An AI "Biz-in-a-Box"