minkhaung-mkks / jsm-tutorial-youtube-clone

A youtube clone project made from JavaScriptMastery video on the topic, working with materialUI, react and RapidAPI

🎬 YouTube Clone Project

This is a clone tutorial project from JS-Mastery. You can view the tutorial here.

Deployed on : Netlify

🚀 Enhancements

Here are some of the key enhancements I made to the original project:

• 📝 Comment Section: Introduced a fully functional comment section.
• 🐞 Visual Error Fix: Rectified a visual error that was creating gaps in the video cards when playlist data was fetched.
• 💅 CSS Modifications: Updated the CSS for a more fluid and responsive layout.

📢 Comment Section Component

The Comment Section component is a significant feature addition. Here's a brief overview of how it works:

• It accepts an id prop, which corresponds to a particular video.
• This id is used to fetch comments for the video from the RapidAPI endpoint.
• The fetched comments are then sorted based on the likeCount.

useEffect(() => {
  fetchFromAPI(`commentThreads?part=snippet&videoId=${id}`)
    .then((data) => {
      const sortedComments = data.items.sort((a, b) => {
        return b.snippet.topLevelComment.snippet.likeCount - a.snippet.topLevelComment.snippet.likeCount;
      });
      setComments(sortedComments);
    });
}, [id]);

👀 Visibility on Mobile View

The comments are hidden by default on mobile view. They only become visible when the user clicks on the comment button.

{(isExpanded || !isMobile) && (
  //... Comment rendering logic
)}

The application checks the screen size upon rendering to determine whether the user is on a mobile device.

useEffect(() => {
  if (window.innerWidth >= 960) {
    setIsMobile(false);
    setIsExpanded(true);
  }
}, []);

📱 Responsive Design

The css units are changed to vw and vh in fitting cases to make the app look and behave the same across all devices of similar screen sizes.

🎓 Conclusion

This project has been a significant step in my learning journey. Here are some of my takeaways:

🧩 Discovering Material UI

This was my first exposure to Material UI, and I was amazed by its power and flexibility. Comparing how Material UI handles CSS versus my approach was enlightening. It also marked my first introduction to a UI library, which was exciting for me.

🎯 Understanding API Endpoints

The API endpoints used in this project were intuitive and straightforward, providing excellent insight into how I might build my own in the future. I'm excited to delve deeper into API development and create my own endpoints soon.

🐞 Debugging and Improvement

Finding and fixing bugs like the playlist glitch was a thrilling experience. Enhancing and iterating on the original tutorial, adding my touch to aspects like the CSS, was incredibly satisfying.

💬 Implementing Comments

Incorporating a comments section was simpler than expected, a fact that speaks volumes about JS-Mastery's effective teaching methods.

🚀 What's Next?

While I've learned a lot, I realize there's more to master. I plan to undertake 2-3 more tutorial projects to solidify my understanding before launching into independent projects. The journey thus far has been enriching, and I can't wait to see where it takes me next.

---

I'm always open to feedback and suggestions. If you have any advice or would like to share your thoughts, please feel free to reach me at [e-mail].