<div class="Objective_card card-content-body"><p>Create an online code-editor for HTML, CSS, JS code snippets using only HTML, CSS and React. The code editor’s functionality will be similar to that of <a href="https://codepen.io/" target="_blank">codpen.io</a></p></div>

Objective

<div class="Project_Context_card card-content-body"><p>Online code-editor is a tool that resides on a remote server and is accessible via browsers. Some online code editors have basic features like syntax highlighting or code completion more similar to text editors while others are like complete <a href="https://en.wikipedia.org/wiki/Integrated_development_environment" target="_blank">IDEs</a>.</p><br/><p>For any developer, be it amateur or professional, often the liberty of using a local code editor may be unavailable. As online code-editors are fast, efficient and greatly popular, it is a familiar tool among developers. If you have used one, ever wondered how it can be made? This module will guide you through the process that can be followed to build your own code-editor for HTML, CSS, JS code snippets. Implementing the project will add an immense value to your profile.</p><br/><p>This project is a good start for beginners, a new idea for intermediates and a refreshing hobby project for professionals. It involves the basic use of all of HTML, CSS and React languages. Reason for following this tech-stack is that these languages are easy to use and are also fast in terms of execution time.</p></div>

Project Context

<div class="Project_Stages_card card-content-body"><p>We can segregate the product architecture based on tools used:</p><ul>
<li>HTML, CSS - Site user interface (site’s layout)</li>
<li>React - Site’s core functionality and frontend features</li>
<li>Hosting services like Heroku, Firebase, Netlify, etc.</li>
</ul><p><img alt="project-react-code-editor-sequence-diagram" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_1-project-react-code-editor-sequence-diagram.png" style="max-width:750px;"/></p></div>

Project Stages

<div class="High-Level_Approach_card card-content-body"><p>This module consists of the following milestones:</p><ul>
<li>Creating the structural aspect of code-editor using HTML, CSS</li>
<li>Implementation of core functionalities and other frontend features using React</li>
<li>Publish to GitHub and finally host your deployed code-editor.</li>
</ul><br/><p>The desired end result of this project is like this:</p><br/><p><div class="video"><iframe allowfullscreen="allowfullscreen" class="iframe-video" height="350px" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" src="https://www.youtube.com/embed/KF0-uuuh4lM" webkitallowfullscreen="webkitallowfullscreen" width="600px"></iframe></div></p></div>

High-Level Approach

<div class="Applications_card card-content-body"><p>Some of the applications of online code editors are-</p><ul>
<li>For online interviews/hiring: With online code editors, you can do interviews with ease. It helps to see candidates’ approach towards solutions and work with code.</li>
<li>Prototyping: You can validate your ideas and get instant feedback from users as sharing and collaboration options are available and saves you from the pain of local setup.</li>
</ul></div>

Applications

<div class="Getting_Started_card card-content-body"><p>First validate the idea by doing a low level implementation (Proof of Concept) of the components involved in the project.</p><br/><p>This helps you to:</p><ol>
<li>Get more clarity around the unknowns.</li>
<li>Get a better understanding of the stages involved in the project.</li>
</ol><br/><p>Explore various aspects of the terms mentioned in the preceding sections and also understand the preference to use React over Angular or Vue, XML vs HTML, why use HTML5/CSS3 and not the other versions, etc.</p></div>

Getting Started

