Sorting Hat Selector

A React-based web application that simulates the Hogwarts Sorting Hat ceremony from the Harry Potter series. Users can experience being sorted into one of the four Hogwarts houses: Gryffindor, Hufflepuff, Ravenclaw, or Slytherin.

Features

• Interactive Sorting Hat animation
• Random house assignment with house-specific audio announcements
• Beautiful UI with house colors and themes
• Responsive design for desktop and mobile

Technologies Used

• React - Frontend framework
• TypeScript - Type-safe JavaScript
• Vite - Build tool and development server
• CSS - Styling with custom animations
• HTML5 Audio API - Audio playback for house announcements

Installation

1. Clone the repository:

   git clone <repository-url>
   cd seleccionador

2. Install dependencies:

   cd app
   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Project Structure

seleccionador/
├── app/                    # React application
│   ├── public/
│   │   └── audio/         # House announcement MP3 files
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom React hooks
│   │   └── types.ts       # TypeScript type definitions
│   ├── package.json       # Dependencies and scripts
│   └── vite.config.ts     # Vite configuration
├── sorting-hat-spec.md    # Project specifications
└── README.md              # This file

Usage

1. Click the "Start Sorting" button to begin the ceremony
2. Watch the Sorting Hat animation
3. Listen to your house announcement
4. View your assigned house with its colors and description

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is for educational purposes. Harry Potter and related trademarks are property of J.K. Rowling and Warner Bros.