Quiz App using MERN Stack

// server.js

import express from 'express';
import morgan from 'morgan';
import cors from 'cors';
import { config } from 'dotenv';
import router from './router/route.js';
import connect from './database/conn.js';

config();

const app = express();

app.use(morgan('tiny'));
app.use(cors());
app.use(express.json());

const port = process.env.PORT || 8080;

app.use('/api', router);

app.get('/', (req, res) => {
    try {
        res.json("Get Request")
    } catch (error) {
        res.json(error)
    }
});

connect().then(() => {
    app.listen(port, () => {
        console.log(`Server connected to http://localhost:${port}`);
    });
}).catch(error => {
    console.log("Invalid Database Connection");
});

//database/conn.js

import mongoose from "mongoose";

export default async function connect(){
    try {
        await mongoose.connect(process.env.ATLAS_URI);
        console.log("Database Connected");
    } catch (error) {
        console.log("Invalid Database Connection");
    }
}

//database/data.js

export default [
    {
        id: 1,
        question : "Javascript is an _______ language",
        options : [
            'Object-Oriented',
            'Object-Based',
            'Procedural',
        ]
    },
    {
        id: 2,
        question : "Following methods can be used to display data in some form using Javascript",
        options : [
            'document.write()',
            'console.log()',
            'window.alert()',
        ]
    },
    {
        id: 3,
        question : "When an operator value is NULL, the typeof returned by the unary operator is:",
        options : [
            'Boolean',
            'Undefined',
            'Object',
        ]
    },
    {
        id: 4,
        question : "What does the toString() method return?",
        options : [
            'Return Object',
            'Return String',
            'Return Integer'
        ]
    },
    {
        id: 5,
        question : "Which function is used to serialize an object into a JSON string?",
        options : [
            'stringify()',
            'parse()',
            'convert()',
        ]
    }
];

export const answers = [0, 1, 2, 1, 0];

//models/questionSchema.js

import mongoose from "mongoose";
const { Schema } = mongoose;

/** question model */
const questionModel = new Schema({
    questions: { type : Array, default: []}, // create question with [] default value
    answers : { type : Array, default: []},
    createdAt: { type: Date, default: Date.now },
});

export default mongoose.model('Question', questionModel);

//models/resultSchema.js

import mongoose from "mongoose";
const { Schema } = mongoose;


/** result model */
const resultModel = new Schema({
    username : { type : String },
    result : { type : Array, default : []},
    attempts : { type : Number, default : 0},
    points : { type : Number, default : 0},
    achived : { type : String, default : ''},
    createdAt : { type : Date, default : Date.now}
})

export default mongoose.model('result', resultModel);

//router/router.js

import { Router } from "express";
import * as controller from '../controllers/controller.js';

const router = Router();

router.route('/')

router.route('/questions')
        .get(controller.getQuestions)
        .post(controller.insertQuestions)
        .delete(controller.dropQuestions);

router.route('/result')
        .get(controller.getResult)
        .post(controller.storeResult)
        .delete(controller.dropResult);

export default router;

//controller/controller.js

import Questions from "../models/questionSchema.js";
import Results from "../models/resultSchema.js";
import questions, { answers } from '../database/data.js'

/** get all questions */
export async function getQuestions(req, res) {
    try {
        let q = await Questions.find();
        if (q.length === 0) {
            await Questions.insertMany({ questions, answers });
            q = await Questions.find();
        }
        res.json(q);
    } catch (error) {
        res.json({ error });
    }
}

/** insert all questinos */
export async function insertQuestions(req, res) {
    try {
        Questions.insertMany({ questions: questions, answers: answers })
    } catch (error) {
        res.json({ error })
    }
}

/** Delete all Questions */
export async function dropQuestions(req, res) {
    try {
        await Questions.deleteMany();
        res.json({ msg: "Questions Deleted Successfully...!" });
    } catch (error) {
        res.json({ error })
    }
}

/** get all result */
export async function getResult(req, res) {
    try {
        const r = await Results.find();
        res.json(r)
    } catch (error) {
        res.json({ error })
    }
}

/** post all result */
export async function storeResult(req, res) {
    try {
        const { username, result, attempts, points, achived } = req.body;
        if (!username && !result) throw new Error('Data Not Provided...!');

        const newResult = await Results.create({ username, result, attempts, points, achived });
        res.json({ msg: "Result Saved Successfully...!", result: newResult });

    } catch (error) {
        res.json({ error });
    }
}

/** delete all result */
export async function dropResult(req, res) {
    try {
        await Results.deleteMany();
        res.json({ msg: "Result Deleted Successfully...!" })
    } catch (error) {
        res.json({ error })
    }
}

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css';
import App from './components/App';


