YoutubePlayerList

This project is created and developed for a challenge. This is a React-App created using Create-react-app, and hosted using Express.js (server.js). This app is a simple application where you can copy list of youtube urls and create a playlist. And a player will play the videos in the queue.

Features

• Syncing up data between all tabs
• Storage persistance (UI will remain same, after reopen/refresh)
• Data stays in browser
• Validates youtube url and shows meta data before adding to Queue

Libraries & Stack details

• React, Redux, Redux-Thunk, Persist
• Custom built Redux-middleware for syncing data across tabs
• React-Player (for playing videos)
• SCSS
• Express.js for hosting
• Docker for Deployment

Demo Video

Usage or Set up

1. Hosted
   • Log on to http://18.219.92.53:1234/
2. Docker
   • docker build . -t video-player-youtube
   • docker run -p 1234:1234 -d video-player-youtube
   • Log on to http://localhost:1234/
3. Manual (requires node.js installation)
   • npm i
   • npm run build
   • node server.js
   • Log on to http://localhost:1234/
4. Dockerhub
   • docker run -p 1234:1234 -d senthilbalajiganesan/video-player-react
   • Log on to http://localhost:1234/

Tasks

• SPA 👍
• Add link and play in Queue order 👍
• Remove video after playing 👍
• Validate URL 👍

Bonus

• Remove video 👍
• Reorder videos 😔 ⏰
• Sync Data across tabs 👍
  • Adding 👍
  • Removing 👍
  • Forwarding 👍
  • Entering URL 🔥
  • Validation message 🔥
• Showing meta data for video 🔥
• Dockerized 🔥

Deliverables

• Create a fork of this repository 👍
• Code your solution in a frontend stack of your choice 👍
• Include instructions on how to set it up and run in the README.md 👍
• Add your resume and other profile / project links 👍
• Submit a pull request (PR) 👍