🌟 Wandi-Code 🌟

INICIAR

Design baseado

Neste projeto, você aprenderá a construir um editor de código que suporta múltiplas linguagens diretamente no navegador! Utilizaremos a biblioteca Monaco React para o editor de código, Chakra UI para estilizar nossa aplicação e a Piston API para executar o código.

🚀 Funcionalidades

• ✍️ Monaco React Editor: Um componente de editor de código poderoso para React.
• 🎨 Chakra UI: Uma biblioteca de componentes simples, modular e acessível que oferece os blocos de construção para criar suas aplicações React com rapidez.
• ⚙️ Piston API: Uma API rica em recursos para executar código em várias linguagens.

📖 Introdução

Bem-vindo ao Wandi-Code! Este projeto foi desenvolvido para ensinar como construir um editor de código no navegador que suporta múltiplas linguagens de programação. Utilizamos três tecnologias principais para alcançar isso:

✍️ Monaco React Editor

O Monaco Editor é o editor de código usado no Visual Studio Code, um dos editores mais populares e poderosos do mercado. Ao integrá-lo com React usando a biblioteca @monaco-editor/react, conseguimos trazer toda a funcionalidade e flexibilidade do VS Code diretamente para nossa aplicação web. Isso inclui destaque de sintaxe, auto-completar, verificação de erros e muito mais, proporcionando uma experiência de codificação rica e eficiente.

🎨 Chakra UI

Para a interface do usuário, escolhemos o Chakra UI. Essa biblioteca de componentes para React é conhecida por sua simplicidade e facilidade de uso. O Chakra UI permite que você crie interfaces acessíveis e responsivas rapidamente, com um sistema de temas que facilita a personalização. Além disso, ele vem com uma excelente documentação e uma comunidade ativa, tornando-o uma escolha sólida para estilizar nossa aplicação.

⚙️ Piston API

Para executar o código escrito no editor, utilizamos a Piston API. Esta API permite a execução de código em várias linguagens de programação, oferecendo um ambiente seguro e isolado. Com a Piston API, podemos enviar o código do usuário, selecionar a linguagem desejada e obter os resultados da execução em tempo real. Isso adiciona uma funcionalidade crítica ao nosso editor, permitindo que os usuários testem e validem seu código diretamente no navegador.

Instalar e iniciar

Navegue até o diretório do projeto:

cd wandi-code

Instale as dependências:

npm install

Inicie o servidor de desenvolvimento:

npm run dev

Sobre Compilador online Piston API