Skip to content

Latest commit

 

History

History
152 lines (120 loc) · 5.54 KB

README.md

File metadata and controls

152 lines (120 loc) · 5.54 KB
Raw

QuizifyAI

QuizifyAI — a quiz web application built using the MERN stack (MongoDB, Express, React, Node.js) with advanced JWT authentication and AI-generated quizzes through the Google Gemini API. This application allows users to take quizzes on various topics, generate quizzes using AI, and offers a secure and user-friendly experience.

Features

  • Advanced JWT Authentication: Secure user authentication with features such as email verification and password recovery.
  • Take Quizzes on Various Topics: Explore a wide range of topics and test your knowledge.
  • AI-Generated Quizzes: Generate quizzes on any topic using the Google Gemini API for an engaging learning experience.
  • Beginner Friendly: Easy to use interface suitable for all users, regardless of technical expertise.
  • Fully Secure: All user data is handled securely with best practices in mind.

Functionality

  • Email Verification: Confirmation emails sent upon signup.
  • Error Handling: Informative messages for various scenarios.
  • Forgot Password & Reset: Password recovery via email.
  • Signup, Login, Logout Endpoints: RESTful API for user management.
  • Check Auth Endpoint: Verifies user authentication.
  • Sending Verification Emails: Automated verification process.

Frontend Setup

  • User-Friendly UI: Responsive signup and login pages.
  • Signup Logic: User registration with validation.
  • Email Verification Integration: Activation link sent to users.
  • Protected Routes: Access restriction for authenticated users.
  • Secure Login: JWT-based session management.
  • Forgot Password Handling: UI for password reset requests.

Backend Setup

  • MERN Stack: Node.js and Express for API handling.
  • MongoDB: Secure storage for user and quiz data.
  • JWT Authentication: Secure access to protected routes.
  • RESTful API Development: Smooth communication between frontend and backend.
  • Google Gemini API Integration: AI-generated quizzes on user-defined topics.

Technologies Used

  • Frontend: React, Tailwind CSS
  • Backend: Node.js, Express
  • Database: MongoDB
  • Authentication: JWT (JSON Web Tokens)
  • AI Integration: Google Gemini API
  • Zustand (State Management)

NPM Package Details

  • cookie-parser: Middleware to parse cookies
  • jsonwebtoken: For generating and verifying JSON Web Tokens (JWTs)
  • dotenv: For managing environment variables
  • express: A web framework for Node.js
  • bcryptjs: For hashing passwords
  • mongoose: An Object Data Modeling (ODM) library for MongoDB
  • nodemon: Automatically restarts the server when file changes are detected
  • mailtrap: For testing email sending (if using Mailtrap)
  • crypto: Built-in package for cryptographic functions
    • randomInt(10, 20)
    • randomBytes(20).toString('hex')

JWT Methods

  1. jwt.sign(payload, secretOrPrivateKey, options)

    • Purpose: Create a new JWT.
    • Parameters:
      • payload: Data to include in the token (e.g., user ID, roles).
      • secretOrPrivateKey: Secret key to sign the token.
      • options: Optional settings (e.g., expiration time).
    • Usage: Generate a token to send to clients or store for later use.
    • Example: 
      const token = jwt.sign({ userId: '1234' }, 'your-secret-key', { expiresIn: '1h' });

  2. jwt.verify(token, secretOrPublicKey, options, callback)

    • Purpose: Check if a JWT is valid and decode it.
    • Parameters:
      • token: The JWT to verify.
      • secretOrPublicKey: Key used to sign the token for verification.
      • options: Optional settings (e.g., expected audience).
      • callback: Function called with verification result or error.
    • Usage: Verify token validity and extract payload if valid.
    • Example: 
      jwt.verify(token, 'your-secret-key', (err, decoded) => {
  if (err) {
    console.error('Invalid token');
  } else {
    console.log('Decoded payload:', decoded);
  }
});

  3. jwt.decode(token, options)

    • Purpose: Decode a JWT without verifying its signature.
    • Parameters:
      • token: The JWT to decode.
      • options: Optional settings (e.g., whether to get header or payload).
    • Usage: Extract and view token payload without validation. Useful for debugging.
    • Example: 
      const decoded = jwt.decode(token);
console.log('Decoded payload:', decoded);

Zustand Store Usage

Zustand is a small, fast, and scalable state management solution for React applications. It provides a simple API for managing global state with minimal boilerplate.

Key Points

Creating a Store

To create a global state store, use the create function from Zustand:

import create from 'zustand';

const useCountStore = create((set) => ({
  count: 0,
  increaseCount: () => set((state) => ({ count: state.count + 1 })),
}));

Reading a state

const count = useCountStore((state) => state.count);

Updating a state

Update the state using setState

useCountStore.setState({ count: 0 });

Use "setState" when you want to update the state - Example -

useAuthStore.setState({ forgotPassPopup: true });

Use the "selector function" when you want to read state values - Example -

const isVisible = useAuthStore((state) => state.forgotPassPopup);
QuizifyAI