10 | ) 11 | } 12 | 13 | export { Skeleton } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | .env -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import tailwindcss from '@tailwindcss/vite' 2 | import react from '@vitejs/plugin-react' 3 | import path from 'path' 4 | import { defineConfig } from 'vite' 5 | 6 | // https://vite.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react(), tailwindcss()], 9 | resolve: { 10 | alias: { 11 | '@': path.resolve(__dirname, './src'), 12 | '@convex': path.resolve(__dirname, './convex'), 13 | }, 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } 22 | -------------------------------------------------------------------------------- /convex/_generated/api.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated `api` utility. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import { anyApi } from "convex/server"; 12 | 13 | /** 14 | * A utility for referencing Convex functions in your app's API. 15 | * 16 | * Usage: 17 | * ```js 18 | * const myFunctionReference = api.myModule.myFunction; 19 | * ``` 20 | */ 21 | export const api = anyApi; 22 | export const internal = anyApi; 23 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 80, 10 | "proseWrap": "preserve", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": false, 14 | "singleQuote": true, 15 | "tabWidth": 2, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": false, 19 | "plugins": ["prettier-plugin-tailwindcss"] 20 | } 21 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from 'clsx' 2 | import { twMerge } from 'tailwind-merge' 3 | 4 | export function cn(...inputs: Array) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | 8 | export async function handlePromise( 9 | promise: Promise 10 | ): Promise<[PromiseResult, null] | [null, Error]> { 11 | try { 12 | const result = await promise 13 | return [result, null] 14 | } catch (error) { 15 | return [null, error instanceof Error ? error : new Error(String(error))] 16 | } 17 | } 18 | 19 | export async function sleep(ms: number) { 20 | return new Promise((resolve) => setTimeout(resolve, ms)) 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as LabelPrimitive from "@radix-ui/react-label" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | function Label({ 7 | className, 8 | ...props 9 | }: React.ComponentProps) { 10 | return ( 11 | 19 | ) 20 | } 21 | 22 | export { Label } 23 | -------------------------------------------------------------------------------- /convex/auth.ts: -------------------------------------------------------------------------------- 1 | import { Password } from '@convex-dev/auth/providers/Password' 2 | import { convexAuth } from '@convex-dev/auth/server' 3 | import { DataModel } from './_generated/dataModel' 4 | import { MutationCtx } from './_generated/server' 5 | 6 | export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({ 7 | providers: [Password()], 8 | callbacks: { 9 | async createOrUpdateUser(ctx: MutationCtx, args) { 10 | if (args.existingUserId) { 11 | return args.existingUserId 12 | } 13 | 14 | // First create the user 15 | const userId = await ctx.db.insert('users', { 16 | email: args.profile.email!, 17 | updatedAt: Date.now(), 18 | }) 19 | 20 | return userId 21 | }, 22 | }, 23 | }) 24 | -------------------------------------------------------------------------------- /src/components/quiz-not-found.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button' 2 | import { ROUTES } from '@/lib/constants' 3 | import { Link } from 'react-router' 4 | 5 | export function QuizNotFound() { 6 | return ( 7 |

8 |

9 |

10 |

Quiz Not Found

11 |

12 | The quiz you are looking for does not exist. 13 |

14 |

15 | 16 | 19 |

20 |

21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | function Separator({ 7 | className, 8 | orientation = "horizontal", 9 | decorative = true, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 23 | ) 24 | } 25 | 26 | export { Separator } 27 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |

15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/src/hooks/use-prefetch-query.tsx:
--------------------------------------------------------------------------------
 1 | import { useConvex } from 'convex/react'
 2 | import { FunctionReference } from 'convex/server'
 3 | import { useCallback } from 'react'
 4 | 
 5 | export function usePrefetchQuery<Query extends FunctionReference<'query'>>(
 6 |   query: Query,
 7 |   options: {
 8 |     timeoutMs?: number
 9 |   } = { timeoutMs: 20000 }
10 | ) {
11 |   const convex = useConvex()
12 | 
13 |   const prefetch = useCallback(
14 |     (args: Query['_args']) => {
15 |       const watch = convex.watchQuery(query, args)
16 |       // Just subscribe to keep the data in cache
17 |       const unsubscribe = watch.onUpdate(() => {})
18 | 
19 |       setTimeout(() => {
20 |         unsubscribe()
21 |       }, options.timeoutMs)
22 | 
23 |       return unsubscribe
24 |     },
25 |     [convex, options.timeoutMs, query]
26 |   )
27 | 
28 |   return prefetch
29 | }
30 |

--------------------------------------------------------------------------------
/convex/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   /* This TypeScript project config describes the environment that
 3 |    * Convex functions run in and is used to typecheck them.
 4 |    * You can modify it, but some settings required to use Convex.
 5 |    */
 6 |   "compilerOptions": {
 7 |     /* These settings are not required by Convex and can be modified. */
 8 |     "allowJs": true,
 9 |     "strict": true,
10 |     "moduleResolution": "Bundler",
11 |     "jsx": "react-jsx",
12 |     "skipLibCheck": true,
13 |     "allowSyntheticDefaultImports": true,
14 | 
15 |     /* These compiler options are required by Convex */
16 |     "target": "ESNext",
17 |     "lib": ["ES2021", "dom"],
18 |     "forceConsistentCasingInFileNames": true,
19 |     "module": "ESNext",
20 |     "isolatedModules": true,
21 |     "noEmit": true
22 |   },
23 |   "include": ["./**/*"],
24 |   "exclude": ["./_generated"]
25 | }
26 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/index.tsx:
--------------------------------------------------------------------------------
 1 | import { api } from '@convex/_generated/api'
 2 | import { FunctionReturnType } from 'convex/server'
 3 | import { QuizForm } from './components/quiz-form'
 4 | import { QuizListSection } from './components/quiz-list-section'
 5 | 
 6 | export type QuizWithProgress = FunctionReturnType<
 7 |   typeof api.quizzes.queries.listQuizzesWithProgress
 8 | >[number]
 9 | 
10 | export function QuizHomePage() {
11 |   return (
12 |     <div className="mx-auto flex max-w-7xl flex-col gap-10">
13 |       <div>
14 |         <h1 className="mb-2 text-3xl font-bold">Create a New Quiz</h1>
15 |         <p className="text-muted-foreground">
16 |           Enter your study notes and we'll generate a quiz to help you
17 |           learn.
18 |         </p>
19 |       </div>
20 | 
21 |       <QuizForm />
22 | 
23 |       <QuizListSection />
24 |     </div>
25 |   )
26 | }
27 |

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "incremental": true,
 5 |     "target": "ES2020",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 8 |     "module": "ESNext",
 9 |     "skipLibCheck": true,
10 | 
11 |     /* Bundler mode */
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "isolatedModules": true,
15 |     "moduleDetection": "force",
16 |     "noEmit": true,
17 |     "jsx": "react-jsx",
18 | 
19 |     /* Linting */
20 |     "strict": true,
21 |     "noUnusedLocals": true,
22 |     "noUnusedParameters": true,
23 |     "noFallthroughCasesInSwitch": true,
24 |     "baseUrl": ".",
25 |     "paths": {
26 |       "@/*": ["./src/*"],
27 |       "@convex/*": ["./convex/*"]
28 |     }
29 |   },
30 |   "include": ["src"]
31 | }
32 |

--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | import * as ProgressPrimitive from '@radix-ui/react-progress'
 2 | import * as React from 'react'
 3 | 
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | function Progress({
 7 |   className,
 8 |   value,
 9 |   ...props
10 | }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
11 |   return (
12 |     <ProgressPrimitive.Root
13 |       data-slot="progress"
14 |       className={cn(
15 |         'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
16 |         className
17 |       )}
18 |       {...props}
19 |     >
20 |       <ProgressPrimitive.Indicator
21 |         data-slot="progress-indicator"
22 |         className="bg-primary h-full w-full flex-1 transition-all duration-200 ease-in-out"
23 |         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
24 |       />
25 |     </ProgressPrimitive.Root>
26 |   )
27 | }
28 | 
29 | export { Progress }
30 |

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import '@fontsource-variable/inter'
 2 | import { Route, Routes } from 'react-router'
 3 | import { AuthenticatedLayout } from './layouts/authenticated'
 4 | import { ROUTES } from './lib/constants'
 5 | import { LoginPage } from './pages/login'
 6 | import { QuizDetailPage } from './pages/quiz-detail'
 7 | import { QuizHomePage } from './pages/quiz-home'
 8 | import { QuizResultsPage } from './pages/quiz-results'
 9 | 
10 | function App() {
11 |   return (
12 |     <Routes>
13 |       <Route path={ROUTES.login} element={<LoginPage />} />
14 |       <Route element={<AuthenticatedLayout />}>
15 |         <Route path={ROUTES.quizHome} element={<QuizHomePage />} />
16 |         <Route path={ROUTES.quizDetail} element={<QuizDetailPage />} />
17 |         <Route path={ROUTES.quizDetailResults} element={<QuizResultsPage />} />
18 |       </Route>
19 |     </Routes>
20 |   )
21 | }
22 | 
23 | export default App
24 |

--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes"
 2 | import { Toaster as Sonner, ToasterProps } from "sonner"
 3 | 
 4 | const Toaster = ({ ...props }: ToasterProps) => {
 5 |   const { theme = "system" } = useTheme()
 6 | 
 7 |   return (
 8 |     <Sonner
 9 |       theme={theme as ToasterProps["theme"]}
10 |       className="toaster group"
11 |       toastOptions={{
12 |         classNames: {
13 |           toast:
14 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
15 |           description: "group-[.toast]:text-muted-foreground",
16 |           actionButton:
17 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
18 |           cancelButton:
19 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
20 |         },
21 |       }}
22 |       {...props}
23 |     />
24 |   )
25 | }
26 | 
27 | export { Toaster }
28 |

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 |

--------------------------------------------------------------------------------
/convex/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import tseslint from 'typescript-eslint'
 3 | 
 4 | export default tseslint.config({
 5 |   files: ['**/*.ts'],
 6 |   ignores: ['_generated/**'],
 7 |   languageOptions: {
 8 |     ecmaVersion: 2020,
 9 |     parserOptions: {
10 |       project: ['./tsconfig.json'],
11 |       tsconfigRootDir: import.meta.dirname,
12 |     },
13 |   },
14 |   extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked],
15 |   rules: {
16 |     'no-await-in-loop': 'error',
17 |     '@typescript-eslint/array-type': ['error', { default: 'generic' }],
18 |     '@typescript-eslint/naming-convention': [
19 |       'error',
20 |       {
21 |         selector: 'variable',
22 |         types: ['boolean'],
23 |         format: ['PascalCase'],
24 |         prefix: ['is', 'should', 'has', 'are', 'can', 'was'],
25 |       },
26 |     ],
27 |     '@typescript-eslint/no-unsafe-return': 'off',
28 |     '@typescript-eslint/no-unsafe-member-access': 'off',
29 |     '@typescript-eslint/no-unsafe-call': 'off',
30 |     '@typescript-eslint/no-unsafe-assignment': 'off',
31 |   },
32 | })
33 |

--------------------------------------------------------------------------------
/convex/utils.ts:
--------------------------------------------------------------------------------
 1 | import { ConvexError } from 'convex/values'
 2 | import { Id } from './_generated/dataModel'
 3 | import { MutationCtx, QueryCtx } from './_generated/server'
 4 | import { requireCurrentUser } from './users'
 5 | 
 6 | export async function handlePromise<PromiseResult>(
 7 |   promise: Promise<PromiseResult>
 8 | ): Promise<[PromiseResult, null] | [null, Error]> {
 9 |   try {
10 |     const result = await promise
11 |     return [result, null]
12 |   } catch (error) {
13 |     return [null, error instanceof Error ? error : new Error(String(error))]
14 |   }
15 | }
16 | 
17 | export async function quizAuthCheckFunc({
18 |   quizId,
19 |   ctx,
20 | }: {
21 |   quizId: Id<'quizzes'>
22 |   ctx: MutationCtx | QueryCtx
23 | }) {
24 |   const quiz = await ctx.db.get(quizId)
25 |   if (!quiz) {
26 |     throw new ConvexError('Quiz not found')
27 |   }
28 | 
29 |   const user = await requireCurrentUser(ctx)
30 |   if (!user) {
31 |     throw new ConvexError('Unauthenticated. Please login to continue.')
32 |   }
33 | 
34 |   if (quiz.userId !== user._id) {
35 |     throw new ConvexError('Unauthorized to work on this quiz.')
36 |   }
37 | 
38 |   return { quiz, user }
39 | }
40 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/components/quiz-list.tsx:
--------------------------------------------------------------------------------
 1 | import { AnimatePresence } from 'motion/react'
 2 | import { QuizWithProgress } from '..'
 3 | import { QuizItem, QuizItemSkeleton } from './quiz-item'
 4 | 
 5 | type QuizListProps = {
 6 |   quizzes: Array<QuizWithProgress> | undefined
 7 | }
 8 | 
 9 | export function QuizList({ quizzes }: QuizListProps) {
10 |   // loading
11 |   if (quizzes === undefined) {
12 |     return (
13 |       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
14 |         {Array.from({ length: 6 }).map((_, index) => (
15 |           <QuizItemSkeleton key={index} />
16 |         ))}
17 |       </div>
18 |     )
19 |   }
20 | 
21 |   // empty
22 |   if (quizzes.length === 0) {
23 |     return (
24 |       <div className="mt-10 flex items-center justify-center">
25 |         <p className="text-muted-foreground">No quizzes yet</p>
26 |       </div>
27 |     )
28 |   }
29 | 
30 |   return (
31 |     <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
32 |       <AnimatePresence mode="popLayout">
33 |         {quizzes.map((quiz) => (
34 |           <QuizItem key={quiz._id} quiz={quiz} />
35 |         ))}
36 |       </AnimatePresence>
37 |     </div>
38 |   )
39 | }
40 |

--------------------------------------------------------------------------------
/src/layouts/authenticated/index.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from '@/lib/constants'
 2 | import { api } from '@convex/_generated/api'
 3 | import { useConvexAuth, useQuery } from 'convex/react'
 4 | import { Loader2 } from 'lucide-react'
 5 | import { useEffect } from 'react'
 6 | import { generatePath, Outlet, useNavigate } from 'react-router'
 7 | import { Sidebar } from './components/sidebar'
 8 | 
 9 | export function AuthenticatedLayout() {
10 |   const user = useQuery(api.users.getCurrentUser)
11 |   const state = useConvexAuth()
12 |   const isLoading = user === undefined || state.isLoading
13 |   const navigate = useNavigate()
14 | 
15 |   useEffect(() => {
16 |     if (!isLoading && !user) {
17 |       void navigate(generatePath(ROUTES.login))
18 |     }
19 |   }, [isLoading, user, navigate])
20 | 
21 |   if (isLoading) {
22 |     return (
23 |       <div className="flex flex-1 items-center justify-center">
24 |         <Loader2 className="size-10 animate-spin" />
25 |       </div>
26 |     )
27 |   }
28 | 
29 |   return (
30 |     // root wrapper has flex column
31 |     <div className="flex w-full grow">
32 |       <Sidebar />
33 |       <div className="min-h-screen grow p-6 md:p-8 lg:p-10">
34 |         <Outlet />
35 |       </div>
36 |     </div>
37 |   )
38 | }
39 |

--------------------------------------------------------------------------------
/src/components/input-with-feedback.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils'
 2 | import { Loader2Icon } from 'lucide-react'
 3 | import type { ComponentProps } from 'react'
 4 | import { Input } from './ui/input'
 5 | 
 6 | type InputWithFeedbackProps = ComponentProps<'input'> & {
 7 |   errorMessage?: string
 8 |   isError?: boolean
 9 |   isLoading?: boolean
10 |   helperText?: string
11 | }
12 | 
13 | export function InputWithFeedback({
14 |   errorMessage,
15 |   helperText,
16 |   isError,
17 |   isLoading,
18 |   className,
19 |   ...props
20 | }: InputWithFeedbackProps) {
21 |   return (
22 |     <div className="relative w-full">
23 |       <Input
24 |         className={cn('w-full', className, {
25 |           'border-red-500': isError,
26 |         })}
27 |         {...props}
28 |       />
29 |       {isError && (
30 |         <p className="absolute -bottom-6 text-xs text-red-500">
31 |           {errorMessage}
32 |         </p>
33 |       )}
34 | 
35 |       {!isError && helperText && (
36 |         <p className="text-muted-foreground absolute -bottom-6 text-xs">
37 |           {helperText}
38 |         </p>
39 |       )}
40 | 
41 |       {isLoading && (
42 |         <Loader2Icon className="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2 animate-spin" />
43 |       )}
44 |     </div>
45 |   )
46 | }
47 |

