├── README.md ├── app ├── app.jsx ├── components │ ├── Footer.jsx │ ├── Answers.jsx │ ├── Popup.jsx │ └── Main.jsx ├── data │ └── data.js └── styles │ └── app.css ├── server.js ├── public └── index.html ├── .gitignore ├── webpack.config.js ├── LICENSE └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Quiz Application built with react 2 | Live on [heroku](http://tranquil-beyond-43849.herokuapp.com/) -------------------------------------------------------------------------------- /app/app.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { Route, Router, IndexRoute, hashHistory } from 'react-router'; 4 | import Main from 'Main'; 5 | 6 | // App css 7 | import 'style!css!applicationStyles'; 8 | 9 | render( 10 |
, 11 | document.getElementById("react-container") 12 | ); -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | 3 | var app = express(); 4 | const PORT = process.env.PORT || 3000; 5 | 6 | 7 | app.use(function(req, res, next) { 8 | if(req.headers['x-forwarded-proto'] === 'https') { 9 | res.redirect('http://' + req.hostname + req.url); 10 | } else { 11 | next(); 12 | } 13 | }); 14 | 15 | app.use(express.static('public')) 16 | 17 | app.get('/', function (req, res) { 18 | res.send("Hello World!"); 19 | }); 20 | 21 | app.listen(PORT, function(){ 22 | console.log(`Listen on port ${PORT}...`); 23 | }); -------------------------------------------------------------------------------- /app/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class Footer extends React.Component{ 4 | render() { 5 | return ( 6 | 12 | ) 13 | } 14 | } 15 | 16 | export default Footer -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Quizz 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: [ 5 | './app/app.jsx' 6 | ], 7 | output: { 8 | path: __dirname, 9 | filename: './public/bundle.js' 10 | }, 11 | resolve: { 12 | root: __dirname, 13 | modulesDirectories: [ 14 | 'node_modules', 15 | './app/components', 16 | ], 17 | alias: { 18 | applicationStyles: 'app/styles/app.css' 19 | }, 20 | extensions: ['', '.js', '.jsx'] 21 | }, 22 | module: { 23 | loaders: [ 24 | { 25 | loader: 'babel-loader', 26 | query: { 27 | presets: ['react', 'es2015'] 28 | }, 29 | test: /\.jsx?$/, 30 | exclude: /(node_modules|bower_components)/ 31 | } 32 | ] 33 | }, 34 | devtool: 'cheap-module-eval-source-map' 35 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Florin Pop 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quiz-app", 3 | "version": "1.0.0", 4 | "description": "Quiz application built with React", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "No test", 8 | "start": "node server.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Flopet17/quiz-app.git" 13 | }, 14 | "keywords": [ 15 | "React", 16 | "Quiz", 17 | "NodeJS", 18 | "CSS", 19 | "HTML", 20 | "Javascript" 21 | ], 22 | "author": "Florin Pop", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/Flopet17/quiz-app/issues" 26 | }, 27 | "homepage": "https://github.com/Flopet17/quiz-app#readme", 28 | "dependencies": { 29 | "babel-core": "^6.21.0", 30 | "babel-loader": "^6.2.10", 31 | "babel-preset-es2015": "^6.18.0", 32 | "babel-preset-react": "^6.16.0", 33 | "express": "^4.14.0", 34 | "react": "^15.4.1", 35 | "react-dom": "^15.4.1", 36 | "react-router": "^3.0.0", 37 | "webpack": "^1.14.0" 38 | }, 39 | "devDependencies": { 40 | "css-loader": "^0.26.1", 41 | "json-loader": "^0.5.4", 42 | "react-addons-css-transition-group": "^15.4.1", 43 | "style-loader": "^0.13.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /app/data/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | question: 'What does CSS stand for?', 4 | answers: ['Computer Style Sheets', 'Creative Style Sheets', 'Cascading Style Sheets', 'Colorful Style Sheets'], 5 | correct: 3 6 | }, 7 | 8 | { 9 | question: 'Where in an HTML document is the correct place to refer to an external style sheet?', 10 | answers: ['In the section', 'In the section', 'At the end of the document', 'You can\'t refer to an external style sheet'], 11 | correct: 1 12 | }, 13 | { 14 | question: 'Which HTML tag is used to define an internal style sheet?', 15 | answers: ['