Uma aplicação React moderna para descobrir carreiras em tecnologia através de um questionário interativo. Projeto atualizado com as tecnologias mais recentes do ecossistema React.
- React 19.1.1 - Nova versão com React Compiler e melhorias de performance
- Vite 7.1.2 - Build tool de última geração com otimizações avançadas
- ESLint 9.15 - Linter moderno com flat config
- CSS Puro - Estilização moderna sem dependências externas
- Gemini AI API - Geração de conteúdo personalizado com IA
- GitHub API - Integração com perfis do GitHub
- ✅ Questionário interativo com 30 perguntas otimizadas
- ✅ Integração com GitHub para personalização de experiência
- ✅ 7 possíveis resultados de carreira em TI
- ✅ Geração de plano de estudos personalizado com IA
- ✅ Simulação realista de um dia de trabalho na área
- ✅ Interface responsiva e acessível
- ✅ Animações suaves e transições modernas
- ✅ Performance otimizada com React 19
- Node.js 18+ (recomendado 20+)
- npm ou yarn ou pnpm
- API Key do Gemini (opcional, para funcionalidades de IA)
-
Clone o repositório ou extraia os arquivos
-
Instale as dependências:
npm install- (Opcional) Configure a API Key do Gemini:
- Obtenha uma API Key em Google AI Studio
- Edite o arquivo
src/components/ResultsScreen.jsx - Substitua
const apiKey = ""pela sua chave
npm run devA aplicação estará disponível em http://localhost:3000
npm run buildnpm run previewnpm run lintsrc/
├── components/
│ ├── StartScreen.jsx # Tela inicial com input do GitHub
│ ├── QuestionScreen.jsx # Tela das perguntas
│ ├── ResultsScreen.jsx # Tela de resultados com IA
│ └── UserInfoHeader.jsx # Header com info do usuário
├── data/
│ └── questionsData.js # Perguntas e dados dos resultados
├── App.jsx # Componente principal
├── main.jsx # Entry point
└── index.css # Estilos globais em CSS puro
- Desenvolvimento Front-End - Criação de interfaces visuais e UX
- Desenvolvimento Back-End - Lógica e infraestrutura de servidores
- Ciência de Dados & IA - Análise de dados e machine learning
- Segurança da Informação - Proteção de sistemas e dados
- Infraestrutura & DevOps - Automação e operações em nuvem
- Desenvolvimento de Jogos - Criação de experiências interativas
- Design de UI/UX - Experiência e interface do usuário
O projeto utiliza a API mais recente do Gemini para gerar conteúdo personalizado:
- Plano de Estudos: Roteiro detalhado baseado no resultado
- Dia na Vida: Narrativa realista simulando um dia de trabalho
A API Key agora é gerenciada automaticamente através do arquivo .env:
# No arquivo .env
VITE_GEMINI_API_KEY=sua_chave_aquiFuncionalidades da integração:
- ✅ Carregamento seguro da API Key via variáveis de ambiente
- ✅ Validação automática da chave antes das requisições
- ✅ Fallback gracioso se a chave não estiver configurada
- ✅ Retry automático em caso de falhas temporárias
- ✅ URLs configuráveis para diferentes ambientes
Esta versão aproveita as melhorias do React 19:
- Performance otimizada com o novo React Compiler
- Hooks otimizados para melhor gerenciamento de estado
- Renderização mais eficiente com menos re-renders
- Melhor experiência de desenvolvimento com HMR aprimorado
- Build super rápido com otimizações avançadas
- Code splitting inteligente para carregamento eficiente
- Hot Module Replacement instantâneo
- Tree shaking otimizado para bundles menores
- Flat Config - Nova configuração mais limpa
- Regras atualizadas para React 19
- Performance melhorada no linting
- Suporte completo para JSX moderno
Edite o arquivo src/data/questionsData.js para:
- Adicionar novas perguntas ao array
- Modificar sistema de pontuação
- Criar novos resultados personalizados
Todos os estilos estão em CSS puro moderno:
- Custom Properties para temas
- Container Queries para responsividade
- CSS Grid e Flexbox modernos
- Animações com
transitionetransform
Interface otimizada para todos os dispositivos:
- 📱 Mobile First (320px+)
- 📱 Tablet (768px+)
- 💻 Desktop (1024px+)
- 🖥️ Large Desktop (1440px+)
npm run dev- Servidor de desenvolvimento com HMRnpm run build- Build otimizado para produçãonpm run preview- Preview local da buildnpm run lint- Linting com ESLint 9
- ⚡ React Compiler (experimental) para otimizações automáticas
- 🚀 Concurrent Features para melhor UX
- 📦 useMemo otimizado para cálculos pesados
- 🔄 useCallback eficiente para event handlers
- 🗜️ Compressão avançada com Rollup 4
- 🎯 Code splitting automático por rotas
- 📊 Bundle analysis integrado
- ⚡ Lightning CSS para processamento rápido
- 🔬 React Compiler - Pronto para ativar quando estável
- 🚀 Server Components - Estrutura preparada
- 📡 Streaming - APIs preparadas para SSR futuro
- Fork o projeto
- Crie uma branch:
git checkout -b feature/nova-funcionalidade - Commit:
git commit -m 'Adiciona nova funcionalidade' - Push:
git push origin feature/nova-funcionalidade - Abra um Pull Request
StartScreen (entrada + GitHub)
↓
QuestionScreen (quiz interativo)
↓
ResultsScreen (resultado + IA)
- useState para estado local
- useCallback para funções otimizadas
- useMemo para cálculos caros
Este projeto está sob a licença MIT - veja o arquivo LICENSE para detalhes.
# Verifique conectividade
curl -I https://api.github.com# Teste sua API key
curl -H "Content-Type: application/json" \
-d '{"contents":[{"parts":[{"text":"Hello"}]}]}' \
"https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=YOUR_KEY"# Limpe completamente
rm -rf node_modules package-lock.json dist
npm install
npm run build- Verifique o React DevTools Profiler
- Use
npm run buildpara análise de bundle - Ative React Compiler para otimizações automáticas
- 🐛 Bugs: Abra uma issue no repositório
- 💡 Features: Discussões na aba Discussions
- 📚 Docs: Consulte a documentação do React 19 e Vite 7
- 🎓 Aprendizado: Confira os recursos oficiais das tecnologias
Desenvolvido com ❤️ usando as tecnologias mais modernas do ecossistema React.