Comparador de Planos de Ferramentas de IA

Uma aplicação web para comparar planos de preços de ferramentas populares de IA para desenvolvedores. Os usuários podem filtrar dinamicamente os planos com base em orçamento, tamanho da equipe e preferências de cobrança para encontrar o melhor assistente de código com IA para suas necessidades.

Screenshots

Tela principal mostrando as melhores recomendações e controles de orçamento

Visualização detalhada dos planos disponíveis para cada ferramenta

Funcionalidades

• Slider de Orçamento Dinâmico: Filtre planos por orçamento mensal ($0 - $200)
• Calculadora de Tamanho da Equipe: Ajuste os preços com base no tamanho da equipe
• Toggle de Cobrança: Alterne entre preços mensais e anuais
• Abas de Categoria: Visualize ferramentas recomendadas ou alternativas
• Resumo de Recomendações: Obtenha recomendações personalizadas baseadas nas suas seleções
• Suporte a Modo Escuro: Alternador de tema integrado para visualização confortável
• Filtragem em Tempo Real: Atualização instantânea dos planos conforme você ajusta os parâmetros

Ferramentas Comparadas

• GitHub Copilot
• Cursor
• Claude Code
• Windsurf
• Z.ai

Stack Tecnológico

Client

• React - Biblioteca UI
• TypeScript - Segurança de tipos
• Vite - Ferramenta de build e servidor de desenvolvimento
• Tailwind CSS - Estilização utility-first
• Radix UI - Primitivos de componentes acessíveis
• Vitest - Testes unitários
• Testing Library - Testes de componentes

Server

• Express - Framework web
• TypeScript - Segurança de tipos
• CORS - Cross-origin resource sharing

Estrutura do Projeto

project/
├── client/              # Aplicação frontend React
│   ├── src/
│   │   ├── components/  # Componentes UI reutilizáveis
│   │   ├── lib/         # Funções utilitárias
│   │   ├── types/       # Definições de tipos TypeScript
│   │   └── test/        # Utilitários de teste
│   └── package.json
├── server/              # API backend Express
│   ├── src/
│   │   ├── types/       # Definições de tipos TypeScript
│   │   └── app.ts       # Arquivo principal do servidor
│   ├── data/            # Arquivos de dados estáticos
│   └── package.json
├── tasks/               # Arquivos de gerenciamento do projeto
├── template/            # Arquivos de template
└── .claude/             # Configuração do Claude Code

Pré-requisitos

• Node.js - Versão 18 ou superior
• npm ou yarn - Gerenciador de pacotes

Instalação

1. Clone o repositório:

git clone https://github.com/danielVFS/testing-cursor.git
cd testing-cursor

2. Instale as dependências do client:

cd client
npm install

3. Instale as dependências do server:

cd ../server
npm install

Executando a Aplicação

Modo de Desenvolvimento

1. Inicie o servidor (a partir do diretório server/):

npm run dev

O servidor será executado em http://localhost:3001

2. Inicie o client (a partir do diretório client/):

npm run dev

O client será executado em http://localhost:5173

3. Abra seu navegador e navegue até http://localhost:5173

Variáveis de Ambiente

Crie um arquivo .env no diretório client se precisar customizar a URL da API:

VITE_API_URL=http://localhost:3001

Desenvolvimento

Comandos do Client

npm run dev        # Inicia o servidor de desenvolvimento
npm run build      # Build para produção
npm run preview    # Visualiza o build de produção
npm run lint       # Executa o ESLint
npm test           # Executa os testes
npm run test:ui    # Executa os testes com UI

Comandos do Server

npm run dev        # Inicia o servidor de desenvolvimento com hot reload
npm run build      # Compila TypeScript para JavaScript
npm start          # Inicia o servidor de produção
npm run type-check # Verifica os tipos TypeScript

Testes

O projeto utiliza Vitest e Testing Library para testes.

Execute os testes a partir do diretório client:

npm test           # Executa os testes em modo watch
npm run test:ui    # Abre a UI de testes

Build para Produção

Client

cd client
npm run build

O output do build estará em client/dist/

Server

cd server
npm run build

O output do build estará em server/dist/

Padrões de Código

Este projeto segue padrões de código rigorosos:

• Todo código é escrito em inglês
• TypeScript para segurança de tipos
• Componentes funcionais para React
• camelCase para variáveis e funções
• PascalCase para componentes e interfaces
• kebab-case para arquivos e diretórios
• Cobertura abrangente de testes
• Não utilizar o tipo any
• Validação com ESLint e TypeScript

Para padrões detalhados de codificação, veja o diretório .claude/rules/.

Contribuindo

1. Faça um fork do repositório
2. Crie uma branch de feature (git checkout -b feature/funcionalidade-incrivel)
3. Commit suas mudanças (git commit -m 'Adiciona funcionalidade incrível')
4. Push para a branch (git push origin feature/funcionalidade-incrivel)
5. Abra um Pull Request

Licença

Este projeto está licenciado sob a Licença ISC.

Autor

Daniel

• GitHub: @danielVFS