https://github.com/el634dev/react-editor
Code editor built using React and Tailwind CSS. Note: there is a limit to 50 per day.
https://github.com/el634dev/react-editor
api axios-react monaco-editor reactjs tailwind-css
Last synced: about 2 months ago
JSON representation
Code editor built using React and Tailwind CSS. Note: there is a limit to 50 per day.
- Host: GitHub
- URL: https://github.com/el634dev/react-editor
- Owner: el634dev
- License: mit
- Created: 2022-09-04T22:16:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T15:35:41.000Z (over 2 years ago)
- Last Synced: 2025-03-25T11:28:41.335Z (over 1 year ago)
- Topics: api, axios-react, monaco-editor, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://react-editor-beta.vercel.app/
- Size: 4.65 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CodeBuddy - Compile and Execute code in 40+ languages
> ⚡️ A code editor that compiles and runs your code on the web in your browser.
> Read this blog for more in-depth: Build A Code IDE with React
## Features:
- Compile and execute code in 40+ programming languages
- Switch themes from a list of available themes
- Outputs code user creates
## Languages and Tools used
VSCode
React
JavaScript
Tailwind CSS
Monaco Editor - React
Judge0
Rapid API
Axios
## Installation and Setup
- git clone `https://github.com/el634dev/react-code-editor.git`
- `npm install`
- A sample `.env.sample` file is given, Register on RapidAPI Get your API keys.
- Create a `.env` file.
- Add the API Keys in the `.env` file
- `npm start` to run the project.
## Extra Features
1. Add more languages
2. User login, authentication and registration (Firebase Auth)
3. User Profile Page
4. Save code functionality (Firestore - use Slug based approach)
5. Share code functionality
## Setup If You Did Not Clone
1. Create a new folder on your computer
2. After go into your terminal or terminal on your IDE of choice and run `npx create-react-app app-name`
3. Run `npm install` for packages
4. Run `npm run dev` to see your project in your browser
5. Create your own code editor
## License Note
You can use the code just say where it came from
## Deployment
I choose to use Vercel to deploy this project