diff --git a/PROJECT_STRUCTURE.md b/PROJECT_STRUCTURE.md new file mode 100644 index 0000000..71a3e93 --- /dev/null +++ b/PROJECT_STRUCTURE.md @@ -0,0 +1,146 @@ +# QuizBlock - Web3 & Tech Quiz Application - Project Structure + +## ๐ Project Overview +This is a Next.js-based Web3 and tech quiz application with blockchain integration, featuring both regular practice quizzes and live event quizzes with crypto prizes. + +## ๐๏ธ File Structure & Organization + +### ๐ Core Components +``` +components/ +โโโ quiz/ +โ โโโ EventQuizCard.tsx # Social media-style event quiz cards +โ โโโ QuizCard.tsx # Regular quiz cards +โ โโโ HomeCard.tsx # Category selection cards +โโโ ui/ # Reusable UI components (buttons, cards, etc.) +โโโ Header.tsx # Application header +``` + +### ๐ Pages & Routing +``` +app/ +โโโ page.tsx # Home page - category selection +โโโ categories/ +โ โโโ [categoryId]/ +โ โโโ page.tsx # Category page - shows both event & practice quizzes +โโโ quiz/ +โ โโโ page.tsx # Quiz taking interface +โ โโโ setup/ +โ โโโ [quizId]/ +โ โโโ page.tsx # Quiz setup page +โโโ results/ + โโโ page.tsx # Quiz results page +``` + +### ๐ Data & Types +``` +data/ +โโโ eventQuizzes.ts # Event quiz data with helper functions +โโโ csQuestions.js # Computer Science questions +โโโ physicsQuestions.js # Physics questions +โโโ [other subject files] # Other subject question banks + +types/ +โโโ types.ts # TypeScript interfaces and types +``` + +### ๐ Context & State +``` +context/ +โโโ globalContext.js # Global application state +โโโ useCategories.js # Category management +โโโ Web3Context.js # Web3 wallet integration +``` + +## ๐ฏ Key Features + +### 1. **Event Quiz Cards** (`EventQuizCard.tsx`) +- Social media post-like design +- Prize information and registration fees +- Creator profiles and follower counts +- Space-themed banners with gradients +- Social engagement features (likes, comments, shares) + +### 2. **Category Pages** (`categories/[categoryId]/page.tsx`) +- **Live Quiz Events Section**: Shows event quizzes with prizes +- **Practice Quizzes Section**: Shows regular learning quizzes +- Dynamic category names and descriptions +- Responsive grid layouts + +### 3. **Home Page** (`page.tsx`) +- Welcome message and app introduction +- Category selection grid +- Feature highlights (Live Events, Practice, Progress) +- Web3 wallet connection handling + +## ๐จ Event Quiz Categories + +### Physics & Science (Category ID: "1") +- ๐ Mission Space: ISRO Special - โน2,500 prize +- ๐ฑ Climate Champions: Environmental Science - โน1,800 prize + +### Computer Science & Technology (Category ID: "2") +- ๐ค AI Revolution: Machine Learning Mastery - โน3,500 prize +- ๐ช Crypto & Blockchain: Web3 Mastery - โน4,200 prize + +## ๐ง How to Add New Event Quizzes + +1. **Add to `data/eventQuizzes.ts`**: +```typescript +{ + id: "event-X", + title: "Your Quiz Title", + description: "Quiz description with emojis", + image: "/categories/image--your-subject.svg", + categoryId: "1", // or "2", "3", etc. + isEvent: true, + prize: 2000, + date: "Dec 15, 2025", + time: "7:00 PM", + duration: "10m", + difficulty: "Intermediate", + totalSlots: 200, + slotsLeft: 150, + registrationFee: 15, + creator: "Your Creator Name", + followers: "0.1M", + tags: ["Tag1", "Tag2"], + questions: [/* your questions */] +} +``` + +2. **The quiz will automatically appear** in the appropriate category page + +## ๐ฏ User Flow + +1. **Home Page**: User sees categories and selects one +2. **Category Page**: User sees both: + - Live Quiz Events (with prizes) + - Practice Quizzes (for learning) +3. **Quiz Taking**: Same interface for both event and practice quizzes +4. **Results**: Performance tracking and scoring + +## ๐ Getting Started + +1. Install dependencies: `npm install` +2. Start development server: `npm run dev` +3. Open `http://localhost:3000` +4. Connect MetaMask wallet +5. Explore categories and take quizzes! + +## ๐ Code Organization Benefits + +- **Clear Separation**: Event quizzes vs practice quizzes +- **Categorized Content**: Quizzes organized by subject +- **Reusable Components**: EventQuizCard can be used anywhere +- **Helper Functions**: Easy to filter quizzes by category +- **Documentation**: Clear comments and JSDoc annotations +- **Type Safety**: Full TypeScript support + +## ๐ฎ Future Enhancements + +- Add more event quiz categories +- Implement real-time registration +- Add payment integration for event quizzes +- Create admin panel for quiz management +- Add user profiles and leaderboards diff --git a/SETUP.md b/SETUP.md index 0bc430f..6982851 100644 --- a/SETUP.md +++ b/SETUP.md @@ -1,4 +1,4 @@ -# Kwizi Web3 Setup Guide +# QuizBlock Web3 Setup Guide This application has been converted from a traditional Web2 authentication system to a Web3 application using MetaMask and Avalanche blockchain. diff --git a/app/all-quizzes/page.tsx b/app/all-quizzes/page.tsx new file mode 100644 index 0000000..3bb533c --- /dev/null +++ b/app/all-quizzes/page.tsx @@ -0,0 +1,260 @@ +/** + * All Quizzes Page Component + * + * This page displays all quizzes from all categories in one place, including: + * - All Live Quiz Events (with prizes and registration) + * - All Practice Quizzes (regular quiz content) + * + * The page is organized into two main sections: + * 1. Event Quizzes - All special quizzes with prizes and registration fees + * 2. Practice Quizzes - All regular quizzes for learning and practice + * + * @returns JSX element for the all quizzes page + */ + +import React from "react"; +import { IQuiz } from "@/types/types"; +import QuizCard from "@/components/quiz/QuizCard"; +import EventQuizCard from "@/components/quiz/EventQuizCard"; +import { getAllEventQuizzes } from "@/data/eventQuizzes"; + +async function AllQuizzesPage() { + // Get all event quizzes + const eventQuizzes = getAllEventQuizzes(); + + // Mock regular quiz data for all categories (database setup is optional) + const mockQuizzes: IQuiz[] = [ + // Physics & Science quizzes + { + id: "physics-1", + title: "Physics Fundamentals", + description: "Test your knowledge of basic physics concepts", + image: "/categories/image--physics.svg", + categoryId: "1", + questions: [ + { + id: "p1", + text: "What is the SI unit of force?", + difficulty: "easy", + options: [ + { id: "pa1", text: "Newton", isCorrect: true }, + { id: "pa2", text: "Joule", isCorrect: false }, + { id: "pa3", text: "Watt", isCorrect: false }, + { id: "pa4", text: "Pascal", isCorrect: false } + ] + } + ] + }, + { + id: "physics-2", + title: "Quantum Mechanics Basics", + description: "Explore the fascinating world of quantum physics", + image: "/categories/image--science.svg", + categoryId: "1", + questions: [ + { + id: "q1", + text: "What is the uncertainty principle?", + difficulty: "medium", + options: [ + { id: "qa1", text: "Heisenberg's principle", isCorrect: true }, + { id: "qa2", text: "Einstein's principle", isCorrect: false }, + { id: "qa3", text: "Newton's principle", isCorrect: false }, + { id: "qa4", text: "Schrodinger's principle", isCorrect: false } + ] + } + ] + }, + // Computer Science & Technology quizzes + { + id: "cs-1", + title: "Computer Science Basics", + description: "Test your knowledge of fundamental computer science concepts", + image: "/categories/image--computer-science.svg", + categoryId: "2", + questions: [ + { + id: "c1", + text: "What is the time complexity of binary search?", + difficulty: "medium", + options: [ + { id: "ca1", text: "O(n)", isCorrect: false }, + { id: "ca2", text: "O(log n)", isCorrect: true }, + { id: "ca3", text: "O(nยฒ)", isCorrect: false }, + { id: "ca4", text: "O(1)", isCorrect: false } + ] + } + ] + }, + { + id: "cs-2", + title: "Programming Fundamentals", + description: "Basic programming concepts and principles", + image: "/categories/image--programming.svg", + categoryId: "2", + questions: [ + { + id: "c2", + text: "What is a variable in programming?", + difficulty: "easy", + options: [ + { id: "cb1", text: "A function", isCorrect: false }, + { id: "cb2", text: "A storage location", isCorrect: true }, + { id: "cb3", text: "A loop", isCorrect: false }, + { id: "cb4", text: "A class", isCorrect: false } + ] + } + ] + }, + // Mathematics quizzes + { + id: "math-1", + title: "Calculus Basics", + description: "Test your calculus knowledge", + image: "/categories/image--mathematics.svg", + categoryId: "3", + questions: [ + { + id: "m1", + text: "What is the derivative of xยฒ?", + difficulty: "easy", + options: [ + { id: "ma1", text: "2x", isCorrect: true }, + { id: "ma2", text: "x", isCorrect: false }, + { id: "ma3", text: "xยฒ", isCorrect: false }, + { id: "ma4", text: "2", isCorrect: false } + ] + } + ] + }, + // Chemistry quizzes + { + id: "chem-1", + title: "Chemical Reactions", + description: "Learn about different types of chemical reactions", + image: "/categories/image--chemistry.svg", + categoryId: "4", + questions: [ + { + id: "ch1", + text: "What is the chemical formula for water?", + difficulty: "easy", + options: [ + { id: "cha1", text: "H2O", isCorrect: true }, + { id: "cha2", text: "CO2", isCorrect: false }, + { id: "cha3", text: "NaCl", isCorrect: false }, + { id: "cha4", text: "O2", isCorrect: false } + ] + } + ] + }, + // Biology quizzes + { + id: "bio-1", + title: "Cell Biology", + description: "Test your knowledge of cell structures and functions", + image: "/categories/image--biology.svg", + categoryId: "5", + questions: [ + { + id: "b1", + text: "What is the powerhouse of the cell?", + difficulty: "easy", + options: [ + { id: "ba1", text: "Mitochondria", isCorrect: true }, + { id: "ba2", text: "Nucleus", isCorrect: false }, + { id: "ba3", text: "Ribosome", isCorrect: false }, + { id: "ba4", text: "Golgi apparatus", isCorrect: false } + ] + } + ] + } + ]; + + return ( +
+ Explore all available Web3 and tech quizzes. Join live events with real crypto prizes + or practice with our comprehensive question banks covering Blockchain, DeFi, AR/VR, + AI/ML, Software Development, and cutting-edge technology! +
+Join exciting blockchain and tech quiz competitions with real crypto prizes!
+Test your Web3 and technology knowledge with these practice quizzes
+Check back later for new content!
+Join exciting quiz competitions with real prizes!
+ +Test your knowledge with these practice quizzes
+ + {mockQuizzes.length > 0 ? ( +Check back later for new content!
+Try exploring other categories!
- Connect your MetaMask wallet to start taking quizzes on the Avalanche network. + Connect your MetaMask wallet to start taking Web3 and tech quizzes on the Avalanche network.
{isMetaMaskInstalled() ? (