Um simulador interativo de Code Review e testes técnicos focado na identificação e depuração de erros clássicos (bugs) em aplicações React e Next.js. O projeto foi arquitetado sob os princípios de Clean Architecture e projetado para treinar engenheiros de software para etapas de Live Coding de processos seletivos.
👉 Acesse o simulador no ar: Live Coding Bug Quiz
Siga os passos abaixo para clonar e rodar o simulador em sua máquina de desenvolvimento:
- Clone o repositório:
git clone https://github.com/franferrazdev/live-coding-bug-quiz.git
cd live-coding-bug-quiz- Instale as dependências:
pnpm install- Inicie o servidor de desenvolvimento:
pnpm devAbra http://localhost:3000 no seu navegador para ver o resultado.
- Execução de Testes:
- Testes Unitários (Jest):
pnpm testoupnpm test:watch - Testes End-to-End (Playwright):
npx playwright test
Apresentação das diretrizes do simulado: quantidade de questões, imutabilidade e o funcionamento do botão de pular.
Componentização mobile-first estruturada em tons de ardósia e estilo VS Code (Night Owl), rodando com cronômetro atômico e estados via Zustand.
Mapeamento de acertos e diagnóstico de senioridade baseado no aproveitamento total do candidato.
- Framework & Linguagem: Next.js 14 (App Router) + React 18.3 + TypeScript 5
- Gerenciamento de Estado: Zustand v5 (Máquina de estados atômica controlando o progresso e o timer)
- Estilização & Componentes: Tailwind CSS v3 + Base UI React + Shadcn Core + Lucide Icons
- Esteira de Testes: Jest (Unitários) + React Testing Library (Integração) + Playwright (End-to-End)
O simulado gerencia estritamente 15 questões estruturadas, divididas igualmente e distribuídas obrigatoriamente em uma ordem cronológica crescente de aprendizado:
- Questões 01 a 05: Nível Fácil (Foco em desenvolvedores Júnior).
- Questões 06 a 10: Nível Médio (Foco em desenvolvedores Pleno).
- Questões 11 a 15: Nível Difícil (Foco em desenvolvedores Sênior).
A cada nova inicialização ou reinício do simulado, o Zustand executa um algoritmo de embaralhação (shuffle) isolado estritamente dentro das fronteiras de cada nível de senioridade. As perguntas mudam de sequência de forma dinâmica, mas a curva crescente de aprendizado nunca é quebrada.
- Trava de Clique: Assim que o usuário seleciona uma alternativa, o estado é congelado imediatamente (
RN-01), impossibilitando cliques adicionais ou alterações de escolha. - Feedback & Explicação: A interface sinaliza o veredito visual (Verde para correto / Vermelho para incorreto) e injeta na tela o painel de explicação técnica analítica detalhando o motivo do bug.
- Gestão de Pulos: O botão "Pular Questão" fica disponível apenas enquanto a pergunta atual não for respondida. Questões puladas avançam o estado imediatamente e não contabilizam pontos, sem gerar penalidades.
A construção deste simulador trouxe aprendizados profundos de arquitetura e confiabilidade de código:
- Gerenciamento Avançado de Estados Dinâmicos: A modelagem da máquina de estados com o Zustand v5 permitiu criar um fluxo de execução linear rígido (curva de aprendizado crescente), lidando de forma reativa com travas de clique assíncronas e temporizadores sem sofrer com re-renderizações desnecessárias.
- Estratégias Avançadas de Testes Automatizados: Unificar testes de integração usando React Testing Library com fluxos completos de reprodução de bugs com Playwright E2E expandiu significamente minha visão sobre como blindar interfaces comerciais contra quebras visuais regressivas.
- Estruturação de Regras de Negócio Isoladas: Implementar algoritmos de embaralhamento (shuffling) aplicados exclusivamente dentro de bloco de senioridade isolados consolidou práticas sólidas de programação funcional no ecossistema React.
Contribuições fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito valorizada.
- Faça um Fork do projeto.
- Crie uma branch para sua Feature (
git checkout -b feature/name-feature-branch). - Faça o commit de suas alterações (
git commit -m "feat: add..."). - Envia para a branch remota (
git push origin feature/name-feature-branch). - Abra um Pull Request.
A high-performance interactive tech-test simulator designed to train and evaluate software engineers' capabilities in identifying and fixing common programming errors (bugs) during real-time Live Coding interviews.
👉 Acesse o simulador no ar: Live Coding Bug Quiz
Follow these steps to clone and run the technical simulator on your local workspace:
-
Clone the repository:
git clone https://github.com/franferrazdev/live-coding-bug-quiz.git cd live-coding-bug-quiz -
Install dependencies:
pnpm install
-
Run the development environment:
pnpm dev
Open http://localhost:3000 inside your browser.
-
Executing Tests:
- Unit Tests (Jest):
pnpm test - End-to-End Tests (Playwright):
npx playwright test
- Unit Tests (Jest):
- Core Engine: Next.js 14 (App Router) + React 18.3 + TypeScript 5
- State Management: Zustand v5 (Decoupled Global State Store)
- Styling & Components: Tailwind CSS v3 + Base UI + Shadcn Core
- Test Suite: Jest + React Testing Library + Playwright E2E
- Progressive Curve Balance: The simulator runs exactly 15 structured questions, sequentially distributed across balanced difficulty layers: Questions 1-5 (Junior), 6-10 (Mid/Pleno), and 11-15 (Senior).
- Isolated Block Shuffling: Whenever a new quiz session triggers, the Zustand store runs an isolated random shuffle algorithms strictly inside each difficulty tier boundaries. The question sequence changes dynamically while maintaining the architectural learning curve stable.
- Answer Immutability Lock: Once an alternative is chosen, the engine blocks additional selection events (
RN-01). The interface color states immediately compute success (Green) or failure (Red), rendering a detailed code-review block explaining the bug's root cause.
Building this environment provided meaningful engineering insights:
- Dynamic State Architectures: Modeling structural constraints with Zustand v5 streamlined handling async component locks and atomic interval timers without triggering unexpected UI lagging or layout updates.
- Comprehensive Verification Strategies: Intertwining React Testing Library with multi-browser validation via Playwright enhanced my technical awareness for isolating real-world edge case bug patterns.
- Functional Boundary Implementation: Writing tailored shuffling routines isolated inside algorithmic seniority structures strengthened my logical mastery of core functional programming paradigms.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contribution you make is greatly appreciated.
- Fork the Project.
- Create your Feature Branch (
git checkout -b feature/name-feature-branch). - Commit your Changes (
git commit -m 'feat: add...'). - Push to the Branch (
git push origin feature/name-feature-branch). - Open a Pull Request.