--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { CheckIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function Checkbox({
10 |   className,
11 |   ...props
12 | }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
13 |   return (
14 |     <CheckboxPrimitive.Root
15 |       data-slot="checkbox"
16 |       className={cn(
17 |         "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
18 |         className
19 |       )}
20 |       {...props}
21 |     >
22 |       <CheckboxPrimitive.Indicator
23 |         data-slot="checkbox-indicator"
24 |         className="flex items-center justify-center text-current transition-none"
25 |       >
26 |         <CheckIcon className="size-3.5" />
27 |       </CheckboxPrimitive.Indicator>
28 |     </CheckboxPrimitive.Root>
29 |   )
30 | }
31 | 
32 | export { Checkbox }
33 |

--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated `api` utility.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import type {
12 |   ApiFromModules,
13 |   FilterApi,
14 |   FunctionReference,
15 | } from "convex/server";
16 | import type * as auth from "../auth.js";
17 | import type * as constants from "../constants.js";
18 | import type * as http from "../http.js";
19 | import type * as key from "../key.js";
20 | import type * as quizzes_actions from "../quizzes/actions.js";
21 | import type * as quizzes_mutations from "../quizzes/mutations.js";
22 | import type * as quizzes_queries from "../quizzes/queries.js";
23 | import type * as users from "../users.js";
24 | import type * as utils from "../utils.js";
25 | 
26 | /**
27 |  * A utility for referencing Convex functions in your app's API.
28 |  *
29 |  * Usage:
30 |  * ```js
31 |  * const myFunctionReference = api.myModule.myFunction;
32 |  * ```
33 |  */
34 | declare const fullApi: ApiFromModules<{
35 |   auth: typeof auth;
36 |   constants: typeof constants;
37 |   http: typeof http;
38 |   key: typeof key;
39 |   "quizzes/actions": typeof quizzes_actions;
40 |   "quizzes/mutations": typeof quizzes_mutations;
41 |   "quizzes/queries": typeof quizzes_queries;
42 |   users: typeof users;
43 |   utils: typeof utils;
44 | }>;
45 | export declare const api: FilterApi<
46 |   typeof fullApi,
47 |   FunctionReference<any, "public">
48 | >;
49 | export declare const internal: FilterApi<
50 |   typeof fullApi,
51 |   FunctionReference<any, "internal">
52 | >;
53 |

--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { CircleIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function RadioGroup({
10 |   className,
11 |   ...props
12 | }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       data-slot="radio-group"
16 |       className={cn("grid gap-3", className)}
17 |       {...props}
18 |     />
19 |   )
20 | }
21 | 
22 | function RadioGroupItem({
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
26 |   return (
27 |     <RadioGroupPrimitive.Item
28 |       data-slot="radio-group-item"
29 |       className={cn(
30 |         "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
31 |         className
32 |       )}
33 |       {...props}
34 |     >
35 |       <RadioGroupPrimitive.Indicator
36 |         data-slot="radio-group-indicator"
37 |         className="relative flex items-center justify-center"
38 |       >
39 |         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
40 |       </RadioGroupPrimitive.Indicator>
41 |     </RadioGroupPrimitive.Item>
42 |   )
43 | }
44 | 
45 | export { RadioGroup, RadioGroupItem }
46 |

--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import react from 'eslint-plugin-react'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import globals from 'globals'
 6 | import tseslint from 'typescript-eslint'
 7 | 
 8 | export default tseslint.config(
 9 |   { ignores: ['dist'] },
10 |   {
11 |     settings: {
12 |       react: {
13 |         version: '19.0',
14 |       },
15 |     },
16 |     extends: [
17 |       js.configs.recommended,
18 |       ...tseslint.configs.recommendedTypeChecked,
19 |     ],
20 |     files: ['**/*.{ts,tsx}'],
21 |     languageOptions: {
22 |       ecmaVersion: 2020,
23 |       globals: globals.browser,
24 |       parserOptions: {
25 |         project: ['./tsconfig.node.json', './tsconfig.app.json'],
26 |         tsconfigRootDir: import.meta.dirname,
27 |       },
28 |     },
29 |     plugins: {
30 |       'react-hooks': reactHooks,
31 |       'react-refresh': reactRefresh,
32 |       react,
33 |     },
34 |     rules: {
35 |       ...reactHooks.configs.recommended.rules,
36 |       'react-refresh/only-export-components': [
37 |         'warn',
38 |         { allowConstantExport: true },
39 |       ],
40 |       'no-await-in-loop': 'error',
41 |       '@typescript-eslint/no-misused-promises': 'off',
42 |       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
43 |       '@typescript-eslint/naming-convention': [
44 |         'error',
45 |         {
46 |           selector: 'variable',
47 |           types: ['boolean'],
48 |           format: ['PascalCase'],
49 |           prefix: ['is', 'should', 'has', 'are', 'can', 'was'],
50 |         },
51 |       ],
52 |       ...react.configs.recommended.rules,
53 |       ...react.configs['jsx-runtime'].rules,
54 |     },
55 |   }
56 | )
57 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/components/delete-alert-dialog.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AlertDialog,
 3 |   AlertDialogAction,
 4 |   AlertDialogCancel,
 5 |   AlertDialogContent,
 6 |   AlertDialogDescription,
 7 |   AlertDialogFooter,
 8 |   AlertDialogHeader,
 9 |   AlertDialogTitle,
10 | } from '@/components/ui/alert-dialog'
11 | 
12 | type DeleteQuizzesAlertDialogProps = {
13 |   isDeleteDialogOpen: boolean
14 |   setIsDeleteDialogOpen: (isOpen: boolean) => void
15 |   selectedQuizIds: Set<string>
16 |   confirmDelete: () => void
17 |   isDeleting: boolean
18 | }
19 | 
20 | export function DeleteQuizzesAlertDialog({
21 |   isDeleteDialogOpen,
22 |   setIsDeleteDialogOpen,
23 |   selectedQuizIds,
24 |   confirmDelete,
25 |   isDeleting,
26 | }: DeleteQuizzesAlertDialogProps) {
27 |   const isMultipleQuizzes = selectedQuizIds.size > 1
28 | 
29 |   return (
30 |     <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
31 |       <AlertDialogContent>
32 |         <AlertDialogHeader>
33 |           <AlertDialogTitle>Are you sure?</AlertDialogTitle>
34 |           <AlertDialogDescription>
35 |             You are about to delete {selectedQuizIds.size} quiz
36 |             {isMultipleQuizzes ? 'zes' : ''}. This action cannot be undone.
37 |           </AlertDialogDescription>
38 |         </AlertDialogHeader>
39 |         <AlertDialogFooter>
40 |           <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
41 |           <AlertDialogAction
42 |             onClick={confirmDelete}
43 |             className="bg-destructive hover:bg-destructive/90"
44 |             disabled={isDeleting}
45 |           >
46 |             {isDeleting ? 'Deleting...' : 'Delete'}
47 |           </AlertDialogAction>
48 |         </AlertDialogFooter>
49 |       </AlertDialogContent>
50 |     </AlertDialog>
51 |   )
52 | }
53 |

--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn("flex flex-col gap-1.5 px-6", className)}
23 |       {...props}
24 |     />
25 |   )
26 | }
27 | 
28 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
29 |   return (
30 |     <div
31 |       data-slot="card-title"
32 |       className={cn("leading-none font-semibold", className)}
33 |       {...props}
34 |     />
35 |   )
36 | }
37 | 
38 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
39 |   return (
40 |     <div
41 |       data-slot="card-description"
42 |       className={cn("text-muted-foreground text-sm", className)}
43 |       {...props}
44 |     />
45 |   )
46 | }
47 | 
48 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
49 |   return (
50 |     <div
51 |       data-slot="card-content"
52 |       className={cn("px-6", className)}
53 |       {...props}
54 |     />
55 |   )
56 | }
57 | 
58 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
59 |   return (
60 |     <div
61 |       data-slot="card-footer"
62 |       className={cn("flex items-center px-6", className)}
63 |       {...props}
64 |     />
65 |   )
66 | }
67 | 
68 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
69 |

--------------------------------------------------------------------------------
/convex/users.ts:
--------------------------------------------------------------------------------
 1 | import { getAuthUserId } from '@convex-dev/auth/server'
 2 | import { ConvexError, v } from 'convex/values'
 3 | import { api } from './_generated/api'
 4 | import { Doc } from './_generated/dataModel'
 5 | import { ActionCtx, mutation, query, QueryCtx } from './_generated/server'
 6 | import { handlePromise } from './utils'
 7 | 
 8 | /**
 9 |  * This function is used to get the current user.
10 |  * It's important that it's type safe so we don't run into inference loop issues.
11 |  */
12 | export async function requireCurrentUser(
13 |   ctx: QueryCtx | ActionCtx
14 | ): Promise<Doc<'users'> | null> {
15 |   const user = await ctx.runQuery(api.users.getCurrentUser)
16 | 
17 |   if (!user) {
18 |     return null
19 |   }
20 | 
21 |   return user
22 | }
23 | 
24 | export const getCurrentUser = query({
25 |   args: {},
26 |   handler: async (ctx) => {
27 |     const userId = await getAuthUserId(ctx)
28 |     if (userId === null) {
29 |       return null
30 |     }
31 |     return await ctx.db.get(userId)
32 |   },
33 | })
34 | 
35 | export const getUserByEmail = query({
36 |   args: { email: v.string() },
37 |   handler: async (ctx, { email }) => {
38 |     const user = await ctx.db
39 |       .query('users')
40 |       .withIndex('by_email', (q) => q.eq('email', email))
41 |       .first()
42 | 
43 |     return user
44 |   },
45 | })
46 | 
47 | export const updateUser = mutation({
48 |   args: {
49 |     userId: v.id('users'),
50 |     data: v.object({
51 |       api: v.optional(
52 |         v.object({
53 |           encryptedKey: v.array(v.number()),
54 |           initializationVector: v.array(v.number()),
55 |         })
56 |       ),
57 |     }),
58 |   },
59 |   handler: async (ctx, { userId, data }) => {
60 |     const [, error] = await handlePromise(ctx.db.patch(userId, data))
61 | 
62 |     if (error) {
63 |       throw new ConvexError('Failed to update user')
64 |     }
65 |   },
66 | })
67 |

--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated data model types.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import type {
12 |   DataModelFromSchemaDefinition,
13 |   DocumentByName,
14 |   TableNamesInDataModel,
15 |   SystemTableNames,
16 | } from "convex/server";
17 | import type { GenericId } from "convex/values";
18 | import schema from "../schema.js";
19 | 
20 | /**
21 |  * The names of all of your Convex tables.
22 |  */
23 | export type TableNames = TableNamesInDataModel<DataModel>;
24 | 
25 | /**
26 |  * The type of a document stored in Convex.
27 |  *
28 |  * @typeParam TableName - A string literal type of the table name (like "users").
29 |  */
30 | export type Doc<TableName extends TableNames> = DocumentByName<
31 |   DataModel,
32 |   TableName
33 | >;
34 | 
35 | /**
36 |  * An identifier for a document in Convex.
37 |  *
38 |  * Convex documents are uniquely identified by their `Id`, which is accessible
39 |  * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
40 |  *
41 |  * Documents can be loaded using `db.get(id)` in query and mutation functions.
42 |  *
43 |  * IDs are just strings at runtime, but this type can be used to distinguish them from other
44 |  * strings when type checking.
45 |  *
46 |  * @typeParam TableName - A string literal type of the table name (like "users").
47 |  */
48 | export type Id<TableName extends TableNames | SystemTableNames> =
49 |   GenericId<TableName>;
50 | 
51 | /**
52 |  * A type describing your Convex data model.
53 |  *
54 |  * This type includes information about what tables you have, the type of
55 |  * documents stored in those tables, and the indexes defined on them.
56 |  *
57 |  * This type is used to parameterize methods like `queryGeneric` and
58 |  * `mutationGeneric` to make them type-safe.
59 |  */
60 | export type DataModel = DataModelFromSchemaDefinition<typeof schema>;
61 |

--------------------------------------------------------------------------------
/src/pages/quiz-results/components/question-review.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 2 | import { CheckCircle2, XCircle } from 'lucide-react'
 3 | import { QuestionFromQuizResult } from '../lib/schemas'
 4 | 
 5 | export function QuestionReview({
 6 |   question,
 7 | }: {
 8 |   question: QuestionFromQuizResult
 9 | }) {
10 |   return (
11 |     <Card
12 |       key={question.id}
13 |       className={question.isCorrect ? 'border-green-200' : 'border-red-200'}
14 |     >
15 |       <CardHeader>
16 |         <div className="flex items-start gap-2">
17 |           {question.isCorrect ? (
18 |             <CheckCircle2 className="mt-1 h-5 w-5 shrink-0 text-green-500" />
19 |           ) : (
20 |             <XCircle className="mt-1 h-5 w-5 shrink-0 text-red-500" />
21 |           )}
22 |           <CardTitle className="text-base">{question.question}</CardTitle>
23 |         </div>
24 |       </CardHeader>
25 |       <CardContent className="flex flex-col gap-4">
26 |         <div className="flex flex-col gap-2">
27 |           <div className="text-sm">
28 |             <span className="font-medium">Your answer: </span>
29 |             <span
30 |               className={question.isCorrect ? 'text-green-600' : 'text-red-600'}
31 |             >
32 |               Option {question.userSelectedId?.toUpperCase()}
33 |             </span>
34 |           </div>
35 | 
36 |           {!question.isCorrect && (
37 |             <div className="text-sm">
38 |               <span className="font-medium">Correct answer: </span>
39 |               <span className="text-green-600">
40 |                 Option {question.correctAnswer?.toUpperCase()}
41 |               </span>
42 |             </div>
43 |           )}
44 |         </div>
45 | 
46 |         <div className="flex flex-col gap-1 text-sm">
47 |           <p className="font-medium">Explanation:</p>
48 |           <p className="text-muted-foreground">{question.explanation}</p>
49 |         </div>
50 |       </CardContent>
51 |     </Card>
52 |   )
53 | }
54 |

