/TubeSync

Um projeto que consiste em criar um site onde o usuário pode criar uma sala e assistir vídeos do youtube com seus amigos.

Primary LanguageJavaScript

TubeSync

Definição: Projeto criado na disciplina de Desenvolvimento de aplicações para Web na Universidade Federal Rural de Pernambuco. Este projeto consiste em criar uma aplicação web onde amigos e familiares de diversos lugares do mundo, possam em suas residências se unirem em uma sala virtual para assistirem juntos vídeos compartilhados e sincronizados de forma automática, ou seja, esqueça a velha contagem "3, 2, 1, vai", na nossa aplicação você não irá precisar disso pois cuidamos dessa funcionalidade pra você, automatizando o envio de comandos para todos os participantes da sala, logo quando um iniciar ou pausar o mesmo acontecerá para os outros, e enquanto isso aproveitem para conversar no nosso bate papo em tempo real.

banner

Sumário:

🛠 Stack utilizado

Front-end: Utilizamos React JS que é uma biblioteca JavaScript front-end gratuita e de código aberto para criar interfaces de usuário baseadas em componentes. É mantido pela Meta e uma comunidade de desenvolvedores e empresas individuais.

Back-end: Utilizamos Node JS com a biblioteca socket io, que é uma biblioteca orientada a eventos para aplicativos da Web em tempo real. Ele permite a comunicação bidirecional em tempo real entre clientes e servidores da Web.

📋 Clonando projeto

Para testar nosso projeto, primeiramente teremos que clonar ele.
Portanto, crie uma pasta e abra ele com alguma interface que aceite comandos git, em seguida digite os comandos:

$ git clone https://github.com/GGdesu/TubeSync.git

🔧 Instalando pendências

Uma vez clonado o projeto, abra a pasta do projeto e em seguida abra um terminal para digitar o comando que instala as pendências:

npm install

🚀 Startando projeto

Com as pendências instaladas, agora precisamos startar o cliente e o servidor.
Sendo assim, apartir da pasta raiz abra um terminal para cada sessão:

No terminal do cliente, vá para pasta client e em seguida dê starte:

cd client
npm start

No terminal do servidor, vá para pasta server e em seguida dê starte:

cd server
npm start

Passo a passo

Aqui segue um vídeo mostrando a inicialização do projeto com o seu funcionamento:

videoplayback.mp4

Criando sala

Para criar uma sala onde será o local em que você assistirá os seus vídeos, basta clicar em Criar Sala:

animated

Convidando amigos

Uma vez criado a sala, você pode passar o código da sala para os seus amigos que fica no ícone superior a direita:

animated

Entrando em Sala

Caso algum amigo seu tenha criado a sala, você pode entrar na sala clicando em Entrar e em seguida preenchendo seu nome e colocando o código da sala do seu amigo:

animated

✒ Autores

  • Gabriel Gomes
  • Mateus Wei
  • Pedro Mesquita
  • Rafael Matos
  • Ravi Lucena