🃏 Quizlet Android App

🎓 A beautiful, modern flashcard study app built with Jetpack Compose

Experience the future of mobile learning with smooth animations and intuitive design

---

✨ Features

🎴 Deck-Style Card Animation

• Physical Card Feel: Realistic deck stacking with up to 3 visible cards
• Smooth Swiping: Native HorizontalPager integration for fluid navigation
• Dynamic Scaling: Cards scale and fade as you swipe through the deck
• Rotation Effects: Subtle card rotation during swipe gestures

🔄 3D Card Flip Animation

• Show Answer: Tap to flip cards with smooth 3D rotation (600ms duration)
• Flip Back: Return to question side with the same elegant animation
• Per-Card State: Each card remembers its flip state independently

🎉 Celebration Effects

• Confetti Animation: Colorful particles burst from the Check button when correct
• 50 Particles: Multi-colored confetti with physics-based movement
• 3-Second Duration: Satisfying celebration that doesn't overstay

📱 Modern UI/UX

• Material 3 Design: Latest Material Design principles and theming
• Large Cards: 98% screen width, 700dp height for optimal readability
• Gradient Backgrounds: Subtle visual depth with card gradients
• Edge-to-Edge: Full screen utilization with proper padding

🧠 Smart Study Features

• Per-Card Tracking: Individual state management for each flashcard
• Answer Validation: Check correctness without revealing answers
• Input Persistence: Your typed answers are saved per card
• Progress Indicators: Visual dots showing current position in deck

---

🏗️ Architecture

Tech Stack

• Language: Kotlin
• UI Framework: Jetpack Compose
• Architecture: MVVM with ViewModel
• State Management: Compose State with observable collections
• Animations: Compose Animation APIs

Key Components

📁 app/src/main/java/com/ryuken/quizlet/
├── 📁 data/model/
│   └── Flashcard.kt                 # Data model
├── 📁 ui/
│   ├── 📁 composables/
│   │   ├── FlashcardView.kt         # Main card component
│   │   └── AddEditFlashcardDialog.kt # Card creation dialog
│   ├── 📁 screen/
│   │   └── FlashcardManagementScreen.kt # Main screen
│   ├── 📁 viewmodel/
│   │   └── FlashcardViewModel.kt    # State management
│   └── 📁 theme/
│       └── Theme.kt                 # Material 3 theming
└── MainActivity.kt                  # App entry point

---

🚀 Getting Started

Prerequisites

• Android Studio Hedgehog | 2023.1.1 or newer
• Android SDK 34
• Kotlin 1.9.0+
• Gradle 8.0+

Installation

1. Clone the repository

   git clone https://github.com/yourusername/quizlet-android.git
   cd quizlet-android

2. Open in Android Studio

   • Launch Android Studio
   • Select "Open an Existing Project"
   • Navigate to the cloned directory

3. Build and Run

   ./gradlew build
   ./gradlew installDebug

---

🎮 How to Use

Study Mode

1. 📖 Read the Question: Each card displays a question at the top
2. ✍️ Type Your Answer: Use the text input field to enter your response
3. ✅ Check Answer: Tap "Check" to validate (triggers confetti if correct!)
4. 👁️ Show Answer: Tap to flip the card and reveal the correct answer
5. ➡️ Navigate: Swipe left/right or use navigation buttons

Card Management

• ➕ Add Cards: Tap the floating action button to create new flashcards
• 🔀 Shuffle: Randomize the deck order for varied practice
• 📊 Progress: Track your position with the indicator dots

---

🎨 Design Highlights

Animation System

• HorizontalPager: Native Android paging with smooth gestures
• Card Stacking: Visual depth with progressive scaling and alpha
• 3D Flip: Realistic card rotation using rotationY and cameraDistance
• Confetti Physics: Particle system with gravity and rotation

State Management

• Observable Maps: mutableStateMapOf for reactive per-card data
• Compose Integration: Seamless UI updates with state changes
• Memory Efficiency: Smart rendering of visible cards only

Visual Polish

• Rounded Corners: 24dp radius for modern card appearance
• Elevation Effects: Dynamic shadows based on card position
• Color Theming: Consistent Material 3 color palette
• Typography: Optimized text sizing and spacing

---

🔧 Technical Details

Dependencies

// Core Compose
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material3:material3:$material3_version"

// Paging
implementation "androidx.compose.foundation:foundation:$compose_version"

// ViewModel
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"

Performance Optimizations

• Lazy Rendering: Only visible cards are fully rendered
• State Preservation: Efficient per-card state tracking
• Animation Optimization: Hardware-accelerated transformations
• Memory Management: Proper cleanup of animation resources

---

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request.

Development Setup

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

---

📄 License

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

---

🙏 Acknowledgments

• Material Design Team for the beautiful design system
• Jetpack Compose Team for the modern UI toolkit
• Android Community for continuous inspiration and support

---

Made with ❤️ and lots of ☕

Happy Learning! 🎓