🧙‍♂️ Hogwarts Wizarding World

An interactive Harry Potter themed game collection, including Sorting Hat quiz, Wand quiz, Patronus summoning, Spell encyclopedia, and more magical features.

中文版本

✨ Features

🎮 Core Games

1. Sorting Hat Quiz - Answer 8 questions to find out which Hogwarts house you belong to
2. Wand Selection Test - Get your exclusive wand based on your personality and preferences
3. Patronus Charm - Summon your personal Patronus by entering keywords describing your happiest memories

📚 Utility Functions

4. Spell Encyclopedia - Collection of 12 classic Harry Potter spells with effects and usage instructions
5. House Detail Pages - Detailed information about all four houses, including traits, famous alumni, common rooms, etc.
6. Wizard Card Generator - Create your own personalized wizard identity card

🛠️ Tech Stack

• Frontend Framework: React 18 + TypeScript
• Styling: TailwindCSS 3
• State Management: Zustand
• Routing: React Router
• Build Tool: Vite
• Icon Library: Lucide React

🚀 Quick Start

Install Dependencies

pnpm install

Start Development Server

pnpm run dev

Build for Production

pnpm run build

Preview Production Build

pnpm run preview

🎨 Design Highlights

• Magical vintage style UI that recreates the Harry Potter wizarding world atmosphere
• Fully responsive design, perfect for both mobile and desktop
• Smooth animations and micro-interactions
• Exclusive theme colors for each of the four houses
• Official style house crests

📁 Project Structure

src/
├── assets/          # Static assets
├── components/      # Reusable components
├── constants/       # Constant data (houses, questions, wands, etc.)
├── hooks/           # Custom React hooks
├── pages/           # Page components
│   ├── Home.tsx          # Home page
│   ├── Quiz.tsx          # Sorting Hat quiz page
│   ├── Result.tsx        # House result page
│   ├── Wand.tsx          # Wand test page
│   ├── WandResult.tsx    # Wand result page
│   ├── Patronus.tsx      # Patronus summoning page
│   ├── Spells.tsx        # Spell encyclopedia page
│   ├── HouseDetail.tsx   # House detail page
│   └── WizardCard.tsx    # Wizard card generator
├── store/           # State management
├── types/           # TypeScript type definitions
├── App.tsx          # Application entry point
├── main.tsx         # Render entry
└── index.css        # Global styles

🎮 Game Guides

Sorting Hat Quiz

• 8 carefully designed questions, each corresponding to different house traits
• Intelligent scoring algorithm to accurately match your ideal house
• Detailed house introduction and score breakdown
• Share your results functionality

Wand Selection Test

• 6 questions about personality and magical preferences
• 8 wand woods, 4 core types
• Dynamic calculation of wand length and flexibility
• Generate exclusive wand image and detailed description

Patronus Charm

• Enter keywords describing your personality or happiest memories
• 16 different types of Patronuses
• AI generates Harry Potter style silver Patronus illustrations
• Save and share functionality

Spell Encyclopedia

• 12 classic Harry Potter spells
• Includes spell name, Chinese translation, effect, difficulty
• Filter by type and keyword search

Wizard Card Generator

• Customize name, house, wand, Patronus information
• Design inspired by official Wizard Passport
• Random generation and download functionality

🔧 Configuration

Requirements

• Node.js >= 18.0.0
• pnpm >= 8.0.0

Port

Default development server port: 5174

📝 Changelog

v1.0.0

• ✅ Sorting Hat quiz functionality
• ✅ Wand selection test functionality
• ✅ Patronus summoning functionality
• ✅ Spell encyclopedia functionality
• ✅ House detail pages
• ✅ Wizard card generator
• ✅ Fully responsive design
• ✅ Official style UI design

🤝 Contributing

Issues and Pull Requests are welcome!

📄 License

MIT License

⚠️ Disclaimer

This project is for educational and entertainment purposes only. All Harry Potter related rights belong to Warner Bros. and J.K. Rowling.

---

This entire project was 100% written by AI.