🎯 Quiz App

An online interactive quiz platform to test users’ knowledge across various categories. Built with React.js on the frontend and Spring Boot on the backend, the app provides both free and premium experiences with secure authentication, smooth animations, and integrated payments.

---

🚀 Project Overview

• ✅ Users can sign up with email, username, and password (phone number optional) or Google login.
• ✅ Only logged-in users can participate in quizzes.
• ✅ Normal users can attempt basic category quizzes.
• ✅ Premium users unlock access to all quiz categories (via Razorpay payment).
• ✅ Scorecard is shown after each quiz with an option to return to the homepage.

---

🛠️ Tech Stack

Frontend

• ⚛️ React.js – UI framework
• 🔑 Google Auth – social login
• 🎨 Bootstrap – styling
• 🎞 Framer Motion – animations
• 💳 React Razorpay – payment integration

Backend

• ☕ Spring Boot – REST API backend
• 🔐 Spring Security & JWT – authentication & authorization
• 🗄 MySQL – database
• 💰 Razorpay – premium subscription/payment

---

📸 Features

• 🔑 Secure login & registration (email or Google)
• 📝 Interactive quizzes with multiple categories
• 🆓 Free users: limited categories
• ⭐ Premium users: access to all categories
• 📊 Instant results & scorecard
• 💳 Razorpay integration for premium upgrade

---

---

⚡ Getting Started

1️⃣ Clone the repository

git clone https://github.com/your-username/quiz-app.git
cd quiz-app

Setup Backend (Spring Boot)

• Import backend/ into your IDE (IntelliJ / Eclipse).
• Configure application.properties with your MySQL and Razorpay credentials.
• Run the Spring Boot application.

Setup Frontend (React)

cd frontend
npm install
npm start

🔐 Authentication

Overview

• Uses Spring Security + JWT (JSON Web Tokens) for authentication.
• Frontend communicates with backend using JWT tokens stored securely.
• Supports Google OAuth login for quick access.

Flow

• User signs up or logs in.
• Backend generates a JWT token.
• Token is stored on the frontend (localStorage/sessionStorage).
• All protected routes & APIs require a valid token.

💳 Payment Integration

Overview

• Integrated with Razorpay for handling premium subscriptions.
• Users can upgrade their account to Premium.

Flow

• User clicks Upgrade to Premium.
• Razorpay checkout window opens.
• On successful payment, backend verifies transaction.
• User role is updated to Premium in database.

📊 Scorecard

Features

• Displays user’s total score after quiz submission.
• Shows correct vs wrong answers.
• Option to return to homepage after completion.

🔮 Future Improvements

-📱 Mobile app version (React Native / Flutter).

• 🌐 Add support for more OAuth providers (GitHub, Facebook, etc.).
• 📊 Detailed quiz analytics & leaderboard.
• 🎯 Timer-based quizzes and difficulty levels.
• 🧠 AI-generated quizzes based on user performance.
• 🏆 Gamification features (badges, streaks, rewards).
• 🌍 Multi-language support.
• ☁️ Docker & cloud deployment (AWS/GCP/Azure).