Skip to content

Code editor built using React and Tailwind CSS. Note: there is a limit to 50 per day.

License

Notifications You must be signed in to change notification settings

el634dev/react-editor

Repository files navigation

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

About

Code editor built using React and Tailwind CSS. Note: there is a limit to 50 per day.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published