André.Menu
← Voltar ao blog

19/08/2025

Construi um “Windows 11” no navegador com React + TypeScript + Vite

Se você já se perguntou até onde dá para levar um setup minimalista com React + TypeScript + Vite, este artigo é para você.

Além de mostrar como configurar o ambiente, vou compartilhar a série que estou desenvolvendo: simular um desktop Windows 11 direto no navegador, com direito a Chrome, VSCode e Terminal interativo. 

Setup inicial com React, TypeScript e Vite

O ponto de partida é simples: usar o template oficial do Vite para React com TypeScript. Ele já vem com suporte a HMR (Hot Module Replacement) e integrações com ESLint.

Atualmente, você pode escolher entre dois plugins:

Se for para produção, recomendo expandir as regras do ESLint para aproveitar as análises de tipo do TypeScript. Isso ajuda a manter o código saudável e evitar dores de cabeça no futuro.

Exemplo de configuração:

Parte 1 — Arquitetura do projeto e setup

  • Objetivo: simular um desktop Windows 11.

  • Ferramentas: React + TS + Vite + SCSS.

  • Organização: componentes em src/components/.

  • Boas práticas:

    • usar tokens de design em SCSS,

    • manter componentes enxutos,

    • evitar dependências desnecessárias.

  • Desafio inicial: lidar com layout absoluto estilo desktop e altura relativa (svh).

Parte 2 — Sistema de janelas (drag, resize, maximizar/minimizar)

Aqui entra a mágica: um Window Manager em React.

  • Drag pela titlebar.

  • Resize com handles.

  • Estados controlados (maximized, minimized, pos, size).

  • Boas práticas: definir limites mínimos de tamanho e separar frame da app.

Parte 3 — Simulando Chrome e VSCode

  • ChromeSim → iframe full-screen (width: 100%; height: 100svh).

  • VSCodeSim → preview vivo dentro de um iframe, com minimap ajustável.

  • Dica de sizing: usar 100svh ou position: absolute; inset: 0 para ocupar todo o espaço.

Parte 4 — Terminal interativo

No TerminalSim.tsx, o desafio foi simular um npm install realista:

  • Logs progressivos (Resolving, Downloading, Installing).

  • Warnings de pacotes deprecated e conflitos de peerDependencies.

  • Resumo final com audited e vulnerabilities.

  • Flag especial: npm install --fail-peer para disparar um erro ERESOLVE.

Parte 5 — Qualidade, acessibilidade e roadmap

  • Qualidade: linters para evitar funções longas e complexas.

  • Acessibilidade: roles e navegação por teclado nos botões da janela.

  • Performance: updates imutáveis, cuidado com blur e sombras pesadas.

  • Próximos passos:

    • múltiplas janelas com z-index,

    • persistência de posição/tamanho,

    • context menu,

    • atalhos de teclado.

Regras extras para React

Além do ESLint básico, você pode turbinar o setup com:

Assim, você ganha lint rules específicas para React e React DOM, mantendo ainda mais consistência.

Conclusão

Esse projeto não é só um exercício de frontend: é um laboratório para explorar arquitetura, performance e boas práticas no ecossistema React.

Se você curtiu a ideia ou quer contribuir, abra uma issue ou envie um PR. 🚀
A comunidade é sempre bem-vinda!