Quizgrad

A quiz app where you can play multiple types of quiz and compete with other players

Have a look at the live demo of Quizgrad.

Demo Of Quizgrad

Untitled.mp4

Features

• User Can compete with other players.
• After every win of quiz user will be awarded with 10+ streak which can increase the booster level once it reach to the 100 streak.
• User can see the histories of quizess which he had attempted earlier.
• User can login and logout.
• Once user reach to the certain levels he will be awarded with some badges of quizgrad.

Run Locally

Clone the project

  git clone https://github.com/mehulsatardekar/Quizgrad.git

Go to the project directory

  cd Quizgrad

Install dependencies

  npm install

Start the server

  npm run dev

Note

This application uses Vite Environment.

  npm run dev

After successfull installation you will need to add .env file and supabase keys to run this app

Add .env file to the root folder
VITE_SUPABASE_URL= your Supabase url
VITE_SUPABASE_ANON_KEY= your Supabase anon key

How to initialize & add keys to the app in supabase

Tech Stack

• Client: React-18, React RouterV6, Typescript, Formik Library (Client side Form validation), Framer UI
• Backend-(DB): Supabase (postgres-sql)
• Cloud & Infra: Cloudinary & Vercel for CI-CD Development.

Database Schema

Optimization

• This app is build on vite environment which is 10,100x faster than webpack,parcle and roollup. Why Vite is because The HMR (Hot module Replacement) is really faster as compare to other tools and update on Vites are blazingly fast whenever you make changes it quickly updates and it has by default configured tree-shaking, lazy-loading and common chunk splitting (for better caching).

[Check why vite is recommended not a create-react-app] (https://vitejs.dev/guide/why.html#the-problems)

• I have used Indexs for quick data retrival from database.