Technical Specification

Welcome to the master_meme wiki!

Technical Specification for Master Meme App

Overview

This document outlines the technical details, architecture, and implementation guidelines for the Master Meme Android app. The app consists of a meme creation and viewing system with features like adding text to memes, saving them locally, and sharing them via various options. The app uses Jetpack Compose for UI and Supabase for backend services.

Tech Stack

• Programming Language: Kotlin
• UI Framework: Jetpack Compose
• Dependency Injection (DI): Koin
• State Management: ViewModels
• Local Storage: Room Database for meme data (local storage of memes)
• Image Handling: Coil (for image loading)

Screens and Features

1. Meme List Screen (Home Screen)

Features:

• Top Bar:

  • Dropdown for sorting: "Favorites first" or "Newest first"

• Main Content:

  • Grid displaying memes created by the user, with the option to favorite/unfavorite.
  • Long-tap to enter selection mode (multiple memes can be selected).

• Actions:

  • Favorite Toggle: Mark memes as favorites. Local storage for favorite status.
  • Delete: Multi-select to delete memes with confirmation dialog.
  • Share: Multi-select to share memes.
  • Floating Action Button (FAB): Trigger bottom sheet to add a new meme.

Tech Implementation:

• Use Jetpack Compose LazyVerticalGrid to display memes.
• Koin for dependency injection.
• Room database to persist favorite status locally.
• Dialogs for confirmations (delete, unsaved changes).
• Icons: Material Design icons or custom SVGs.

---

2. Meme Editor Screen

Features:

• Template Selection: User selects a template from the previous screen (a meme template).

• Text Box: User can add a draggable text box to the meme.

  • Text Editing: Double tap on text box to edit content.
  • Font & Color Customization: Change font style, size (slider), and color from available options.

• Actions:

  • Save Meme: Save meme locally to the device.
  • Share Meme: Open sharing prompt with options to share on other apps.
  • Undo/Redo: Implement undo/redo buttons to manage text changes (optional feature).

• Bottom Bar Controls:

  • Discard Changes: Discard newly added text box (X button).
  • Confirm Changes: Save text box placement (checkmark button).

Tech Implementation:

• Use Jetpack Compose for building the UI and draggable components.
• Font Handling: Use a list of available fonts, applied through a scrollable row.
• Slider: Use Compose slider for adjusting font size.
• Dialogs: Use Material Dialogs for text editing and confirmation.
• Undo/Redo: Implement via a custom state or history mechanism (optional).

---

Branching and Workflow

• Branching Convention:
  • Use the default branch name for new branches when working on issues.

---

Dependency Injection (Koin)

• Setup Koin:
  Initialize Koin in the Application class to provide dependencies throughout the app.
  Create Koin modules to define shared and scoped dependencies for each feature (e.g., MemeModule).

• ViewModel Injection:
  Inject ViewModels using Koin into Composable functions to maintain app state.

val appModule = module {
    single { MemeRepository(get()) }
    viewModel { MemeViewModel(get()) }
}

Room Entity

@Entity(tableName = "memes")
data class Meme(
    @PrimaryKey(autoGenerate = true) val id: Int,
    val templateId: Int,
    val isFavorite: Boolean,
    val createdDate: Long
)