<div class="Requirements_card card-content-body"><ul>
<li>Ideally this is a React app. So start by creating <a href="https://reactjs.org/docs/create-a-new-react-app.html" target="_blank">one</a> and keep only the relevant <a href="https://www.pluralsight.com/guides/file-structure-react-applications-created-create-react-app" target="_blank">files</a> needed for the project (starter files are shown below).</li>
</ul><p><img alt="react-starter-files" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_2-react-starter-files.png" style="max-width:750px;"/></p><ul>
<li>Install necessary dependency packages (you may refer and use the ones mentioned below) using <a href="https://docs.npmjs.com/cli/v6/commands/npm-install" target="_blank">npm</a>. <a href="https://www.npmjs.com/package/codemirror" target="_blank">Codemirror</a> dependency is the text editor (npm) package and react-codemirror2 is used to have custom <a href="https://reactjs.org/docs/uncontrolled-components.html#:%7E:text=In" target="_blank">controlled components</a> of codemirror.</li>
</ul><pre><code class="language-javascript">"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.31",
  "@fortawesome/free-brands-svg-icons": "^5.15.0",
  "@fortawesome/free-solid-svg-icons": "^5.15.0",
  "@fortawesome/react-fontawesome": "^0.1.11",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "codemirror": "^5.58.1",
  "react": "^16.13.1",
  "react-codemirror2": "^7.2.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.3"
},
</code></pre><div class="References"><h3>References</h3><ul>
<li><a href="https://stories.jotform.com/7-reasons-why-you-should-use-react-ad420c634247" target="_blank">Why use React?</a> and not <a href="https://medium.com/techmagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d" target="_blank">angular,vue</a></li>
<li><a href="https://medium.com/edge-coders/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2" target="_blank">Quick tutorial for React</a>, want a lighter <a href="https://medium.com/@madhupathy/learn-basics-of-react-js-in-3-minutes-a94cbc6f02c8" target="_blank">tutorial</a>?</li>
<li><a href="https://www.freecodecamp.org/news/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3/" target="_blank">5 things you need to know for React</a></li>
<li>Don’t know what the .gitignore file is? No problem, just refer to <a href="https://www.pluralsight.com/guides/how-to-use-gitignore-file" target="_blank">this</a>.</li>
</ul></div><div class="Tip"><h3>Tip</h3><p>To run the react application simply type <code>npm start</code> in the terminal and you will get a live server started.</p></div></div>

Requirements

<div class="Create_the_site’s_main_layout_card card-content-body"><p>In this task the basic structure of the code-editor is built (excluding the core functionality) using HTML and React.</p></div>

Create the site’s main layout

<div class="Requirements_card card-content-body"><ul>
<li>There are two panes in this code editor- One where the code is run (upper half of the app that contains the three code containers) and the other where the output is displayed (lower half ‘result’ code window). So, create two <a href="https://www.w3schools.com/tags/tag_div.ASP" target="_blank">divisions</a> in <code>app.js</code> to accommodate them.</li>
<li>Create a custom component called <code>Editor</code> (preferably) which will be used in taking input of HTML, CSS, JS code snippets in their respective code containers.</li>
</ul><pre><code class="language-javascript">&lt;div className="pane top-pane"&gt;
        &lt;Editor /*HTML code editor*//&gt;  
        &lt;Editor /*CSS code editor*//&gt;
        &lt;Editor /*JS code editor*//&gt;
&lt;/div&gt;
</code></pre><ul>
<li>To render a web page within another web page an <code>iframe</code> element must be used.</li>
</ul><pre><code class="language-javascript">&lt;div className="bottom-pane"&gt;
        &lt;iframe
          srcDoc={srcDoc}
          /*Title option*/
          /*sandbox option*/
          /*frameBorder option*/
          /*width-height option*/
          /*Title option*/
        &gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre><ul>
<li>Fill in dummy test code in Editor function <code>editor.js</code> and import it to your <code>app.js</code> to check whether the custom component <code>Editor</code> is working or not.</li>
</ul><pre><code class="language-javascript">export default Editor;
 
import Editor from "./Editor";
</code></pre><div class="References"><h3>References</h3><ul>
<li><a href="https://gist.github.com/msmfsd/dabc106be9b4dd8e653109509c218335" target="_blank">React <code>iframe</code> component</a></li>
<li><code>iframe</code> <a href="https://www.npmjs.com/package/react-iframe" target="_blank">npm package</a></li>
</ul></div></div>

<div class="Expected_Outcome_card card-content-body"><p>Since only a dummy text is being returned by the editor function, at the end of this milestone the app should look something like this (<em>NOTE</em>: The <code>iframe</code> is not rendering anything now, so it has no effect) -</p><p><img alt="task-2-expected-outcome-(dummy-text)" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_5-task-2-expected-outcome-(dummy-text).png" style="max-width:750px;"/>
<br/></p></div>

