├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.jsx
    ├── api
    │   └── question.js
    └── index.jsx
├── postcss.config.js
├── public
    ├── favicon.ico
    └── vercel.svg
├── styles
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | node_modules
38 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | -
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Galih Sukristyan Saputra
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | # Simple NextJS Quiz App
 4 | 
 5 | </div>
 6 | 
 7 | <div align="center">
 8 | 
 9 | [![All Contributors](https://img.shields.io/github/contributors/masgalih320/quizapp-nextjs)](https://github.com/masgalih320/quizapp-nextjs/graphs/contributors)
10 | ![GitHub last commit](https://img.shields.io/github/last-commit/masgalih320/quizapp-nextjs.svg)
11 | ![GitHub repo size in bytes](https://img.shields.io/github/languages/code-size/masgalih320/quizapp-nextjs)
12 | [![License](https://img.shields.io/github/license/masgalih320/quizapp-nextjs)](LICENSE)
13 | 
14 | </div>
15 | 
16 | <p align="center">
17 |    Simple NextJS Quiz App made with NextJS and TailwindCSS
18 | </p>
19 | 
20 | ## Features
21 | 
22 | - Timer
23 | - Question bank stored on API endpoint on `pages/api/question.js` file and easy to modify the question
24 | - Game Over screen
25 | 
26 | ## Future update
27 | 
28 | - Before play screen (user can login/input username here)
29 | - Choose quiz room screen (public quiz)
30 | - Quiz room (room code for private quiz)
31 | - Responsive page
32 | - More interactive
33 | 
34 | ## Installation Guide
35 | 
36 | ### Build setup
37 | 
38 | ```bash
39 | # clone the repository
40 | $ git clone https://github.com/masgalih320/quizapp-nextjs quiz
41 | 
42 | # navigate to the folder
43 | $ cd quiz
44 | ```
45 | 
46 | After clone the repository and navigate to the folder, you can use few commands below
47 | 
48 | ```bash
49 | # install dependencies
50 | $ npm install
51 | 
52 | # serve with hot reload at localhost:3000
53 | $ npm run dev
54 | 
55 | # build for production and launch server
56 | $ npm run build
57 | $ npm run start
58 | ```
59 | 
60 | For detailed explanation on how things work, checkout [Next.JS docs](https://nextjs.org)
61 | 
62 | ## Contributing
63 | 
64 | See contributing Guide [here](./CONTRIBUTING.md)
65 | 
66 | ## License
67 | 
68 | Simple NextJS Quiz App is under MIT License
69 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 |   swcMinify: true,
5 | }
6 | 
7 | module.exports = nextConfig
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "quiz",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "13.0.0",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "autoprefixer": "^10.4.12",
18 |     "eslint": "8.26.0",
19 |     "eslint-config-next": "13.0.0",
20 |     "postcss": "^8.4.18",
21 |     "tailwindcss": "^3.2.1"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/_document.jsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         <title>Simple Quiz App with NextJS</title>
 8 |       </Head>
 9 |       <body>
10 |         <Main />
11 |         <NextScript />
12 |       </body>
13 |     </Html>
14 |   )
15 | }


--------------------------------------------------------------------------------
/pages/api/question.js:
--------------------------------------------------------------------------------
 1 | // Define API routes for getting question bank
 2 | export default function handler(req, res) {
 3 |   return res.status(200).json({
 4 |     status: 200,
 5 |     msg: "success",
 6 |     data: [
 7 |       {
 8 |         time: 10000,
 9 |         question: "Siapakah presiden Negara Republik Indonesia ke-1?",
10 |         answer: "Ir. Soekarno",
11 |         choices: ["WR. Soepratman", "Soeharto", "Puan Maharani", "Ir. Soekarno"],
12 |       },
13 |       {
14 |         time: 5000,
15 |         question: "Kerusuhan Banjarmasin terjadi pada tahun berapa?",
16 |         answer: 1997,
17 |         choices: [1997, 2002, 2013, 1945],
18 |       },
19 |       {
20 |         time: 20000,
21 |         question: "Kepanjangan DPR adalah?",
22 |         answer: "Dewan Perwakilan Rakyat",
23 |         choices: ["Dewan Perwakilan Daerah", "Dewan Perwakilan Rakyat", "Dewan Pribumi Rahasia", "Dewan Pengkhianat Rakyat"],
24 |       },
25 |       {
26 |         time: 10000,
27 |         question: "Kepanjangan TNI adalah?",
28 |         answer: "Tentara Nasional Indonesia",
29 |         choices: ["Tentara Nasional Indonesia", "Tau Nama Indonesia", "Takutnya Negara Indonesia", "Tinggal Nama Ini"],
30 |       },
31 |     ],
32 |   });
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/index.jsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from "next/router"
 2 | import { useEffect, useState } from "react"
 3 | 
 4 | // test
 5 | export default function Home({ question }) {
 6 |   const router = useRouter()
 7 |   const [isOver, setIsOver] = useState(false)
 8 |   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
 9 |   const [currentQuestionAnswer, setCurrentQuestionAnswer] = useState(question[currentQuestionIndex] ? question[currentQuestionIndex].answer : "")
10 |   const [correctAnswerTotal, setCorrectAnswerTotal] = useState(0)
11 |   const [incorrectAnswerTotal, setIncorrectAnswerTotal] = useState(0)
12 |   const [timer, setTimer] = useState(100)
13 | 
14 |   useEffect(() => {
15 |     if (!isOver) {
16 |       const interval = setInterval(() => {
17 |         if (timer > 0) setTimer((timer) => Math.floor(timer - Math.floor(question[currentQuestionIndex].time / 1000)))
18 |       }, 1000)
19 | 
20 |       if (timer == 0 && question.length - 1 == currentQuestionIndex) setIsOver(true)
21 |       if (timer == 0 && isOver == false) setCurrentQuestionIndex(currentQuestionIndex + 1)
22 |       if (timer == 0 && isOver == false) setTimer(100)
23 |       if (timer == 0 && isOver == false) setIncorrectAnswerTotal(incorrectAnswerTotal + 1)
24 | 
25 |       return () => clearInterval(interval)
26 |     } else {
27 |       setTimer(0)
28 |     }
29 |   }, [timer])
30 | 
31 |   function handleClick(ans) {
32 |     setCurrentQuestionIndex((currentQuestionIndex) => {
33 |       ans === currentQuestionAnswer ? setCorrectAnswerTotal(correctAnswerTotal + 1) : setIncorrectAnswerTotal(incorrectAnswerTotal + 1)
34 |       if (timer !== 0 && isOver == false && question.length - 1 == currentQuestionIndex) return setIsOver(true)
35 |       if (timer !== 0 && isOver == false) setTimer(100)
36 |       if (timer !== 0 && isOver == false) setCurrentQuestionAnswer(question[currentQuestionIndex + 1].answer)
37 |       if (timer !== 0 && isOver == false) return currentQuestionIndex + 1
38 |     })
39 |   }
40 | 
41 |   return (
42 |     <div className="overflow-hidden select-none relative h-screen">
43 |       {isOver ? <div className="backdrop-blur-md z-50 absolute top-0 right-0 bottom-0 left-0 flex justify-center items-center">
44 |         <div className="bg-gray-100 p-6 w-full md:w-1/2 2xl:w-1/3 border shadow-2xl mx-auto flex justify-center items-center">
45 |           <div className="text-center">
46 |             <h2 className="text-3xl font-bold">Your score</h2>
47 |             <div className="flex items-center justify-center">
48 |               <div className="text-center">
49 |                 <h3 className="text-8xl">{correctAnswerTotal} / {question.length}</h3>
50 |                 <div className="mt-4 mb-4">Incorrect Answer: {incorrectAnswerTotal}</div>
51 |                 <button className="bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2 rounded-full text-white font-bold hover:opacity-75" type="button" onClick={() => router.reload()}>Play again</button>
52 |               </div>
53 |             </div>
54 |           </div>
55 |         </div>
56 |       </div> : ""}
57 | 
58 |       <div className="absolute top-0 h-2 z-10 bg-gray-300 w-full" style={{ width: `${timer}%` }}></div>
59 |       <div className="h-[45vh] p-6 mb-4 flex items-center justify-center relative">
60 |         <div className="bg-gradient-to-b from-blue-500 to-white absolute top-0 left-0 right-0 bottom-0"></div>
61 |         <h3 className="absolute top-2 left-3 z-10">
62 |           <div className="font-bold">Question: <span id="totalQuestion">{question.length}</span></div>
63 |           <div className="font-bold">Correct: <span id="totalCorrect">{correctAnswerTotal}</span></div>
64 |           <div className="font-bold">Incorrect: <span id="totalIncorrect">{incorrectAnswerTotal}</span></div>
65 |         </h3>
66 |         <div className="font-bold text-4xl z-10 text-center">{question.length - 1 >= currentQuestionIndex ? question[currentQuestionIndex].question : ""}</div>
67 |       </div>
68 | 
69 |       <div className="h-[50vh] flex justify-between items-center space-x-5 mx-5">
70 |         {question.length - 1 >= currentQuestionIndex ? question[currentQuestionIndex].choices.map((seg) => {
71 |           return (
72 |             <div key={seg} onClick={() => handleClick(seg)} className="p-4 bg-blue-400 border-blue-500 hover:bg-blue-600 hover:border-blue-600 duration-300 border-2 h-80 w-full rounded-lg cursor-pointer flex items-center justify-center">
73 |               <div className="text-white font-sans font-bold text-2xl text-center">{seg}</div>
74 |             </div>
75 |           )
76 |         }) : ""}
77 |       </div>
78 |     </div >
79 |   )
80 | }
81 | 
82 | export async function getStaticProps() {
83 |   const getQuestion = await fetch(`http://localhost:3000/api/question`)
84 |   const question = await getQuestion.json()
85 |   return {
86 |     props: {
87 |       question: question.data
88 |     }
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sukristyan/quizapp-nextjs/7eca8e12e50fd2b796565dbc46fbfa41bd96efdd/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------