Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theanujdev/code-playground-frontend
Code Playground Frontend built with xternjs terminal and monoco editor.
https://github.com/theanujdev/code-playground-frontend
code-editor code-playground frontend monoco-editor react reactjs socket-io theanujdev typescript usecontext webapp xtern
Last synced: 2 months ago
JSON representation
Code Playground Frontend built with xternjs terminal and monoco editor.
- Host: GitHub
- URL: https://github.com/theanujdev/code-playground-frontend
- Owner: theanujdev
- License: mit
- Created: 2021-06-09T17:43:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-08T12:29:46.000Z (over 2 years ago)
- Last Synced: 2024-08-17T08:05:10.175Z (5 months ago)
- Topics: code-editor, code-playground, frontend, monoco-editor, react, reactjs, socket-io, theanujdev, typescript, usecontext, webapp, xtern
- Language: TypeScript
- Homepage:
- Size: 10.8 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Code Playground (Frontend)
## Overview
This project provides a real-time cloud-based code sync and editing and website developing platform where you can create any code file. It will provide linting in editor and a basic terminal. Edit HTML, CSS and JS and preview your website in built-in web-renderer.
## Tech Stack
**Client:** React, Typescript, Monoco-editor, Socket.io-client, Xtermjs, React reflex
**Server:** Node, Express, Typescript, Mongoose, Cookie-parser, Socketio
## Features
- Multiple resizable windows
- Featured code editor
- Create, update, delete files
- Realtime cloud sync of code
- Preview webpage
- Built-in terminal with syntax-highlighting
- Flexible and auto resizable components and clean user interface
## Run Locally
- Clone the project
```bash
git clone https://github.com/theanujdev/code-playground-frontend.git
```
- Go to the project directory
```bash
cd code-playground-frontend
```
- Install dependencies
```bash
npm install
```
- Update constants in _src/config/index.ts_ file :
`SERVER_URL`, `SOCKET_URL`
(which are going to be same in most cases)
- Start the server
```bash
npm start
```
> **Note:** You need to run [Code Playground Backend](https://github.com/theanujdev/code-playground-backend) server in the background.
## Optimizations
Code is refactored and project structure is optimized for scalability. Along with react components and pages, context hook for global state and _debounce_ function have also been used.
## Screenshots
## Feedback
If you have any feedback, please reach out at [@theanujdev](https://twitter.com/theanujdev)
## Authors
- [@theanujdev](https://www.github.com/theanujdev)
## License
[MIT](https://choosealicense.com/licenses/mit/)