https://github.com/elisiomassaqui/wandi-code1111
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.
https://github.com/elisiomassaqui/wandi-code1111
chakra-ui design monaco-editor nodejs piston-api react react-icons vite
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/elisiomassaqui/wandi-code1111
- Owner: elisioMassaqui
- Created: 2024-06-20T19:02:50.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-29T23:07:43.000Z (almost 2 years ago)
- Last Synced: 2025-01-29T13:24:14.687Z (over 1 year ago)
- Topics: chakra-ui, design, monaco-editor, nodejs, piston-api, react, react-icons, vite
- Language: JavaScript
- Homepage: https://wandi-code.vercel.app/
- Size: 299 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 Wandi-Code 🌟
## [INICIAR](https://wandi-code.vercel.app/)
## [Design baseado](https://wandi-code-design.vercel.app/)
> **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:
```sh
cd wandi-code
```
Instale as dependências:
```sh
npm install
```
Inicie o servidor de desenvolvimento:
```sh
npm run dev
```
[Sobre Compilador online Piston API](https://github.com/elisioMassaqui/wandi-code/blob/master/sobre%20compilar%20online.md)