/feedback-widget

Esse é um widget que pode ser usado em qualquer app para coletar feedback (de bug, sugestão ou outros).

Primary LanguageTypeScript

NLW Return 2022

🚀 NLW Return Impulse 2022

Esse projeto foi desenvolvido durante o evento NLW Return Impulse 2022 da RocketSeat. O objetivo do evento é desenvolver uma aplicação completa, desde o back-end em Node.js, front-end para web em ReactJS, front-end mobile em React Native.

App online para testar

App online: feedback-widget-arianebrandao.vercel.app. Front-end hospedado na Vercel, back-end hospedado no Render e banco de dados hospedado no Supabase.

Projeto Feedback Widget

Esse é um widget que pode ser usado em qualquer app para coletar feedback (de bug, sugestão ou outros). O usuário escolhe o tipo de feedback, digita o comentário e pode clicar no botão que tira a screenshot automaticamente, então o feedback é enviado para o e-mail configurado no app e salvo no banco de dados.

Layout

Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.

Tecnologias Back-End

Esse projeto foi desenvolvido com as seguintes tecnologias no backend:

Tecnologias Front-End

Esse projeto foi desenvolvido com as seguintes tecnologias no frontend:

Como executar

  • Clone o repositório
  • Para iniciar o server, entre na pasta cd server
  • Coloque seus dados do Mailtrap em .env.example e renomeie para .env
  • Configure os arquivos server/prisma/schema.prisma e server/prisma/migrations/migration_lock.toml para usar o provider sqlite
  • Instale as dependências com npm install
  • Crie as tabelas do banco de dados com npx prisma migrate deploy
  • Inicie o servidor com npm run dev (deve rodar em localhost:3333)
  • Para iniciar o app, entre na pasta cd web
  • Configure o arquivo .env.example e renomeie para .env
  • Instale as dependências com npm install
  • Inicie o app com npm run dev (deve rodar em localhost:3000)

Testes

O projeto deve passar em alguns testes unitários:

  • should be able to submit a feedback
  • should not be able to submit a feedback without a type
  • should not be able to submit a feedback without a comment
  • should not be able to submit a feedback with an invalid screenshot
  • should be able to createFeedbackSpy
  • should be able to sendMailSpy

Para rodar os testes, use o comando npm run test dentro do diretório server.

To do

  • Tema light/dark
  • Melhorar HTML/CSS do e-mail
  • Dashboard de feedbacks
    • Autenticação (Firebase/OAuth)
  • Validação de campos/erros

Licença

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