Favourz1 / Codepen-clone

This repository replicates the codepen editor with ReactJs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Codepen Clone

This projects aims at re-creating the popular Codepen with all of its functionality

Find it live here

The project allows users to:

  • Write HTML, CSS and Javascipt Code
  • See the live results in the results pane
  • View and log elements or variables to the console terminal, which can be activated by the Run Console button in the bottom right of the application
  • Toggle the view of the application and alter where the editor/results will be positioned
  • Toggle dark mode
  • Saves code in localstorage on the occassion of a slow network.

πŸ“ Table of Contents

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You will need node version 16.16.0 and npm version 8.11.0 or higher to lauch the project.

Refer to NodeJs website for more instructions.

Installing

Step by step process to get the project running on your local machine after the prerequistes have been completed.

Open your command terminal in the root directory of the project.

Clone the project

  git clone https://github.com/Favourz1/Codepen-clone.git

Go to the project directory

  cd Codepen-clone

Installing dependencies

npm install

Starting local server

npm run codepen-clone

The devlopment files are stored in the ./src/ folder.

πŸ–₯ Sceenshots

Project demo


β›“ Features

  • Light/dark mode toggle
  • Live previews
  • Fullscreen mode
  • Console terminal
  • Cross platform
  • Uses local Storage

⛏️ Built With

  • JavaScript
  • React
  • CSS3
  • HTML5
  • Vite
  • Bootstrap
  • NPM
  • NodeJS
  • Visual Studio Code

License

MIT License

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Hi, I'm Favour Okoh! πŸ‘‹

πŸš€ About Me

I'm a passionate and innovative Software Engineer with strong collaboration skills.

My portfolio on:

LinkedIn

Reach me on:

Twitter

About

This repository replicates the codepen editor with ReactJs


Languages

Language:JavaScript 67.9%Language:CSS 30.5%Language:HTML 1.6%