--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as TabsPrimitive from '@radix-ui/react-tabs'
 2 | import * as React from 'react'
 3 | 
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | function Tabs({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
10 |   return <TabsPrimitive.Root className={cn(className)} {...props} />
11 | }
12 | 
13 | function TabsList({
14 |   className,
15 |   ...props
16 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
17 |   return (
18 |     <TabsPrimitive.List
19 |       className={cn(
20 |         'bg-muted/30 text-muted-foreground inline-flex h-11 items-stretch justify-center rounded-md p-0.5',
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | }
27 | 
28 | function TabsTrigger({
29 |   className,
30 |   ...props
31 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
32 |   return (
33 |     <TabsPrimitive.Trigger
34 |       className={cn(
35 |         'ring-offset-background focus-visible:ring-ring inline-flex flex-1 items-center justify-center px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
36 |         'text-muted-foreground/70 bg-transparent',
37 |         'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-primary data-[state=active]:border-b-2 data-[state=active]:shadow-sm',
38 |         className
39 |       )}
40 |       {...props}
41 |     />
42 |   )
43 | }
44 | 
45 | function TabsContent({
46 |   className,
47 |   ...props
48 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
49 |   return (
50 |     <TabsPrimitive.Content
51 |       className={cn(
52 |         'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
53 |         className
54 |       )}
55 |       {...props}
56 |     />
57 |   )
58 | }
59 | 
60 | export { Tabs, TabsContent, TabsList, TabsTrigger }
61 |

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { Toaster } from '@/components/ui/sonner'
 2 | import { ConvexAuthProvider } from '@convex-dev/auth/react'
 3 | import { Analytics } from '@vercel/analytics/react'
 4 | import { ConvexReactClient } from 'convex/react'
 5 | import { StrictMode } from 'react'
 6 | import { createRoot } from 'react-dom/client'
 7 | import { BrowserRouter } from 'react-router'
 8 | import App from './App.tsx'
 9 | import './index.css'
10 | 
11 | const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string)
12 | 
13 | createRoot(document.getElementById('root')!).render(
14 |   <StrictMode>
15 |     <ConvexAuthProvider client={convex}>
16 |       <BrowserRouter>
17 |         <App />
18 |         <Toaster
19 |           position="top-right"
20 |           toastOptions={{
21 |             unstyled: true,
22 |             classNames: {
23 |               toast:
24 |                 'group border bg-card text-card-foreground shadow-lg rounded-md p-4 flex gap-3 items-start',
25 |               title: 'text-sm font-semibold',
26 |               description: 'text-sm',
27 |               actionButton:
28 |                 'bg-primary text-primary-foreground hover:bg-primary/90 text-xs px-2 py-1 rounded-md',
29 |               cancelButton:
30 |                 'bg-muted text-muted-foreground hover:bg-muted/90 text-xs px-2 py-1 rounded-md',
31 |               success:
32 |                 'border-green-600/20 bg-green-50 dark:bg-green-950/50 [&_div]:text-green-800 dark:[&_div]:text-green-300',
33 |               error:
34 |                 'border-destructive/20 bg-destructive/10 [&_div]:text-destructive dark:[&_div]:text-destructive-foreground',
35 |               info: 'border-primary/20 bg-primary/10 [&_div]:text-primary dark:[&_div]:text-primary-foreground',
36 |               warning:
37 |                 'border-yellow-600/20 bg-yellow-50 dark:bg-yellow-950/50 [&_div]:text-yellow-800 dark:[&_div]:text-yellow-300',
38 |             },
39 |           }}
40 |         />
41 |         <Analytics />
42 |       </BrowserRouter>
43 |     </ConvexAuthProvider>
44 |   </StrictMode>
45 | )
46 |

--------------------------------------------------------------------------------
/src/pages/quiz-detail/components/quiz-skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 3 | import { Skeleton } from '@/components/ui/skeleton'
 4 | import { getSkeletonOptionsPerQuestionKey } from '../lib/utils'
 5 | 
 6 | const DEFAULT_SKELETON_OPTIONS_PER_QUESTION = 5
 7 | 
 8 | export function QuizLoadingPlaceholder({ quizId }: { quizId: string }) {
 9 |   const localStorageOptionsPerQuestion = localStorage.getItem(
10 |     getSkeletonOptionsPerQuestionKey(quizId)
11 |   )
12 | 
13 |   return (
14 |     <div className="mx-auto max-w-3xl">
15 |       <div className="mb-8">
16 |         <Skeleton className="mb-2 h-8 w-3/4" />
17 |         <div className="flex items-center gap-4">
18 |           <Skeleton className="h-2 flex-1" />
19 |           <Skeleton className="h-5 w-16" />
20 |         </div>
21 |       </div>
22 | 
23 |       <Card className="mb-6">
24 |         <CardHeader>
25 |           <Skeleton className="h-6 w-full" />
26 |         </CardHeader>
27 |         <CardContent>
28 |           <div className="flex flex-col gap-4">
29 |             {Array(
30 |               localStorageOptionsPerQuestion
31 |                 ? parseInt(localStorageOptionsPerQuestion)
32 |                 : DEFAULT_SKELETON_OPTIONS_PER_QUESTION
33 |             )
34 |               .fill(0)
35 |               .map((_, i) => (
36 |                 <div key={i} className="cursor-default rounded-md border p-4">
37 |                   <div className="flex items-start gap-3">
38 |                     <Skeleton className="h-6 w-6 rounded-full" />
39 |                     <Skeleton className="h-5 w-full" />
40 |                   </div>
41 |                 </div>
42 |               ))}
43 |           </div>
44 |         </CardContent>
45 |         <CardFooter className="flex justify-between">
46 |           <Button variant="outline" disabled>
47 |             Previous
48 |           </Button>
49 |           <Button disabled>Next</Button>
50 |         </CardFooter>
51 |       </Card>
52 |     </div>
53 |   )
54 | }
55 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hawanji",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@ai-sdk/openai": "^1.2.1",
14 |     "@auth/core": "0.37.0",
15 |     "@convex-dev/auth": "^0.0.80",
16 |     "@fontsource-variable/inter": "^5.2.5",
17 |     "@radix-ui/react-alert-dialog": "^1.1.6",
18 |     "@radix-ui/react-checkbox": "^1.1.4",
19 |     "@radix-ui/react-dialog": "^1.1.6",
20 |     "@radix-ui/react-label": "^2.1.2",
21 |     "@radix-ui/react-progress": "^1.1.2",
22 |     "@radix-ui/react-radio-group": "^1.2.3",
23 |     "@radix-ui/react-separator": "^1.1.2",
24 |     "@radix-ui/react-slider": "^1.2.3",
25 |     "@radix-ui/react-slot": "^1.1.2",
26 |     "@radix-ui/react-tabs": "^1.1.3",
27 |     "@tailwindcss/vite": "^4.0.9",
28 |     "@vercel/analytics": "^1.5.0",
29 |     "ai": "^4.1.54",
30 |     "class-variance-authority": "^0.7.1",
31 |     "clsx": "^2.1.1",
32 |     "convex": "^1.19.4",
33 |     "date-fns": "^4.1.0",
34 |     "jotai": "^2.12.1",
35 |     "lucide-react": "^0.477.0",
36 |     "motion": "^12.4.10",
37 |     "nanoid": "^5.1.2",
38 |     "next-themes": "^0.4.4",
39 |     "react": "^19.0.0",
40 |     "react-confetti": "^6.4.0",
41 |     "react-dom": "^19.0.0",
42 |     "react-markdown": "^10.1.0",
43 |     "react-router": "^7.2.0",
44 |     "react-use-measure": "^2.1.7",
45 |     "sonner": "^2.0.1",
46 |     "tailwind-merge": "^3.0.2",
47 |     "tailwindcss": "^4.0.9",
48 |     "tailwindcss-animate": "^1.0.7",
49 |     "zod": "^3.24.2"
50 |   },
51 |   "devDependencies": {
52 |     "@eslint/js": "^9.21.0",
53 |     "@types/node": "^22.13.8",
54 |     "@types/react": "^19.0.10",
55 |     "@types/react-dom": "^19.0.4",
56 |     "@vitejs/plugin-react": "^4.3.4",
57 |     "eslint": "^9.21.0",
58 |     "eslint-plugin-react": "^7.37.4",
59 |     "eslint-plugin-react-hooks": "^5.2.0",
60 |     "eslint-plugin-react-refresh": "^0.4.19",
61 |     "globals": "^15.15.0",
62 |     "prettier": "^3.5.2",
63 |     "prettier-plugin-tailwindcss": "^0.6.11",
64 |     "typescript": "~5.7.2",
65 |     "typescript-eslint": "^8.24.1",
66 |     "vite": "^6.2.0"
67 |   }
68 | }
69 |

--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Slider({
 9 |   className,
10 |   defaultValue,
11 |   value,
12 |   min = 0,
13 |   max = 100,
14 |   ...props
15 | }: React.ComponentProps<typeof SliderPrimitive.Root>) {
16 |   const _values = React.useMemo(
17 |     () =>
18 |       Array.isArray(value)
19 |         ? value
20 |         : Array.isArray(defaultValue)
21 |           ? defaultValue
22 |           : [min, max],
23 |     [value, defaultValue, min, max]
24 |   )
25 | 
26 |   return (
27 |     <SliderPrimitive.Root
28 |       data-slot="slider"
29 |       defaultValue={defaultValue}
30 |       value={value}
31 |       min={min}
32 |       max={max}
33 |       className={cn(
34 |         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
35 |         className
36 |       )}
37 |       {...props}
38 |     >
39 |       <SliderPrimitive.Track
40 |         data-slot="slider-track"
41 |         className={cn(
42 |           "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
43 |         )}
44 |       >
45 |         <SliderPrimitive.Range
46 |           data-slot="slider-range"
47 |           className={cn(
48 |             "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
49 |           )}
50 |         />
51 |       </SliderPrimitive.Track>
52 |       {Array.from({ length: _values.length }, (_, index) => (
53 |         <SliderPrimitive.Thumb
54 |           data-slot="slider-thumb"
55 |           key={index}
56 |           className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
57 |         />
58 |       ))}
59 |     </SliderPrimitive.Root>
60 |   )
61 | }
62 | 
63 | export { Slider }
64 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Hawanji - Turn your notes into quiz with AI</title>
 8 | 
 9 |     
10 |     <meta
11 |       name="description"
12 |       content="Turn your notes into quiz with AI. Hawanji is a tool that allows you to create quizzes from your notes. It uses AI to generate the quiz questions and answers."
13 |     />
14 |     <meta
15 |       name="keywords"
16 |       content="quiz, notes, ai, quiz generator, quiz creator, quiz maker, quiz tool, quiz app, quiz software, quiz maker software, quiz maker app, quiz maker tool, quiz maker online, quiz maker offline, quiz maker desktop, quiz maker mobile, quiz maker web, quiz maker web app, quiz maker web app online, quiz maker web app offline, quiz maker web app desktop, quiz maker web app mobile"
17 |     />
18 | 
19 |     
20 |     <meta property="og:type" content="website" />
21 |     <meta property="og:url" content="https://hawanji.vercel.app/" />
22 |     <meta
23 |       property="og:title"
24 |       content="Hawanji - Turn your notes into quiz with AI"
25 |     />
26 |     <meta
27 |       property="og:description"
28 |       content="Turn your notes into quiz with AI. Hawanji is a tool that allows you to create quizzes from your notes. It uses AI to generate the quiz questions and answers."
29 |     />
30 |     <meta property="og:image" content="/assets/meta.webp" />
31 | 
32 |     
33 |     <meta name="twitter:card" content="summary_large_image" />
34 |     <meta name="twitter:url" content="https://hawanji.vercel.app/" />
35 |     <meta
36 |       name="twitter:title"
37 |       content="Hawanji - Turn your notes into quiz with AI"
38 |     />
39 |     <meta
40 |       name="twitter:description"
41 |       content="Turn your notes into quiz with AI. Hawanji is a tool that allows you to create quizzes from your notes. It uses AI to generate the quiz questions and answers."
42 |     />
43 |     <meta name="twitter:image" content="/assets/meta.webp" />
44 | 
45 |     
46 |     <meta name="theme-color" content="#000000" />
47 |   </head>
48 |   <body>
49 |     <div id="root"></div>
50 |     <script type="module" src="/src/main.tsx"></script>
51 |   </body>
52 | </html>
53 |

--------------------------------------------------------------------------------
/src/pages/login/components/login-form.tsx:
--------------------------------------------------------------------------------
 1 | import { InputWithFeedback } from '@/components/input-with-feedback'
 2 | import { Button } from '@/components/ui/button'
 3 | import { Label } from '@/components/ui/label'
 4 | import { handlePromise } from '@/lib/utils'
 5 | import { useAuthActions } from '@convex-dev/auth/react'
 6 | import { useActionState } from 'react'
 7 | import { toast } from 'sonner'
 8 | 
 9 | const SIGN_IN_STEP = 'signIn'
10 | 
11 | type FormState =
12 |   | {
13 |       status: 'error'
14 |       errors: {
15 |         email: string
16 |       }
17 |     }
18 |   | {
19 |       status: 'success'
20 |     }
21 | 
22 | export function LoginForm() {
23 |   const { signIn } = useAuthActions()
24 | 
25 |   const [state, formAction, isPending] = useActionState<FormState, FormData>(
26 |     async (_, formData) => {
27 |       const errors = {
28 |         email: '',
29 |       }
30 | 
31 |       const [, signInError] = await handlePromise(signIn('password', formData))
32 | 
33 |       if (signInError) {
34 |         errors.email = 'Something went wrong.'
35 |         return { status: 'error', errors }
36 |       }
37 | 
38 |       toast.success('Login successful')
39 |       return { status: 'success' }
40 |     },
41 |     { status: 'error', errors: { email: '' } }
42 |   )
43 | 
44 |   return (
45 |     <form className="flex flex-col gap-9" action={formAction}>
46 |       <div className="flex flex-col gap-2.5">
47 |         <input name="flow" type="hidden" value={SIGN_IN_STEP} />
48 |         <Label htmlFor="email">Email</Label>
49 |         <InputWithFeedback
50 |           name="email"
51 |           id="email"
52 |           placeholder="naruto@konoha.com"
53 |           type="email"
54 |           errorMessage={state.status === 'error' ? state.errors.email : ''}
55 |           isError={state.status === 'error' && !!state.errors.email}
56 |         />
57 |       </div>
58 |       <div className="flex flex-col gap-2.5">
59 |         <Label htmlFor="password">Password</Label>
60 |         <InputWithFeedback
61 |           name="password"
62 |           id="password"
63 |           isError={state.status === 'error' && !!state.errors.email}
64 |           type="password"
65 |           helperText="Password must be at least 6 characters long"
66 |           placeholder="********"
67 |         />
68 |       </div>
69 |       <Button type="submit" isLoading={isPending} disabled={isPending}>
70 |         Login
71 |       </Button>
72 |     </form>
73 |   )
74 | }
75 |

--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { Slot } from '@radix-ui/react-slot'
 2 | import { cva, type VariantProps } from 'class-variance-authority'
 3 | import * as React from 'react'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | import { Loader2 } from 'lucide-react'
 7 | 
 8 | const buttonVariants = cva(
 9 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
10 |   {
11 |     variants: {
12 |       variant: {
13 |         default:
14 |           'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
15 |         destructive:
16 |           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
17 |         outline:
18 |           'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
19 |         secondary:
20 |           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
21 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
22 |         link: 'text-primary underline-offset-4 hover:underline',
23 |       },
24 |       size: {
25 |         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
26 |         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
27 |         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
28 |         icon: 'size-9',
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: 'default',
33 |       size: 'default',
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   isLoading = false,
44 |   children,
45 |   ...props
46 | }: React.ComponentProps<'button'> &
47 |   VariantProps<typeof buttonVariants> & {
48 |     asChild?: boolean
49 |     isLoading?: boolean
50 |   }) {
51 |   const Comp = asChild ? Slot : 'button'
52 | 
53 |   return (
54 |     <Comp
55 |       data-slot="button"
56 |       className={cn(buttonVariants({ variant, size, className }))}
57 |       {...props}
58 |     >
59 |       {isLoading ? <Loader2 className="size-4 animate-spin" /> : children}
60 |     </Comp>
61 |   )
62 | }
63 | 
64 | export { Button, buttonVariants }
65 |

--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
 1 | import { authTables } from '@convex-dev/auth/server'
 2 | import { defineSchema, defineTable } from 'convex/server'
 3 | import { v } from 'convex/values'
 4 | 
 5 | export const QuizSchema = defineTable({
 6 |   userId: v.id('users'),
 7 |   title: v.string(), // AI-generated title
 8 |   notes: v.string(), // Notes we'll use for prompt
 9 |   context: v.optional(v.string()),
10 |   numQuestions: v.number(),
11 |   optionsPerQuestion: v.number(),
12 |   createdAt: v.number(),
13 |   isCompleted: v.boolean(),
14 |   progress: v.object({
15 |     currentQuestionIndex: v.number(), // Which question user is on
16 |     answers: v.array(
17 |       v.object({
18 |         questionId: v.string(),
19 |         selectedOptionId: v.optional(v.string()), // Optional because user may not have answered yet
20 |       })
21 |     ),
22 |     lastUpdated: v.number(), // Timestamp for activity tracking
23 |   }),
24 |   questions: v.array(
25 |     v.object({
26 |       id: v.string(), // Generate a unique ID for each question
27 |       question: v.string(),
28 |       options: v.array(
29 |         v.object({
30 |           id: v.string(), // Generate a unique ID for each option
31 |           text: v.string(),
32 |           isCorrect: v.boolean(),
33 |         })
34 |       ),
35 |       explanation: v.string(), // Explanation of why the correct answer is correct
36 |     })
37 |   ),
38 | })
39 | 
40 | export const QuizResultSchema = defineTable({
41 |   quizId: v.id('quizzes'),
42 |   userId: v.id('users'),
43 |   completedAt: v.number(),
44 |   score: v.number(), // Percentage correct
45 |   correctCount: v.number(),
46 |   answers: v.array(
47 |     v.object({
48 |       questionId: v.string(),
49 |       selectedOptionId: v.string(),
50 |     })
51 |   ),
52 |   incorrectQuestionIdsMap: v.record(v.string(), v.boolean()),
53 |   feedback: v.string(), // AI-generated feedback
54 | })
55 | 
56 | const schema = defineSchema({
57 |   ...authTables,
58 |   users: defineTable({
59 |     email: v.string(),
60 |     updatedAt: v.number(),
61 |     api: v.optional(
62 |       v.object({
63 |         encryptedKey: v.array(v.number()), // For Uint8Array storage
64 |         initializationVector: v.array(v.number()), // initialization vector for encryption
65 |       })
66 |     ),
67 |   }).index('by_email', ['email']),
68 | 
69 |   quizzes: QuizSchema.index('by_userId', ['userId']).index('by_createdAt', [
70 |     'createdAt',
71 |   ]),
72 | 
73 |   quizResults: QuizResultSchema.index('by_userId', ['userId'])
74 |     .index('by_quizId', ['quizId'])
75 |     .index('by_completedAt', ['completedAt']),
76 | })
77 | 
78 | export default schema
79 |

--------------------------------------------------------------------------------
/src/pages/login/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 3 | import { ROUTES, TAB_VALUES } from '@/lib/constants'
 4 | import { api } from '@convex/_generated/api'
 5 | import { useConvexAuth, useQuery } from 'convex/react'
 6 | import { Loader2 } from 'lucide-react'
 7 | import { useEffect, useState } from 'react'
 8 | import { generatePath, useNavigate } from 'react-router'
 9 | import { LoginForm } from './components/login-form'
10 | import { RegisterForm } from './components/register-form'
11 | 
12 | export function LoginPage() {
13 |   const [tab, setTab] = useState<
14 |     typeof TAB_VALUES.LOGIN | typeof TAB_VALUES.REGISTER
15 |   >(TAB_VALUES.LOGIN)
16 | 
17 |   const user = useQuery(api.users.getCurrentUser)
18 |   const state = useConvexAuth()
19 |   const isLoading = user === undefined || state.isLoading
20 |   const navigate = useNavigate()
21 | 
22 |   useEffect(() => {
23 |     if (!isLoading && user) {
24 |       void navigate(generatePath(ROUTES.quizHome))
25 |     }
26 |   }, [isLoading, user, navigate])
27 | 
28 |   if (isLoading) {
29 |     return (
30 |       <div className="flex flex-1 items-center justify-center">
31 |         <Loader2 className="size-10 animate-spin" />
32 |       </div>
33 |     )
34 |   }
35 | 
36 |   return (
37 |     <div className="flex flex-1 items-center justify-center p-4">
38 |       <Card className="w-full max-w-md">
39 |         <CardHeader className="flex flex-col gap-1">
40 |           <CardTitle className="text-primary flex items-center justify-center gap-2 text-center text-2xl">
41 |             Hawanji
42 |             <span className="text-2xl">🙋‍♂️</span>
43 |           </CardTitle>
44 |         </CardHeader>
45 |         <CardContent>
46 |           <Tabs
47 |             value={tab}
48 |             onValueChange={(value) =>
49 |               setTab(value as (typeof TAB_VALUES)[keyof typeof TAB_VALUES])
50 |             }
51 |             className="w-full"
52 |           >
53 |             <TabsList className="grid w-full grid-cols-2">
54 |               <TabsTrigger value={TAB_VALUES.LOGIN}>Login</TabsTrigger>
55 |               <TabsTrigger value={TAB_VALUES.REGISTER}>Register</TabsTrigger>
56 |             </TabsList>
57 | 
58 |             <TabsContent value={TAB_VALUES.LOGIN} className="pt-4">
59 |               <LoginForm />
60 |             </TabsContent>
61 | 
62 |             <TabsContent value={TAB_VALUES.REGISTER} className="pt-4">
63 |               <RegisterForm />
64 |             </TabsContent>
65 |           </Tabs>
66 |         </CardContent>
67 |       </Card>
68 |     </div>
69 |   )
70 | }
71 |

--------------------------------------------------------------------------------
/convex/key.ts:
--------------------------------------------------------------------------------
 1 | 'use node'
 2 | 
 3 | import { ConvexError, v } from 'convex/values'
 4 | import crypto from 'crypto'
 5 | import { api } from './_generated/api'
 6 | import { action } from './_generated/server'
 7 | import { requireCurrentUser } from './users'
 8 | import { handlePromise } from './utils'
 9 | 
10 | const ALGORITHM = { name: 'AES-GCM', length: 256 }
11 | 
12 | async function getEncryptionKey() {
13 |   const encoder = new TextEncoder()
14 |   const keyMaterial = encoder.encode(process.env.CONVEX_ENCRYPTION_SECRET)
15 |   const hash = await crypto.subtle.digest('SHA-256', keyMaterial)
16 | 
17 |   return await crypto.subtle.importKey('raw', hash, ALGORITHM, false, [
18 |     'encrypt',
19 |     'decrypt',
20 |   ])
21 | }
22 | 
23 | export const storeApiKey = action({
24 |   args: { apiKey: v.string() },
25 |   async handler(ctx, args) {
26 |     const user = await requireCurrentUser(ctx)
27 | 
28 |     if (!user) {
29 |       throw new ConvexError('User not found')
30 |     }
31 | 
32 |     const [key, error] = await handlePromise(getEncryptionKey())
33 | 
34 |     if (error) {
35 |       throw new ConvexError('Failed to get encryption key')
36 |     }
37 | 
38 |     const initializationVector = crypto.getRandomValues(new Uint8Array(12))
39 | 
40 |     const encryptionPromise = crypto.subtle.encrypt(
41 |       { name: 'AES-GCM', iv: initializationVector },
42 |       key,
43 |       new TextEncoder().encode(args.apiKey)
44 |     )
45 | 
46 |     const [encrypted, encryptionError] = await handlePromise(encryptionPromise)
47 | 
48 |     if (encryptionError) {
49 |       throw new ConvexError('Failed to encrypt API key')
50 |     }
51 | 
52 |     await ctx.runMutation(api.users.updateUser, {
53 |       userId: user._id,
54 |       data: {
55 |         api: {
56 |           encryptedKey: Array.from(new Uint8Array(encrypted)),
57 |           initializationVector: Array.from(initializationVector),
58 |         },
59 |       },
60 |     })
61 |   },
62 | })
63 | 
64 | export const getApiKey = action({
65 |   async handler(ctx) {
66 |     const user = await requireCurrentUser(ctx)
67 | 
68 |     if (!user) {
69 |       return null
70 |     }
71 | 
72 |     if (!user.api) {
73 |       return null
74 |     }
75 | 
76 |     const [key, getKeyError] = await handlePromise(getEncryptionKey())
77 | 
78 |     if (getKeyError) {
79 |       throw new ConvexError('Failed to get encryption key')
80 |     }
81 | 
82 |     const decryptionPromise = crypto.subtle.decrypt(
83 |       { name: 'AES-GCM', iv: new Uint8Array(user.api?.initializationVector) },
84 |       key,
85 |       new Uint8Array(user.api?.encryptedKey)
86 |     )
87 | 
88 |     const [decrypted, decryptionError] = await handlePromise(decryptionPromise)
89 | 
90 |     if (decryptionError) {
91 |       throw new ConvexError('Failed to decrypt API key')
92 |     }
93 | 
94 |     return new TextDecoder().decode(decrypted)
95 |   },
96 | })
97 |

--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex functions directory!
 2 | 
 3 | Write your Convex functions here.
 4 | See https://docs.convex.dev/functions for more.
 5 | 
 6 | A query function that takes two arguments looks like:
 7 | 
 8 | ```ts
 9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 | 
13 | export const myQueryFunction = query({
14 |   // Validators for arguments.
15 |   args: {
16 |     first: v.number(),
17 |     second: v.string(),
18 |   },
19 | 
20 |   // Function implementation.
21 |   handler: async (ctx, args) => {
22 |     // Read the database as many times as you need here.
23 |     // See https://docs.convex.dev/database/reading-data.
24 |     const documents = await ctx.db.query("tablename").collect();
25 | 
26 |     // Arguments passed from the client are properties of the args object.
27 |     console.log(args.first, args.second);
28 | 
29 |     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 |     // remove non-public properties, or create new objects.
31 |     return documents;
32 |   },
33 | });
34 | ```
35 | 
36 | Using this query function in a React component looks like:
37 | 
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 |   first: 10,
41 |   second: "hello",
42 | });
43 | ```
44 | 
45 | A mutation function looks like:
46 | 
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 | 
52 | export const myMutationFunction = mutation({
53 |   // Validators for arguments.
54 |   args: {
55 |     first: v.string(),
56 |     second: v.string(),
57 |   },
58 | 
59 |   // Function implementation.
60 |   handler: async (ctx, args) => {
61 |     // Insert or modify documents in the database here.
62 |     // Mutations can also read from the database like queries.
63 |     // See https://docs.convex.dev/database/writing-data.
64 |     const message = { body: args.first, author: args.second };
65 |     const id = await ctx.db.insert("messages", message);
66 | 
67 |     // Optionally, return a value from your mutation.
68 |     return await ctx.db.get(id);
69 |   },
70 | });
71 | ```
72 | 
73 | Using this mutation function in a React component looks like:
74 | 
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 |   // fire and forget, the most common way to use mutations
79 |   mutation({ first: "Hello!", second: "me" });
80 |   // OR
81 |   // use the result once the mutation has completed
82 |   mutation({ first: "Hello!", second: "me" }).then((result) =>
83 |     console.log(result),
84 |   );
85 | }
86 | ```
87 | 
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 |

--------------------------------------------------------------------------------
/convex/quizzes/queries.ts:
--------------------------------------------------------------------------------
  1 | import { v } from 'convex/values'
  2 | import { internalQuery, query } from '../_generated/server'
  3 | import { requireCurrentUser } from '../users'
  4 | import { quizAuthCheckFunc } from '../utils'
  5 | 
  6 | export const getQuizById = query({
  7 |   args: { id: v.id('quizzes') },
  8 |   handler: async (ctx, args) => {
  9 |     return await ctx.db.get(args.id)
 10 |   },
 11 | })
 12 | 
 13 | export const listQuizzes = internalQuery({
 14 |   args: { userId: v.id('users') },
 15 |   handler: async (ctx, args) => {
 16 |     return await ctx.db
 17 |       .query('quizzes')
 18 |       .withIndex('by_userId', (q) => q.eq('userId', args.userId))
 19 |       .order('desc')
 20 |       .collect()
 21 |   },
 22 | })
 23 | 
 24 | export const getAllQuizzesByUserId = query({
 25 |   args: {},
 26 |   handler: async (ctx) => {
 27 |     const user = await requireCurrentUser(ctx)
 28 | 
 29 |     if (!user) {
 30 |       return []
 31 |     }
 32 | 
 33 |     const quizzes = await ctx.db
 34 |       .query('quizzes')
 35 |       .withIndex('by_userId', (q) => q.eq('userId', user._id))
 36 |       .collect()
 37 | 
 38 |     return quizzes
 39 |   },
 40 | })
 41 | 
 42 | export const listQuizzesWithProgress = query({
 43 |   args: {},
 44 |   handler: async (ctx) => {
 45 |     const user = await requireCurrentUser(ctx)
 46 | 
 47 |     if (!user) {
 48 |       return []
 49 |     }
 50 | 
 51 |     const quizzes = await ctx.db
 52 |       .query('quizzes')
 53 |       .withIndex('by_userId', (q) => q.eq('userId', user._id))
 54 |       .collect()
 55 | 
 56 |     return quizzes.map((quiz) => {
 57 |       const answeredCount = quiz.progress?.answers.length || 0
 58 |       return {
 59 |         ...quiz,
 60 |         progressCount: answeredCount,
 61 |         totalQuestions: quiz.questions.length,
 62 |         isCompleted: answeredCount === quiz.questions.length,
 63 |       }
 64 |     })
 65 |   },
 66 | })
 67 | 
 68 | export const getQuizResults = query({
 69 |   args: { quizId: v.id('quizzes') },
 70 |   handler: async (ctx, args) => {
 71 |     const { quiz } = await quizAuthCheckFunc({ quizId: args.quizId, ctx })
 72 | 
 73 |     const results = await ctx.db
 74 |       .query('quizResults')
 75 |       .withIndex('by_quizId', (q) => q.eq('quizId', args.quizId))
 76 |       .first()
 77 | 
 78 |     if (!results) {
 79 |       return null
 80 |     }
 81 | 
 82 |     return {
 83 |       ...results,
 84 |       title: quiz.title,
 85 |       questions: quiz.questions.map((question) => {
 86 |         const userAnswer = results.answers.find(
 87 |           (answer) => answer.questionId === question.id
 88 |         )
 89 |         return {
 90 |           ...question,
 91 |           userSelectedId: userAnswer?.selectedOptionId,
 92 |           isCorrect: !results.incorrectQuestionIdsMap[question.id],
 93 |           correctAnswer: question.options.find((option) => option.isCorrect)
 94 |             ?.id,
 95 |         }
 96 |       }),
 97 |     }
 98 |   },
 99 | })
100 |

--------------------------------------------------------------------------------
/src/pages/quiz-results/components/results-skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 2 | 
 3 | export function ResultsSkeleton() {
 4 |   return (
 5 |     <div className="mx-auto flex flex-col gap-8">
 6 |       <div className="flex flex-col gap-2">
 7 |         <h1 className="text-2xl font-bold">Quiz Results</h1>
 8 |         <p className="text-muted-foreground animate-pulse">
 9 |           Loading your quiz results...
10 |         </p>
11 |       </div>
12 | 
13 |       <Card>
14 |         <CardHeader className="pb-2">
15 |           <CardTitle>Your Score</CardTitle>
16 |         </CardHeader>
17 |         <CardContent>
18 |           <div className="flex items-center justify-center py-8">
19 |             <div className="relative h-48 w-48">
20 |               <div className="absolute inset-0 flex items-center justify-center">
21 |                 <div className="bg-muted h-16 w-16 animate-pulse rounded-full"></div>
22 |               </div>
23 |               <svg className="h-full w-full" viewBox="0 0 100 100">
24 |                 <circle
25 |                   className="stroke-muted fill-none"
26 |                   strokeWidth="10"
27 |                   cx="50"
28 |                   cy="50"
29 |                   r="40"
30 |                 />
31 |                 <circle
32 |                   className="stroke-muted-foreground/30 animate-pulse fill-none"
33 |                   strokeWidth="10"
34 |                   strokeLinecap="round"
35 |                   cx="50"
36 |                   cy="50"
37 |                   r="40"
38 |                   strokeDasharray="80 251"
39 |                   strokeDashoffset="0"
40 |                   transform="rotate(-90 50 50)"
41 |                 />
42 |               </svg>
43 |             </div>
44 |           </div>
45 |         </CardContent>
46 |       </Card>
47 | 
48 |       <Card>
49 |         <CardHeader className="pb-2">
50 |           <CardTitle>Feedback</CardTitle>
51 |         </CardHeader>
52 |         <CardContent>
53 |           <div className="bg-muted h-4 w-full animate-pulse rounded"></div>
54 |           <div className="bg-muted mt-2 h-4 w-3/4 animate-pulse rounded"></div>
55 |         </CardContent>
56 |       </Card>
57 | 
58 |       <div className="flex flex-col gap-6">
59 |         <h2 className="text-xl font-semibold">Question Review</h2>
60 | 
61 |         {[1, 2, 3].map((i) => (
62 |           <Card key={i} className="border-muted">
63 |             <CardHeader className="pb-2">
64 |               <div className="flex items-start gap-2">
65 |                 <div className="bg-muted mt-1 h-5 w-5 animate-pulse rounded-full"></div>
66 |                 <div className="bg-muted h-5 w-full animate-pulse rounded"></div>
67 |               </div>
68 |             </CardHeader>
69 |             <CardContent className="flex flex-col gap-2">
70 |               <div className="text-sm">
71 |                 <span className="font-medium">Your answer: </span>
72 |                 <span className="bg-muted inline-block h-4 w-20 animate-pulse rounded"></span>
73 |               </div>
74 | 
75 |               <div className="pt-2 text-sm">
76 |                 <p className="font-medium">Explanation:</p>
77 |                 <div className="bg-muted mt-1 h-4 w-full animate-pulse rounded"></div>
78 |                 <div className="bg-muted mt-1 h-4 w-5/6 animate-pulse rounded"></div>
79 |               </div>
80 |             </CardContent>
81 |           </Card>
82 |         ))}
83 |       </div>
84 | 
85 |       <div className="flex justify-center">
86 |         <div className="bg-muted h-10 w-48 animate-pulse rounded"></div>
87 |       </div>
88 |     </div>
89 |   )
90 | }
91 |

--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import {
12 |   actionGeneric,
13 |   httpActionGeneric,
14 |   queryGeneric,
15 |   mutationGeneric,
16 |   internalActionGeneric,
17 |   internalMutationGeneric,
18 |   internalQueryGeneric,
19 | } from "convex/server";
20 | 
21 | /**
22 |  * Define a query in this Convex app's public API.
23 |  *
24 |  * This function will be allowed to read your Convex database and will be accessible from the client.
25 |  *
26 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
27 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
28 |  */
29 | export const query = queryGeneric;
30 | 
31 | /**
32 |  * Define a query that is only accessible from other Convex functions (but not from the client).
33 |  *
34 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
35 |  *
36 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
37 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
38 |  */
39 | export const internalQuery = internalQueryGeneric;
40 | 
41 | /**
42 |  * Define a mutation in this Convex app's public API.
43 |  *
44 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
45 |  *
46 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
47 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
48 |  */
49 | export const mutation = mutationGeneric;
50 | 
51 | /**
52 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
53 |  *
54 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
55 |  *
56 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
57 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
58 |  */
59 | export const internalMutation = internalMutationGeneric;
60 | 
61 | /**
62 |  * Define an action in this Convex app's public API.
63 |  *
64 |  * An action is a function which can execute any JavaScript code, including non-deterministic
65 |  * code and code with side-effects, like calling third-party services.
66 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
67 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
68 |  *
69 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
70 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
71 |  */
72 | export const action = actionGeneric;
73 | 
74 | /**
75 |  * Define an action that is only accessible from other Convex functions (but not from the client).
76 |  *
77 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
78 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
79 |  */
80 | export const internalAction = internalActionGeneric;
81 | 
82 | /**
83 |  * Define a Convex HTTP action.
84 |  *
85 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
86 |  * as its second.
87 |  * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
88 |  */
89 | export const httpAction = httpActionGeneric;
90 |

--------------------------------------------------------------------------------
/convex/quizzes/mutations.ts:
--------------------------------------------------------------------------------
  1 | import { v } from 'convex/values'
  2 | import { Doc } from '../_generated/dataModel'
  3 | import { internalMutation, internalQuery, mutation } from '../_generated/server'
  4 | import { QuizResultSchema, QuizSchema } from '../schema'
  5 | import { quizAuthCheckFunc } from '../utils'
  6 | 
  7 | export const previousQuestion = mutation({
  8 |   args: {
  9 |     quizId: v.id('quizzes'),
 10 |   },
 11 |   handler: async (ctx, args) => {
 12 |     const { quiz } = await quizAuthCheckFunc({ quizId: args.quizId, ctx })
 13 | 
 14 |     const currentQuestionIndex = quiz.progress.currentQuestionIndex
 15 | 
 16 |     // safety net to make sure we don't go below 0
 17 |     const newQuestionIndex = Math.max(currentQuestionIndex - 1, 0)
 18 | 
 19 |     await ctx.db.patch(args.quizId, {
 20 |       progress: {
 21 |         ...quiz.progress,
 22 |         currentQuestionIndex: newQuestionIndex,
 23 |       },
 24 |     })
 25 | 
 26 |     const newQuestion = quiz.questions[newQuestionIndex]
 27 | 
 28 |     return newQuestion.id
 29 |   },
 30 | })
 31 | 
 32 | type Answer = Doc<'quizzes'>['progress']['answers'][number]
 33 | type Progress = Doc<'quizzes'>['progress']
 34 | 
 35 | export const nextQuestion = mutation({
 36 |   args: { quizId: v.id('quizzes'), selectedOptionId: v.string() },
 37 |   handler: async (ctx, args) => {
 38 |     const { quiz } = await quizAuthCheckFunc({ quizId: args.quizId, ctx })
 39 | 
 40 |     const currentIndex = quiz.progress?.currentQuestionIndex || 0
 41 |     const currentQuestion = quiz.questions[currentIndex]
 42 | 
 43 |     // Math.min is just safety net
 44 |     const newIndex = Math.min(currentIndex + 1, quiz.questions.length - 1)
 45 |     const newAnswer: Answer = {
 46 |       questionId: currentQuestion.id,
 47 |       selectedOptionId: args.selectedOptionId,
 48 |     }
 49 | 
 50 |     // Check if an answer for this question already exists
 51 |     const existingAnswerIndex = quiz.progress.answers.findIndex(
 52 |       (answer) => answer.questionId === currentQuestion.id
 53 |     )
 54 | 
 55 |     let updatedAnswers: Array<Answer>
 56 |     const hasExistingAnswer = existingAnswerIndex !== -1
 57 |     if (hasExistingAnswer) {
 58 |       // Update existing answer
 59 |       updatedAnswers = [...quiz.progress.answers]
 60 |       updatedAnswers[existingAnswerIndex] = newAnswer
 61 |     } else {
 62 |       // Add new answer
 63 |       updatedAnswers = [...quiz.progress.answers, newAnswer]
 64 |     }
 65 | 
 66 |     const newProgress: Progress = {
 67 |       ...quiz.progress,
 68 |       currentQuestionIndex: newIndex,
 69 |       lastUpdated: Date.now(),
 70 |       answers: updatedAnswers,
 71 |     }
 72 | 
 73 |     await ctx.db.patch(args.quizId, {
 74 |       progress: newProgress,
 75 |     })
 76 | 
 77 |     return newAnswer
 78 |   },
 79 | })
 80 | 
 81 | export const storeQuiz = internalMutation({
 82 |   args: QuizSchema.validator,
 83 |   handler: async (ctx, args) => {
 84 |     return await ctx.db.insert('quizzes', args)
 85 |   },
 86 | })
 87 | 
 88 | export const storeQuizResult = internalMutation({
 89 |   args: QuizResultSchema.validator,
 90 |   handler: async (ctx, args) => {
 91 |     return await ctx.db.insert('quizResults', args)
 92 |   },
 93 | })
 94 | 
 95 | export const getResultById = internalQuery({
 96 |   args: { id: v.id('quizResults') },
 97 |   handler: async (ctx, args) => {
 98 |     return await ctx.db.get(args.id)
 99 |   },
100 | })
101 | 
102 | export const updateQuiz = internalMutation({
103 |   args: { id: v.id('quizzes'), isCompleted: v.boolean() },
104 |   handler: async (ctx, args) => {
105 |     return await ctx.db.patch(args.id, { isCompleted: args.isCompleted })
106 |   },
107 | })
108 | 
109 | export const deleteQuizzes = mutation({
110 |   args: { quizIds: v.array(v.id('quizzes')) },
111 |   handler: async (ctx, args) => {
112 |     const deletePromises = args.quizIds.map((quizId) => ctx.db.delete(quizId))
113 | 
114 |     await Promise.all(deletePromises)
115 |   },
116 | })
117 |

--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Dialog({
 10 |   ...props
 11 | }: React.ComponentProps<typeof DialogPrimitive.Root>) {
 12 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 13 | }
 14 | 
 15 | function DialogTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 18 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 19 | }
 20 | 
 21 | function DialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 24 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 25 | }
 26 | 
 27 | function DialogClose({
 28 |   ...props
 29 | }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 30 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 31 | }
 32 | 
 33 | function DialogOverlay({
 34 |   className,
 35 |   ...props
 36 | }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 37 |   return (
 38 |     <DialogPrimitive.Overlay
 39 |       data-slot="dialog-overlay"
 40 |       className={cn(
 41 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     />
 46 |   )
 47 | }
 48 | 
 49 | function DialogContent({
 50 |   className,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<typeof DialogPrimitive.Content>) {
 54 |   return (
 55 |     <DialogPortal data-slot="dialog-portal">
 56 |       <DialogOverlay />
 57 |       <DialogPrimitive.Content
 58 |         data-slot="dialog-content"
 59 |         className={cn(
 60 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 61 |           className
 62 |         )}
 63 |         {...props}
 64 |       >
 65 |         {children}
 66 |         <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 67 |           <XIcon />
 68 |           <span className="sr-only">Close</span>
 69 |         </DialogPrimitive.Close>
 70 |       </DialogPrimitive.Content>
 71 |     </DialogPortal>
 72 |   )
 73 | }
 74 | 
 75 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 76 |   return (
 77 |     <div
 78 |       data-slot="dialog-header"
 79 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 80 |       {...props}
 81 |     />
 82 |   )
 83 | }
 84 | 
 85 | function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 86 |   return (
 87 |     <div
 88 |       data-slot="dialog-footer"
 89 |       className={cn(
 90 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 91 |         className
 92 |       )}
 93 |       {...props}
 94 |     />
 95 |   )
 96 | }
 97 | 
 98 | function DialogTitle({
 99 |   className,
100 |   ...props
101 | }: React.ComponentProps<typeof DialogPrimitive.Title>) {
102 |   return (
103 |     <DialogPrimitive.Title
104 |       data-slot="dialog-title"
105 |       className={cn("text-lg leading-none font-semibold", className)}
106 |       {...props}
107 |     />
108 |   )
109 | }
110 | 
111 | function DialogDescription({
112 |   className,
113 |   ...props
114 | }: React.ComponentProps<typeof DialogPrimitive.Description>) {
115 |   return (
116 |     <DialogPrimitive.Description
117 |       data-slot="dialog-description"
118 |       className={cn("text-muted-foreground text-sm", className)}
119 |       {...props}
120 |     />
121 |   )
122 | }
123 | 
124 | export {
125 |   Dialog,
126 |   DialogClose,
127 |   DialogContent,
128 |   DialogDescription,
129 |   DialogFooter,
130 |   DialogHeader,
131 |   DialogOverlay,
132 |   DialogPortal,
133 |   DialogTitle,
134 |   DialogTrigger,
135 | }
136 |

--------------------------------------------------------------------------------
/src/pages/login/components/register-form.tsx:
--------------------------------------------------------------------------------
  1 | import { InputWithFeedback } from '@/components/input-with-feedback'
  2 | import { Button } from '@/components/ui/button'
  3 | import { Label } from '@/components/ui/label'
  4 | import { handlePromise } from '@/lib/utils'
  5 | import { useAuthActions } from '@convex-dev/auth/react'
  6 | import { api } from '@convex/_generated/api'
  7 | import { useConvex } from 'convex/react'
  8 | import { useActionState } from 'react'
  9 | import { toast } from 'sonner'
 10 | 
 11 | const SIGN_UP_STEP = 'signUp'
 12 | 
 13 | const PASSWORD_MIN_LENGTH = 6
 14 | 
 15 | type FormState =
 16 |   | {
 17 |       status: 'error'
 18 |       errors: {
 19 |         email: string
 20 |         password: string
 21 |       }
 22 |     }
 23 |   | {
 24 |       status: 'success'
 25 |     }
 26 | 
 27 | export function RegisterForm() {
 28 |   const convex = useConvex()
 29 |   const { signIn } = useAuthActions()
 30 | 
 31 |   const [state, formAction, isPending] = useActionState<FormState, FormData>(
 32 |     async (_, formData) => {
 33 |       const email = formData.get('email') as string
 34 |       const password = formData.get('password') as string
 35 |       const confirmPassword = formData.get('confirmPassword') as string
 36 | 
 37 |       const errors = {
 38 |         email: '',
 39 |         password: '',
 40 |       }
 41 | 
 42 |       if (password.length < PASSWORD_MIN_LENGTH) {
 43 |         errors.password = `Password must be at least ${PASSWORD_MIN_LENGTH} characters long`
 44 |         return { status: 'error', errors }
 45 |       }
 46 | 
 47 |       if (password !== confirmPassword) {
 48 |         errors.password = 'Passwords do not match'
 49 |         return { status: 'error', errors }
 50 |       }
 51 | 
 52 |       const [existingUser, existingUserError] = await handlePromise(
 53 |         convex.query(api.users.getUserByEmail, { email })
 54 |       )
 55 | 
 56 |       if (existingUserError) {
 57 |         errors.email =
 58 |           'Something went wrong during registration. Please try later.'
 59 |         return { status: 'error', errors }
 60 |       }
 61 | 
 62 |       if (existingUser) {
 63 |         errors.email = 'Email already exists'
 64 |         return { status: 'error', errors }
 65 |       }
 66 | 
 67 |       const [, signInError] = await handlePromise(signIn('password', formData))
 68 | 
 69 |       if (signInError) {
 70 |         errors.email =
 71 |           'Something went wrong during registration. Please try later.'
 72 |         return { status: 'error', errors }
 73 |       }
 74 |       toast.success('Registration successful')
 75 |       return { status: 'success' }
 76 |     },
 77 |     { status: 'error', errors: { email: '', password: '' } }
 78 |   )
 79 | 
 80 |   return (
 81 |     <form action={formAction} className="flex flex-col gap-9">
 82 |       <input name="flow" type="hidden" value={SIGN_UP_STEP} />
 83 |       <div className="flex flex-col gap-2.5">
 84 |         <Label htmlFor="email">Email</Label>
 85 |         <InputWithFeedback
 86 |           name="email"
 87 |           id="email"
 88 |           placeholder="naruto@konoha.com"
 89 |           type="email"
 90 |           errorMessage={state.status === 'error' ? state.errors?.email : ''}
 91 |           isError={state.status === 'error' && !!state.errors?.email}
 92 |           required
 93 |         />
 94 |       </div>
 95 |       <div className="flex flex-col gap-2.5">
 96 |         <Label htmlFor="password">Password</Label>
 97 |         <InputWithFeedback
 98 |           name="password"
 99 |           id="password"
100 |           errorMessage={state.status === 'error' ? state.errors?.password : ''}
101 |           isError={state.status === 'error' && !!state.errors?.password}
102 |           required
103 |           type="password"
104 |           helperText="Password must be at least 6 characters long"
105 |           placeholder="********"
106 |         />
107 |       </div>
108 |       <div className="flex flex-col gap-2.5">
109 |         <Label htmlFor="confirmPassword">Confirm Password</Label>
110 |         <InputWithFeedback
111 |           name="confirmPassword"
112 |           id="confirmPassword"
113 |           required
114 |           // just show error border if any password errors
115 |           isError={state.status === 'error' && !!state.errors?.password}
116 |           type="password"
117 |           placeholder="********"
118 |         />
119 |       </div>
120 |       <Button type="submit" isLoading={isPending} disabled={isPending}>
121 |         Register
122 |       </Button>
123 |     </form>
124 |   )
125 | }
126 |

--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { buttonVariants } from "@/components/ui/button"
  6 | 
  7 | function AlertDialog({
  8 |   ...props
  9 | }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
 10 |   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 11 | }
 12 | 
 13 | function AlertDialogTrigger({
 14 |   ...props
 15 | }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
 16 |   return (
 17 |     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 18 |   )
 19 | }
 20 | 
 21 | function AlertDialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
 24 |   return (
 25 |     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 26 |   )
 27 | }
 28 | 
 29 | function AlertDialogOverlay({
 30 |   className,
 31 |   ...props
 32 | }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
 33 |   return (
 34 |     <AlertDialogPrimitive.Overlay
 35 |       data-slot="alert-dialog-overlay"
 36 |       className={cn(
 37 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   )
 43 | }
 44 | 
 45 | function AlertDialogContent({
 46 |   className,
 47 |   ...props
 48 | }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
 49 |   return (
 50 |     <AlertDialogPortal>
 51 |       <AlertDialogOverlay />
 52 |       <AlertDialogPrimitive.Content
 53 |         data-slot="alert-dialog-content"
 54 |         className={cn(
 55 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 56 |           className
 57 |         )}
 58 |         {...props}
 59 |       />
 60 |     </AlertDialogPortal>
 61 |   )
 62 | }
 63 | 
 64 | function AlertDialogHeader({
 65 |   className,
 66 |   ...props
 67 | }: React.ComponentProps<"div">) {
 68 |   return (
 69 |     <div
 70 |       data-slot="alert-dialog-header"
 71 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 72 |       {...props}
 73 |     />
 74 |   )
 75 | }
 76 | 
 77 | function AlertDialogFooter({
 78 |   className,
 79 |   ...props
 80 | }: React.ComponentProps<"div">) {
 81 |   return (
 82 |     <div
 83 |       data-slot="alert-dialog-footer"
 84 |       className={cn(
 85 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 86 |         className
 87 |       )}
 88 |       {...props}
 89 |     />
 90 |   )
 91 | }
 92 | 
 93 | function AlertDialogTitle({
 94 |   className,
 95 |   ...props
 96 | }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
 97 |   return (
 98 |     <AlertDialogPrimitive.Title
 99 |       data-slot="alert-dialog-title"
100 |       className={cn("text-lg font-semibold", className)}
101 |       {...props}
102 |     />
103 |   )
104 | }
105 | 
106 | function AlertDialogDescription({
107 |   className,
108 |   ...props
109 | }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
110 |   return (
111 |     <AlertDialogPrimitive.Description
112 |       data-slot="alert-dialog-description"
113 |       className={cn("text-muted-foreground text-sm", className)}
114 |       {...props}
115 |     />
116 |   )
117 | }
118 | 
119 | function AlertDialogAction({
120 |   className,
121 |   ...props
122 | }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
123 |   return (
124 |     <AlertDialogPrimitive.Action
125 |       className={cn(buttonVariants(), className)}
126 |       {...props}
127 |     />
128 |   )
129 | }
130 | 
131 | function AlertDialogCancel({
132 |   className,
133 |   ...props
134 | }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
135 |   return (
136 |     <AlertDialogPrimitive.Cancel
137 |       className={cn(buttonVariants({ variant: "outline" }), className)}
138 |       {...props}
139 |     />
140 |   )
141 | }
142 | 
143 | export {
144 |   AlertDialog,
145 |   AlertDialogPortal,
146 |   AlertDialogOverlay,
147 |   AlertDialogTrigger,
148 |   AlertDialogContent,
149 |   AlertDialogHeader,
150 |   AlertDialogFooter,
151 |   AlertDialogTitle,
152 |   AlertDialogDescription,
153 |   AlertDialogAction,
154 |   AlertDialogCancel,
155 | }
156 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/components/quiz-list-section.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { Input } from '@/components/ui/input'
  3 | import { Status } from '@/lib/schemas'
  4 | import { handlePromise } from '@/lib/utils'
  5 | import { api } from '@convex/_generated/api'
  6 | import { Id } from '@convex/_generated/dataModel'
  7 | import { useMutation, useQuery } from 'convex/react'
  8 | import { useAtom } from 'jotai'
  9 | import { CheckSquare, Search, Trash2 } from 'lucide-react'
 10 | import { useState } from 'react'
 11 | import { toast } from 'sonner'
 12 | import { isSelectModeAtom, selectedQuizIdsAtom } from '../lib/atoms'
 13 | import { DeleteQuizzesAlertDialog } from './delete-alert-dialog'
 14 | import { QuizList } from './quiz-list'
 15 | 
 16 | export function QuizListSection() {
 17 |   const [searchQuery, setSearchQuery] = useState('')
 18 |   const [isSelectMode, setIsSelectMode] = useAtom(isSelectModeAtom)
 19 |   const [selectedQuizIds, setSelectedQuizIds] = useAtom(selectedQuizIdsAtom)
 20 |   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 21 |   const [deletionStatus, setDeletionStatus] = useState<Status>('idle')
 22 | 
 23 |   const deleteQuizzes = useMutation(api.quizzes.mutations.deleteQuizzes)
 24 | 
 25 |   const recentQuizzes = useQuery(api.quizzes.queries.listQuizzesWithProgress)
 26 | 
 27 |   const filteredQuizzes = recentQuizzes?.filter((quiz) =>
 28 |     quiz.title.toLowerCase().includes(searchQuery.toLowerCase())
 29 |   )
 30 | 
 31 |   const toggleSelectMode = () => {
 32 |     setIsSelectMode(!isSelectMode)
 33 |     setSelectedQuizIds(new Set())
 34 |   }
 35 | 
 36 |   const handleDeleteSelected = () => {
 37 |     setIsDeleteDialogOpen(true)
 38 |   }
 39 | 
 40 |   function resetState() {
 41 |     setIsDeleteDialogOpen(false)
 42 |     setIsSelectMode(false)
 43 |     setSelectedQuizIds(new Set())
 44 |   }
 45 | 
 46 |   const confirmDelete = async () => {
 47 |     const [, error] = await handlePromise(
 48 |       deleteQuizzes({
 49 |         quizIds: Array.from(selectedQuizIds) as Array<Id<'quizzes'>>,
 50 |       })
 51 |     )
 52 | 
 53 |     if (error) {
 54 |       toast.error('Something went wrong. Please try again.')
 55 |       setDeletionStatus('error')
 56 |       resetState()
 57 |       return
 58 |     }
 59 | 
 60 |     toast.success('Quizzes deleted successfully.')
 61 |     setDeletionStatus('success')
 62 |     resetState()
 63 |   }
 64 | 
 65 |   const isDeleting = deletionStatus === 'loading'
 66 | 
 67 |   return (
 68 |     <div className="border-t pt-8">
 69 |       <div className="flex flex-col gap-4">
 70 |         <div className="flex items-center justify-between">
 71 |           <h2 className="text-xl font-semibold">Recent Quizzes</h2>
 72 | 
 73 |           <div className="flex items-center gap-4">
 74 |             <Button
 75 |               variant="outline"
 76 |               size="sm"
 77 |               onClick={toggleSelectMode}
 78 |               className={isSelectMode ? 'bg-primary/10 border-primary' : ''}
 79 |             >
 80 |               <CheckSquare className="mr-2 h-4 w-4" />
 81 |               {isSelectMode ? 'Cancel Selection' : 'Select'}
 82 |             </Button>
 83 | 
 84 |             <div className="relative">
 85 |               <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
 86 |               <label htmlFor="search" className="sr-only">
 87 |                 Search
 88 |               </label>
 89 |               <Input
 90 |                 placeholder="Search"
 91 |                 className="w-full pl-10"
 92 |                 name="search"
 93 |                 id="search"
 94 |                 value={searchQuery}
 95 |                 onChange={(event) => setSearchQuery(event.target.value)}
 96 |               />
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 | 
101 |         <QuizList quizzes={filteredQuizzes} />
102 | 
103 |         {isSelectMode && selectedQuizIds.size > 0 && (
104 |           <Button
105 |             variant="destructive"
106 |             size="lg"
107 |             className="fixed right-6 bottom-6 z-50 shadow-lg"
108 |             onClick={handleDeleteSelected}
109 |           >
110 |             <Trash2 className="mr-2 h-4 w-4" />
111 |             Delete Selected ({selectedQuizIds.size})
112 |           </Button>
113 |         )}
114 | 
115 |         <DeleteQuizzesAlertDialog
116 |           isDeleteDialogOpen={isDeleteDialogOpen}
117 |           setIsDeleteDialogOpen={setIsDeleteDialogOpen}
118 |           selectedQuizIds={selectedQuizIds}
119 |           confirmDelete={confirmDelete}
120 |           isDeleting={isDeleting}
121 |         />
122 |       </div>
123 |     </div>
124 |   )
125 | }
126 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | html,
  8 | body {
  9 |   height: 100%;
 10 |     font-family: 'Inter Variable', sans-serif;
 11 | 
 12 | }
 13 | 
 14 | #root {
 15 |   min-height: 100dvh;
 16 |   display: flex;
 17 |   flex-direction: column;
 18 | }
 19 | 
 20 | a,
 21 | button {
 22 |   cursor: pointer;
 23 | }
 24 | 
 25 | :root {
 26 |   --background: oklch(1 0 0);
 27 |   --foreground: oklch(0.145 0 0);
 28 |   --card: oklch(1 0 0);
 29 |   --card-foreground: oklch(0.145 0 0);
 30 |   --popover: oklch(1 0 0);
 31 |   --popover-foreground: oklch(0.145 0 0);
 32 | 
 33 |   --primary: oklch(0.53 0.2 295); /* Purple */
 34 |   --primary-foreground: oklch(0.98 0 0); /* White text on purple */
 35 | 
 36 |   --secondary: oklch(0.97 0 0);
 37 |   --secondary-foreground: oklch(0.205 0 0);
 38 |   --muted: oklch(0.97 0 0);
 39 |   --muted-foreground: oklch(0.556 0 0);
 40 |   --accent: oklch(0.97 0 0);
 41 |   --accent-foreground: oklch(0.205 0 0);
 42 |   --destructive: oklch(0.577 0.245 27.325);
 43 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 44 |   --border: oklch(0.922 0 0);
 45 |   --input: oklch(0.922 0 0);
 46 |   --ring: oklch(0.53 0.2 295); /* Same as primary */
 47 |   --chart-1: oklch(0.646 0.222 41.116);
 48 |   --chart-2: oklch(0.6 0.118 184.704);
 49 |   --chart-3: oklch(0.398 0.07 227.392);
 50 |   --chart-4: oklch(0.828 0.189 84.429);
 51 |   --chart-5: oklch(0.769 0.188 70.08);
 52 |   --radius: 0.625rem;
 53 |   --sidebar: oklch(0.985 0 0);
 54 |   --sidebar-foreground: oklch(0.145 0 0);
 55 | 
 56 |   --sidebar-primary: oklch(0.53 0.2 295); /* Same purple as primary */
 57 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 58 | 
 59 |   --sidebar-accent: oklch(0.97 0 0);
 60 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 61 |   --sidebar-border: oklch(0.922 0 0);
 62 |   --sidebar-ring: oklch(0.708 0 0);
 63 | }
 64 | 
 65 | .dark {
 66 |   --background: oklch(0.145 0 0);
 67 |   --foreground: oklch(0.985 0 0);
 68 |   --card: oklch(0.145 0 0);
 69 |   --card-foreground: oklch(0.985 0 0);
 70 |   --popover: oklch(0.145 0 0);
 71 |   --popover-foreground: oklch(0.985 0 0);
 72 |   --secondary: oklch(0.269 0 0);
 73 |   --secondary-foreground: oklch(0.985 0 0);
 74 |   --muted: oklch(0.269 0 0);
 75 |   --muted-foreground: oklch(0.708 0 0);
 76 |   --accent: oklch(0.269 0 0);
 77 |   --accent-foreground: oklch(0.985 0 0);
 78 |   --destructive: oklch(0.396 0.141 25.723);
 79 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 80 |   --border: oklch(0.269 0 0);
 81 |   --input: oklch(0.269 0 0);
 82 |   --ring: oklch(0.58 0.22 295); /* Same as primary */
 83 |   --chart-1: oklch(0.488 0.243 264.376);
 84 |   --chart-2: oklch(0.696 0.17 162.48);
 85 |   --chart-3: oklch(0.769 0.188 70.08);
 86 |   --chart-4: oklch(0.627 0.265 303.9);
 87 |   --chart-5: oklch(0.645 0.246 16.439);
 88 |   --sidebar: oklch(0.205 0 0);
 89 |   --sidebar-foreground: oklch(0.985 0 0);
 90 |   --sidebar-accent: oklch(0.269 0 0);
 91 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 92 |   --sidebar-border: oklch(0.269 0 0);
 93 |   --sidebar-ring: oklch(0.439 0 0);
 94 | 
 95 |   /* For dark mode */
 96 |   --primary: oklch(0.58 0.22 295);
 97 |   --primary-foreground: oklch(0.1 0 0);
 98 | 
 99 |   /* Optional: Dark mode sidebar primary */
100 |   --sidebar-primary: oklch(0.58 0.22 295); /* Same purple as primary */
101 |   --sidebar-primary-foreground: oklch(0.985 0 0);
102 | }
103 | 
104 | @theme inline {
105 |   --color-background: var(--background);
106 |   --color-foreground: var(--foreground);
107 |   --color-card: var(--card);
108 |   --color-card-foreground: var(--card-foreground);
109 |   --color-popover: var(--popover);
110 |   --color-popover-foreground: var(--popover-foreground);
111 |   --color-primary: var(--primary);
112 |   --color-primary-foreground: var(--primary-foreground);
113 |   --color-secondary: var(--secondary);
114 |   --color-secondary-foreground: var(--secondary-foreground);
115 |   --color-muted: var(--muted);
116 |   --color-muted-foreground: var(--muted-foreground);
117 |   --color-accent: var(--accent);
118 |   --color-accent-foreground: var(--accent-foreground);
119 |   --color-destructive: var(--destructive);
120 |   --color-destructive-foreground: var(--destructive-foreground);
121 |   --color-border: var(--border);
122 |   --color-input: var(--input);
123 |   --color-ring: var(--ring);
124 |   --color-chart-1: var(--chart-1);
125 |   --color-chart-2: var(--chart-2);
126 |   --color-chart-3: var(--chart-3);
127 |   --color-chart-4: var(--chart-4);
128 |   --color-chart-5: var(--chart-5);
129 |   --radius-sm: calc(var(--radius) - 4px);
130 |   --radius-md: calc(var(--radius) - 2px);
131 |   --radius-lg: var(--radius);
132 |   --radius-xl: calc(var(--radius) + 4px);
133 |   --color-sidebar: var(--sidebar);
134 |   --color-sidebar-foreground: var(--sidebar-foreground);
135 |   --color-sidebar-primary: var(--sidebar-primary);
136 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
137 |   --color-sidebar-accent: var(--sidebar-accent);
138 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
139 |   --color-sidebar-border: var(--sidebar-border);
140 |   --color-sidebar-ring: var(--sidebar-ring);
141 | }
142 | 
143 | @layer base {
144 |   * {
145 |     @apply border-border outline-ring/50;
146 |   }
147 |   body {
148 |     @apply bg-background text-foreground;
149 |   }
150 | }
151 |

--------------------------------------------------------------------------------
/src/layouts/authenticated/components/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { Separator } from '@/components/ui/separator'
  3 | import { usePrefetchQuery } from '@/hooks/use-prefetch-query'
  4 | import { ROUTES } from '@/lib/constants'
  5 | import { cn } from '@/lib/utils'
  6 | import { useAuthActions } from '@convex-dev/auth/react'
  7 | import { api } from '@convex/_generated/api'
  8 | import { Doc } from '@convex/_generated/dataModel'
  9 | import { useQuery } from 'convex/react'
 10 | import { BookOpen, LogOut, Plus, Settings } from 'lucide-react'
 11 | import { useState } from 'react'
 12 | import { generatePath, Link, useLocation } from 'react-router'
 13 | import { SettingsDialog } from './settings-dialog'
 14 | 
 15 | function QuizLinkItem({ quiz }: { quiz: Doc<'quizzes'> }) {
 16 |   const pathname = useLocation().pathname
 17 |   const quizPath = quiz.isCompleted
 18 |     ? generatePath(ROUTES.quizDetailResults, { quizId: quiz._id })
 19 |     : generatePath(ROUTES.quizDetail, { quizId: quiz._id })
 20 | 
 21 |   const prefetchResultsQuery = usePrefetchQuery(
 22 |     api.quizzes.queries.getQuizResults
 23 |   )
 24 | 
 25 |   const prefetchQuizDetailQuery = usePrefetchQuery(
 26 |     api.quizzes.queries.getQuizById
 27 |   )
 28 | 
 29 |   const handlePrefetch = () => {
 30 |     if (quiz.isCompleted) {
 31 |       prefetchResultsQuery({ quizId: quiz._id })
 32 |     } else {
 33 |       prefetchQuizDetailQuery({ id: quiz._id })
 34 |     }
 35 |   }
 36 | 
 37 |   return (
 38 |     <Link
 39 |       key={quiz._id}
 40 |       to={quizPath}
 41 |       onMouseEnter={handlePrefetch}
 42 |       className={cn('rounded-md px-3 py-2 text-sm', {
 43 |         'bg-muted font-medium': pathname === quizPath,
 44 |         'hover:bg-muted/50': pathname !== quizPath,
 45 |       })}
 46 |     >
 47 |       {quiz.title}
 48 |     </Link>
 49 |   )
 50 | }
 51 | 
 52 | export function Sidebar() {
 53 |   const quizzes = useQuery(api.quizzes.queries.getAllQuizzesByUserId)
 54 |   const user = useQuery(api.users.getCurrentUser)
 55 | 
 56 |   const hasApikey = Boolean(user?.api)
 57 |   const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
 58 | 
 59 |   const prefetchQuizHomeQuery = usePrefetchQuery(
 60 |     api.quizzes.queries.listQuizzesWithProgress
 61 |   )
 62 | 
 63 |   const handlePrefetch = () => {
 64 |     prefetchQuizHomeQuery({})
 65 |   }
 66 | 
 67 |   const { signOut } = useAuthActions()
 68 | 
 69 |   return (
 70 |     <>
 71 |       <div className="bg-background sticky top-0 left-0 z-50 flex h-screen w-64 shrink-0 flex-col border-r">
 72 |         <div className="p-5">
 73 |           <Link to={ROUTES.quizHome} onMouseEnter={handlePrefetch}>
 74 |             <div className="flex items-center gap-2">
 75 |               <BookOpen className="h-6 w-6" />
 76 |               <h1 className="text-xl font-bold">Notes to Quiz</h1>
 77 |             </div>
 78 |           </Link>
 79 |         </div>
 80 | 
 81 |         <Separator />
 82 | 
 83 |         <div className="flex-1 overflow-auto p-4">
 84 |           <div className="mb-6">
 85 |             <Button
 86 |               variant="ghost"
 87 |               size="icon"
 88 |               asChild
 89 |               className="mb-4 flex w-full items-center justify-between hover:bg-transparent"
 90 |             >
 91 |               <Link to={ROUTES.quizHome} onMouseEnter={handlePrefetch}>
 92 |                 <span className="text-sm font-semibold">Your Quizzes</span>
 93 |                 <Plus className="h-4 w-4" />
 94 |               </Link>
 95 |             </Button>
 96 | 
 97 |             {quizzes && quizzes.length > 0 && (
 98 |               <div className="flex flex-col gap-2">
 99 |                 {quizzes.map((quiz) => (
100 |                   <QuizLinkItem key={quiz._id} quiz={quiz} />
101 |                 ))}
102 |               </div>
103 |             )}
104 |           </div>
105 |         </div>
106 | 
107 |         <div className="relative mt-auto border-t p-5">
108 |           {/* Indicator for users who don't have an API key */}
109 |           {/* Could be better UX, but ok for now */}
110 |           {!hasApikey && (
111 |             <span className="absolute top-1.5 right-1.5 flex size-2.5">
112 |               <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
113 |               <span className="relative inline-flex size-2.5 rounded-full bg-red-500"></span>
114 |             </span>
115 |           )}
116 | 
117 |           <div className="flex flex-col items-center gap-4">
118 |             <Button
119 |               variant="outline"
120 |               className="w-full"
121 |               onClick={() => setIsSettingsDialogOpen(true)}
122 |             >
123 |               <Settings className="mr-2 h-4 w-4" />
124 |               Settings
125 |             </Button>
126 | 
127 |             <Button
128 |               variant="outline"
129 |               className="flex w-full items-center justify-center"
130 |               onClick={signOut}
131 |             >
132 |               <LogOut className="mr-2 h-4 w-4" />
133 |               <span>Logout</span>
134 |             </Button>
135 |           </div>
136 |         </div>
137 |       </div>
138 | 
139 |       {isSettingsDialogOpen && (
140 |         <SettingsDialog
141 |           open={isSettingsDialogOpen}
142 |           onOpenChange={setIsSettingsDialogOpen}
143 |         />
144 |       )}
145 |     </>
146 |   )
147 | }
148 |

--------------------------------------------------------------------------------
/src/layouts/authenticated/components/settings-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import { InputWithFeedback } from '@/components/input-with-feedback'
  2 | import { Button } from '@/components/ui/button'
  3 | import {
  4 |   Dialog,
  5 |   DialogContent,
  6 |   DialogDescription,
  7 |   DialogFooter,
  8 |   DialogHeader,
  9 |   DialogTitle,
 10 | } from '@/components/ui/dialog'
 11 | import { Label } from '@/components/ui/label'
 12 | import { handlePromise } from '@/lib/utils'
 13 | import { api } from '@convex/_generated/api'
 14 | import { useAction, useQuery } from 'convex/react'
 15 | import { useActionState, useEffect, useState } from 'react'
 16 | import { toast } from 'sonner'
 17 | 
 18 | type FormState =
 19 |   | {
 20 |       status: 'error'
 21 |       error: string
 22 |     }
 23 |   | {
 24 |       status: 'success'
 25 |     }
 26 |   | {
 27 |       status: 'idle'
 28 |     }
 29 | 
 30 | const API_KEY_FORM_NAME = 'api-key'
 31 | 
 32 | export function SettingsDialog({
 33 |   open,
 34 |   onOpenChange,
 35 | }: {
 36 |   open: boolean
 37 |   onOpenChange: (open: boolean) => void
 38 | }) {
 39 |   const user = useQuery(api.users.getCurrentUser)
 40 |   const [isApiKeyVisible, setIsApiKeyVisible] = useState(false)
 41 |   const getApiKey = useAction(api.key.getApiKey)
 42 |   const storeApiKey = useAction(api.key.storeApiKey)
 43 | 
 44 |   const [apiKey, setApiKey] = useState('')
 45 |   const [fetchExistingKeyStatus, setFetchExistingKeyStatus] = useState<
 46 |     'idle' | 'loading' | 'error' | 'success'
 47 |   >('idle')
 48 |   const [fetchExistingKeyErrorMessage, setFetchExistingKeyErrorMessage] =
 49 |     useState('')
 50 | 
 51 |   const hasUserApiKey = Boolean(user?.api)
 52 | 
 53 |   const [state, formAction, isPending] = useActionState<FormState, FormData>(
 54 |     async (_, formData) => {
 55 |       const apiKey = formData.get(API_KEY_FORM_NAME) as string
 56 | 
 57 |       const [, error] = await handlePromise(storeApiKey({ apiKey }))
 58 | 
 59 |       if (error) {
 60 |         return {
 61 |           status: 'error',
 62 |           error: 'Failed to save API key. Please try again.',
 63 |         }
 64 |       }
 65 | 
 66 |       toast.success('API key saved successfully')
 67 |       onOpenChange(false)
 68 | 
 69 |       return {
 70 |         status: 'success',
 71 |       }
 72 |     },
 73 |     { status: 'idle' }
 74 |   )
 75 | 
 76 |   useEffect(() => {
 77 |     if (open && hasUserApiKey) {
 78 |       // Fetch API key when dialog opens and user has api key
 79 |       setFetchExistingKeyStatus('loading')
 80 |       getApiKey()
 81 |         .then((key) => {
 82 |           if (key) setApiKey(key)
 83 |           setFetchExistingKeyStatus('success')
 84 |         })
 85 |         .catch(() => {
 86 |           setFetchExistingKeyErrorMessage(
 87 |             'Failed to fetch existing API key. Please try again.'
 88 |           )
 89 |           setFetchExistingKeyStatus('error')
 90 |         })
 91 |     }
 92 |   }, [open, getApiKey, hasUserApiKey])
 93 | 
 94 |   const isApiKeyEmpty = apiKey === ''
 95 | 
 96 |   const isError = fetchExistingKeyStatus === 'error' || state.status === 'error'
 97 |   const errorMessage =
 98 |     fetchExistingKeyStatus === 'error'
 99 |       ? fetchExistingKeyErrorMessage
100 |       : state.status === 'error'
101 |         ? state.error
102 |         : ''
103 | 
104 |   const isFetchingExistingKey = fetchExistingKeyStatus === 'loading'
105 |   const placeholder = isFetchingExistingKey
106 |     ? 'Fetching existing API key...'
107 |     : 'sk-...'
108 | 
109 |   return (
110 |     <Dialog open={open} onOpenChange={onOpenChange}>
111 |       <DialogContent className="sm:max-w-md">
112 |         <form action={formAction}>
113 |           <DialogHeader>
114 |             <DialogTitle>Settings</DialogTitle>
115 |             <DialogDescription>
116 |               Configure your{' '}
117 |               <a
118 |                 href="https://openai.com/index/openai-api/"
119 |                 target="_blank"
120 |                 rel="noreferrer"
121 |                 className="underline"
122 |               >
123 |                 OpenAI API key
124 |               </a>{' '}
125 |               for quiz generation.
126 |             </DialogDescription>
127 |           </DialogHeader>
128 |           <div className="flex flex-col gap-3 py-4">
129 |             <Label htmlFor={API_KEY_FORM_NAME}>API Key</Label>
130 |             <div className="flex items-center gap-2">
131 |               <InputWithFeedback
132 |                 id={API_KEY_FORM_NAME}
133 |                 name={API_KEY_FORM_NAME}
134 |                 type={isApiKeyVisible ? 'text' : 'password'}
135 |                 value={apiKey}
136 |                 onChange={(event) => setApiKey(event.target.value)}
137 |                 className="grow"
138 |                 placeholder={placeholder}
139 |                 errorMessage={errorMessage}
140 |                 isError={isError}
141 |                 required
142 |                 isLoading={isFetchingExistingKey}
143 |                 disabled={isFetchingExistingKey}
144 |               />
145 |               <Button
146 |                 variant="outline"
147 |                 onClick={() => setIsApiKeyVisible(!isApiKeyVisible)}
148 |                 type="button"
149 |                 className="h-full"
150 |               >
151 |                 {isApiKeyVisible ? 'Hide' : 'Show'}
152 |               </Button>
153 |             </div>
154 |           </div>
155 |           <DialogFooter className="mt-4">
156 |             <Button
157 |               type="submit"
158 |               isLoading={isPending}
159 |               disabled={isPending || isApiKeyEmpty}
160 |             >
161 |               Save Changes
162 |             </Button>
163 |           </DialogFooter>
164 |         </form>
165 |       </DialogContent>
166 |     </Dialog>
167 |   )
168 | }
169 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/components/quiz-item.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Card,
  3 |   CardContent,
  4 |   CardDescription,
  5 |   CardHeader,
  6 |   CardTitle,
  7 | } from '@/components/ui/card'
  8 | import { Checkbox } from '@/components/ui/checkbox'
  9 | import { Progress } from '@/components/ui/progress'
 10 | import { usePrefetchQuery } from '@/hooks/use-prefetch-query'
 11 | import { ROUTES } from '@/lib/constants'
 12 | import { cn } from '@/lib/utils'
 13 | import { api } from '@convex/_generated/api'
 14 | import { FunctionReturnType } from 'convex/server'
 15 | import { format } from 'date-fns'
 16 | import { useAtom } from 'jotai'
 17 | import { CheckCircle } from 'lucide-react'
 18 | import { motion } from 'motion/react'
 19 | import { generatePath, Link } from 'react-router'
 20 | import { isSelectModeAtom, selectedQuizIdsAtom } from '../lib/atoms'
 21 | 
 22 | type QuizWithProgress = FunctionReturnType<
 23 |   typeof api.quizzes.queries.listQuizzesWithProgress
 24 | >[number]
 25 | 
 26 | export function QuizItem({ quiz }: { quiz: QuizWithProgress }) {
 27 |   const quizPath = quiz.isCompleted
 28 |     ? generatePath(ROUTES.quizDetailResults, { quizId: quiz._id })
 29 |     : generatePath(ROUTES.quizDetail, { quizId: quiz._id })
 30 | 
 31 |   const [isSelectMode] = useAtom(isSelectModeAtom)
 32 |   const [selectedQuizIds, setSelectedQuizIds] = useAtom(selectedQuizIdsAtom)
 33 | 
 34 |   const isSelected = selectedQuizIds.has(quiz._id)
 35 | 
 36 |   const toggleSelection = () => {
 37 |     const newSelection = new Set(selectedQuizIds)
 38 |     if (isSelected) {
 39 |       newSelection.delete(quiz._id)
 40 |     } else {
 41 |       newSelection.add(quiz._id)
 42 |     }
 43 |     setSelectedQuizIds(newSelection)
 44 |   }
 45 | 
 46 |   const prefetchResultsQuery = usePrefetchQuery(
 47 |     api.quizzes.queries.getQuizResults
 48 |   )
 49 | 
 50 |   const prefetchQuizDetailQuery = usePrefetchQuery(
 51 |     api.quizzes.queries.getQuizById
 52 |   )
 53 | 
 54 |   const handleClick = (event: React.MouseEvent) => {
 55 |     if (isSelectMode) {
 56 |       event.preventDefault() // Prevent navigation when in select mode
 57 |       toggleSelection()
 58 |     }
 59 |   }
 60 | 
 61 |   const handlePrefetch = () => {
 62 |     if (quiz.isCompleted) {
 63 |       prefetchResultsQuery({ quizId: quiz._id })
 64 |     } else {
 65 |       prefetchQuizDetailQuery({ id: quiz._id })
 66 |     }
 67 |   }
 68 | 
 69 |   return (
 70 |     <motion.div
 71 |       animate={{ opacity: 1, y: 0 }}
 72 |       exit={{ opacity: 0, y: -5 }}
 73 |       transition={{ duration: 0.2 }}
 74 |     >
 75 |       <Link to={quizPath} onClick={handleClick} onMouseEnter={handlePrefetch}>
 76 |         <Card className="h-full transition-all duration-300 ease-in-out hover:-translate-y-1 hover:shadow-lg">
 77 |           <CardHeader className="pb-2">
 78 |             <div className="flex items-start justify-between">
 79 |               <div className="flex">
 80 |                 {isSelectMode && (
 81 |                   <div>
 82 |                     <Checkbox
 83 |                       checked={isSelected}
 84 |                       onCheckedChange={() => toggleSelection()}
 85 |                       className="h-5 w-5 border-2"
 86 |                     />
 87 |                   </div>
 88 |                 )}
 89 | 
 90 |                 <CardTitle
 91 |                   className={cn('line-clamp-2 h-16 text-lg', {
 92 |                     'pl-6': isSelectMode,
 93 |                   })}
 94 |                 >
 95 |                   {quiz.title}
 96 |                 </CardTitle>
 97 |               </div>
 98 | 
 99 |               {quiz.isCompleted && (
100 |                 <CheckCircle className="mt-1 h-5 w-5 flex-shrink-0 text-green-500" />
101 |               )}
102 |             </div>
103 |             <CardDescription>
104 |               {format(quiz.createdAt, 'MMM d, yyyy')}
105 |             </CardDescription>
106 |           </CardHeader>
107 |           <CardContent>
108 |             <div className="flex flex-col gap-2">
109 |               <div className="flex justify-between text-sm">
110 |                 <span>Progress</span>
111 |                 <span>
112 |                   {quiz.progressCount} / {quiz.totalQuestions} questions
113 |                 </span>
114 |               </div>
115 |               <Progress
116 |                 value={(quiz.progressCount / quiz.totalQuestions) * 100}
117 |                 className="h-2"
118 |               />
119 |             </div>
120 |           </CardContent>
121 |         </Card>
122 |       </Link>
123 |     </motion.div>
124 |   )
125 | }
126 | 
127 | export function QuizItemSkeleton() {
128 |   return (
129 |     <div className="block">
130 |       <Card className="h-full">
131 |         <CardHeader className="pb-2">
132 |           <div className="flex items-start justify-between">
133 |             <div className="h-16 w-full max-w-[90%]">
134 |               {/* Title skeleton - two lines */}
135 |               <div className="bg-muted h-5 w-full animate-pulse rounded-md"></div>
136 |               <div className="bg-muted mt-2 h-5 w-3/4 animate-pulse rounded-md"></div>
137 |             </div>
138 |             {/* Potential check icon skeleton */}
139 |             <div className="bg-muted mt-1 h-5 w-5 flex-shrink-0 animate-pulse rounded-full"></div>
140 |           </div>
141 |           {/* Date skeleton */}
142 |           <div className="bg-muted mt-2 h-4 w-24 animate-pulse rounded-md"></div>
143 |         </CardHeader>
144 |         <CardContent>
145 |           <div className="flex flex-col gap-2">
146 |             <div className="flex justify-between text-sm">
147 |               {/* Progress text skeleton */}
148 |               <div className="bg-muted h-4 w-16 animate-pulse rounded-md"></div>
149 |               {/* Questions count skeleton */}
150 |               <div className="bg-muted h-4 w-28 animate-pulse rounded-md"></div>
151 |             </div>
152 |             {/* Progress bar skeleton */}
153 |             <div className="bg-muted h-2 w-full animate-pulse rounded-full"></div>
154 |           </div>
155 |         </CardContent>
156 |       </Card>
157 |     </div>
158 |   )
159 | }
160 |

--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /**
  3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
  4 |  *
  5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  6 |  *
  7 |  * To regenerate, run `npx convex dev`.
  8 |  * @module
  9 |  */
 10 | 
 11 | import {
 12 |   ActionBuilder,
 13 |   HttpActionBuilder,
 14 |   MutationBuilder,
 15 |   QueryBuilder,
 16 |   GenericActionCtx,
 17 |   GenericMutationCtx,
 18 |   GenericQueryCtx,
 19 |   GenericDatabaseReader,
 20 |   GenericDatabaseWriter,
 21 | } from "convex/server";
 22 | import type { DataModel } from "./dataModel.js";
 23 | 
 24 | /**
 25 |  * Define a query in this Convex app's public API.
 26 |  *
 27 |  * This function will be allowed to read your Convex database and will be accessible from the client.
 28 |  *
 29 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 30 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 31 |  */
 32 | export declare const query: QueryBuilder<DataModel, "public">;
 33 | 
 34 | /**
 35 |  * Define a query that is only accessible from other Convex functions (but not from the client).
 36 |  *
 37 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 38 |  *
 39 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 40 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 41 |  */
 42 | export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 43 | 
 44 | /**
 45 |  * Define a mutation in this Convex app's public API.
 46 |  *
 47 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
 48 |  *
 49 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 50 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 51 |  */
 52 | export declare const mutation: MutationBuilder<DataModel, "public">;
 53 | 
 54 | /**
 55 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
 56 |  *
 57 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 58 |  *
 59 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 60 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 61 |  */
 62 | export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 63 | 
 64 | /**
 65 |  * Define an action in this Convex app's public API.
 66 |  *
 67 |  * An action is a function which can execute any JavaScript code, including non-deterministic
 68 |  * code and code with side-effects, like calling third-party services.
 69 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 70 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 71 |  *
 72 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 73 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 74 |  */
 75 | export declare const action: ActionBuilder<DataModel, "public">;
 76 | 
 77 | /**
 78 |  * Define an action that is only accessible from other Convex functions (but not from the client).
 79 |  *
 80 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 81 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 82 |  */
 83 | export declare const internalAction: ActionBuilder<DataModel, "internal">;
 84 | 
 85 | /**
 86 |  * Define an HTTP action.
 87 |  *
 88 |  * This function will be used to respond to HTTP requests received by a Convex
 89 |  * deployment if the requests matches the path and method where this action
 90 |  * is routed. Be sure to route your action in `convex/http.js`.
 91 |  *
 92 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 93 |  * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
 94 |  */
 95 | export declare const httpAction: HttpActionBuilder;
 96 | 
 97 | /**
 98 |  * A set of services for use within Convex query functions.
 99 |  *
100 |  * The query context is passed as the first argument to any Convex query
101 |  * function run on the server.
102 |  *
103 |  * This differs from the {@link MutationCtx} because all of the services are
104 |  * read-only.
105 |  */
106 | export type QueryCtx = GenericQueryCtx<DataModel>;
107 | 
108 | /**
109 |  * A set of services for use within Convex mutation functions.
110 |  *
111 |  * The mutation context is passed as the first argument to any Convex mutation
112 |  * function run on the server.
113 |  */
114 | export type MutationCtx = GenericMutationCtx<DataModel>;
115 | 
116 | /**
117 |  * A set of services for use within Convex action functions.
118 |  *
119 |  * The action context is passed as the first argument to any Convex action
120 |  * function run on the server.
121 |  */
122 | export type ActionCtx = GenericActionCtx<DataModel>;
123 | 
124 | /**
125 |  * An interface to read from the database within Convex query functions.
126 |  *
127 |  * The two entry points are {@link DatabaseReader.get}, which fetches a single
128 |  * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
129 |  * building a query.
130 |  */
131 | export type DatabaseReader = GenericDatabaseReader<DataModel>;
132 | 
133 | /**
134 |  * An interface to read from and write to the database within Convex mutation
135 |  * functions.
136 |  *
137 |  * Convex guarantees that all writes within a single mutation are
138 |  * executed atomically, so you never have to worry about partial writes leaving
139 |  * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
140 |  * for the guarantees Convex provides your functions.
141 |  */
142 | export type DatabaseWriter = GenericDatabaseWriter<DataModel>;
143 |

--------------------------------------------------------------------------------
/src/pages/quiz-results/index.tsx:
--------------------------------------------------------------------------------
  1 | import { QuizNotFound } from '@/components/quiz-not-found'
  2 | import { Button } from '@/components/ui/button'
  3 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
  4 | import { usePrefetchQuery } from '@/hooks/use-prefetch-query'
  5 | import { ROUTES } from '@/lib/constants'
  6 | import { api } from '@convex/_generated/api'
  7 | import { Id } from '@convex/_generated/dataModel'
  8 | import { useQuery } from 'convex/react'
  9 | import { ArrowRight } from 'lucide-react'
 10 | import ReactMarkdown from 'react-markdown'
 11 | import { Link, useParams } from 'react-router'
 12 | import { QuestionReview } from './components/question-review'
 13 | import { ResultsSkeleton } from './components/results-skeleton'
 14 | 
 15 | export function QuizResultsPage() {
 16 |   const { quizId } = useParams<{ quizId: string }>()
 17 | 
 18 |   const results = useQuery(api.quizzes.queries.getQuizResults, {
 19 |     quizId: quizId as Id<'quizzes'>,
 20 |   })
 21 | 
 22 |   const prefetchQuizHomeQuery = usePrefetchQuery(
 23 |     api.quizzes.queries.listQuizzesWithProgress
 24 |   )
 25 | 
 26 |   const handlePrefetch = () => {
 27 |     prefetchQuizHomeQuery({})
 28 |   }
 29 | 
 30 |   if (results === undefined) {
 31 |     return <ResultsSkeleton />
 32 |   }
 33 | 
 34 |   if (results === null) {
 35 |     return <QuizNotFound />
 36 |   }
 37 | 
 38 |   return (
 39 |     <div className="mx-auto flex max-w-7xl flex-col gap-8">
 40 |       <div className="flex flex-col gap-2">
 41 |         <h1 className="text-2xl font-bold">Quiz Results: {results.title}</h1>
 42 |         <p className="text-muted-foreground">
 43 |           You scored {results.correctCount} out of {results.questions.length}{' '}
 44 |           questions correctly.
 45 |         </p>
 46 |       </div>
 47 | 
 48 |       <Card>
 49 |         <CardHeader className="pb-2">
 50 |           <CardTitle>Your Score</CardTitle>
 51 |         </CardHeader>
 52 |         <CardContent>
 53 |           <div className="flex items-center justify-center py-8">
 54 |             <div className="relative h-48 w-48">
 55 |               <div className="absolute inset-0 flex items-center justify-center">
 56 |                 <span className="text-5xl font-bold">{results.score}%</span>
 57 |               </div>
 58 |               <svg className="h-full w-full" viewBox="0 0 100 100">
 59 |                 <circle
 60 |                   className="stroke-muted fill-none"
 61 |                   strokeWidth="7"
 62 |                   cx="50"
 63 |                   cy="50"
 64 |                   r="40"
 65 |                 />
 66 |                 <circle
 67 |                   className="stroke-primary fill-none"
 68 |                   strokeWidth="7"
 69 |                   strokeLinecap="round"
 70 |                   cx="50"
 71 |                   cy="50"
 72 |                   r="40"
 73 |                   strokeDasharray={`${results.score * 2.51} 251`}
 74 |                   strokeDashoffset="0"
 75 |                   transform="rotate(-90 50 50)"
 76 |                 />
 77 |               </svg>
 78 |             </div>
 79 |           </div>
 80 |         </CardContent>
 81 |       </Card>
 82 | 
 83 |       <Card className="gap-2">
 84 |         <CardHeader>
 85 |           <CardTitle className="text-2xl">Feedback</CardTitle>
 86 |         </CardHeader>
 87 |         <CardContent>
 88 |           <div>
 89 |             <ReactMarkdown
 90 |               components={{
 91 |                 h1: ({ ...props }) => (
 92 |                   <h1
 93 |                     className="text-primary mb-3 text-xl font-bold"
 94 |                     {...props}
 95 |                   />
 96 |                 ),
 97 |                 h2: ({ ...props }) => (
 98 |                   <h2
 99 |                     className="text-primary mt-4 mb-2 text-lg font-semibold"
100 |                     {...props}
101 |                   />
102 |                 ),
103 |                 h3: ({ ...props }) => (
104 |                   <h3
105 |                     className="text-md text-primary/90 mt-3 mb-2 font-medium"
106 |                     {...props}
107 |                   />
108 |                 ),
109 |                 p: ({ ...props }) => (
110 |                   <p className="mb-3 leading-relaxed" {...props} />
111 |                 ),
112 |                 ul: ({ ...props }) => (
113 |                   <ul className="mb-3 list-disc space-y-1 pl-5" {...props} />
114 |                 ),
115 |                 ol: ({ ...props }) => (
116 |                   <ol className="mb-3 list-decimal space-y-1 pl-5" {...props} />
117 |                 ),
118 |                 li: ({ ...props }) => <li className="mb-1" {...props} />,
119 |                 a: ({ ...props }) => (
120 |                   <a
121 |                     className="text-primary hover:text-primary/80 underline transition-colors"
122 |                     {...props}
123 |                   />
124 |                 ),
125 |                 blockquote: ({ ...props }) => (
126 |                   <blockquote
127 |                     className="border-primary/30 my-3 border-l-4 pl-4 italic"
128 |                     {...props}
129 |                   />
130 |                 ),
131 |                 strong: ({ ...props }) => (
132 |                   <strong className="font-bold" {...props} />
133 |                 ),
134 |                 em: ({ ...props }) => (
135 |                   <em className="text-primary/80 italic" {...props} />
136 |                 ),
137 |                 code: ({ ...props }) => (
138 |                   <code
139 |                     className="bg-muted rounded px-1.5 py-0.5 font-mono text-sm"
140 |                     {...props}
141 |                   />
142 |                 ),
143 |                 pre: ({ ...props }) => (
144 |                   <pre
145 |                     className="bg-muted mb-4 overflow-x-auto rounded-md p-3 font-mono text-sm"
146 |                     {...props}
147 |                   />
148 |                 ),
149 |               }}
150 |             >
151 |               {results.feedback}
152 |             </ReactMarkdown>
153 |           </div>
154 |         </CardContent>
155 |       </Card>
156 | 
157 |       <div className="flex flex-col gap-6">
158 |         <h2 className="text-xl font-semibold">Question Review</h2>
159 | 
160 |         {results.questions.map((question) => (
161 |           <QuestionReview key={question.id} question={question} />
162 |         ))}
163 |       </div>
164 | 
165 |       <div className="flex justify-center">
166 |         <Button asChild size="lg">
167 |           <Link
168 |             to={ROUTES.quizHome}
169 |             className="flex items-center gap-2"
170 |             onMouseEnter={handlePrefetch}
171 |           >
172 |             Create Another Quiz
173 |             <ArrowRight className="h-4 w-4" />
174 |           </Link>
175 |         </Button>
176 |       </div>
177 |     </div>
178 |   )
179 | }
180 |

--------------------------------------------------------------------------------
/src/pages/quiz-home/components/quiz-form.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import { Input } from '@/components/ui/input'
  3 | import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
  4 | import { Slider } from '@/components/ui/slider'
  5 | import { Textarea } from '@/components/ui/textarea'
  6 | import { usePrefetchQuery } from '@/hooks/use-prefetch-query'
  7 | import { ROUTES } from '@/lib/constants'
  8 | import { handlePromise, sleep } from '@/lib/utils'
  9 | import { getSkeletonOptionsPerQuestionKey } from '@/pages/quiz-detail/lib/utils'
 10 | import { api } from '@convex/_generated/api'
 11 | import { Id } from '@convex/_generated/dataModel'
 12 | import { useAction } from 'convex/react'
 13 | import { ConvexError } from 'convex/values'
 14 | import { ArrowRight, Loader2 } from 'lucide-react'
 15 | import { useActionState, useEffect, useId, useRef, useState } from 'react'
 16 | import { generatePath, useNavigate } from 'react-router'
 17 | import { toast } from 'sonner'
 18 | import { z } from 'zod'
 19 | import { CONTEXT_INPUT_KEY, NOTE_INPUT_KEY } from '../lib/constants'
 20 | 
 21 | const DELAY_TO_SHOW_DELAYED_GENERATION_TEXT = 2000
 22 | 
 23 | const DELAY_TO_ENSURE_PREFETCH_QUIZ_DETAIL_AFTER_GENERATION = 200
 24 | 
 25 | const formSchema = z.object({
 26 |   notes: z.string(),
 27 |   context: z.string().optional(),
 28 |   numQuestions: z.coerce.number(),
 29 |   optionsPerQuestion: z.coerce.number(),
 30 | })
 31 | 
 32 | const OPTIONS_PER_QUESTION = [
 33 |   { value: '2', label: '2 Options' },
 34 |   { value: '3', label: '3 Options' },
 35 |   { value: '4', label: '4 Options' },
 36 |   { value: '5', label: '5 Options' },
 37 |   { value: '6', label: '6 Options' },
 38 | ]
 39 | 
 40 | type FormState =
 41 |   | {
 42 |       status: 'error'
 43 |       errorMessage: string
 44 |     }
 45 |   | {
 46 |       status: 'success'
 47 |     }
 48 |   | {
 49 |       status: 'init'
 50 |     }
 51 | 
 52 | export function QuizForm() {
 53 |   const id = useId()
 54 |   const navigate = useNavigate()
 55 |   const [numberOfQuestions, setNumberOfQuestions] = useState(10)
 56 |   const [notesValue, setNotesValue] = useState(
 57 |     localStorage.getItem(NOTE_INPUT_KEY) || ''
 58 |   )
 59 | 
 60 |   // Purpose is to communicate to user it takes a while to generate the quiz
 61 |   const [shouldShowDelayedGenerationText, setShouldShowDelayedGenerationText] =
 62 |     useState(false)
 63 |   const timeoutToShowDelatedGenerationTextRef = useRef<NodeJS.Timeout | null>(
 64 |     null
 65 |   )
 66 | 
 67 |   const createQuiz = useAction(api.quizzes.actions.createQuiz)
 68 | 
 69 |   const prefetchGetQuizById = usePrefetchQuery(api.quizzes.queries.getQuizById)
 70 | 
 71 |   const [, formAction, isPending] = useActionState<FormState, FormData>(
 72 |     async (_, formData) => {
 73 |       const formObj = formSchema.parse(Object.fromEntries(formData))
 74 | 
 75 |       timeoutToShowDelatedGenerationTextRef.current = setTimeout(() => {
 76 |         setShouldShowDelayedGenerationText(true)
 77 |       }, DELAY_TO_SHOW_DELAYED_GENERATION_TEXT)
 78 | 
 79 |       const [quizId, error] = await handlePromise(createQuiz(formObj))
 80 | 
 81 |       if (error) {
 82 |         if (error instanceof ConvexError) {
 83 |           toast.error(error.message)
 84 |         } else {
 85 |           toast.error('An unknown error occurred')
 86 |         }
 87 |         return { status: 'error', errorMessage: error.message }
 88 |       }
 89 | 
 90 |       // Used to already know how many options per question to show in the quiz skeleton
 91 |       // Helps avoid layout shift on the quiz detail page
 92 |       localStorage.setItem(
 93 |         getSkeletonOptionsPerQuestionKey(quizId as string),
 94 |         formObj.optionsPerQuestion.toString()
 95 |       )
 96 | 
 97 |       localStorage.removeItem(NOTE_INPUT_KEY)
 98 |       localStorage.removeItem(CONTEXT_INPUT_KEY)
 99 | 
100 |       prefetchGetQuizById({ id: quizId as Id<'quizzes'> })
101 | 
102 |       // ensure prefetching connection happens first so it feels local first
103 |       // takes some more time of course, but the entire thing takes time anyways
104 |       await sleep(DELAY_TO_ENSURE_PREFETCH_QUIZ_DETAIL_AFTER_GENERATION)
105 | 
106 |       if (timeoutToShowDelatedGenerationTextRef.current) {
107 |         setShouldShowDelayedGenerationText(false)
108 |         clearTimeout(timeoutToShowDelatedGenerationTextRef.current)
109 |       }
110 | 
111 |       void navigate(generatePath(ROUTES.quizDetail, { quizId }))
112 |       return { status: 'success' }
113 |     },
114 |     { status: 'init' }
115 |   )
116 | 
117 |   useEffect(() => {
118 |     return () => {
119 |       if (timeoutToShowDelatedGenerationTextRef.current) {
120 |         clearTimeout(timeoutToShowDelatedGenerationTextRef.current)
121 |       }
122 |     }
123 |   }, [shouldShowDelayedGenerationText])
124 | 
125 |   const isGenerateButtonDisabled = isPending || notesValue.length === 0
126 | 
127 |   return (
128 |     <form className="flex flex-col gap-12" action={formAction}>
129 |       <div className="flex flex-col gap-2">
130 |         <label htmlFor="notes" className="text-sm font-medium">
131 |           Your Study Notes (Required)
132 |         </label>
133 |         <Textarea
134 |           id="notes"
135 |           placeholder="Paste your study notes here..."
136 |           name="notes"
137 |           className="min-h-[200px] resize-none"
138 |           required
139 |           value={notesValue}
140 |           onChange={(event) => {
141 |             setNotesValue(event.target.value)
142 |             localStorage.setItem(NOTE_INPUT_KEY, event.target.value)
143 |           }}
144 |           onKeyDown={(event) => {
145 |             // pressing cmd/ctrl + enter
146 |             if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
147 |               event.preventDefault()
148 |               // dispatch a submit event
149 |               event.currentTarget.form?.dispatchEvent(
150 |                 // bubbles so it can be caught by the form
151 |                 // cancelable so it can be cancelled - since our form calls event.preventDefault()
152 |                 new Event('submit', { bubbles: true, cancelable: true })
153 |               )
154 |             }
155 |           }}
156 |         />
157 |       </div>
158 | 
159 |       <div className="flex flex-col gap-2">
160 |         <label htmlFor="context" className="text-sm font-medium">
161 |           Additional Context (Optional)
162 |         </label>
163 |         <Input
164 |           id="context"
165 |           placeholder="E.g., Lecture name, book title, or specific topic"
166 |           name="context"
167 |           defaultValue={localStorage.getItem(CONTEXT_INPUT_KEY) || ''}
168 |           onChange={(event) => {
169 |             localStorage.setItem(CONTEXT_INPUT_KEY, event.target.value)
170 |           }}
171 |         />
172 |       </div>
173 | 
174 |       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
175 |         <div className="flex flex-col gap-2">
176 |           <label className="text-sm font-medium">
177 |             Number of Questions:{' '}
178 |             <span className="font-bold">{numberOfQuestions}</span>
179 |           </label>
180 |           <Slider
181 |             value={[numberOfQuestions]}
182 |             onValueChange={(value) => setNumberOfQuestions(value[0])}
183 |             min={5}
184 |             max={20}
185 |             step={1}
186 |             name="numQuestions"
187 |             className="mt-2"
188 |           />
189 |         </div>
190 | 
191 |         <div className="flex flex-col gap-2">
192 |           <legend className="text-sm font-medium">Options per Question</legend>
193 |           <RadioGroup
194 |             className="grid grid-cols-3 gap-2"
195 |             defaultValue="4"
196 |             name="optionsPerQuestion"
197 |           >
198 |             {OPTIONS_PER_QUESTION.map((item) => (
199 |               <label
200 |                 key={`${id}-${item.value}`}
201 |                 className="border-input has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/10 relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border px-2 py-3 text-center shadow-sm shadow-black/5 outline-offset-2 transition-colors"
202 |               >
203 |                 <RadioGroupItem
204 |                   id={`${id}-${item.value}`}
205 |                   value={item.value}
206 |                   className="sr-only after:absolute after:inset-0"
207 |                 />
208 |                 <p className="text-foreground text-sm leading-none font-medium">
209 |                   {item.label}
210 |                 </p>
211 |               </label>
212 |             ))}
213 |           </RadioGroup>
214 |         </div>
215 |       </div>
216 | 
217 |       <div className="relative mt-6 flex justify-center">
218 |         <Button
219 |           size="lg"
220 |           type="submit"
221 |           className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2"
222 |           disabled={isGenerateButtonDisabled}
223 |         >
224 |           Generate Quiz
225 |           {isPending ? (
226 |             <Loader2 className="ml-2 h-4 w-4 animate-spin" />
227 |           ) : (
228 |             <ArrowRight className="ml-2 h-4 w-4" />
229 |           )}
230 |         </Button>
231 |         {shouldShowDelayedGenerationText && (
232 |           <p className="text-muted-foreground absolute -bottom-7 text-sm">
233 |             This may take a while...
234 |           </p>
235 |         )}
236 |       </div>
237 |     </form>
238 |   )
239 | }
240 |

--------------------------------------------------------------------------------
/convex/quizzes/actions.ts:
--------------------------------------------------------------------------------
  1 | import { createOpenAI } from '@ai-sdk/openai'
  2 | import { generateObject, generateText } from 'ai'
  3 | import { ConvexError, v } from 'convex/values'
  4 | import { nanoid } from 'nanoid'
  5 | import { z } from 'zod'
  6 | import { api, internal } from '../_generated/api'
  7 | import { Doc, Id } from '../_generated/dataModel'
  8 | import { action, internalQuery } from '../_generated/server'
  9 | import { ALPHABET_MAP } from '../constants'
 10 | import { requireCurrentUser } from '../users'
 11 | import { handlePromise, quizAuthCheckFunc } from '../utils'
 12 | 
 13 | export const createQuiz = action({
 14 |   args: {
 15 |     notes: v.string(),
 16 |     context: v.optional(v.string()),
 17 |     numQuestions: v.number(),
 18 |     optionsPerQuestion: v.number(),
 19 |   },
 20 |   handler: async (ctx, args) => {
 21 |     const user = await requireCurrentUser(ctx)
 22 | 
 23 |     const [apiKey, error] = await handlePromise(
 24 |       ctx.runAction(api.key.getApiKey)
 25 |     )
 26 | 
 27 |     if (error) {
 28 |       throw new ConvexError('No API key found. Please create an API key.')
 29 |     }
 30 | 
 31 |     if (!user) {
 32 |       // Shouldn't happen otherwise user should be redirected
 33 |       throw new ConvexError('Unauthorized. Please login to create a quiz.')
 34 |     }
 35 | 
 36 |     if (!apiKey) {
 37 |       throw new ConvexError('No API key found. Please create an API key.')
 38 |     }
 39 | 
 40 |     const openai = createOpenAI({
 41 |       apiKey,
 42 |     })
 43 | 
 44 |     // Generate quiz with title and questions
 45 |     const { object } = await generateObject({
 46 |       model: openai('gpt-4-turbo'),
 47 |       schema: z.object({
 48 |         title: z
 49 |           .string()
 50 |           .describe(
 51 |             'A catchy, descriptive title for the quiz based on the notes. Do not use words like "Mastering" or "Exploring". Try to be creative.'
 52 |           ),
 53 |         questions: z
 54 |           .array(
 55 |             z.object({
 56 |               question: z
 57 |                 .string()
 58 |                 .describe('A question with a single correct answer'),
 59 |               options: z
 60 |                 .array(
 61 |                   z
 62 |                     .object({
 63 |                       text: z.string(),
 64 |                       isCorrect: z.boolean(),
 65 |                     })
 66 |                     .describe(
 67 |                       'An option with text and a boolean indicating if it is correct'
 68 |                     )
 69 |                 )
 70 |                 .describe('An array of options')
 71 |                 .length(args.optionsPerQuestion),
 72 |               explanation: z
 73 |                 .string()
 74 |                 .describe('Explanation of why the correct answer is correct'),
 75 |             })
 76 |           )
 77 |           .describe('An array of questions with options and explanations')
 78 |           .length(args.numQuestions),
 79 |       }),
 80 |       prompt: `Generate a quiz based on the following notes:\n\n${args.notes}\n\n${
 81 |         args.context ? `Additional context: ${args.context}\n\n` : ''
 82 |       }Create ${args.numQuestions} challenging questions with ${args.optionsPerQuestion} options each.
 83 |       Ensure exactly one option is correct for each question.
 84 |       Include a brief explanation for each correct answer.
 85 |       Also generate a descriptive title for this quiz.`,
 86 |     })
 87 | 
 88 |     // Add unique IDs to questions and options
 89 |     const questionsWithIds = object.questions.map((question) => ({
 90 |       ...question,
 91 |       id: nanoid(),
 92 |       options: question.options.map((option, optionIndex) => ({
 93 |         ...option,
 94 |         id: ALPHABET_MAP[optionIndex],
 95 |       })),
 96 |     }))
 97 | 
 98 |     const quizId: Id<'quizzes'> = await ctx.runMutation(
 99 |       internal.quizzes.mutations.storeQuiz,
100 |       {
101 |         userId: user._id,
102 |         title: object.title,
103 |         notes: args.notes,
104 |         context: args.context,
105 |         numQuestions: args.numQuestions,
106 |         optionsPerQuestion: args.optionsPerQuestion,
107 |         createdAt: Date.now(),
108 |         questions: questionsWithIds,
109 |         isCompleted: false,
110 |         progress: {
111 |           currentQuestionIndex: 0,
112 |           answers: [],
113 |           lastUpdated: Date.now(),
114 |         },
115 |       }
116 |     )
117 | 
118 |     return quizId
119 |   },
120 | })
121 | 
122 | type QuestionResult = {
123 |   question: string
124 |   selectedAnswer: string
125 |   correctAnswer: string
126 |   isCorrect: boolean
127 |   explanation: string
128 | }
129 | 
130 | const zodAnswer = z.object({
131 |   questionId: z.string(),
132 |   selectedOptionId: z.string(),
133 | })
134 | 
135 | export const quizAuthCheck = internalQuery({
136 |   args: { quizId: v.id('quizzes') },
137 |   handler: async (ctx, args) => {
138 |     return await quizAuthCheckFunc({ quizId: args.quizId, ctx })
139 |   },
140 | })
141 | 
142 | export const completeQuiz = action({
143 |   args: { quizId: v.id('quizzes'), selectedOptionId: v.string() },
144 |   handler: async (ctx, args) => {
145 |     const [apiKey, error] = await handlePromise(
146 |       ctx.runAction(api.key.getApiKey)
147 |     )
148 | 
149 |     // If no API key, do nothing to avoid ruining state of DB!
150 | 
151 |     if (error) {
152 |       throw new ConvexError('No API key found. Please create an API key.')
153 |     }
154 | 
155 |     if (!apiKey) {
156 |       throw new ConvexError('No API key found. Please create an API key.')
157 |     }
158 | 
159 |     const user = await requireCurrentUser(ctx)
160 | 
161 |     // If user is not found, throw an error
162 |     if (!user) {
163 |       throw new ConvexError('Unauthenticated. Please login to submit a quiz.')
164 |     }
165 | 
166 |     const quizForAuthCheck: Doc<'quizzes'> | null = await ctx.runQuery(
167 |       api.quizzes.queries.getQuizById,
168 |       {
169 |         id: args.quizId,
170 |       }
171 |     )
172 | 
173 |     // If quiz is not found, throw an error
174 |     if (!quizForAuthCheck) {
175 |       throw new ConvexError('Quiz not found')
176 |     }
177 | 
178 |     if (quizForAuthCheck.userId !== user._id) {
179 |       throw new ConvexError('Unauthorized. You have no access to this quiz.')
180 |     }
181 | 
182 |     // Make sure we add the new answer to the progress
183 |     await ctx.runMutation(api.quizzes.mutations.nextQuestion, {
184 |       quizId: args.quizId,
185 |       selectedOptionId: args.selectedOptionId,
186 |     })
187 | 
188 |     const quiz = await ctx.runQuery(api.quizzes.queries.getQuizById, {
189 |       id: args.quizId,
190 |     })
191 | 
192 |     if (!quiz) {
193 |       throw new ConvexError('Quiz not found')
194 |     }
195 | 
196 |     const answers = quiz.progress.answers || []
197 | 
198 |     // Calculate results
199 |     let correctCount = 0
200 |     const incorrectQuestionIdsMap: Record<string, boolean> = {}
201 | 
202 |     const questionResults: Array<QuestionResult> = []
203 | 
204 |     for (const answer of answers) {
205 |       const question = quiz.questions.find(
206 |         (question) => question.id === answer.questionId
207 |       )
208 | 
209 |       if (!question) {
210 |         throw new ConvexError(
211 |           'A question was not found in the quiz. Something went wrong.'
212 |         )
213 |       }
214 | 
215 |       const selectedOption = question.options.find(
216 |         (option) => option.id === answer.selectedOptionId
217 |       )
218 | 
219 |       if (!selectedOption) {
220 |         throw new ConvexError(
221 |           'An option was not found in the question. Something went wrong.'
222 |         )
223 |       }
224 | 
225 |       const correctOption = question.options.find((option) => option.isCorrect)
226 | 
227 |       if (selectedOption.isCorrect) {
228 |         correctCount++
229 |       } else {
230 |         incorrectQuestionIdsMap[question.id] = true
231 |       }
232 | 
233 |       questionResults.push({
234 |         question: question.question,
235 |         selectedAnswer: selectedOption.text,
236 |         isCorrect: selectedOption.isCorrect,
237 |         correctAnswer: correctOption?.text || '',
238 |         explanation: question.explanation,
239 |       })
240 |     }
241 | 
242 |     const score = Math.round((correctCount / quiz.questions.length) * 100)
243 | 
244 |     const openai = createOpenAI({
245 |       apiKey,
246 |     })
247 | 
248 |     // Generate feedback
249 |     const { text } = await generateText({
250 |       model: openai('gpt-4-turbo'),
251 |       prompt: `The user took a quiz titled "${quiz.title}" based on these notes:
252 | 
253 |       ${quiz.notes}
254 | 
255 |       ${quiz.context ? `Additional context: ${quiz.context}` : ''}
256 | 
257 |       They scored ${score}% (${correctCount}/${quiz.questions.length} correct).
258 | 
259 |       Here's how they performed on each question:
260 |       ${questionResults
261 |         .map(
262 |           (r) =>
263 |             `Question: ${r.question}
264 |          Their answer: ${r.selectedAnswer}
265 |          Correct answer: ${r.correctAnswer}
266 |          ${r.isCorrect ? '✓ Correct' : '✗ Incorrect'}
267 |          Explanation: ${r.explanation}`
268 |         )
269 |         .join('\n\n')}
270 | 
271 |       Please provide:
272 |       1. A concise analysis of their strengths (what concepts they understand well)
273 |       2. Specific concepts they need to review further
274 |       3. 2-3 targeted recommendations for improving their understanding
275 |       4. A brief, motivational conclusion
276 |       5. Make sure to talk TO the user in a "you" tone, not "the user" or "the quiz taker".
277 |       6. Use a simple langauge. It should be easy to read and slightly causal. Don't use the word "crucial" and try to not repeat same words.
278 | 
279 |       Format your response in markdown with clear headings.`,
280 |     })
281 | 
282 |     // Store results
283 |     const quizResultId: Id<'quizResults'> = await ctx.runMutation(
284 |       internal.quizzes.mutations.storeQuizResult,
285 |       {
286 |         quizId: args.quizId,
287 |         userId: user._id,
288 |         completedAt: Date.now(),
289 |         score,
290 |         correctCount,
291 |         answers: zodAnswer.array().parse(answers),
292 |         incorrectQuestionIdsMap,
293 |         feedback: text,
294 |       }
295 |     )
296 | 
297 |     await ctx.runMutation(internal.quizzes.mutations.updateQuiz, {
298 |       id: args.quizId,
299 |       isCompleted: true,
300 |     })
301 | 
302 |     return quizResultId
303 |   },
304 | })
305 |

--------------------------------------------------------------------------------
/src/pages/quiz-detail/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from '@/components/ui/button'
  2 | import {
  3 |   Card,
  4 |   CardContent,
  5 |   CardFooter,
  6 |   CardHeader,
  7 |   CardTitle,
  8 | } from '@/components/ui/card'
  9 | import { Progress } from '@/components/ui/progress'
 10 | import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 11 | import { usePrefetchQuery } from '@/hooks/use-prefetch-query'
 12 | import { ROUTES } from '@/lib/constants'
 13 | import { cn, handlePromise } from '@/lib/utils'
 14 | import { api } from '@convex/_generated/api'
 15 | import { Doc, Id } from '@convex/_generated/dataModel'
 16 | import { useAction, useMutation, useQuery } from 'convex/react'
 17 | import { ConvexError } from 'convex/values'
 18 | import { AnimatePresence, motion, MotionConfig } from 'motion/react'
 19 | import { useActionState, useEffect, useState } from 'react'
 20 | import ReactConfetti from 'react-confetti'
 21 | import { flushSync } from 'react-dom'
 22 | import { generatePath, Link, useNavigate, useParams } from 'react-router'
 23 | import useMeasure from 'react-use-measure'
 24 | import { toast } from 'sonner'
 25 | import { z } from 'zod'
 26 | import { QuizNotFound } from '../../components/quiz-not-found'
 27 | import { QuizLoadingPlaceholder } from './components/quiz-skeleton'
 28 | 
 29 | type Direction = 'forwards' | 'backwards'
 30 | 
 31 | // We use 110% to make it really look like it's either coming in or going out
 32 | const formVariants = {
 33 |   initial: (direction: Direction) => ({
 34 |     opacity: 0,
 35 |     // How should it come in?
 36 |     // If we're moving forwards, it should come in from the right
 37 |     // If we're moving backwards, it should come in from the left
 38 |     x: direction === 'forwards' ? '110%' : '-110%',
 39 |   }),
 40 |   animate: {
 41 |     opacity: 1,
 42 |     x: 0,
 43 |   },
 44 |   exit: (direction: Direction) => ({
 45 |     opacity: 0,
 46 |     // When exiting, where are we going?
 47 |     // If we're going forwards, the current step should move backwards and be hidden
 48 |     // If we're going backwards, it means the current step should animate out through the right side
 49 |     x: direction === 'forwards' ? '-110%' : '110%',
 50 |   }),
 51 | }
 52 | 
 53 | const formSchema = z.object({
 54 |   selectedOption: z.string(),
 55 | })
 56 | 
 57 | type FormState =
 58 |   | {
 59 |       status: 'error'
 60 |       errorMessage: string
 61 |     }
 62 |   | {
 63 |       status: 'success'
 64 |     }
 65 |   | {
 66 |       status: 'init'
 67 |     }
 68 | 
 69 | export function QuizDetailPage() {
 70 |   const { quizId } = useParams<{ quizId: string }>()
 71 |   const navigate = useNavigate()
 72 |   const user = useQuery(api.users.getCurrentUser)
 73 | 
 74 |   const quiz = useQuery(api.quizzes.queries.getQuizById, {
 75 |     id: quizId as Id<'quizzes'>,
 76 |   })
 77 | 
 78 |   const [ref, bounds] = useMeasure()
 79 | 
 80 |   const nextQuestion = useMutation(
 81 |     api.quizzes.mutations.nextQuestion
 82 |   ).withOptimisticUpdate((localStore, args) => {
 83 |     const { quizId, selectedOptionId } = args
 84 | 
 85 |     // Get the current quiz data from localStore
 86 |     const quiz = localStore.getQuery(api.quizzes.queries.getQuizById, {
 87 |       id: quizId,
 88 |     })
 89 | 
 90 |     if (!quiz) return
 91 | 
 92 |     // Only proceed if we have the quiz data
 93 |     const currentIndex = quiz.progress?.currentQuestionIndex || 0
 94 |     const currentQuestion = quiz.questions[currentIndex]
 95 | 
 96 |     // Math.min is just safety net (same as in the mutation)
 97 |     const newIndex = Math.min(currentIndex + 1, quiz.questions.length - 1)
 98 | 
 99 |     // Create new answer object
100 |     const newAnswer = {
101 |       questionId: currentQuestion.id,
102 |       selectedOptionId: selectedOptionId,
103 |     }
104 | 
105 |     // Check if an answer for this question already exists
106 |     const existingAnswerIndex = quiz.progress.answers.findIndex(
107 |       (answer) => answer.questionId === currentQuestion.id
108 |     )
109 | 
110 |     let updatedAnswers
111 |     const hasExistingAnswer = existingAnswerIndex !== -1
112 |     if (hasExistingAnswer) {
113 |       // Update existing answer
114 |       updatedAnswers = [...quiz.progress.answers]
115 |       updatedAnswers[existingAnswerIndex] = newAnswer
116 |     } else {
117 |       // Add new answer
118 |       updatedAnswers = [...quiz.progress.answers, newAnswer]
119 |     }
120 | 
121 |     // Create new progress object (don't mutate existing objects)
122 |     const newProgress = {
123 |       ...quiz.progress,
124 |       currentQuestionIndex: newIndex,
125 |       lastUpdated: Date.now(),
126 |       answers: updatedAnswers,
127 |     }
128 | 
129 |     // Create updated quiz object
130 |     const updatedQuiz: Doc<'quizzes'> = {
131 |       ...quiz,
132 |       progress: newProgress,
133 |     }
134 | 
135 |     console.log('setting updated quiz', updatedQuiz)
136 | 
137 |     // Update the query result in localStore
138 |     localStore.setQuery(
139 |       api.quizzes.queries.getQuizById,
140 |       { id: quizId },
141 |       updatedQuiz
142 |     )
143 |   })
144 | 
145 |   const previousQuestion = useMutation(
146 |     api.quizzes.mutations.previousQuestion
147 |   ).withOptimisticUpdate((localStore, args) => {
148 |     const { quizId } = args
149 | 
150 |     const quiz = localStore.getQuery(api.quizzes.queries.getQuizById, {
151 |       id: quizId,
152 |     })
153 | 
154 |     if (!quiz) return
155 | 
156 |     const currentIndex = quiz.progress?.currentQuestionIndex || 0
157 | 
158 |     const newIndex = Math.max(currentIndex - 1, 0)
159 | 
160 |     const newProgress = {
161 |       ...quiz.progress,
162 |       currentQuestionIndex: newIndex,
163 |     }
164 | 
165 |     const updatedQuiz: Doc<'quizzes'> = {
166 |       ...quiz,
167 |       progress: newProgress,
168 |     }
169 | 
170 |     localStore.setQuery(
171 |       api.quizzes.queries.getQuizById,
172 |       { id: quizId },
173 |       updatedQuiz
174 |     )
175 |   })
176 | 
177 |   const completeQuiz = useAction(api.quizzes.actions.completeQuiz)
178 | 
179 |   const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null)
180 |   const [direction, setDirection] = useState<Direction>('forwards')
181 | 
182 |   // complete quiz, we check before actually submitting
183 |   const [, formAction, isCompletingQuiz] = useActionState<FormState, FormData>(
184 |     async (_, formData) => {
185 |       const { selectedOption: selectedOptionId } = formSchema.parse(
186 |         Object.fromEntries(formData)
187 |       )
188 | 
189 |       if (!quiz) {
190 |         throw new Error('Quiz not found')
191 |       }
192 | 
193 |       const [, error] = await handlePromise(
194 |         completeQuiz({
195 |           quizId: quiz._id,
196 |           selectedOptionId,
197 |         })
198 |       )
199 | 
200 |       if (error) {
201 |         if (error instanceof ConvexError) {
202 |           toast.error(error.message)
203 |           return { status: 'error', errorMessage: error.message }
204 |         }
205 | 
206 |         toast.error('An unknown error occurred')
207 |         return { status: 'error', errorMessage: 'An unknown error occurred' }
208 |       }
209 | 
210 |       setSelectedOptionId(null)
211 |       return { status: 'success' }
212 |     },
213 |     { status: 'init' }
214 |   )
215 | 
216 |   const handlePreviousQuestion = async () => {
217 |     if (!quiz) {
218 |       throw new Error('Quiz not found')
219 |     }
220 | 
221 |     setDirection('backwards')
222 | 
223 |     const [, error] = await handlePromise(
224 |       previousQuestion({
225 |         quizId: quiz._id,
226 |       })
227 |     )
228 | 
229 |     if (error) {
230 |       if (error instanceof ConvexError) {
231 |         toast.error(error.message)
232 |         return
233 |       }
234 | 
235 |       toast.error('An unknown error occurred')
236 |       return
237 |     }
238 |   }
239 | 
240 |   const handleNextQuestion = async () => {
241 |     if (!quiz) {
242 |       throw new Error('Quiz not found')
243 |     }
244 | 
245 |     // mainly about setting selected option id to null before optimistically moving forward
246 |     flushSync(() => {
247 |       setDirection('forwards')
248 |       setSelectedOptionId(null)
249 |     })
250 | 
251 |     const [, error] = await handlePromise(
252 |       nextQuestion({
253 |         quizId: quiz._id,
254 |         selectedOptionId: selectedOptionId!,
255 |       })
256 |     )
257 | 
258 |     if (error) {
259 |       if (error instanceof ConvexError) {
260 |         toast.error(error.message)
261 |         return
262 |       }
263 | 
264 |       toast.error('An unknown error occurred')
265 |       return
266 |     }
267 |   }
268 | 
269 |   // check if user is authorized to work on this quiz
270 |   useEffect(() => {
271 |     if (user && quiz && quiz.userId !== user._id) {
272 |       toast.error('Unauthorized to work on this quiz.')
273 |       void navigate(generatePath(ROUTES.quizHome))
274 |     }
275 |   }, [navigate, quiz, user])
276 | 
277 |   // We always want this to run when question changes
278 |   useEffect(() => {
279 |     // If user went backwards - we wanna check if they've already answered the question
280 |     if (quiz) {
281 |       const currentQuestion = quiz.questions[quiz.progress.currentQuestionIndex]
282 |       const existingAnswer = quiz.progress.answers.find(
283 |         (answer) => answer.questionId === currentQuestion.id
284 |       )
285 | 
286 |       if (!existingAnswer || !existingAnswer.selectedOptionId) return
287 | 
288 |       setSelectedOptionId(existingAnswer.selectedOptionId)
289 |     }
290 |     // eslint-disable-next-line react-hooks/exhaustive-deps
291 |   }, [quiz?.progress.currentQuestionIndex])
292 | 
293 |   const prefetchResultsQuery = usePrefetchQuery(
294 |     api.quizzes.queries.getQuizResults
295 |   )
296 | 
297 |   useEffect(() => {
298 |     if (quiz && quiz.isCompleted) {
299 |       prefetchResultsQuery({ quizId: quiz._id })
300 |     }
301 |   }, [prefetchResultsQuery, quiz])
302 | 
303 |   // reset selected option id when quiz changes
304 |   useEffect(() => {
305 |     if (quiz) {
306 |       setSelectedOptionId(null)
307 |     }
308 |     // eslint-disable-next-line react-hooks/exhaustive-deps
309 |   }, [quiz?._id])
310 | 
311 |   if (quiz === undefined) {
312 |     return <QuizLoadingPlaceholder quizId={quizId!} />
313 |   }
314 | 
315 |   if (quiz === null) {
316 |     return <QuizNotFound />
317 |   }
318 | 
319 |   const currentIndex = quiz.progress.currentQuestionIndex || 0
320 |   const currentQuestion = quiz.questions[currentIndex]
321 | 
322 |   const answeredQuestionsCount = quiz.progress.answers.length
323 |   const progress = (answeredQuestionsCount / quiz.questions.length) * 100
324 |   const isLastQuestion = currentIndex === quiz.questions.length - 1
325 |   const isFirstQuestion = currentIndex === 0
326 | 
327 |   const isPreviousButtonDisabled = Boolean(
328 |     isFirstQuestion || quiz.isCompleted || isCompletingQuiz
329 |   )
330 |   const isNextButtonDisabled = Boolean(
331 |     selectedOptionId === null || isCompletingQuiz || quiz.isCompleted
332 |   )
333 | 
334 |   return (
335 |     <div className="mx-auto max-w-3xl">
336 |       {quiz.isCompleted && (
337 |         <ReactConfetti
338 |           width={window.innerWidth}
339 |           height={window.innerHeight}
340 |           numberOfPieces={250}
341 |           gravity={0.4}
342 |         />
343 |       )}
344 | 
345 |       <div className="mb-8">
346 |         <h1 className="mb-2 text-2xl font-bold">{quiz.title}</h1>
347 |         <div className="flex items-center gap-4">
348 |           <Progress value={progress} className="h-2 flex-1" />
349 |           <span className="text-sm font-medium">
350 |             {answeredQuestionsCount} of {quiz.questions.length}
351 |           </span>
352 |         </div>
353 |       </div>
354 | 
355 |       <MotionConfig transition={{ type: 'spring', bounce: 0, duration: 0.3 }}>
356 |         <motion.div
357 |           animate={{ height: bounds.height }}
358 |           className="relative"
359 |           style={{ width: '100%' }}
360 |         >
361 |           <form action={formAction} ref={ref}>
362 |             <Card className="relative overflow-hidden">
363 |               <span className="absolute top-4 right-4 z-10">
364 |                 {currentIndex + 1}
365 |               </span>
366 |               <AnimatePresence
367 |                 initial={false}
368 |                 mode="popLayout"
369 |                 custom={direction}
370 |               >
371 |                 <motion.div
372 |                   key={currentQuestion.id}
373 |                   variants={formVariants}
374 |                   initial="initial"
375 |                   animate="animate"
376 |                   exit="exit"
377 |                   custom={direction}
378 |                   className="bg-background flex flex-col gap-6"
379 |                   transition={{
380 |                     type: 'spring',
381 |                     damping: 28,
382 |                     stiffness: 250,
383 |                   }}
384 |                 >
385 |                   <CardHeader>
386 |                     <CardTitle className="text-xl">
387 |                       {currentQuestion.question}
388 |                     </CardTitle>
389 |                   </CardHeader>
390 | 
391 |                   <CardContent>
392 |                     <RadioGroup
393 |                       value={selectedOptionId || ''}
394 |                       onValueChange={(value) => setSelectedOptionId(value)}
395 |                       className="flex flex-col gap-4"
396 |                       name="selectedOption"
397 |                     >
398 |                       {currentQuestion.options.map((option) => (
399 |                         <label
400 |                           key={option.id}
401 |                           className={cn(
402 |                             'cursor-pointer rounded-md border p-4 transition-colors',
403 |                             {
404 |                               'border-primary bg-primary/5':
405 |                                 selectedOptionId === option.id,
406 |                               'hover:bg-muted': selectedOptionId !== option.id,
407 |                             }
408 |                           )}
409 |                         >
410 |                           <div className="flex items-start gap-3">
411 |                             <div
412 |                               className={cn(
413 |                                 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full border',
414 |                                 {
415 |                                   'border-primary bg-primary text-primary-foreground':
416 |                                     selectedOptionId === option.id,
417 |                                   'border-muted-foreground':
418 |                                     selectedOptionId !== option.id,
419 |                                 }
420 |                               )}
421 |                             >
422 |                               {option.id.toUpperCase()}
423 |                             </div>
424 |                             <div className="text-sm">{option.text}</div>
425 |                             <RadioGroupItem
426 |                               value={option.id}
427 |                               className="sr-only after:absolute after:inset-0"
428 |                             />
429 |                           </div>
430 |                         </label>
431 |                       ))}
432 |                     </RadioGroup>
433 |                   </CardContent>
434 |                 </motion.div>
435 |               </AnimatePresence>
436 | 
437 |               <motion.div layout>
438 |                 <CardFooter className="flex justify-between">
439 |                   <Button
440 |                     disabled={isPreviousButtonDisabled}
441 |                     variant="outline"
442 |                     type="button"
443 |                     onClick={handlePreviousQuestion}
444 |                   >
445 |                     Previous
446 |                   </Button>
447 |                   <Button
448 |                     disabled={isNextButtonDisabled}
449 |                     // Only properly submit if last question
450 |                     // Otherwise move forward with optimistic update
451 |                     type={isLastQuestion ? 'submit' : 'button'}
452 |                     onClick={isLastQuestion ? undefined : handleNextQuestion}
453 |                     isLoading={isCompletingQuiz}
454 |                   >
455 |                     {isLastQuestion ? 'Finish Quiz' : 'Next'}
456 |                   </Button>
457 |                 </CardFooter>
458 |               </motion.div>
459 |             </Card>
460 |           </form>
461 |         </motion.div>
462 |       </MotionConfig>
463 | 
464 |       {quiz.isCompleted && (
465 |         <div className="mt-10 flex justify-center">
466 |           <Button size="lg" asChild>
467 |             <Link
468 |               to={generatePath(ROUTES.quizDetailResults, {
469 |                 quizId: quizId!,
470 |               })}
471 |             >
472 |               View Results
473 |             </Link>
474 |           </Button>
475 |         </div>
476 |       )}
477 |     </div>
478 |   )
479 | }
480 |

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