QuizMaster Frontend Prototype

A modern, interactive quiz application built with Next.js 14, TypeScript, and Tailwind CSS.

🎯 Features

User Features

• Dashboard - Overview of user stats, trending quizzes, and latest news
• Quiz Library - Browse and search quizzes by category
• Quiz Session - Interactive quiz taking experience with timer
• Battle Mode - Multiplayer quiz battles with live leaderboard
• Leaderboard - Global and friends ranking
• Profile - User stats, achievements, and referral system
• News - Latest updates and exam notifications
• Token System - Earn and purchase tokens

Design Highlights

• 🎨 Modern UI with Framer Motion animations
• 📱 Fully responsive (Mobile-first with Desktop adaptation)
• 🌓 Dark mode support
• ⚡ Fast page transitions
• 🎯 Immersive quiz/battle experience (no navigation bars)

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to view the app.

📁 Project Structure

app/
├── (user)/          # User-facing pages with navigation
│   ├── dashboard/
│   ├── quizzes/
│   ├── battle/
│   ├── leaderboard/
│   ├── profile/
│   ├── news/
│   └── tokens/
├── (immersive)/     # Full-screen pages (quiz/battle sessions)
│   ├── session/
│   └── battle/
└── (admin)/         # Admin dashboard (future)

components/
├── ui/              # Shadcn UI components
├── shared/          # Shared components (Navbar, Sidebar)
└── quiz/            # Quiz-specific components

lib/
├── stores/          # Zustand state management
├── hooks/           # Custom React hooks
└── types/           # TypeScript type definitions

🎮 Demo Features

All features use mock data for demonstration:

• User authentication (dev mode auto-login)
• Quiz taking with timer
• Battle mode with simulated opponents
• Token system
• Leaderboard rankings
• News articles

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn/UI
• Animations: Framer Motion
• State Management: Zustand
• Icons: Lucide React

📝 Notes

This is a prototype/frontend-only version. Backend integration points are prepared but not connected. All data is mocked for demonstration purposes.

For production deployment:

1. Connect to actual backend API
2. Implement real authentication (Telegram Mini App)
3. Add WebSocket for real-time battle mode
4. Configure environment variables

🔗 Deployment

Ready to deploy on Vercel, Netlify, or any Next.js-compatible platform.

# Build command
npm run build

# Output directory
.next

📄 License

MIT