/** Redux Store */
import store from './redux/store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

//components/App.js

import '../styles/App.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

/** import components */
import Main from './Main';
import Quiz from './Quiz';
import Result from './Result';
import { CheckUserExist } from '../helper/helper';


/** react routes */
const router = createBrowserRouter([
    {
        path: '/',
        element: <Main></Main>
    },
    {
        path: '/quiz',
        element: <CheckUserExist><Quiz /></CheckUserExist>
    },
    {
        path: '/result',
        element: <CheckUserExist><Result /></CheckUserExist>
    },
])

function App() {
    return (
        <>
            <RouterProvider router={router} />
        </>
    );
}

export default App;

//components/Main.js

import React, { useRef } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { setUserId } from "../redux/result_reducer";
import "../styles/Main.css";

export default function Main() {
    const inputRef = useRef(null);
    const dispatch = useDispatch();

    function startQuiz() {
        if (inputRef.current?.value) {
            dispatch(setUserId(inputRef.current?.value));
        }
    }

    return (
        <div className="container">
            <h1 className="title text-light">Quiz Application</h1>

            <ol>
                <li>You will be asked 10 questions one after another.</li>
                <li>10 points is awarded for the correct answer.</li>
                <li>
                    Each question has three options. You can choose only one options.
                </li>
                <li>You can review and change answers before the quiz finish.</li>
                <li>The result will be declared at the end of the quiz.</li>
            </ol>

            <form id="form">
                <input
                    ref={inputRef}
                    className="userid"
                    type="text"
                    placeholder="Username*"
                />
            </form>

            <div className="start">
                <Link className="btn" to={"quiz"} onClick={startQuiz}>
                    Start Quiz
                </Link>
            </div>
        </div>
    );
}

//components/Questions.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useFetchQestion } from "../hooks/FetchQuestion";
import { updateResult } from "../hooks/setResult";

export default function Questions({ onChecked }) {
    const dispatch = useDispatch();
    const { trace } = useSelector((state) => state.questions);
    const result = useSelector((state) => state.result.result);
    const [{ isLoading, apiData, serverError }] = useFetchQestion();
    const questions = useSelector((state) => state.questions.queue[trace]);

    function onSelect(i) {
        dispatch(updateResult({ trace, checked: i }));
        onChecked(i); // Call the parent handler to update parent state
    }

    if (isLoading) return <h3 className="text-light">Loading...</h3>;
    if (serverError)
        return <h3 className="text-light">{serverError || "Unknown Error"}</h3>;

    if (!questions) return <h3 className="text-light">No questions available</h3>;

    return (
        <div className="questions">
            <h2 className="text-light">{questions?.question}</h2>
            <ul key={questions?.id}>
                {questions?.options.map((q, i) => (
                    <li key={i}>
                        <input
                            type="radio"
                            value={i}
                            name={`options-${questions.id}`}
                            id={`q${i}-option`}
                            onChange={() => onSelect(i)}
                            checked={result[trace] === i}
                        />
                        <label className="text-primary" htmlFor={`q${i}-option`}>
                            {q}
                        </label>
                        <div
                            className={`check ${result[trace] === i ? "checked" : ""}`}
                        ></div>
                    </li>
                ))}
            </ul>
        </div>
    );
}

//components/Quiz.js

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Navigate } from "react-router-dom";
import Questions from "./Questions";
import { MoveNextQuestion, MovePrevQuestion } from "../hooks/FetchQuestion";
import { PushAnswer } from "../hooks/setResult";

export default function Quiz() {
    const [check, setChecked] = useState(undefined);
    const result = useSelector((state) => state.result.result);
    const { queue, trace } = useSelector((state) => state.questions);
    const dispatch = useDispatch();

    function onNext() {
        if (trace < queue.length) {
            dispatch(MoveNextQuestion());
            if (result.length <= trace) {
                dispatch(PushAnswer(check));
            }
        }
        setChecked(undefined);
    }

    function onPrev() {
        if (trace > 0) {
            dispatch(MovePrevQuestion());
        }
    }

    function onChecked(check) {
        setChecked(check);
    }

    if (result.length && result.length >= queue.length) {
        return <Navigate to={"/result"} replace={true}></Navigate>;
    }

    return (
        <div className="container">
            <h1 className="title text-light">Quiz Application</h1>
            <Questions onChecked={onChecked} />
            <div className="grid">
                {trace > 0 ? (
                    <button className="btn prev" onClick={onPrev}>
                        Prev
                    </button>
                ) : (
                    <div></div>
                )}
                <button className="btn next" onClick={onNext}>
                    Next
                </button>
            </div>
        </div>
    );
}

