Skip to content

Latest commit

 

History

History
122 lines (80 loc) · 3.55 KB

README.md

File metadata and controls

122 lines (80 loc) · 3.55 KB
Raw

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 🏆

  • 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:

Screenshot 2023-08-22 at 9 53 17 PM

Mobile:

Screenshot 2023-08-24 at 4 01 04 AM

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