🎄 Christmas Memory

Live demo: https://iam269.github.io/christmas-memory/ 🔔🎁

An interactive and festive web application designed to create, share, and relive Christmas memories through engaging games and personalized content! 🎅

✨ Key Features

🎮 Interactive Games

• Christmas Memory Game: Match pairs of festive cards featuring holiday themes, Santa, reindeer, and ornaments 🃏
• Gift Catcher Game: Catch falling presents in a fun, timed challenge 🎁
• Hidden Easter Eggs: Discover secret surprises scattered throughout the app for extra holiday cheer 🥚

📝 Memory Management

• Memory Form: Add personal Christmas stories, photos, and wishes with a user-friendly form 📝
• Memory Wall: View and interact with a dynamic wall of shared memories from the community 🖼️
• Admin Panel: Moderate and manage submitted memories (admin access required) ⚙️

🎨 Festive Atmosphere

• Christmas Countdown: Real-time countdown to Christmas Day with animated timers ⏰
• Animated Snowfall: Beautiful falling snow effect that enhances the holiday mood ❄️
• Background Music: Playful Christmas tunes, including "All I Want for Christmas Is You" 🎵
• Sound Toggle: Control audio settings for a customizable experience 🔊

🎭 User Experience

• Theme Toggle: Switch between light and dark modes for comfortable viewing 🌙
• Responsive Design: Optimized for desktop, tablet, and mobile devices 📱
• Loading Screens: Smooth transitions with festive loading animations ⏳
• Emoji Picker: Add expressive emojis to memories and interactions 😊

🛠️ Technology Stack

• Frontend Framework: React 18 with TypeScript for type-safe development ⚛️
• Build Tool: Vite for lightning-fast development and optimized production builds ⚡
• Styling: Tailwind CSS with custom configurations for holiday-themed designs 🎨
• UI Components: Shadcn/ui component library for consistent and accessible interfaces 🎭
• State Management: React hooks and custom hooks for efficient state handling 🔄
• Code Quality: ESLint configuration for maintaining clean, error-free code 🔧
• Package Manager: Support for both npm and Bun for flexible dependency management 📦
• Icons & Assets: Custom SVG icons and holiday-themed images 🖼️

🚀 Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or Bun package manager

Installation

1. Clone the repository:

   git clone https://github.com/your-username/christmas-memory.git
   cd christmas-memory

2. Install dependencies:

   npm install
   # or
   bun install

3. Start the development server:

   npm run dev
   # or
   bun run dev

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

Build for Production

npm run build
# or
bun run build

The built files will be in the dist directory, ready for deployment.

📁 Project Structure

christmas-memory/
├── public/                 # Static assets (images, audio, icons)
├── src/
│   ├── components/         # Reusable React components
│   │   ├── ui/            # Shadcn/ui components
│   │   └── ...            # Feature-specific components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions and configurations
│   ├── pages/             # Page components
│   └── ...                # Main app files
├── package.json           # Project dependencies and scripts
├── tailwind.config.ts     # Tailwind CSS configuration
├── vite.config.ts         # Vite build configuration
└── README.md              # Project documentation

🤝 Contributing

We welcome contributions to make Christmas Memory even more festive! 🎉

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure your code follows our ESLint configuration and includes appropriate tests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🎉 Happy Holidays!

Christmas Memory brings the magic of Christmas to the digital world, allowing you to create lasting memories and enjoy festive games. Whether you're reminiscing about past holidays or creating new traditions, this app is your digital advent calendar! 🎁❄️🎄

---

Built with ❤️ for the holiday season