//components/Result.js

import React, { useEffect } from "react";
import "../styles/Result.css";
import { Link } from "react-router-dom";

import ResultTable from "./ResultTable";
import { useDispatch, useSelector } from "react-redux";
import {
    attempts_Number,
    earnPoints_Number,
    flagResult,
} from "../helper/helper";

/** import actions  */
import { resetAllAction } from "../redux/question_reducer";
import { resetResultAction } from "../redux/result_reducer";
import { usePublishResult } from "../hooks/setResult";

export default function Result() {
    const dispatch = useDispatch();
    const {
        questions: { queue, answers },
        result: { result, userId },
    } = useSelector((state) => state);

    const totalPoints = queue.length * 10;
    const attempts = attempts_Number(result);
    const earnPoints = earnPoints_Number(result, answers, 10);
    const flag = flagResult(totalPoints, earnPoints);

    /** store user result */
    usePublishResult({
        result,
        username: userId,
        attempts,
        points: earnPoints,
        achived: flag ? "Passed" : "Failed",
    });

    function onRestart() {
        dispatch(resetAllAction());
        dispatch(resetResultAction());
    }

    return (
        <div className="container">
            <h1 className="title text-light">Quiz Application</h1>

            <div className="result flex-center">
                <div className="flex">
                    <span>Username</span>
                    <span className="bold">{userId || ""}</span>
                </div>
                <div className="flex">
                    <span>Total Quiz Points : </span>
                    <span className="bold">{totalPoints || 0}</span>
                </div>
                <div className="flex">
                    <span>Total Questions : </span>
                    <span className="bold">{queue.length || 0}</span>
                </div>
                <div className="flex">
                    <span>Total Attempts : </span>
                    <span className="bold">{attempts || 0}</span>
                </div>
                <div className="flex">
                    <span>Total Earn Points : </span>
                    <span className="bold">{earnPoints || 0}</span>
                </div>
                <div className="flex">
                    <span>Quiz Result</span>
                    <span
                        style={{ color: `${flag ? "#2aff95" : "#ff2a66"}` }}
                        className="bold"
                    >
                        {flag ? "Passed" : "Failed"}
                    </span>
                </div>
            </div>

            <div className="start">
                <Link className="btn" to={"/"} onClick={onRestart}>
                    Restart
                </Link>
            </div>

            <div className="container">
                {/* result table */}
                <ResultTable></ResultTable>
            </div>
        </div>
    );
}

//components/ResultTable.js

import React, { useEffect, useState } from 'react';
import { getServerData } from '../helper/helper';

