NLW Return é um sistema de feedbacks full-stack desenvolvido durante a NLW Return da Rocketseat (8ª edição do Next Level Week, 2022). O projeto consiste em um widget que pode ser integrado a qualquer aplicação web para coletar feedbacks dos usuários.
O usuário pode:
- Selecionar o tipo do feedback (problema, ideia ou outro)
- Capturar uma screenshot automática da tela com um clique
- Enviar o feedback com descrição e a imagem capturada
- O feedback é recebido por e-mail pelo administrador do sistema
A Next Level Week (NLW) é um evento gratuito e intensivo promovido pela Rocketseat para a comunidade dev brasileira. Na sua 8ª edição — NLW Return — o foco foi construir um widget de feedbacks aplicável a qualquer projeto web.
A trilha Impulse foi dividida em três frentes:
| Frente | Tecnologia Principal |
|---|---|
| Back-End | Node.js + TypeScript + Prisma |
| Front-End | React + TypeScript + Tailwind + Vite |
| Mobile | React Native (não incluído neste repo) |
As aulas foram ministradas por Diego Fernandes e Rodrigo Gonçalves.
Nota: A parte mobile não foi implementada neste repositório, pois as dependências necessárias exigiram recursos além do disponível na época. O back-end e o front-end estão completos e funcionais.
| Tecnologia | Versão | Finalidade |
|---|---|---|
| React.js | ^18.0.0 | Biblioteca de UI |
| TypeScript | ^4.6.3 | Tipagem estática |
| Vite | ^2.9.7 | Bundler e servidor de dev |
| Tailwind CSS | ^3.0.24 | Estilização utilitária |
| Styled-Components | ^5.3.5 | CSS-in-JS complementar |
| html2canvas | ^1.4.1 | Captura de screenshot |
| Axios | ^0.27.2 | Requisições HTTP |
| Phosphor React | ^1.4.1 | Biblioteca de ícones |
| Headless UI | ^1.6.1 | Componentes acessíveis |
| Tecnologia | Finalidade |
|---|---|
| Node.js | Runtime JavaScript |
| Express | Framework HTTP |
| TypeScript | Tipagem estática |
| Prisma | ORM para banco de dados |
| Nodemailer | Envio de e-mails |
| Jest | Testes unitários |
# Clonar o repositório
git clone https://github.com/degabrielofi/NLWReturn
cd NLWReturn/Web
# Instalar dependências
npm install
# Iniciar em modo de desenvolvimento
npm run devcd NLWReturn/Server
# Instalar dependências
npm install
# Configurar variáveis de ambiente (criar .env baseado no .env.example)
# Rodar migrations do banco
npx prisma migrate dev
# Iniciar o servidor
npm run devNLWReturn/
├── Web/ # Front-end React + Vite
│ ├── src/
│ │ ├── components/ # Componentes do widget
│ │ └── ...
│ └── package.json
├── Server/ # Back-end Node.js + Express
│ ├── src/
│ │ ├── routes/ # Rotas da API
│ │ ├── services/ # Lógica de negócio
│ │ └── ...
│ └── package.json
└── GitHub/ # Assets do repositório
O layout original do projeto pode ser acessado no Figma:
- Feedback Widget — Figma Community (É necessário ter conta no Figma para acessar)