From e5d7b2884d75acf0e0dec0dde5a12aa6f53d0a68 Mon Sep 17 00:00:00 2001 From: yuvrajsharmaaa Date: Sat, 20 Sep 2025 23:42:51 +0530 Subject: [PATCH 1/3] UI-final --- PROJECT_STRUCTURE.md | 146 +++++++++++++++ app/all-quizzes/page.tsx | 260 +++++++++++++++++++++++++++ app/categories/[categoryId]/page.tsx | 86 +++++++-- app/page.tsx | 70 +++++--- components/Header.tsx | 17 +- components/quiz/EventQuizCard.tsx | 12 +- data/eventQuizzes.ts | 26 ++- 7 files changed, 567 insertions(+), 50 deletions(-) create mode 100644 PROJECT_STRUCTURE.md create mode 100644 app/all-quizzes/page.tsx diff --git a/PROJECT_STRUCTURE.md b/PROJECT_STRUCTURE.md new file mode 100644 index 0000000..9d40320 --- /dev/null +++ b/PROJECT_STRUCTURE.md @@ -0,0 +1,146 @@ +# Kwizi Quiz Application - Project Structure + +## ๐Ÿ“ Project Overview +This is a Next.js-based quiz application with Web3 integration, featuring both regular practice quizzes and live event quizzes with 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/app/all-quizzes/page.tsx b/app/all-quizzes/page.tsx new file mode 100644 index 0000000..f812683 --- /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 Quizzes +

+

+ Explore all available quizzes across all subjects. Join live events with real prizes + or practice with our extensive question banks covering Physics, Computer Science, + Mathematics, Chemistry, Biology, and more! +

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

๐ŸŽฏ Live Quiz Events

+

Join exciting quiz competitions with real cash prizes!

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

๐Ÿ“š Practice Quizzes

+

Test your knowledge with these practice quizzes across all subjects

+
+
+ {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/categories/[categoryId]/page.tsx b/app/categories/[categoryId]/page.tsx index 9c94870..58f79a9 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": "Physics & Science", + "2": "Computer Science & Technology", + "3": "Mathematics", + "4": "Chemistry", + "5": "Biology", + "6": "Programming" + }; + return categoryNames[id] || "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/page.tsx b/app/page.tsx index f692f97..997e43a 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(); @@ -55,34 +67,50 @@ export default function Home() { } return ( -
- {/* Event Quizzes Section */} -
-
-
-

Live Quiz Events

-

Join exciting quiz competitions with real prizes!

-
-
- -
- {eventQuizzes.map((quiz) => ( - - ))} -
+
+ {/* Main Header */} +
+

+ Welcome to Kwizi +

+

+ Test your knowledge across various subjects with our interactive quizzes. + Join live events with real prizes or practice with our extensive question banks! +

- {/* Regular Categories Section */} + {/* Categories Section */}
-

Quiz Categories

-

Choose a category to start your quiz journey

+

Choose Your Subject

+

+ Explore quizzes by category - each category contains both practice quizzes and exciting live events! +

-
+
{categories.map((category: ICategory) => ( ))}
+ + {/* Features Section */} +
+
+
๐ŸŽฏ
+

Live Events

+

Join exciting quiz competitions with real cash prizes!

+
+
+
๐Ÿ“š
+

Practice Quizzes

+

Test your knowledge with our extensive question banks.

+
+
+
๐Ÿ†
+

Track Progress

+

Monitor your performance and improve over time.

+
+
); } diff --git a/components/Header.tsx b/components/Header.tsx index 833278f..d5a9a07 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -27,6 +27,19 @@ function Header() { icon: home, link: "/", }, + { + name: "All Quizzes", + icon: ( + + + + + + + + ), + link: "/all-quizzes", + }, { name: "My Stats", icon: chart, @@ -59,15 +72,15 @@ function Header() { - {item.icon} + {item.icon} { e.stopPropagation(); - // Handle registration logic here console.log("Registering for quiz:", quiz.id); }; @@ -31,7 +29,6 @@ function EventQuizCard({ quiz }: Props) { return (
- {/* Header Section */}
@@ -53,10 +50,8 @@ function EventQuizCard({ quiz }: Props) {
- {/* 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 */}