rajeshds20/code-ball

A Web Based Code Editor for building websites using html, css and js. Built with React, Firebase, Material UI and Monaco Editor

Code Ball

Code Ball is a collaborative online code editor that allows users to write HTML, CSS, and JavaScript code in real-time. Users can share their code snippets with others, run the code, and see the output instantly.

Features

• Collaborative Coding: Multiple users can collaborate on the same code snippet in real-time.

• Run Code: Execute the written code and view the output in the embedded iframe.

• Save Code: Save your code snippets for future reference or sharing.

• Share Code: Generate a unique link to share your code with others.

• Dark Mode: Toggle between light and dark mode for a comfortable coding experience.

• Output Log: View console logs and output from the executed code.

Getting Started

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/rajeshds20/code-ball.git

2. Move to the project directory

   cd code-ball

3. Install the dependencies

   npm install

4. Update the environment variables

5. Update the firebase configuration

6. Start the development server

   npm run dev

7. Start working on it...

Acknowledgments

• The project uses React for the Frontend.
• Firebase is used for real-time data synchronization.
• Monaco Editor is used for Customizable Code Editor Component.
• react-split is used for resizable split panes.

Follow https://github.com/rajeshds20 for more such projects Rajesh - https://linkedin.com/in/devangamsajjarajesh Star the repo for the support - https://github.com/rajeshds20