https://github.com/renyzeraa/feedback-widget-web

widget para enviar relatórios de bugs, idéias ou outros assuntos, feito em React.js
https://github.com/renyzeraa/feedback-widget-web

axios react tailwindcss typescript vite

Last synced: about 2 months ago
JSON representation

widget para enviar relatórios de bugs, idéias ou outros assuntos, feito em React.js

Host: GitHub
URL: https://github.com/renyzeraa/feedback-widget-web
Owner: renyzeraa
Created: 2025-02-26T00:02:19.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-04-12T02:27:26.000Z (about 1 year ago)
Last Synced: 2025-06-03T05:38:11.051Z (about 1 year ago)
Topics: axios, react, tailwindcss, typescript, vite
Language: TypeScript
Homepage:
Size: 271 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Widget de Feedback 🛠️

Um widget moderno e acessível para coletar feedback dos usuários com funcionalidade de captura de tela.

[Repositório do Backend](https://github.com/renyzeraa/feedback-widget-server)

## Funcionalidades 🌟

- Três tipos de feedback: Problemas, Ideias e Outros
- Funcionalidade de captura de tela
- Componentes acessíveis usando Headless UI
- Interface moderna com Tailwind CSS
- Suporte completo à navegação por teclado
- Integração com servidor via API REST
- Design responsivo

## Tecnologias Utilizadas 🛠️

- **Frontend:**
- React
- TypeScript
- Vite
- Tailwind CSS
- Headless UI
- Phosphor Icons
- Axios

## Começando 🚀

1. Clone o repositório:

```bash
git clone https://github.com/seu-usuario/feedback-widget.git
cd feedback-widget
```

2. Instale as dependências:

```bash
npm install
```

3. Crie um arquivo [`.env.local`](.env.local):

```env
VITE_API_URL=http://localhost:3333
```

4. Inicie o servidor de desenvolvimento:

```bash
npm run dev
```

## Como Usar 💡

O widget aparece como um botão no canto inferior direito da sua aplicação. Ao clicar, abre um popover com três opções de feedback:

- **Problema** - Reportar bugs ou problemas
- **Ideia** - Compartilhar sugestões de melhorias
- **Outro** - Feedback geral ou comentários

Os usuários podem:

- Selecionar o tipo de feedback
- Escrever seu feedback
- Tirar uma screenshot (opcional)
- Enviar o feedback

## Acessibilidade ♿

- Navegação completa por teclado
- Labels e roles ARIA
- Gerenciamento de foco
- Compatível com leitores de tela
- Conformidade com contraste de cores

## Compilando para Produção 🏗️

```bash
npm run build
```

Os arquivos compilados estarão no diretório `dist`.

## Preview

![Image](https://github.com/user-attachments/assets/16ecc189-45f0-4107-a605-3fafea2a9843)

## Design

Confira o design no Figma:
[Design do Widget de Feedback](https://www.figma.com/design/ee974ILjtkbjMESqN92k7y/Feedback-Widget--Community-?m=auto&t=GAYQOPyo2NdWiy5t-6)

---

Se você tiver alguma dúvida ou sugestão, entre em contato e sinta-se à vontade para contribuir !