newschoolapp/newschool-frontend

NewSchool-frontend

Frontend da New School, desenvolvido em VueJs, Nuxt e Vuetify

Ambiente de DEV: http://newschool.us-east-2.elasticbeanstalk.com

Ambiente de PROD: http://newschool.us-east-2.elasticbeanstalk.com

Como rodar o projeto

https://www.youtube.com/watch?v=4-nc3Ig7jxk&t=3s

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Guidelines

Variáveis de ambiente necessárias para execução do projeto

GA_TOKEN: Variável com o token do Google Analytics do ambiente

Como contribuir

1 - CONHEÇA O PROJETO New School

https://youtu.be/u4O8wE0gYO0

2 - ENTRE NO SLACK

https://join.slack.com/t/newschoolgrupo/shared_invite/enQtODQ4NjUyMjAzNTUzLTg3NTJiNmQ1ODE3YzYzMjcyYzVhYTNkZjIzYjViMjI4NTBjYzFiYTc3Njg0ZWI3YTk2MjE5NDY3MDlkYzViOGI

2.1 - LÁ NO SLACK, ENTRE NO CANAL #FRONTEND

• Se apresente. Nome, cidade, profissão, e principais habilidades.
• Pergunte sobre as tarefas em aberto.
• Troque uma ideia com o time técnico. Comente como planeja solucionar. Ouça os conselhos dos devs mais experientes. Esse alinhamento é super importante pra aumentar significativamente as chances do seu PULL REQUEST ser aprovado depois.

3 - FAÇA PARTE DA EQUIPE NO TRELLO

https://trello.com/b/hY1tozEd/ns-squad

3.1 - PEGUE UMA TAREFA NO TRELLO.

• Coloque no seu nome e mova para DOING.

4 - GITHUB

4.1 FAÇA UM FORK DO REPOSITÓRIO

https://github.com/NewSchoolBR/newschool-frontend

4.2 ESCREVA CÓDIGO

Hora de colocar a mão na massa. A parte mais divertida, trabalhar no código-fonte.

O desenvolvimento está se concentrando na branch develop. Faça o checkout nela e crie uma branch nova para a sua tarefa, com os seguintes comandos:

$ git checkout develop
$ git checkout -b sua-nova-funcionalidade-ou-tarefa

Depois de concluir e testar, envie e aguarde o PULL REQUEST ser aprovado.

5 - MISSÃO CUMPRIDA. VC AJUDOU O PROJETO. ❤️

API NO AMBIENTE DEV:

http://newschool-api-dev2.eba-gxtzwa9m.us-east-2.elasticbeanstalk.com/swagger/#/

CONFIRA OS LAYOUTS NO FIGMA:

https://www.figma.com/file/whTp4hE6ZQR3V8LBxSZnjv/NewSchool?node-id=0%3A1

newschool-frontend's Issues

BUG: Verificação de token.

Existe um pequeno bug na verificação de expiração do token no front-end, segue o fluxo.

• Acesso ao /login, é verificado se existe o token no local storage, caso sim ele verifica a validade desse token no próprio front-end, nesse caso ele passou, logo após isso ele faz a requisição para busca de dados do usuário, porém a API retorna 401, então temos um problema em alguma das partes em relação a verificação da validade, estou investigando esse problema, se alguém de back-end puder dar uma atenção tbm.

Paliativo: Enquanto isso, vou criar um fluxo condicional básico, quando rolar o 401 ele terá o token do storage removido e terá que logar novamente

Botões do login perdem o layout correto

Ao entrar na tela de login, todos os botões possuem o mesmo tamanho. Após realizar o logout o botão "Esqueceu sua senha?" perde o seu tamanho correto e todos os botões mudam de fonte.

1. Tela quando entramos no sistema.

2. Tela após entrar no sistema e clicar no botão sair do menu outros.

Ao finalizar 1º etapa do curso já é emitido o certificado.

Tipo: Funcionalidade

Descrição: Ao finalizar 1º etapa do curso já é emitido o certificado, mesmo com mais etapas disponivéis.

Mensagem Error: Sem mensagem de erro, apenas é exibido o certificado na hora errada.

Fluxo: login > home > selecionar curso > iniciar curso > efetuar primeira etapa > responder questionário > mensagem de parabéns é exibida.

BUG: i18n

O i18n está interferindo no roteamento, ao atualizar o projeto
o nome de algumas rotas, são modificados para /rota__pt

ao comentar esse trecho a página carrega normalmente

Solicitação na recuperação de senha (erro no Backend)

Quando o usuario clica no link recebido no seu email para trocar sua senha (uma vez que ele esqueceu ela) ele vai para a primeira tela abaixo. No momento que ele digita a nova senha e a confirmação da mesma senha ele clica em "redefinir senha" e o erro que ocorre esta na segunda imagem.

BUG : Client_credentials

Todas as vezes que a aplicação dorme(no heroku) e é levantada, acontece alguma modificação no banco, que impossibilita novas requisições

Esse erro é recorrente.

Ajustar frontend para correção de atualização do curso no backend

A alteração no backend que causou essa necessidade de ajuste / verificação no front-end é a PR:

• https://github.com/NewSchoolApp/newschool-backend/pull/154/files

Card no trello:

• https://trello.com/c/ZUyx2drn

Erro 500 ao excluir o curso

BUG: Redirecionamento para /teste

Ao logar e acessar a página de home, o app faz um GET em aluno/teste, isso acaba caindo em roteamento, consegui validar fazendo um mapping no roteamento, minha implementação de rotas estava dando errado por conta desse bug, tive que reimplementar o middleware tranformando ele em um plugin(mas isso ficou até bem melhor de manipular), mesmo assim ainda está ocorrendo o erro no console, talvez seja uma imagem que não está vindo.

