{"id":30701393,"url":"https://github.com/mathrb22/let-me-ask-web","last_synced_at":"2026-04-05T08:34:21.956Z","repository":{"id":303903603,"uuid":"1017095654","full_name":"mathrb22/let-me-ask-web","owner":"mathrb22","description":"Frontend React + TypeScript para sistema inteligente de Q\u0026A com respostas automáticas por IA, transcrição de áudio em tempo real e busca semântica para automação de transmissões ao vivo.","archived":false,"fork":false,"pushed_at":"2025-07-22T16:07:42.000Z","size":1913,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-02T13:56:36.594Z","etag":null,"topics":["ai","audio-processing","audio-transcription","frontend","gemini-api","let-me-ask","nlw","nlw-agents","qa-system","react-query","reactjs","rocketseat","rocketseat-nlw","semantic-search","semantic-vector-evaluation","shadcn-ui","tailwindcss","typescript","vite","webapp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathrb22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-10T02:54:15.000Z","updated_at":"2025-07-22T16:07:46.000Z","dependencies_parsed_at":"2025-07-10T11:34:56.753Z","dependency_job_id":"0c5fc120-1d82-4e7a-9a0c-ebd246b618c5","html_url":"https://github.com/mathrb22/let-me-ask-web","commit_stats":null,"previous_names":["mathrb22/let-me-ask-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mathrb22/let-me-ask-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Flet-me-ask-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Flet-me-ask-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Flet-me-ask-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Flet-me-ask-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathrb22","download_url":"https://codeload.github.com/mathrb22/let-me-ask-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Flet-me-ask-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31430009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T08:13:15.228Z","status":"ssl_error","status_checked_at":"2026-04-05T08:13:11.839Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","audio-processing","audio-transcription","frontend","gemini-api","let-me-ask","nlw","nlw-agents","qa-system","react-query","reactjs","rocketseat","rocketseat-nlw","semantic-search","semantic-vector-evaluation","shadcn-ui","tailwindcss","typescript","vite","webapp"],"created_at":"2025-09-02T13:47:20.489Z","updated_at":"2026-04-05T08:34:21.937Z","avatar_url":"https://github.com/mathrb22.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"Let me ask - Logo\" src=\".github/letmeask-logo-white.svg\" width=\"180\"/\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://github.com/mathrb22\"\u003e\n      \u003cimg alt=\"Made by mathrb22\" src=\"https://img.shields.io/badge/made%20by-mathrb22-yellow\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/mathrb22/let-me-ask-web/commits/main\"\u003e\n      \u003cimg alt=\"GitHub Last Commit\" src=\"https://img.shields.io/github/last-commit/mathrb22/let-me-ask-web\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/mathrb22/let-me-ask-web/issues\"\u003e\n      \u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/mathrb22/let-me-ask-web\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/mathrb22/let-me-ask-web/pulls\"\u003e\n      \u003cimg alt=\"Pull Requests Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/mathrb22/let-me-ask-web/blob/main/LICENSE\"\u003e\n      \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/let-me-ask-web\"\u003e\n   \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c/br\u003e\n\u003cdiv align=\"center\"\u003e\n\n[**Sobre**](#-sobre) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Objetivo**](#-objetivo) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Tecnologias e ferramentas**](#-tecnologias-e-ferramentas) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Features**](#-features) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Instalação e execução**](#-instalação-e-execução) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Integração com o Backend**](#-integração-com-o-backend) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Como contribuir**](#-como-contribuir) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Licença**](#-licença)\n\n\u003c/div\u003e\n\n## 📃 Sobre\n\n\u003cimg alt=\"Let me ask - Home\" src=\".github/screenshots/home-letmeask.png\" width=\"100%\"/\u003e \u003c/br\u003e\n\nEste repositório contém o código-fonte do **frontend** do projeto **Let me ask**, desenvolvido durante a **NLW Agents (Next Level Week)** da [**Rocketseat**](https://github.com/Rocketseat).\n\nEste projeto integra a **API do Google Gemini**, **busca semântica** e **processamento de dados vetoriais** para fornecer respostas automáticas às perguntas dos participantes durante transmissões ao vivo. O sistema funciona da seguinte forma: com base na transcrição em tempo real da apresentação, a IA processa e armazena vetores semânticos dos assuntos abordados. Quando um usuário faz uma pergunta na sala, o sistema utiliza busca semântica para verificar se essa questão já foi respondida pelo apresentador na transcrição e, caso positivo, fornece automaticamente a resposta contextualizada.\n\n\u003cimg alt=\"Let me ask - Room page\" src=\".github/screenshots/room-letmeask.png\" width=\"100%\"/\u003e \u003c/br\u003e\n\n## 🎯 Objetivo\n\nO objetivo principal do **Let me ask** é de criar uma solução inteligente para transmissões ao vivo, onde perguntas dos participantes serão respondidas automaticamente através de inteligência artificial. O sistema utiliza:\n\n- **Transcrição em tempo real** de transmissões ao vivo\n- **Processamento de dados vetoriais** para armazenar contexto semântico\n- **Busca semântica** para identificar se perguntas já foram respondidas\n\nA aplicação foi desenvolvida com o intuito de aprimorar os conhecimentos em React, Vite, TypeScript, Tailwind CSS, React Query e React Router, além de integrar tecnologias modernas de IA e processamento de linguagem natural.\n\n## 🚀 Tecnologias e ferramentas\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"100\"\u003e\n      \u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"60\" src=\"https://user-images.githubusercontent.com/25181517/183897015-94a058a6-b86e-4e42-a37f-bf92061753e5.png\" alt=\"React\" title=\"React\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"100\"\u003e\n      \u003ca href=\"https://vitejs.dev/\"\u003e\n      \u003cimg width=\"60\" src=\"https://vitejs.dev/logo.svg\" alt=\"Vite\" title=\"Vite\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"100\"\u003e\n      \u003ca href=\"https://www.typescriptlang.org/\"\u003e\n      \u003cimg width=\"60\" src=\"https://user-images.githubusercontent.com/25181517/183890598-19a0ac2d-e88a-4005-a8df-1ee36782fde1.png\" alt=\"TypeScript\" title=\"TypeScript\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"120\"\u003e\n      \u003ca href=\"https://tailwindcss.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"70\" src=\"https://user-images.githubusercontent.com/25181517/202896760-337261ed-ee92-4979-84c4-d4b829c7355d.png\" alt=\"Tailwind CSS\" title=\"Tailwind CSS\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"100\"\u003e\n      \u003ca href=\"https://tanstack.com/query\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"60\" src=\"https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/react_query.png\" alt=\"React Query\" title=\"React Query\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003ca href=\"https://reactrouter.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"60\" src=\"https://reactrouter.com/favicon-light.png\" alt=\"React Router\" title=\"React Router\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003ca href=\"https://lucide.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"60\" src=\"https://lucide.dev/logo.dark.svg\" alt=\"Lucide React\" title=\"Lucide React\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003ca href=\"https://ui.shadcn.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n      \u003cimg width=\"60\" src=\"https://ui.shadcn.com/favicon.ico\" alt=\"shadcn/ui\" title=\"shadcn/ui\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eReact\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://vitejs.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eVite\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.typescriptlang.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eTypeScript\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://tailwindcss.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eTailwind CSS\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://tanstack.com/query\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eReact Query\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://reactrouter.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eReact Router\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://lucide.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eLucide React\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ui.shadcn.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cspan\u003eshadcn/ui\u003c/span\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## ✨ Features\n\nhttps://github.com/user-attachments/assets/ae41d2c9-62df-4606-875d-d86f6366ce3b\n\n### 🏠 **Sistema de Salas**\n\n✅ **Criação e listagem de salas:** interface para criação, navegação e listagem de salas disponíveis via API.\u003cbr/\u003e\n\n### ❓ **Sistema de Perguntas**\n\n✅ **Formulário intuitivo:** interface para envio de perguntas com validação avançada e contador de caracteres.\u003cbr/\u003e\n✅ **Perguntas e respostas:** exibição organizada de perguntas com respostas geradas por IA em tempo real.\u003cbr/\u003e\n✅ **Feedback visual:** indicadores de status durante a geração de respostas pela IA.\u003cbr/\u003e\n\n### 🎙️ **Gravação de Áudio Inteligente**\n\n✅ **Modal de gravação:** interface simplificada em modal para gravação de áudio, substituindo a página dedicada.\u003cbr/\u003e\n✅ **Controles avançados:** botões para iniciar, pausar, retomar e finalizar gravação com feedback visual.\u003cbr/\u003e\n✅ **Gravação em segundo plano:** possibilidade de gravar áudio enquanto visualiza as perguntas e respostas.\u003cbr/\u003e\n✅ **Timer em tempo real:** cronômetro exibindo o tempo de gravação no formato _HH:MM:SS_.\u003cbr/\u003e\n✅ **Upload automático:** captura e upload de áudio em tempo real com divisão em chunks de 10 segundos.\u003cbr/\u003e\n\n\u003cimg alt=\"Record audio\" src=\".github/screenshots/record-letmeask.png\" width=\"100%\"/\u003e\n\n\u003cimg alt=\"Recording audio\" src=\".github/screenshots/recording-letmeask.png\" width=\"100%\"/\u003e \u003c/br\u003e\n\n### 🤖 **Integração com IA**\n\n✅ **Respostas automáticas:** respostas contextualmente relevantes via **Google Gemini API**.\u003cbr/\u003e\n✅ **Transcrição em tempo real:** processamento de áudio para texto via backend.\u003cbr/\u003e\n✅ **Processamento vetorial:** armazenamento de vetores semânticos _(embeddings)_ para busca eficiente.\u003cbr/\u003e\n✅ **Busca semântica:** identificação inteligente de respostas já fornecidas anteriormente.\u003cbr/\u003e\n\n### 🎨 **Interface e Experiência do Usuário**\n\nA aplicação conta com uma **interface moderna e responsiva**, incluindo:\n\n✅ **Design responsivo:** interface adaptável para diferentes tamanhos de tela.\u003cbr/\u003e\n✅ **Estados de carregamento:** exibição de skeleton loading durante o carregamento das salas para melhor experiência do usuário.\u003cbr/\u003e\n✅ **Estados vazios:** componentes de No-content quando não há salas ou perguntas cadastradas \u003cbr/\u003e\n✅ **Gravação de áudio simplificada** através de modal integrado à página da sala com exibição de tempo de gravação e botões de controle de pausa, retomada e finalização\u003cbr/\u003e\n✅ **Tema claro/escuro** com alternância suave e persistência de preferência\u003cbr/\u003e\n✅ **Navegação otimizada** com header fixo e botão de rolagem automática para o topo da página\u003cbr/\u003e\n\n### 📱 **Melhorias Mobile e Responsividade**\n\n✅ **Diálogos adaptáveis:** modais que se transformam em _bottom sheets_ no mobile para melhor usabilidade\u003cbr/\u003e\n✅ **FABs (Floating Action Buttons):** botões flutuantes para ações principais no mobile (criação de salas e perguntas)\u003cbr/\u003e\n✅ **Barra de status de gravação:** indicador fixo no mobile mostrando status da gravação em tempo real\u003cbr/\u003e\n✅ **Busca de salas:** campo de pesquisa com _debounce_ para filtrar salas\u003cbr/\u003e\n\n\nhttps://github.com/user-attachments/assets/bf38a187-6d79-4e6b-9db1-75c598ddd57e\n\n\n## 🔧 Instalação e execução\n\nPara baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o [**Git**](https://git-scm.com/).\nCom o Git instalado, em seu terminal execute o seguinte comando:\n\n```bash\ngit clone https://github.com/mathrb22/let-me-ask-web.git\n```\n\nPara instalar as dependências e executar o projeto terá que ter instalado em sua máquina o [**node.js**](https://nodejs.org/en/), que vem acompanhado do npm. Instale as dependências usando o comando abaixo:\n\n```bash\nnpm install\n```\n\nExecutar o projeto:\n\n```bash\nnpm run dev\n```\n\nA aplicação estará disponível em http://localhost:5173. Você poderá acessá-la a partir do seu navegador.\n\n## 🔗 Integração com o Backend\n\nEsta aplicação frontend requer uma API backend para funcionar completamente. O servidor está configurado para rodar em `http://localhost:3333` e é **essencial** para o funcionamento das principais funcionalidades.\n\n### 📦 Repositório do backend\n\nO código-fonte do backend está disponível em um repositório separado:\n\n🔗 **[Let me ask - Server (API)](https://github.com/mathrb22/let-me-ask-server)**\n\n### ⚙️ Funcionalidades do backend\n\nO backend é responsável por:\n\n- 🏠 **Gerenciamento de salas**: criação, listagem e gerenciamento de salas de Q\u0026A\n- ❓ **Sistema de perguntas**: armazenamento e processamento de perguntas dos usuários\n- 🎙️ **Processamento de áudio**: captura, processamento e transcrição de áudio em tempo real\n- 🤖 **Integração com IA**: conexão com _Google Gemini API_ para geração de respostas\n- 🔍 **Busca semântica**: algoritmo de busca vetorial para identificar contexto\n- 📊 **Processamento vetorial**: geração e armazenamento de vetores semânticos _(embeddings)_\n\n### 🚀 Como executar o backend\n\nPara ter acesso completo às funcionalidades do sistema, é necessário configurar e executar o servidor backend.\n\n📋 **Siga o guia completo de instalação e configuração:**\n\n🔗 **[Instalação e execução da API](https://github.com/mathrb22/let-me-ask-server?tab=readme-ov-file#-instala%C3%A7%C3%A3o-e-execu%C3%A7%C3%A3o)**\n\n## 💡 Como contribuir\n\n- Faça um **_fork_** desse repositório;\n- Crie um **branch** para a sua feature: `git checkout -b minha-feature`;\n- Faça um **commit** com suas alterações: `git commit -m 'feat: Minha nova feature'`;\n- Faça um **push** para o seu branch: `git push origin minha-feature`;\n- Faça um **pull request** com sua feature;\n\nPull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma _**issue**_ ou entre em contato comigo.\n\n## 📝 Licença\n\n\u003ca href=\"https://github.com/mathrb22/let-me-ask-web/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/let-me-ask-web\"\u003e\n\u003c/a\u003e\n\nEsse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.\n\n---\n\nDesenvolvido com 💚 por \u003ca href=\"https://github.com/mathrb22/\"\u003emathrb22\u003c/a\u003e\n\n\u003cdiv style=\"display: flex;\"\u003e\n  \u003ca href=\"https://www.linkedin.com/in/matheus-ribeiro-dev\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" style=\"margin-right: 2vw\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"mailto:math.ribeiro.dev@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" alt=\"Gmail\" style=\"margin-right: 2vw\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Flet-me-ask-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathrb22%2Flet-me-ask-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Flet-me-ask-web/lists"}