{"id":22125379,"url":"https://github.com/elisiomassaqui/wandi-code1111","last_synced_at":"2026-04-10T15:53:13.069Z","repository":{"id":245332262,"uuid":"817940139","full_name":"elisioMassaqui/wandi-code1111","owner":"elisioMassaqui","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-29T23:07:43.000Z","size":306,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T13:24:14.687Z","etag":null,"topics":["chakra-ui","design","monaco-editor","nodejs","piston-api","react","react-icons","vite"],"latest_commit_sha":null,"homepage":"https://wandi-code.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elisioMassaqui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-20T19:02:50.000Z","updated_at":"2024-07-04T15:03:20.000Z","dependencies_parsed_at":"2024-12-01T16:20:18.834Z","dependency_job_id":"fa6da307-1c34-4ad8-9558-f58087dc991d","html_url":"https://github.com/elisioMassaqui/wandi-code1111","commit_stats":null,"previous_names":["elisiomassaqui/wandi-code","elisiomassaqui/wandi-code1111"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisioMassaqui%2Fwandi-code1111","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisioMassaqui%2Fwandi-code1111/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisioMassaqui%2Fwandi-code1111/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elisioMassaqui%2Fwandi-code1111/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elisioMassaqui","download_url":"https://codeload.github.com/elisioMassaqui/wandi-code1111/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245232651,"owners_count":20581698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","design","monaco-editor","nodejs","piston-api","react","react-icons","vite"],"created_at":"2024-12-01T16:19:59.299Z","updated_at":"2025-12-30T23:28:08.302Z","avatar_url":"https://github.com/elisioMassaqui.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌟 Wandi-Code 🌟\n\n## [INICIAR](https://wandi-code.vercel.app/)\n\n## [Design baseado](https://wandi-code-design.vercel.app/)\n\n\u003e **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.**\n\n![Splash Screen](https://github.com/elisioMassaqui/wandi-code/blob/master/Anota%C3%A7%C3%A3o%202024-06-24%20120112.png)\n\n\n## 🚀 Funcionalidades\n\n- ✍️ **Monaco React Editor**: Um componente de editor de código poderoso para React.\n- 🎨 **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.\n- ⚙️ **Piston API**: Uma API rica em recursos para executar código em várias linguagens.\n\n## 📖 Introdução\n\nBem-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:\n\n### ✍️ Monaco React Editor\n\nO 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.\n\n### 🎨 Chakra UI\n\nPara 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.\n\n### ⚙️ Piston API\n\nPara 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.\n\n### Instalar e iniciar\n\nNavegue até o diretório do projeto:\n\n```sh\ncd wandi-code\n```\n\nInstale as dependências:\n\n```sh\nnpm install\n```\n\nInicie o servidor de desenvolvimento:\n\n```sh\nnpm run dev\n```\n\n[Sobre Compilador online Piston API](https://github.com/elisioMassaqui/wandi-code/blob/master/sobre%20compilar%20online.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felisiomassaqui%2Fwandi-code1111","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felisiomassaqui%2Fwandi-code1111","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felisiomassaqui%2Fwandi-code1111/lists"}