Merge pull request #1 from jatin-narang/final-UI-1.0

Feat : Build Demgames-debate - (trivia game)
nditech · Feb 13, 2019 · 5b41562 · 5b41562
2 parents aa7ca6f + dc76634
commit 5b41562
Show file tree

Hide file tree

Showing 117 changed files with 28,890 additions and 2,031 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/react"
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-class-properties",
+            {
+                "loose": true
+            }
+        ]
+    ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,61 +1,26 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# node-waf configuration
-.lock-wscript
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# testing
+/coverage
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# production
+/build
 
-# TypeScript v1 declaration files
-typings/
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# next.js build output
-.next
+.vscode
+dist/
diff --git a/README.md b/README.md
@@ -1,129 +1,110 @@
 <h1 align="center">
-  <a href="https://www.ndi.org/"><img src="https://www.ndi.org/sites/all/themes/ndi/images/NDI_logo_svg.svg" alt="NDI Logo" width="200"></a>
-</h1>
-
-<h1 align="center">
-  DemGames - Debate
-</h1>
-
-<p align="center">
-  <a href="https://github.com/nditech/demgames-debate/blob/master/LICENSE">
-    <img src="https://img.shields.io/badge/license-GPL-red.svg" alt="License"/>
-  </a>
-  <a href="https://docs.mongodb.com/">
-    <img src="https://img.shields.io/badge/mongodb-v3.6.5-blue.svg" alt="mongodb"/>
-  </a>
-  <a href="https://www.npmjs.com/package/express">
-    <img src="https://img.shields.io/badge/express-v4.16.3-blue.svg" alt="express"/>
-  </a>
-  <a href="https://www.npmjs.com/package/react">
-    <img src="https://img.shields.io/badge/react-v14.4.0-blue.svg" alt="react"/>
-  </a>
-  <a href="https://nodejs.org/en/docs/">
-    <img src="https://img.shields.io/badge/node-v10.3.0-blue.svg" alt="node"/>
-  </a>
-</p>
-
-<p align="center">
-  <a href="#documentation">Documentation</a> - 
-  <a href="#license">License</a> - 
-  <a href="#authors">Author(s)</a>
-</p>
-
-A full stack (MERN) app that helps users learn how to debate effectively.
-
-## Documentation
-
-### :warning: IN DEV. Only the first module and its first level of the game are available.
-
-### Table of Contents
-
-1. [Intro](#intro)
-1. [Demo](#demo)
-1. [Installation](#installation)
-1. [Diagnosis](#diagnosis)
-1. [Test](#test)
-1. [Contribution](#contribution)
-
+    <a href="https://www.ndi.org/"><img src="https://www.ndi.org/sites/all/themes/ndi/images/NDI_logo_svg.svg" alt="NDI Logo" width="200"></a>
+  </h1>
+  
+  <h1 align="center">
+    DemGames - Debate
+  </h1>
+  
+  <p align="center">
+    <a href="https://github.com/nditech/demgames-debate/blob/master/LICENSE">
+      <img src="https://img.shields.io/badge/license-GPL-red.svg" alt="License"/>
+    </a>
+    <a href="https://docs.mongodb.com/">
+      <img src="https://img.shields.io/badge/mongodb-v3.6.5-blue.svg" alt="mongodb"/>
+    </a>
+    <a href="https://www.npmjs.com/package/express">
+      <img src="https://img.shields.io/badge/express-v4.16.3-blue.svg" alt="express"/>
+    </a>
+    <a href="https://www.npmjs.com/package/react">
+      <img src="https://img.shields.io/badge/react-v14.4.0-blue.svg" alt="react"/>
+    </a>
+    <a href="https://nodejs.org/en/docs/">
+      <img src="https://img.shields.io/badge/node-v10.3.0-blue.svg" alt="node"/>
+    </a>
+  </p>
+  
+  <p align="center">
+    <a href="#documentation">Documentation</a> - 
+    <a href="#license">License</a> - 
+    <a href="#authors">Author(s)</a>
+  </p>
+  
+  A full stack (MERN) app that helps users learn how to debate effectively.
+  
+  ## Documentation
+  
+  ### :warning: IN DEV. Currently three modules and its levels are available.
+  
+  ### Table of Contents
+  
+  1. [Intro](#intro)
+  1. [Demo](#demo)
+  1. [Installation](#installation)
+  1. [Diagnosis](#diagnosis)
+  1. [Test](#test)
+  1. [Contribution](#contribution)
+  
 ### Intro
-
-This app is built with React (frontend), Express.js (backend), MongoDB (database) and Node.js.
-
-The app connects to a collection (table) and gets the questions, by default, in Spanish and renders the questions.
-
-### Demo
-
-* [Working demo on Heroku](https://demgames-debate.herokuapp.com/)
-
+
+  This app is built with React (frontend), Express.js (backend) and Node.js.
+
+  The app connects to a mock api in express  and gets the complete game data and renders all modules.
+  To add more modules , levels or questions you need to edit the moduleData.json file inside data directory. 
+
 ### Installation
+
+  Make sure you have [Git](https://git-scm.com/downloads), [Node.js](https://nodejs.org/en/download/package-manager/) and [npm](https://www.npmjs.com/get-npm) on your machine. 
+
+
+  Clone this repository to your local machine (using SSH):
+
+  ```
+  $ Create a new directory and run follwing commands in it.
+  $ git clone git@github.com:nditech/demgames-debate.git
+  $ npm install
+  $ npm start
+
+  ```
+
+  If the app is run for the first time, there won't be any modules. You need to run express server to fetch game data.
+  Open a new terminal and move to main directory and run the below command.
+
+   ```
+   
+   $ nodemon server/server.js
+   
+   ```
+  ### Diagnosis
+
+  ```
+  // Backend error:
+  Error: listen EADDRINUSE: address already in use :::9000
+  You need to kill port 9000
+    
+    $ sudo fuser -k 9000/tcp
+  
+  ```
+   //Frontend Error:
+    Error: Access to fetch at 'http://localhost:9000/api/game' from origin 'http://localhost:8083' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+
+    Fix: You need to install cors extension in google chrome to enable cross-origin resource sharing.
 
-Make sure you have [MongoDB](https://docs.mongodb.com/manual/installation/), [Node.js](https://nodejs.org/en/download/package-manager/) and [Yarn](https://yarnpkg.com/en/docs/install#mac-stable) on your machine. 
-
-Start MongoDB (using terminal):
-```
-$ mongod
-```
-
-Clone this repository to your local machine (using SSH):
-```
-$ git clone git@github.com:nditech/demgames-debate.git
-$ cd demgames-debate
-$ yarn install
-$ cd client
-$ yarn install
-$ cd ..
-$ yarn start
-```
-
-If the app is run for the first time, there won't be any question. Use `http://localhost:3000/admin` to add questions.
-
-You can also use `./test/createdb.js` to add batches of questions to the database from `.json` files.
-
-### Diagnosis
-
-```
-// Backend error:
-(node:67023) UnhandledPromiseRejectionWarning: MongoNetworkError: failed to connect to server...
-
-// OR Frontend error:
-GET http://localhost:3000/api/questions/es net::ERR_EMPTY_RESPONSE
-Uncaught (in promise) Error: Network Error
-```
-* Cause: MongoDB is not running.
-* Fix: Start mongoDB before starting the app:
-    ```
-    $ mongod
-    ```
-
-### Test
-
-* Install `mocha` globally
-    ```
-    $ npm install -g mocha
-    ```
-* Quickly test all functions
-    ```
-    $ npm test
-    ```
-* Currently, all tests passed. No errors.
-* Inside `./test`, use:
-    * `text2json.js` to convert an `.xlsx` file to a `.json` file.
-    * `createdb.js` to add questions in batches from `.json` files.
 
 ### Contribution
-
-* Please read our [Code Commits Guide](https://github.com/nditech/git-styleguide) and [Documentation Guide](https://github.com/nditech/standardized-README).
-* We also follow Google's [Javascript Style Guide](https://google.github.io/styleguide/jsguide.html) and Airbnb's [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
-* Do your own unit test before committing code.
-
-## License
-
-[GNU General Public License v3.0](./LICENSE)
-
-## Author(s)
-
-* <b>Viet Nguyen</b>
-    > vnguyen@ndi.org &nbsp;&middot;&nbsp;
-    > [LinkedIn](https://www.linkedin.com/in/nguyendviet)
-
-**[⬆ back to top](#documentation)**
+  
+  * Please read our [Code Commits Guide](https://github.com/nditech/git-styleguide) and [Documentation Guide](https://github.com/nditech/standardized-README).
+  * We also follow Google's [Javascript Style Guide](https://google.github.io/styleguide/jsguide.html) and Airbnb's [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
+  * Do your own unit test before committing code.
+  
+  ## License
+  
+  [GNU General Public License v3.0](./LICENSE)
+  
+  ## Author(s)
+  
+  * <b>Jatin Narang</b>
+      > jatin.narang@hashedin.com &nbsp;&middot;&nbsp;
+      
+  
+  **[⬆ back to top](#documentation)**
diff --git a/client/src/App.css b/client/src/App.css
@@ -0,0 +1,32 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}