Responsáveis pela home, favor verificar isso.

"Entrar com Google" Error: redirect_uri_mismatch

he redirect URI in the request, https://newschoolbr-dev.herokuapp.com/login, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/889053794643-qu89df6ei5u2sncnfmedi39m2ascih3k.apps.googleusercontent.com?project=889053794643

Atualmente após o término do curso não é possivel refazer o mesmo.

Precisamos ter a possibilidade de rever o curso quantas vezes necessário, mesmo após sua conclusão.

Alguns layout ficam desconfigurado após voltar o histórico do navegador

Segue vídeo demonstrando o problema.

A tela também de contribua não está scrollando no iPhone.

Meu certificado contém algumas informações inválidas e Share não funciona

Tipo: Funcionalidade

Descrição: Carga horária está com 0 na duração, período não está com range de/até, titulo Newschool incorreto trocar para New School e compartilhamento nas redes sociais está indo com o link errado(colocar url corrente).

Mensagem:

Fluxo: login > home > meus certificados > selecionar certificado

Imagens:

Erro 404 na busca do curso por slug

Ao informar senha inválida retorna erro 404

Ao informar a senha incorreta, está apresentando um toaster de 404 error e também a mensagem de usuário/senha inválido, sendo que deveria apresentar somente a mensagem de usuário/senha inválido.

A request está retornando 404 com user not found.

🔥 modelo - Issue BUG

Essa issue tem como objetivo padronizar a criação de issues para bugs relacionados ao front-end.

Itens que se encaixam: erros de integração, layout, funcionalidades e performance

Itens Obrigatórios = 🔸
Itens Opcionais = 🔹

Modelo

🔸Tipo: [ Integração, layout, funcionalidade, performance ]

🔸Descrição: Descrição resumida do erro

🔸Mensagem Error: mensagem exibida no console ex. Status Code: 404 Not Found

🔸Fluxo: ex. login > home(após o carregamento) é lançado o erro.

🔹Endpoint e Response: /certificates , { status : "404", message : "certificate is not found" }

🔹Imagens: anexar imagens..

Ajustar cor dos labels e-mail e senha na tela do login ao focar o campo

Ao focar no campo e-mail ou senha, o label fica quase invisível por causa da cor do texto e da cor do fundo.

Paginas retornando 404 ao finalizar o questionario do curso

Após responde o questionário do curso o app volta para a pagina do video, onde os mesmos nao carregam, ao apertar na seta de voltar no video o app retorna a tele de iniciar o curso e ao clicar na seta para retornar a tela Home o app retorna aos videos da aula, onde ja se encontra com os videos sem carregar, e as paginas Home, Perfil, meus cursos e Certificados

Share button descolado

Ao tentar recuperar senha é emitido Network Error

🔸Tipo: Funcionalidade

🔸Descrição: Ao tentar recuperar senha é emitido Network Error

🔸Mensagem Error: Network Error

🔸Fluxo: tela de login > recuperar senha > colocar e-mail e clicar em redefinir senha.

🔹Imagens:

🔹Endpoint e Response:

Barra de rolagem dupla

Tipo: Layout

Descrição: Após a entrada no site newschoolapp.com.br pelo navegador (computador) ele fica com uma barra dupla de rolagem

fluxo: Login -> pagina home

Botão compartilhar está compartilhando a URL errada.

Tipo: Funcionalidade

Descrição: Botão compartilhar está compartilhando a URL errada e com a tag #missaonewschoolapp, precisa removerhashtag e compartilhar o curso corretamente.

Fluxo: tela de login > home > clicar em compartilhar no curso / tela de login > home > meus certificados > certificado > ompartilhar certificado.

🔹Imagens:

Armazenamento do token e informações do usuário

Olá comunidade, quero abrir uma discussão pra chegarmos a um ponto no quesito de armazenamento das informações retornadas no login. token e outros dados. Atualmente eu sempre salvei dados que precisam ficar um tempo no lado do client no local storage. Gostaria de alternativas mais seguras caso essa não seja e também pra o token, expiração e etc.

Erro 500 no refresh_token

Captura do client_credentials token

Existe um pequeno gargalo da implementação do fluxo de busca de client_credentials

como está atualmente: Ao entrar no cadastro, automaticamente o componente já realiza uma requisição para captura do token para cadastrar um usuário. Esse fluxo pode impactar negativamente a experiência do usuário visto que uma vez que a resposta da busca do token for mal sucedida o usuário já será redirecionado para o login pois receberá 401 ou será mostrado o snackbar, sem ao menos o usuário ter executado nenhuma ação.

Solução: Modificar a busca do token para ser feita no momento da submissão de cadastro. Isso serve pra todas as telas que seguirem esse padrão.

Identificação do usuario na página "meu perfil" e "outros"

Quando o usuario vai na pagina "meu perfil" ele é identificado como Aluno e quando ele vai na pagina "outros" ele é identificado como Visitante

Estilo no card de cursos.

Melhorias no layout dos cursos em home

Componente share:

O componente de compartilhamento esta dividindo espaço com o titulo do card, quando o correto seria ele ficar por cima, talvez um position: absolute resolva,

Espaço entre o nome e o titulo

Essas duas linhas estão muito juntas, precisa afastar um pouco um do outro, talvez um space letter para afastar um pouco uma letra da outra possa ser analisado.

Erro ao iniciar um curso que já foi iniciado e também não está indo para o step correto.