/ifplay

Playlists de vídeo com questionários para seus alunos

Primary LanguageTypeScriptMIT LicenseMIT

IFPLAY - Client (Frontend)

Em produção

IFPLAY é o frontend de uma api usada para a criação de formulários em playlists de videos em um sistema multi tenancy.


Descrição

Este projeto é composto por duas partes separadas (Frontend e Backend)

  • Acesse por aqui o Backend.
  • Acesse por aqui o Frontend.

Existem duas publicações deste projeto (um resumo expandido (Publicado) e um artigo (TCC defendido))

  • Acesse por aqui o resumo expandido publicado.
  • Acesse por aqui o TCC defendido.

Deploy

  • Heroku - API
  • Vercel - Frontend

O que faz?

Da Estrutura Geral

  • Criação de conta
  • Login
  • Autenticação JWT
  • Método de envio de email para verificação de autenticidade de email (implementado mas não ativado devido a custos de provedor de email 🙁 )
  • Adiciona playlists a partir de URL's do YouTube.
  • Definição de titulo principal para questionário.
  • Vincula perguntas a playlists criadas.
  • Adiciona turmas com códigos para predisposição de envio de respostas para o professor.
  • Métodos de apagar e editar para (playlist, turma, vídeos, conta)
  • Métodos de continuar assistindo.
  • Estrutura de pesquisa simples.
  • Envio de respostas sob demanda.

Das visualizações:

Dashboard :

  • Últimas respostas na pagina inicial
  • Índice de quantidade para (Respostas, Novos Emails, Playlists, Perguntas)
  • Indexação para (playlists, videos, nome de questionário, questões, vídeos)
  • Geração de UUID.

Cliente (Público):

  • Landing page.
  • Indexação de (Playlists (por id, todas), Vídeos, Questões sob demanda).

Das Tecnologias:

Ferramentas:

  • Figma (prototipação de componentes React).
  • VSCode
  • React Developer Tools
  • Chrome
  • Github Copilot
  • Git
  • GitHub
  • Commitizen (Ferramenta de conventional commits)
  • Eslint
  • Prettier
  • Autenticação JWT
  • Node
  • DBeaver
  • Lucid ORM

Linguagens e Frameworks:

  • TailwindCSS V2
  • TypeScript
  • Adonis V5
  • NextJS
  • ReactJS
  • SQL

💾    Instalação

Para baixar as dependências do projeto apenas rode o comando:

$ npm install

💿    Rodando o App

Para iniciar o app, apenas utilize o comando:

# Instalar as dependências
$ yarn

# Iniciar o projeto
$ yarn dev

📝 License

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Codificado com o ❤️ by Carlos Eduardo Dias Batista