Next.js 14 Quiz App

data.ts

export const quiz = {
  totalQuestions: 20,
  questions: [
    {
      id: 1,
      question: 'What is the result of `typeof typeof 1`?',
      answers: ['number', 'string', 'object', 'undefined'],
      correctAnswer: 'string',
    },
    {
      id: 2,
      question: 'What will `console.log(1 === true)` output?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'false',
    },
    {
      id: 3,
      question: 'What is the result of `"hello" instanceof Object`?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'false',
    },
    {
      id: 4,
      question: 'What does `console.log([10] === [10])` return?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'false',
    },
    {
      id: 5,
      question: 'What will the following code output: `console.log(1 + "2" + "2")`?',
      answers: ['122', '5', '14', 'undefined'],
      correctAnswer: '122',
    },
    {
      id: 6,
      question: 'What is the output of `console.log(3 + 2 + "7")`?',
      answers: ['12', '327', '57', 'undefined'],
      correctAnswer: '57',
    },
    {
      id: 7,
      question: 'What will be the output of `console.log(Math.max())`?',
      answers: ['0', 'undefined', 'Infinity', 'TypeError'],
      correctAnswer: '-Infinity',
    },
    {
      id: 8,
      question: 'What will be the output of `console.log(1 < 2 < 3)`?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'true',
    },
    {
      id: 9,
      question: 'What is the result of `"5" - 3`?',
      answers: ['2', '8', 'NaN', 'undefined'],
      correctAnswer: '2',
    },
    {
      id: 10,
      question: 'What will `console.log(1 - "1")` output?',
      answers: ['0', '1', 'undefined', 'TypeError'],
      correctAnswer: '0',
    },
    {
      id: 11,
      question: 'What is the output of `console.log(typeof NaN)`?',
      answers: ['number', 'string', 'NaN', 'undefined'],
      correctAnswer: 'number',
    },
    {
      id: 12,
      question: 'What does the following code return: `console.log(typeof (typeof 1))`?',
      answers: ['number', 'string', 'object', 'undefined'],
      correctAnswer: 'string',
    },
    {
      id: 13,
      question: 'What will the following code output: `console.log([] + {})`?',
      answers: ['[object Object]', '{}', 'undefined', 'TypeError'],
      correctAnswer: '[object Object]',
    },
    {
      id: 14,
      question: 'What will the output of `console.log(1 + 2 + "3")` be?',
      answers: ['33', '123', '6', 'undefined'],
      correctAnswer: '33',
    },
    {
      id: 15,
      question: 'What will be the output of `console.log(+"hello")`?',
      answers: ['NaN', 'SyntaxError', 'undefined', 'TypeError'],
      correctAnswer: 'NaN',
    },
    {
      id: 16,
      question: 'What will the following code output: `console.log(!!"false")`?',
      answers: ['false', 'true', 'undefined', 'TypeError'],
      correctAnswer: 'true',
    },
    {
      id: 17,
      question: 'What is the result of `console.log([] + [])`?',
      answers: ['[]', '{}', '0', 'undefined'],
      correctAnswer: '',
    },
    {
      id: 18,
      question: 'What will be the output of `console.log(0.1 + 0.2 === 0.3)`?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'false',
    },
    {
      id: 19,
      question: 'What will be the output of the following code: `console.log(typeof typeof 1)`?',
      answers: ['number', 'string', 'object', 'undefined'],
      correctAnswer: 'string',
    },
    {
      id: 20,
      question: 'What is the output of `console.log(1 === true)`?',
      answers: ['true', 'false', 'undefined', 'TypeError'],
      correctAnswer: 'false',
    },
  ],
};

quizResults.route.ts

import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";


export async function POST(req:NextRequest) {
  const body = await req.json()
  const {userId, quizScore, correctAnswers, wrongAnswers} = body

  try{
    let existingUser = await prisma.user.findUnique({
      where: { id: userId },
      include: { quizResults: true },
    });
    if (existingUser && existingUser.quizResults && existingUser.quizResults.length > 0) {
      const updatedUserStats = await prisma.quizResult.update({
          where: { id: existingUser.quizResults[0].id },
          data: {
            quizScore: existingUser.quizResults[0].quizScore + quizScore,
            correctAnswers: existingUser.quizResults[0].correctAnswers + correctAnswers,
            wrongAnswers: existingUser.quizResults[0].wrongAnswers + wrongAnswers,
          },
      });
      return NextResponse.json({ updatedUserStats });
  }
  else {
    const newUser = await prisma.user.update({
      where: {id: userId},
      data: {
        quizResults: {
          create: {
            quizScore: quizScore,
            correctAnswers: correctAnswers,
            wrongAnswers: wrongAnswers,
          },
        },
      },
    })
   return NextResponse.json({newUser})
  }
}
   catch (error) {
    console.error(error)
    return
  }

}

schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id          String       @id @default(cuid()) @map("_id")
  username    String
  email       String       @unique
  profilePic  String
  clerkUserId String       @unique
  createdAt   DateTime     @default(now())
  updatedAt   DateTime     @updatedAt
  quizResults QuizResult[]
}

model QuizResult {
  id             String   @id @default(cuid()) @map("_id")
  user           User     @relation(fields: [userId], references: [id])
  userId         String
  quizScore      Int
  correctAnswers Int
  wrongAnswers   Int
  createdAt      DateTime @default(now())
}

stats.page.tsx

import StatCard from "@/components/StatCard";
import { fetchUsers } from "../(auth)/actions/fetchUsers";

const page = async () => {
  const currentUser = await fetchUsers();
  return (
    <div className="py-20">
      <div className="text-center mb-10 text-2xl uppercase">
        <h1>{currentUser?.data?.user.username} Stats 📊</h1>
      </div>
      <div className="max-w-[1500px] mx-auto w-[90%] grid sm:grid-cols-3 gap-10 justify-center">
        <StatCard
          title="Total Points"
          value={
            currentUser?.data?.quizResults[0].quizScore
          }
        />
        <StatCard
          title="Correct Answers"
          value={
            currentUser?.data?.quizResults[0].correctAnswers
          }
        />
        <StatCard
          title="Wrong Answers"
          value={
            currentUser?.data?.quizResults[0].wrongAnswers
          }
        />
      </div>
    </div>
  );
};

export default page;