Expected Outcome

<div class="Create_the_editor_component_card card-content-body"><p>Start building the code-editor by creating the Editor component that will be taking care of the code fed into respective sections (i.e. HTML, CSS, JS code snippets).</p><br/><p>The ‘editor’ component will be responsible for validating the code in their respective sections (code containers) and storing it for further uses.</p></div>

Create the editor component

<div class="Requirements_card card-content-body"><ul>
<li>It is recommended to use the <a href="https://www.npmjs.com/package/react-codemirror2" target="_blank">codemirror</a> package for this component so that you can have controlled usage for the code editor which will then help in controlling your input/output values and event handlers. So, import the code-editor (Controlled) component from the <code>react-codemirror2</code> package.</li>
</ul><pre><code class="language-javascript">import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import /* codemirror XML (HTML) mode */
import /* codemirror CSS mode */
import /* codemirror JS mode */
</code></pre><ul>
<li>Create buttons for each code container for opening (expanding) and closing (collapsing) individual code-editors. The expand/collapse buttons will function like <a href="https://youtu.be/sNAMWpejOLw" target="_blank">this</a> (only focus on the buttons’ working now, all other features will be implemented as you progress through the following milestones).</li>
<li>Implement the controlled usage for the editor which should contain the event handlers (like onChange), values and other necessary arguments that create the editor as indicated below.</li>
</ul><pre><code class="language-javascript">&lt;ControlledEditor
        onBeforeChange={/* Pass in a custom made function that will handle the change */}
        value={/* Give the value */}
        className= /* Give an appropriate name for styling reference in CSS */
        options={{
         /* Give all relevant options */
        }}
/&gt;
</code></pre><ul>
<li>Export this component as a function with appropriate arguments such as language name, value, onChange event handler (a separate function to be made, you may reuse the following code).</li>
</ul><pre><code class="language-javascript">function handleChange(editor, data, /* An argument that handles the value of this function */) {
    onChange(/* The passed in argument that decides this function's value (argument) */);
  }
</code></pre><div class="Tip"><h3>Tip</h3><ul>
<li>Use state in the main app code to pass in values and event handler values, for individual editor components.</li>
<li>Create hooks (useState) for each language and set the <code>useState</code> hook as null. This step will be used for the editor tag’s value and onChange event handler’s arguments.</li>
<li>Create state variables (preferably by using useState hook) in the main app code to pass in values and event handler values, for individual editor components (i.e. language specific) and other relevant features.</li>
<li>Every custom ‘Editor’ component needs to have at least a language name, it’s display name, a language specific value and language specific onChange event handler.</li>
</ul></div></div>

<div class="Expected_Outcome_card card-content-body"><p>Now that the custom component <code>Editor</code> is in place, the code-editor should look something like the image below. Try inputting some sample code and see if syntax highlighting has been implemented or not. Of course the inputted code won’t be rendered now.</p><br/><p>[<strong>NOTE</strong>: Your output may look different due to styling variations, but it will look same in the end as you keep progressing]</p><p><img alt="task-3-expected-outcome-(editor-UI-structure)" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_6-task-3-expected-outcome-(editor-UI-structure).png" style="max-width:750px;"/>
<br/></p></div>

<div class="Style_the_code-editor_card card-content-body"><p>Without styling, the appearance will be bland and not appealing. Thus, this task deals with the required styling needed to beautify the code-editor using only CSS.</p></div>

Style the code-editor

