Skip to content

BrunoRafaSilva/PuxaPapoWeb

BranchesTags

Repository files navigation

💬 PuxaPapo Web

PuxaPapo Logo

PuxaPapo Site

PuxaPapo API

Idiomas / Languages / Idiomas: 🇧🇷 Português | 🇺🇸 English | 🇪🇸 Español

Não sabe como puxar papo? Eu te ajudo!

PuxaPapo Screenshot 1 PuxaPapo Screenshot 2

Uma aplicação web inteligente que gera mensagens personalizadas para iniciar conversas com base em interesses, horários e tom de comunicação.

React TypeScript Vite Material-UI TailwindCSS

Demo · Reportar Bug · Solicitar Feature

📋 Índice

🎯 Sobre o Projeto

PuxaPapo Web é uma aplicação moderna e intuitiva que ajuda usuários a gerar mensagens personalizadas para iniciar conversas. Seja para convidar amigos para um churrasco, marcar um happy hour ou simplesmente quebrar o gelo, a aplicação utiliza inteligência artificial para criar mensagens adequadas ao contexto.

Por que usar o PuxaPapo?

  • 🎨 Personalização Total: Escolha interesses, horários e o tom da mensagem
  • 🌍 Multilíngue: Suporte para Português, Inglês e Espanhol
  • 🚀 Interface Moderna: Design responsivo e intuitivo com Material-UI e Tailwind
  • ⚡ Rápido e Eficiente: Geração instantânea de mensagens via API
  • 📱 Responsivo: Funciona perfeitamente em desktop, tablet e mobile

✨ Funcionalidades

🎯 Seleção de Interesses

Escolha múltiplos interesses para personalizar sua mensagem:

  • ⚽ Futebol
  • 🍖 Churrasco
  • 🍺 Cerveja
  • 🏖️ Praia
  • 🎬 Cinema
  • 🎵 Música
  • 🎮 Jogos
  • ☕ Café

⏰ Períodos Disponíveis

Defina quando você quer se encontrar:

  • 📅 Qualquer dia da semana
  • 💼 Segunda a Sexta
  • 🎉 Fim de Semana
  • 🌙 À Noite
  • 🏖️ Na Folga

🎭 Tons de Mensagem

Escolha o estilo da sua mensagem:

  • 😄 Engraçado e Descontraído
  • 🤣 Engraçado
  • 👔 Formal
  • 📻 Anúncio de Rádio

🌐 Idiomas Suportados

  • 🇧🇷 Português (Brasil)
  • 🇺🇸 Inglês (EUA)
  • 🇪🇸 Espanhol (Espanha)

🔔 Funcionalidades Adicionais

  • ✅ Monitoramento de status da API em tempo real
  • 📝 Preview da mensagem gerada em Markdown
  • 🎨 Tema claro otimizado para leitura
  • ⚠️ Validações e feedbacks visuais
  • 🔄 Atualização automática do status da API

🛠 Tecnologias

Este projeto foi construído com as seguintes tecnologias:

Core

UI/UX

Internacionalização

Markdown & Formatação

Roteamento

Ferramentas de Desenvolvimento

🚀 Começando

Pré-requisitos

Antes de começar, você precisará ter instalado em sua máquina:

  • Node.js (versão 18.x ou superior)
  • npm ou yarn
  • Git
# Verifique as versões instaladas
node --version
npm --version
git --version

Instalação

  1. Clone o repositório
git clone https://github.com/BrunoRafaSilva/PuxaPapoWeb.git
  1. Acesse a pasta do projeto
cd PuxaPapoWeb
  1. Instale as dependências
npm install

Executando o Projeto

Modo Desenvolvimento

npm run dev

A aplicação estará disponível em http://localhost:5173

Build para Produção

npm run build

Os arquivos otimizados serão gerados na pasta dist/

Preview da Build

npm run preview

Visualize a build de produção localmente

📁 Estrutura do Projeto