export default function ResultTable() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getServerData(`http://localhost:${process.env.PORT || 5000}/api/result`, (res) => {
      setData(res);
    }).catch(error => console.error('Error fetching result data:', error));
  }, []);

  if (!data || data.length === 0) return <div>No Data Found</div>;

  return (
    <div>
      <table>
        <thead className='table-header'>
          <tr className='table-row'>
            <td>Name</td>
            <td>Attempts</td>
            <td>Earn Points</td>
            <td>Result</td>
          </tr>
        </thead>
        <tbody>
          {data.map((v, i) => (
            <tr className='table-body' key={i}>
              <td>{v?.username || ''}</td>
              <td>{v?.attempts || 0}</td>
              <td>{v?.points || 0}</td>
              <td>{v?.achieved || ''}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

//helper/helper.js

import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
import axios from "axios";

export function attempts_Number(result) {
    return result.filter((r) => r !== undefined).length;
}

export function earnPoints_Number(result, answers, point) {
    return result
        .map((element, i) => answers[i] === element)
        .filter((i) => i)
        .map((i) => point)
        .reduce((prev, curr) => prev + curr, 0);
}

export function flagResult(totalPoints, earnPoints) {
    return (totalPoints * 50) / 100 < earnPoints; /** earn 50% marks */
}

/** check user auth  */
export function CheckUserExist({ children }) {
    const auth = useSelector((state) => state.result.userId);
    return auth ? children : <Navigate to={"/"} replace={true}></Navigate>;
}

/** get server data */
export async function getServerData(url, callback) {
    const data = await (await axios.get(url))?.data;
    return callback ? callback(data) : data;
}

/** post server data */
export async function postServerData(url, result, callback) {
    const data = await (await axios.post(url, result))?.data;
    return callback ? callback(data) : data;
}

//hooks/setResult.js

import { postServerData } from "../helper/helper";
import * as Action from "../redux/result_reducer";

export const PushAnswer = (result) => async (dispatch) => {
    try {
        await dispatch(Action.pushResultAction(result));
    } catch (error) {
        console.error("Error pushing answer:", error);
    }
};

export const updateResult = (payload) => async (dispatch) => {
    try {
        dispatch(Action.updateResultAction(payload));
    } catch (error) {
        console.error("Error updating result:", error);
    }
};

/** insert user data */
export const usePublishResult = (resultData) => {
    const { result, username } = resultData;
    (async () => {
        try {
            if (!result.length || !username) {
                throw new Error("Couldn't get Result: Invalid result or username.");
            }
            const port = process.env.PORT || 5000;
            const response = await postServerData(
                `http://localhost:${port}/api/result`,
                resultData
            );
            console.log("Result published:", response);
        } catch (error) {
            console.error("Error publishing result:", error);
        }
    })();
};

//redux/question_reducer.js

import { createSlice } from "@reduxjs/toolkit";

/** create reducer */
export const questionReducer = createSlice({
    name: "questions",
    initialState: {
        queue: [],
        answers: [],
        trace: 0,
    },
    reducers: {
        startExamAction: (state, action) => {
            let { question, answers } = action.payload;
            return {
                ...state,
                queue: question,
                answers,
            };
        },
        moveNextAction: (state) => {
            return {
                ...state,
                trace: state.trace + 1,
            };
        },
        movePrevAction: (state) => {
            return {
                ...state,
                trace: state.trace - 1,
            };
        },
        resetAllAction: () => {
            return {
                queue: [],
                answers: [],
                trace: 0,
            };
        },
    },
});

export const {
    startExamAction,
    moveNextAction,
    movePrevAction,
    resetAllAction,
} = questionReducer.actions;

export default questionReducer.reducer;

//redux/result_rducer.js

import { createSlice } from "@reduxjs/toolkit";

export const resultReducer = createSlice({
    name: "result",
    initialState: {
        userId: null,
        result: [],
    },
    reducers: {
        setUserId: (state, action) => {
            state.userId = action.payload;
        },
        pushResultAction: (state, action) => {
            state.result.push(action.payload);
        },
        updateResultAction: (state, action) => {
            const { trace, checked } = action.payload;
            state.result[trace] = checked;
        },
        resetResultAction: () => {
            return {
                userId: null,
                result: [],
            };
        },
    },
});

export const {
    setUserId,
    pushResultAction,
    resetResultAction,
    updateResultAction,
} = resultReducer.actions;

export default resultReducer.reducer;

//redux/store.js

import { combineReducers, configureStore } from "@reduxjs/toolkit";

/** call reducers */
import questionReducer from "./question_reducer";
import resultReducer from "./result_reducer";

const rootReducer = combineReducers({
    questions: questionReducer,
    result: resultReducer,
});

/** create store with reducer */
export default configureStore({ reducer: rootReducer });

//hooks/FetchQuestions.js

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { getServerData } from "../helper/helper";
import * as Action from "../redux/question_reducer";

/** fetch question hook to fetch api data and set value to store */
export const useFetchQestion = () => {
    const dispatch = useDispatch();
    const [getData, setGetData] = useState({
        isLoading: false,
        apiData: [],
        serverError: null,
    });

    useEffect(() => {
        setGetData((prev) => ({ ...prev, isLoading: true }));

        /** async function fetch backend data */
        (async () => {
            try {
                const [{ questions, answers }] = await getServerData(
                    `http://localhost:${process.env.PORT || 5000}/api/questions`,
                    (data) => data
                );

                if (questions.length > 0) {
                    setGetData((prev) => ({ ...prev, isLoading: false }));
                    setGetData((prev) => ({ ...prev, apiData: questions }));

                    /** dispatch an action */
                    dispatch(Action.startExamAction({ question: questions, answers }));
                } else {
                    throw new Error("No Question Available");
                }
            } catch (error) {
                setGetData((prev) => ({ ...prev, isLoading: false }));
                setGetData((prev) => ({ ...prev, serverError: error.message }));
            }
        })();
    }, [dispatch]);

    return [getData, setGetData];
};

/** MoveAction Dispatch function */
export const MoveNextQuestion = () => (dispatch) => {
    try {
        dispatch(Action.moveNextAction()); /** increase trace by 1 */
    } catch (error) {
        console.error("Error moving to next question:", error);
    }
};

/** PrevAction Dispatch function */
export const MovePrevQuestion = () => (dispatch) => {
    try {
        dispatch(Action.movePrevAction()); /** decrease trace by 1 */
    } catch (error) {
        console.error("Error moving to previous question:", error);
    }
};