<div class="Requirements_card card-content-body"><ul>
<li>Go back to your existing code divisions/classes and give appropriate class names to every relevant sub-structure of the code-editor.</li>
<li>Observe the sample code-editor image and also visit <a href="https://codepen.io/" target="_blank">codepen.io</a> and implement similar (and better) styling to your code-editor.</li>
<li>Style each of the sub-structures like body, top-pane, top-pane header, individual code-editors, editor components and so on.</li>
<li>This is an iterative task and needs to be done again when some more new features are added.</li>
</ul><div class="Tip"><h3>Tip</h3><ul>
<li>Your site’s code containers may not cover the whole upper half on zooming in-out of the screen. Make sure you include the following code</li>
</ul><pre><code class="language-javascript">.CodeMirror {
  height: 100% !important;
}
</code></pre><ul>
<li>If you’re confused with the naming to follow for division and classes you may refer this</li>
</ul><pre><code class="language-javascript">body {}
.top-pane {}
.top-header {}
.top-header .clear-all-btn {}
.top-header .clear-all-btn:hover {}
.pane {}
.editor-container {}
.editor-title {}
.editor-container.collapsed {}
 
.editor-container.collapsed .CodeMirror-scroll {
  position: absolute;
  overflow: hidden !important;
}
 
.CodeMirror {
  height: 100% !important;
}
 
.code-mirror-wrapper {}
.expand-collapse-btn {}
.ct {}
.ti {}
 
@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url(./font/Roboto-Regular.ttf) format("truetype");
}
</code></pre></div></div>

<div class="Expected_Outcome_card card-content-body"><p>After implementing the styling the code-editor should look something like the image given below. Keep improving the styling as you wish, but before that move on to the next milestones first to complete the code-editor.</p><p><img alt="task-4-expected-outcome-(code-editor-styling)" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_9-task-4-expected-outcome-(code-editor-styling).png" style="max-width:750px;"/></p></div>

<div class="Implement_the_core_functionalities_card card-content-body"><p>Implement the the core functionality of the code-editor, i.e. render the webpage corresponding to the code inputs (by implementing the code of <code>iframe</code> element mentioned in milestone 1)</p></div>

Implement the core functionalities

<div class="Requirements_card card-content-body"><ul>
<li>We need a ‘source’ document in the main App function in <code>app.js</code> that needs to be used inside the <code>iframe</code> element to render the website. To render any website a HTML code is sufficient with all of HTML, CSS, JS codes wrapped properly in it. So, create this variable (which is ideally a template string) such that it understands language specific inputs and accordingly creates a HTML page with the relevant source code of each language wrapped in its tag (like &lt;body&gt; for HTML) .</li>
<li>On using this ‘source document’ variable in the <code>iframe</code> as one of its arguments you will be able to render pages.</li>
<li>Further set a time-delay between code input and output (to avoid data execution cluttering when your site is hosted).</li>
</ul><div class="Tip"><h3>Tip</h3><ul>
<li>Create state variables (preferably by using useState hook) in the main app code to pass in values and event handler values, for individual editor components (i.e. language specific) and other relevant features.</li>
<li>The logic of implementing <code>source document</code> variable: The tag that binds HTML code is <code>&lt;body&gt;...&lt;/body&gt;</code>, tag that binds CSS is <code>&lt;style&gt;...&lt;/style&gt;</code> and for JS is <code>&lt;script&gt;...&lt;/script&gt;</code>. Using a template string, the contents of each of tags can be input as variables/expressions.</li>
</ul><pre><code class="language-javascript">const srcDoc = `
&lt;html&gt;
  &lt;body&gt;${html}&lt;/body&gt;
  /* CSS code */
  /* JS code */
&lt;/html&gt;
` 
</code></pre><ul>
<li>For time-delay use <code>useEffect</code> react component</li>
</ul><pre><code class="language-javascript">useEffect(() =&gt; {
    const timeout = setTimeout(() =&gt; {
     /* Source Document Code as function */
    }, 250);
 
    return () =&gt; clearTimeout(timeout);
  }, [html, css, js, /* Source document function call so that the site responds again to new code changes */]);
</code></pre></div></div>

<div class="Expected_Outcome_card card-content-body"><p>Now that the core functionalities are implemented the code-editor is good to use now. So the webpage rendered by the code-editor should look something like this</p><p><img alt="task-5-expected-outcome-(core-functionalities-implemented)" src="https://storage.googleapis.com/crio-content-container-assets/ME_ME_PROJECT_EDITOR_REACT_MODULE_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_10-task-5-expected-outcome-(core-functionalities-implemented).png" style="max-width:750px;"/></p></div>

<div class="Implement_expand/collapse_feature_button_of_code-editor_panes_and_refresh_option_button_card card-content-body"><p>Now the editor is up and running. Next the user should have the liberty to expand/collapse the editor panes according to their convenience. Also once a code is run, the presence of a refresh button will help the user to start afresh.</p><div class="References"><h3>References</h3><ul>
<li>Use hooks (useState) to keep all panes open (default layout).</li>
<li>Provide the expand/collapse button its functionality by using an event handler which inverts the current state (open or close) of the editor pane.</li>
</ul><pre><code class="language-javascript">&lt;button
       type="button"
       className= /* Give an appropriate class name */
       onClick={() =&gt; setOpen(/* TODO logic -&gt; inversion of previous state */)}
       title={/* Conditional logic to check if that the current state is open or close */}
&gt;
</code></pre><ul>
<li>
<p>The demo below shows how the expand/collapse buttons should work.</p>
<p><div class="video"><iframe allowfullscreen="allowfullscreen" class="iframe-video" height="350px" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" src="https://www.youtube.com/embed/sNAMWpejOLw" webkitallowfullscreen="webkitallowfullscreen" width="600px"></iframe></div></p>
</li>
<li>
<p>Using conditional operators, extend the class name of the editors according to its state (open/close) and repeat milestone 3, i.e. handle styling of the newly formed feature.</p>
</li>
</ul><pre><code class="language-javascript">&lt;div className={`editor-container ${/* Conditional logic for open/close className */}`}&gt;
</code></pre><ul>
<li>Create a refresh button similar to the expand/collapse button but it should reload the page completely, i.e. remove all of the code that was written/executed.</li>
</ul></div><div class="Tip"><h3>Tip</h3><ul>
<li>When an editor pane is collapsed, if the styling is off, check out codemirror-scroll attribute’s position and overflow values.</li>
</ul><pre><code class="language-javascript">.editor-container.collapsed .CodeMirror-scroll {
  position: absolute;
  overflow: hidden !important;
}
</code></pre></div></div>

Implement expand/collapse feature button of code-editor panes and refresh option button

<div class="Expected_Outcome_card card-content-body"><p>The refresh button feature along with all the icons will look and function as shown in the demo below.</p><br/><p><div class="video"><iframe allowfullscreen="allowfullscreen" class="iframe-video" height="350px" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" src="https://www.youtube.com/embed/1Xw54Xv6l6U" webkitallowfullscreen="webkitallowfullscreen" width="600px"></iframe></div></p></div>

<div class="Retaining_the_data_on_direct_page_reloads_and_adding_some_other_edgy_features_card card-content-body"><p>The editor should not lose its data on a direct page reload (i.e. other than the refresh button option). To save them in local storage for one particular instance of code run, using a hook is an easy, straightforward solution. Also the site buttons will look plain as of now. Use fontawesome icons of React library to convert them into edgy icons.</p></div>

Retaining the data on direct page reloads and adding some other edgy features

<div class="Requirements_card card-content-body"><ul>
<li>To implement the main feature of this task, create a custom useLocalStorage hook in <code>useLocalStorage.js</code> file.</li>
<li>This hook will ideally take two parameters-namely a key and an initialValue. The key will be pointing towards the language pane.</li>
<li>Using this key, extract the JSON value (via useState function) and check if it’s null or contains some value. If null, JSON needs to be returned (after parsing it obviously).</li>
<li>Check if the initialValue is of type function or not. Accordingly return the initialValue.</li>
<li>Also use the <code>useEffect</code> hook to make sure that when the value (associated with useState hook) or the key value changes, the key is set as the stringified version of value (JSON).</li>
<li>Finally use this hook in the main App function of <code>app.js</code>in place of previously used useState of all language-specific useState’s defined before.</li>
<li>Now install fortawesome/fontawesome (for react) after selecting appropriate icons from the font awesome site to plug-in all relevant icons to complete your code-editor!</li>
</ul><pre><code class="language-javascript">import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCompressAlt, faExpandAlt } from "@fortawesome/free-solid-svg-icons";
import { faHtml5, faCss3Alt, faJs } from "@fortawesome/free-brands-svg-icons";
</code></pre><div class="Tip"><h3>Tip</h3><ul>
<li>Refer <a href="https://dev.to/sanderdebr/building-a-custom-react-localstorage-hook-2bja" target="_blank">this</a> and <a href="https://usehooks.com/useLocalStorage/" target="_blank">this</a> for useLocalStorage references.</li>
<li>In case of any problem with <code>useLocalstorage.js</code> try completing the below code. Then try your own logic.</li>
</ul><pre><code class="language-javascript">import { useState, useEffect } from "react";
 
const PREFIX = /* To prefix your key so that you can easily identify your localhost instance */;
 
function useLocalStorage(key, initialValue) {
  const prefixedKey = PREFIX + key;
 
  const [value, setValue] = useState(() =&gt; { /*Use states*/
    const jsonValue = /*Get the items from local storage based on the prefix key */;
    
    if (jsonValue != null) return /* Parsed value of jsonValue */;
 
    if (typeof initialValue === "function") {
      return /* initialValue as a function*/;
    } else {
      return /* initialValue as a variable*/;
    }
  });
 
  useEffect(() =&gt; {
    if(!value) setValue(/* Set to null */)
      localStorage.setItem(prefixedKey, JSON.stringify(value));
      /* Set the localstorage's prefixed key with the new stringified json of value */
  }, [prefixedKey, value]);
 
  return [value, setValue];
}
 
export default useLocalStorage;
</code></pre></div></div>

<div class="Expected_Outcome_card card-content-body"><p>Your final code-editor should function as shown in the demo below. Do keep improving your code-editor once this stage has been reached.</p><br/><p><div class="video"><iframe allowfullscreen="allowfullscreen" class="iframe-video" height="350px" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" src="https://www.youtube.com/embed/KF0-uuuh4lM" webkitallowfullscreen="webkitallowfullscreen" width="600px"></iframe></div></p></div>

<div class="Publish_your_work_to_GitHub_and_host_your_website_live_card card-content-body"><p>Finish your work in complete style.</p><br/><p>Publish your work on GitHub with proper folder structure and a good README for people to get to know of your work. Make sure you add a .gitignore file and mention all dependency folders like node_modules in it.</p><br/><p>Since this is a React application, go one step further by using a hosting service like Heroku, Firebase or Netlify to host your app and get a live URL.</p><br/><p>Share this link among your peers and add this project (with the link and proper documentation) to your resume and voila, you have just boosted your resume.</p><div class="References"><h3>References</h3><ul>
<li><a href="https://medium.com/singapore-rails-learning-group/how-to-push-your-code-to-github-and-publish-your-first-page-8b0e1f4caf2a" target="_blank">How to publish on Github?</a></li>
<li><a href="https://www.geeksforgeeks.org/how-to-deploy-react-app-to-heroku/" target="_blank">Deploying on Heroku</a></li>
<li><a href="https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-98063c5bf425" target="_blank">Deploying on Firebase</a></li>
<li><a href="https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/" target="_blank">Deploying on Netlify</a></li>
</ul></div></div>

Publish your work to GitHub and host your website live

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_1

Prototyping and Getting started

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_2

Create basic site layout

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_3

Create “Editor” custom component

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_4

Let’s Style it!

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_5

Power it up

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_6

Buttoning it up

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_7

Retaining data on direct page reloads

CONTAINER_REGULAR_TASK_ME_PROJECT_EDITOR_REACT_MODULE_EDITOR_REACT_TASK_8

Publish and Host

Realtime Video Processing using ChromaKey (GreenScreen) Effect

Companion App: A mental health tracker built using Flutter and Firebase.

Exploratory Analysis of Geolocational Data

Learn to create apps on Kubernetes - for beginners.

OurApp - a social media web app in NodeJS

Visualising and forecasting stocks using Dash

Download Project

Objective

Project Context

Project Stages

High-Level Approach

Applications