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 ( +
+
+

+ All Tech Quizzes +

+

+ 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! +

+
+ + {/* Event Quizzes Section */} + {eventQuizzes.length > 0 && ( +
+
+
+

๐ŸŽฏ Live Web3 Events

+

Join exciting blockchain and tech quiz competitions with real crypto prizes!

+
+
+ {eventQuizzes.length} Events +
+
+ +
+ {eventQuizzes.map((quiz) => ( + + ))} +
+
+ )} + + {/* Practice Quizzes Section */} +
+
+
+

๐Ÿ’ป Tech Practice Quizzes

+

Test your Web3 and technology knowledge with these practice quizzes

+
+
+ {mockQuizzes.length} Quizzes +
+
+ + {mockQuizzes.length > 0 ? ( +
+ {mockQuizzes.map((quiz) => ( + + ))} +
+ ) : ( +
+

No practice quizzes available yet

+

Check back later for new content!

+
+ )} +
+ + {/* Summary Section */} +
+
+

Quiz Statistics

+
+
+
{eventQuizzes.length}
+
Live Events
+
+
+
{mockQuizzes.length}
+
Practice Quizzes
+
+
+
+ โ‚น{eventQuizzes.reduce((total, quiz) => total + (quiz.prize || 0), 0).toLocaleString()} +
+
Total Prize Pool
+
+
+
+
+
+ ); +} + +export default AllQuizzesPage; diff --git a/app/api/categories/route.ts b/app/api/categories/route.ts index f03504b..eb50c4e 100644 --- a/app/api/categories/route.ts +++ b/app/api/categories/route.ts @@ -6,39 +6,39 @@ export async function GET(req: NextRequest) { const mockCategories = [ { id: "1", - name: "Computer Science", - description: "Programming and computer science fundamentals", + name: "Web3 & Blockchain", + description: "DeFi, smart contracts, and blockchain technology", image: "/categories/image--computer-science.svg" }, { id: "2", - name: "Physics", - description: "Physics concepts and principles", - image: "/categories/image--physics.svg" + name: "AI & Machine Learning", + description: "Artificial intelligence and machine learning algorithms", + image: "/categories/image--technology.svg" }, { id: "3", - name: "Chemistry", - description: "Chemical reactions and properties", - image: "/categories/image--chemistry.svg" + name: "AR/VR & Metaverse", + description: "Augmented reality, virtual reality, and immersive tech", + image: "/categories/image--technology.svg" }, { id: "4", - name: "Biology", - description: "Life sciences and biological processes", - image: "/categories/image--biology.svg" + name: "Software Development", + description: "Modern programming and development frameworks", + image: "/categories/image--programming.svg" }, { id: "5", - name: "Data Structures", - description: "Algorithms and data structure concepts", + name: "Cybersecurity", + description: "Security protocols and ethical hacking", image: "/categories/image--data-structures.svg" }, { id: "6", - name: "Programming", - description: "Programming languages and concepts", - image: "/categories/image--programming.svg" + name: "Cloud Computing", + description: "AWS, Azure, and distributed systems", + image: "/categories/image--computer-science.svg" } ]; diff --git a/app/categories/[categoryId]/page.tsx b/app/categories/[categoryId]/page.tsx index 9c94870..22f8ec1 100644 --- a/app/categories/[categoryId]/page.tsx +++ b/app/categories/[categoryId]/page.tsx @@ -1,6 +1,23 @@ +/** + * Category Page Component + * + * This page displays all quizzes for a specific category, including: + * - Live Quiz Events (with prizes and registration) + * - Practice Quizzes (regular quiz content) + * + * The page is organized into two main sections: + * 1. Event Quizzes - Special quizzes with prizes and registration fees + * 2. Practice Quizzes - Regular quizzes for learning and practice + * + * @param params - Contains the categoryId from the URL + * @returns JSX element for the category page + */ + import React from "react"; import { IQuiz } from "@/types/types"; import QuizCard from "@/components/quiz/QuizCard"; +import EventQuizCard from "@/components/quiz/EventQuizCard"; +import { getEventQuizzesByCategory } from "@/data/eventQuizzes"; async function page({ params }: any) { const { categoryId } = await params; @@ -9,7 +26,10 @@ async function page({ params }: any) { return null; } - // Mock quiz data (database setup is optional) + // Get event quizzes for this category + const eventQuizzes = getEventQuizzesByCategory(categoryId); + + // Mock regular quiz data (database setup is optional) const mockQuizzes: IQuiz[] = [ { id: "1", @@ -64,20 +84,62 @@ async function page({ params }: any) { } ]; + // Helper function to get category name + const getCategoryName = (id: string) => { + const categoryNames: { [key: string]: string } = { + "1": "Web3 & Blockchain", + "2": "AI & Machine Learning", + "3": "AR/VR & Metaverse", + "4": "Software Development", + "5": "Cybersecurity", + "6": "Cloud Computing" + }; + return categoryNames[id] || "Tech Category"; + }; + return ( -
-

All Quizzes

+
+

{getCategoryName(categoryId)} Quizzes

+ + {/* Event Quizzes Section */} + {eventQuizzes.length > 0 && ( +
+

๐ŸŽฏ Live Quiz Events

+

Join exciting quiz competitions with real prizes!

+ +
+ {eventQuizzes.map((quiz) => ( + + ))} +
+
+ )} + + {/* Regular Quizzes Section */} +
+

๐Ÿ“š Practice Quizzes

+

Test your knowledge with these practice quizzes

+ + {mockQuizzes.length > 0 ? ( +
+ {mockQuizzes.map((quiz) => ( + + ))} +
+ ) : ( +
+

No practice quizzes available yet

+

Check back later for new content!

+
+ )} +
- {mockQuizzes.length > 0 ? ( -
- {mockQuizzes.map((quiz) => ( - - ))} + {/* No quizzes message */} + {eventQuizzes.length === 0 && mockQuizzes.length === 0 && ( +
+

No quizzes found for this category

+

Try exploring other categories!

- ) : ( -

- No quizzes found for this Category -

)}
); diff --git a/app/layout.tsx b/app/layout.tsx index 958a115..84d1dc5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,8 +6,8 @@ import ContextProvider from "@/providers/ContextProvider"; import { Toaster } from "react-hot-toast"; export const metadata: Metadata = { - title: "Kwizi - Web3 Quiz Platform", - description: "A decentralized quiz platform powered by Avalanche blockchain", + title: "QuizBlock - Web3 & Tech Quiz Platform", + description: "A decentralized Web3 and tech quiz platform powered by Avalanche blockchain", }; const nunito = Nunito({ diff --git a/app/page.tsx b/app/page.tsx index f692f97..b85754b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,12 +1,24 @@ +/** + * Home Page Component + * + * This is the main landing page of the Kwizi application. It provides: + * - Welcome message and app introduction + * - Category selection grid for users to choose subjects + * - Feature highlights (Live Events, Practice Quizzes, Progress Tracking) + * + * The page handles Web3 wallet connection and displays different content + * based on connection status. + * + * @returns JSX element for the home page + */ + "use client"; import HomeCard from "@/components/quiz/HomeCard"; -import EventQuizCard from "@/components/quiz/EventQuizCard"; import { useGlobalContext } from "@/context/globalContext"; import { useWeb3 } from "@/context/Web3Context"; import { ICategory } from "@/types/types"; import { Button } from "@/components/ui/button"; -import { eventQuizzes } from "@/data/eventQuizzes"; export default function Home() { const { categories } = useGlobalContext(); @@ -25,9 +37,9 @@ export default function Home() { return (
-

Welcome to Kwizi

+

Welcome to QuizBlock

- 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() ? (
- {/* Quiz Banner */}
- {/* Stars background */}
@@ -65,7 +60,6 @@ function EventQuizCard({ quiz }: Props) {
- {/* Content */}
@@ -94,7 +88,6 @@ function EventQuizCard({ quiz }: Props) {
- {/* Quiz Details */}
@@ -121,13 +114,11 @@ function EventQuizCard({ quiz }: Props) {
- {/* Description */}

{quiz.description}

Read More
- {/* Registration Section */}
{quiz.slotsLeft || 180} Slots Left @@ -149,7 +140,6 @@ function EventQuizCard({ quiz }: Props) {
- {/* Engagement Section */}