💖 4th Anniversary Memory Game

A romantic, mobile-first interactive web app built with React, TypeScript, and CSS to celebrate a special anniversary through memories, playful questions, and emotional storytelling.

Designed with a soft pastel aesthetic, smooth animations, floating hearts, and interactive mini-games, this project creates a personalized experience that feels warm, intimate, and fun.

---

✨ Features

• 💕 Romantic mobile-first UI
• 🎮 Interactive anniversary quiz game
• ⏱️ Timed question system with progress tracking
• 😂 Meme / surprise popup moments
• 🎉 Celebration screen with confetti effects
• 🎡 Spinning wheel mini-game
• 🎵 Background music support
• 💖 Smooth transitions and heart animations
• 🖼️ Easily replaceable photos and meme images
• ☁️ Ready for deployment on Cloudflare Pages

---

Screenshots

1. Landing page

2. Question screen

3. Meme popup

4. Celebration screen

5. Wheel spin game

---

📱 Screens Overview

1. Landing Page

• Romantic gradient background
• Floating heart animations
• Music toggle button
• “Start Our Journey” CTA

---

2. Instructions Screen

Explains the game flow:

• 10 relationship-themed questions
• 20-second timer for each question
• Romantic and playful tone

---

3. Quiz Questions

Reusable question component with:

• Progress indicator
• Countdown timer
• Multiple choice answers
• Correct / wrong answer responses
• Smooth animations and transitions

---

4. Meme / Surprise Popup

Appears every few questions.

Includes:

• Funny or emotional image
• Personalized caption
• Continue button

All images are easy to replace with personal photos.

---

5. Celebration Screen

• Confetti animation
• Romantic ending message
• Optional slideshow support
• “One More Surprise 🎁” button

---

6. Wheel Spin Mini-Game

Interactive spinning prize wheel with:

• Multiple prize tiers
• Controlled jackpot logic
• Romantic ending dialogue
• 4 total spin chances

---

Tech Stack

• React
• TypeScript
• CSS
• Vite
• Cloudflare Pages (fro deployment)

---

Getting Started

Install Dependencies

npm install

Start Development Server

npm run dev

---

Deployment

This project is designed to deploy easily on Cloudflare Pages.

Build Project

npm run build

Deploy

Upload the generated dist/ folder to Cloudflare Pages.

---

🎵 Background Music

To use your own background music:

1. Place your music file inside:

public/music/

2. Example:

public/music/background-music.mp3

3. Update the audio source inside:

src/app/App.tsx

Example:

<audio
  ref={audioRef}
  loop
  src="/music/background-music.mp3"
/>

---

Replacing Images

The app uses placeholder images so developers can easily swap in personal photos.

Meme Popup Images

Update the memes array inside:

src/app/App.tsx

Example:

const memes = [
  {
    imageUrl: "your-image-url",
    caption: "Your custom caption 💕",
  },
];

---

Customizing Questions

All quiz questions are stored inside:

src/app/App.tsx

You can:

• Add more questions
• Change answer options
• Customize correct/wrong messages
• Add all-correct questions
• Personalize the entire story experience

Question Structure

{
  question: "Your question here",
  options: [
    { text: "Option A", isCorrect: true },
    { text: "Option B", isCorrect: false },
  ],
  correctMessage: "Correct response",
  wrongMessage: "Wrong response",
}

---

Design Notes

The UI is intentionally designed to feel:

• Warm
• Romantic
• Soft
• Emotional
• Playful

Design elements include:

• Pastel gradients
• Rounded UI components
• Floating hearts
• Glow effects
• Smooth animations
• Mobile-friendly spacing

---

❤️ Personalization Tips

This project works best when customized.

Ideas:

• Replace placeholder images with real photos
• Add your own music
• Include inside jokes
• Customize romantic messages
• Add relationship milestones
• Change wheel rewards

---

💕 Final Note

This app was created to turn memories into an interactive experience filled with love, humor, and emotional moments.

Make it personal, make it meaningful, and most importantly — have fun building your story together ❤️