react-editor Tailwind Templates

React Editor

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

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

Top categories

Loading Svelte Themes