Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/prateekshuklaps0/codewizard-ai-code-editor

A versatile code editor that uses AI to run, debug, analyze and convert code across multiple programming languages. Import from GitHub and customize your coding environment with ease.
https://github.com/prateekshuklaps0/codewizard-ai-code-editor

ai chakra-ui code codeeditor node-js open-api react typescipt

Last synced: 23 days ago
JSON representation

A versatile code editor that uses AI to run, debug, analyze and convert code across multiple programming languages. Import from GitHub and customize your coding environment with ease.

Awesome Lists containing this project

README

        

# CodeWizard

#### CodeWizard is a full-stack web-based code editor that leverages AI to enhance your coding experience. It allows users to write, run, debug, and convert code across multiple programming languages. Additionally, it offers code quality checks and integration with GitHub for easy code importing. Built with React, TypeScript, Node.js, and Chakra UI, CodeWizard provides a responsive, user-friendly interface that supports a variety of devices.

## **Key Features** :

- **AI-Powered Code Execution :** Seamlessly run code in any programming language.
- **Cross-Language Code Conversion :** Convert code from one language to another with ease.
- **Intelligent Debugging :** Automatically debug code and receive explanations for the fixes.
- **Comprehensive Code Quality Analysis :** Get a detailed quality assessment of your code based on various parameters.
- **GitHub Code Importing :** Easily import and manage code from your GitHub repositories.
- **Customizable User Interface :** Tailor the editor's appearance with multiple themes and adjustable font sizes.
- **Responsive Design :** Fully responsive and compatible with all devices.

## Tech Stacks Used :

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Chakra](https://img.shields.io/badge/chakra-%234ED1C5.svg?style=for-the-badge&logo=chakraui&logoColor=white)
![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

## **Key Entities** :

- **User Input Editor :** The main area where users write or import their code.
- **Output Editor :** Displays the output generated by AI.
- **Action Buttons :** Includes options for running, converting, debugging code, and checking code quality.
- **GitHub Integration :** Allows users to import code directly from their GitHub repositories and download files.
- **Customization Options :** Offers theme selection, font size adjustment, and clipboard copying.

## **Installation & Getting Started** :

1. Clone repository: **`git clone https://github.com/prateekshuklaps0/CodeWizard-AI-Code-Converter`**
2. Navigate to the Front-End directory: **`cd Front-End`**
3. Create `.env` file in the root directory and add :

```
VITE_API_KEY = 𝘠𝘰𝘶𝘳_𝘎𝘰𝘰𝘨𝘭𝘦_𝘎𝘦𝘮𝘪𝘯𝘪_𝘈𝘱𝘪_𝘒𝘦𝘺
GITHUB_TOKEN = 𝘠𝘰𝘶𝘳_𝘎𝘪𝘵𝘩𝘶𝘣_𝘈𝘤𝘤𝘦𝘴𝘴_𝘛𝘰𝘬𝘦𝘯
```

4. Install dependencies: **`npm install`**
5. Start the front-end server: **`npm run dev`**


Dynamic Code Execution

![Dynamic Code Execution](./Images/Run_Code.png)


Effortless GitHub Code Integration

![Effortless GitHub Code Integration](./Images/Import.png)


Seamless Debugging Insights

![Seamless Debugging Insights](./Images/Debug.png)


AI-Powered Code Evaluation

![AI-Powered Code Evaluation](./Images/Checking_Quality_1.png)
![AI-Powered Code Evaluation](./Images/Checking_Quality_2.png)


Instant Code Language Translation

![Instant Code Language Translation](./Images/Convert.png)


Multi-Programming Language Support

![Multi-Programming Language Support](./Images/Languages.png)


Various Themes Selection Options

![Various Themes Selection Options](./Images/Themes.png)