Skip to content

A well-designed website showing trending YouTube videos in each region.

Notifications You must be signed in to change notification settings

Davidlasky/Wetube

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WETUBE: Your Personalized Video Playlist Platform

All Contributors

logo-photoaidcom-2x-ai-zoom

Welcome to WETUBE, a personalized playlist platform that brings a world of curated content right to your fingertips!

Our website, powered by robust MySQL databases, offers an intuitive interface that lets you explore and organize videos into playlists for a seamless viewing experience. You can explore videos based on your interests and make new friends with similar preferences.🍿 Screenshot 2023-12-19 at 17 45 20

Features

  • Embedded Videos:

    At WETUBE, we believe that every video tells a story, and every playlist sets a mood. Dive into an expansive library where each video is presented within an iframe for uninterrupted play, allowing you to immerse yourself in content without ever leaving the comfort of your dashboard. For every video you watch, you'll find a detailed stats section. This is where the story behind the screen comes to life, displaying the channel name, category, and the number of views & likes —- a testament to the video's impact and popularity. Screenshot 2023-12-19 at 17 18 29

  • Browsing Habits Analysis:

    WETUBE introduces Browsing Habits Analysis, showcasing your video preferences through visually appealing bar and pie charts. Easily understand your favorite genres and how your interests evolve over time, enhancing your overall video discovery experience.Screenshot 2023-12-19 at 17 22 27

  • Friends Recommendation:

    Find friends who love the same videos as you do, and explore new content through the lens of common preferences. Our recommendation engine not only suggests videos but also potential friends, enhancing your social experience by connecting you with like-minded individuals based on locations, commonly liked videos and personal category preferences. Build a vibrant network around common interests, fostering meaningful interactions and expanding your social circle. Screenshot 2023-12-19 at 17 27 16

  • Trending Videos:

    Our trending page is the pulse of WETUBE. Here, you'll discover what's hot in your region through engaging bar and pie charts, visualizing the popularity and viewership of the latest trends. This interactive page not only highlights trending videos but also connects you with other users who are riding the same wave of trending content.

    At the bottom of the trending page, you'll find personalized user recommendations, bringing you closer to others in your region who are watching what's in vogue. It's a social and visual feast, tailored to keep you at the forefront of regional trends and connected to the WETUBE community.Screenshot 2023-12-19 at 17 54 07

Getting Started

  • Create a Playlist:

    Start the journey by creating a playlist and give it a fitted name, you can also try naming it “friends’ playlists” to auto-generate playlists from your friend’s favorite videos. Screenshot 2023-12-19 at 17 29 28

  • Add a friend:

    Wanna see what other people are watching? Add a friend!

Technologies

🖥️ ⚙️
Frontend React React Route
Backend NodeJS MySQL Google Cloud
UI/UX Design CSS Figma
Libraries Toastify ReCharts

Instructions

If you want to run this project on your own, first setup a sql server on platforms like GCP or AWS, then download the Trending YT Video datasets from Kaggle, create tables as specified in this guide, and finally do the following steps:

  1. Clone the repo:

    git clone
  2. Navigate to the wetube folder

    cd wetube
  3. Install the dependencies:

    npm install
  4. Change the IP address in each file(except from the connection.js, where you should replace the IP address with your sql server's IP) to your server's IP or change to 'localhost' if you just want to run it locally.

  5. Start the backend server:

    node server/server.js
  6. Start the frontend server:

    npm start

Contributors

LaskyJ
LaskyJ

💻 📝 🚧 📦 🛡️
Lumi-works
Lumi-works

💻 📝 🎨 💵 📖
Bruceyty
Bruceyty

💻 🤔 🐛 🖋
johnjr4
johnjr4

💻 🔣 🎨 📦 📓

Mentors

  • UIUC CS411 Course Staffs