PuxaPapoWeb/
├── public/
│   └── robots.txt              # Configuração para crawlers
├── src/
│   ├── assets/                 # Imagens e recursos estáticos
│   ├── Components/             # Componentes reutilizáveis
│   │   ├── ApiStatus.tsx       # Indicador de status da API
│   │   ├── ChipSelect.tsx      # Seletor de chips customizado
│   │   ├── Header.tsx          # Cabeçalho da aplicação
│   │   ├── LabelOption.tsx     # Label para opções
│   │   ├── ResultModal.tsx     # Modal de resultado
│   │   └── Footer.tsx          # Rodapé com links sociais
│   ├── Constants/              # Constantes e configurações
│   │   ├── ConstantLabelsOptions.tsx
│   │   ├── ConstantLanguageOptions.tsx
│   │   └── ConstantValidationErrors.tsx
│   ├── i18n/                   # Internacionalização
│   │   ├── config.ts           # Configuração do i18next
│   │   └── locales/            # Arquivos de tradução
│   │       ├── en-US.json
│   │       ├── es-ES.json
│   │       └── pt-BR.json
│   ├── pages/                  # Páginas da aplicação
│   │   ├── Index.tsx           # Página principal
│   │   └── NotFound.tsx        # Página 404
│   ├── Services/               # Serviços e integrações
│   │   └── ApiConnectionService.tsx
│   ├── App.tsx                 # Componente raiz
│   ├── App.css                 # Estilos globais do app
│   ├── index.css               # Estilos globais base
│   └── main.tsx                # Ponto de entrada
├── eslint.config.js            # Configuração do ESLint
├── index.html                  # Template HTML
├── package.json                # Dependências e scripts
├── postcss.config.js           # Configuração PostCSS
├── tailwind.config.js          # Configuração Tailwind
├── tsconfig.json               # Configuração TypeScript
├── tsconfig.app.json           # Config TypeScript (app)
├── tsconfig.node.json          # Config TypeScript (node)
└── vite.config.ts              # Configuração Vite

📜 Scripts Disponíveis

Script Descrição
npm run dev Inicia o servidor de desenvolvimento
npm run build Gera build de produção otimizado
npm run preview Preview da build de produção
npm run lint Executa o linter no código

🌐 Internacionalização

A aplicação suporta três idiomas:

Estrutura dos Arquivos de Tradução

{
  "header": {
    "title": "PuxaPapo",
    "subtitle1": "Não sabe como puxar papo? Eu te ajudo!",
    "subtitle2": "Só preencher os campos abaixo!"
  },
  "form": {
    "interests": { ... },
    "period": { ... },
    "tone": { ... }
  },
  "modal": {
    "title": "Mensagem Gerada",
    "closeButton": "Fechar"
  }
}

Adicionando Novos Idiomas

  1. Crie um novo arquivo JSON em src/i18n/locales/
  2. Adicione o idioma em src/i18n/config.ts
  3. Adicione a bandeira em src/Constants/ConstantLanguageOptions.tsx

🔌 API

A aplicação se conecta a uma API para gerar as mensagens. O serviço está implementado em src/Services/ApiConnectionService.tsx.

Endpoints

Health Check

GET / health;
Response: {
  status: "online" | "offline";
}

Gerar Mensagem

POST /generate
Body: {
  interest: string[],
  period: string,
  tone: string,
  language: string
}
Response: string (Markdown)

Configurando a URL da API

Edite o arquivo src/Services/ApiConnectionService.tsx:

const API_BASE_URL = "https://sua-api.com";

🤝 Contribuindo

Contribuições são sempre bem-vindas! Se você quer contribuir com o projeto:

  1. Fork o projeto
  2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
  3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
  4. Push para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

Padrões de Código

  • Use TypeScript para type safety
  • Siga os padrões do ESLint configurados
  • Documente componentes complexos
  • Escreva mensagens de commit descritivas

📄 Licença

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

👤 Contato

Bruno Silva

⬆ Voltar ao topo

Feito com ❤️ por Bruno Silva

About

puxa-papo-web.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages