coderoom-dev #9

.firebaserc

@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "coderoom-aecd1"
+    "default": "coderoom-app"
   }
 }

README.md

@@ -1,8 +1,15 @@
 # Coderoom | Coding Ninjas
+### (http://coderoom-app.firebaseapp.com)
 A collaborative place for sharing code in realtime!
 
-## To run the project:
+## To run the project (locally on your machine):
 - Clone the project.
 - Run command `npm install` to install all the dependencies required. 
-- Run command `npm run build` in the terminal to build the project.
+
+#### For development mode:
+- Run command `npm start` in the terminal to run the project in development mode.
+
+#### For production mode:
+- Run command `npm run build` in the terminal to build the project for production mode.
+- Initialise the project using Firebase command-line tools and run command `firebase init`.
 - Run command `firebase serve` in the terminal to start the Web App at `http://localhost:5000/`.

database.rules.json

@@ -1,5 +1,4 @@
 {
-  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
   "rules": {
     ".read": true,
     ".write": true

package.json

@@ -3,15 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.4.1",
     "env-cmd": "^10.1.0",
     "firebase": "^7.9.1",
     "firebase-tools": "^7.13.1",
     "material-ui": "^0.20.2",
     "random-key": "^0.3.2",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0",
     "react-codemirror": "^1.0.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",

public/index.html

@@ -4,8 +4,40 @@
     <meta charset="utf-8" />
     <link rel="icon" href="./favicon_CN.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@400;500&family=Roboto:wght@400;500&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Code Room | Coding Ninjas</title>
+
+    <!-- Firebase -->
+    <!-- <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script> -->
+
+    <!-- Codemirror -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/dracula.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/markdown/markdown.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/javascript/javascript.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/clike/clike.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/python/python.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/closetag.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/matchbrackets.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/closebrackets.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/matchtags.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/fold/xml-fold.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/trailingspace.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/javascript-hint.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/comment/comment.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/display/placeholder.min.js"></script>
+
+    <!-- Firepad -->
+    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.5.3/firepad.css" />
+    <script src="https://cdn.firebase.com/libs/firepad/1.5.3/firepad.min.js"></script>
+
   </head>
   <body>
     <div id="root"></div>

src/components/Backdrop/Backdrop.css

@@ -0,0 +1,9 @@
+.backdrop {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0.3);
+    z-index: 100;
+}