Web 🕸️ Simulator - CodePen clone 🧬

A responsive CodePen clone built using React. The @uiw/react-codemirror package is reponsible for building & customising the code editors. The app is divided into two sections, editor & simulator containers. The editor container consists of 3 editors each for HTML, CSS & JS. The simulator is an iframe view, where the code from the editors, compile down to render website inside it.

Deployment Link 🔗

Table of Contents

• Features
• Installation
• Usage
• Frontend Libraries
• Prerequisites
• Screenshots
• Contributing
• License

Features 🏆

• Write and edit HTML, CSS, and JavaScript code in a live editor.
• See the live preview of your code output.
• Responsive design for both desktop and mobile devices.
• Theme for the app is inspired by MacOS.
• Editors have 3 toolbar buttons - Reset, Save & Expand/Collapse.
• 🔴 Reset on click, reveals a dropdown, from where the user can clear the editor or reset it to the default template.
• 🟡 Save is used to save the contents of the editors as respective(.html/.css/.js) files.
• 🟢 Expand/Collapse as the name suggests, expands or collapses the editor.
• Contents of the editors are synced to local storage 😮 to prevent data loss on page reload.
• Each Re-render happens every 250ms to efficiently render content instead of re-rendering on each keystroke on the editors.
• Cool animations 🎭 and effects make the user experience awesome.

Installation 💿

👉🏼 Clone this repository to your local machine:

git clone https://github.com/chiraag918/codepen-clone.git

👉🏼 Navigate to the project directory:

cd codepen-clone

👉🏼 Install the required dependencies:

npm install

👉🏼 Build using:

npm run build

Usage 🍽️

👉🏼 Start the app using:

npm start

Open your browser and visit http://localhost:3000 to access the CodePen clone.

Frontend Libraries 🖼️

React JS(UI), @uiw/react-codemirror, sass, npm

Prerequisites

For local developments, the application requires NodeJS (version 20.5.0). To make sure this is available on the local machine, try running the following command:

$ node --version
v20.5.0

Screenshots 📸

Desktop:

Mobile:

Contributing 🙏🏼

Contributions to improve the application are welcome. To contribute, follow these steps:

• Fork the repository on GitHub.
• Create a new branch with a descriptive name for your feature or bug fix.
• Make your changes and commit them with a clear message.
• Push your branch to your forked repository.
• Open a pull request to the main repository, explaining the changes you made.

License

MIT