Mini Project: CodePen Clone

Date: 30 - Sep - 2020

Screenshot

• 

Tech-Stack

• React
• codemirror
• react-codemirror2
• react-icons

Deploy

• http://codepen.tinspham.info/

Plan Of Action

• Initial Project
• Install dependencies
• HTML Setup
• Editor Setup
• CSS
• CodePen Functionality
• Open Close Button
• Local Storage Hook
• Deploy to surge.sh
• Add custom domain
• Write README

Directory Structure

.
├── .gitignore
├── package.json
├── README.md
├── public
└── src
    ├── components
        ├── App.js
        └── Editor.js
    ├── hooks
        └── useLocalStorage.js
    ├── App.js
    ├── index.css
    └── index.js

Set up

Use the cmd line to clone repo to your computer

git clone [github_repo_url]

Use the cmd line to install dependencies.

npm install

Run in cmd for start the dependencies server

npm start