React Code Playground is an interactive coding platform that allows users to write, edit, and execute code snippets in real-time. The project is built using React.js, CodeMirror, Pusher, Node.js, Express.js, with styling handled by CSS and HTML.
- Real-time Code Editing: Users can write and edit code with instant updates.
- Live Execution: Code snippets are executed in real-time for immediate feedback.
- Collaborative Coding: Utilizes Pusher for real-time collaboration on code projects.
- Node.js Backend: Employs Node.js and Express.js for a robust backend to handle code execution and collaboration.
- User-friendly Interface: Designed with a responsive and intuitive user interface.
-
Frontend:
React.jsCodeMirrorCSSHTML
-
Backend:
Node.jsExpress.jsPusher
-
Clone the Repository:
-
Install Dependencies:
-
Start the Development Servers:
npm install
npm start
The application will be accessible at http://localhost:3000 by default.
- Configure Pusher:
- Sign up for a Pusher account and obtain API credentials.
- Update the Pusher configuration in
server/index.jswith your credentials.
- Enter or paste code into the code editor.
- Experience real-time code updates and execution.
- Collaborate with others by sharing the unique project link.
src/: Contains the frontend source code.server/: Houses the Node.js backend server for code execution and collaboration.public/: Static assets and HTML template.
Contributions are welcome! If you'd like to contribute to the React Code Playground, please follow the standard GitHub flow:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Special thanks to the developers of React.js, CodeMirror, and Pusher for their valuable tools.
Feel free to customize this README to better suit your project's specific details.