# INVEETAIRE
## Sprint G004 - Prompt 1
## Media Engine Foundation

You are a senior full-stack software architect continuing development of an existing production project called **INVEETAIRE**.

INVEETAIRE is a premium digital wedding invitation platform.

The project is already functional.

DO NOT rebuild or redesign the project.

You are extending the existing architecture.

---

# OBJECTIVE

Build the **Media Engine Foundation** that will become the central media management system for every invitation.

This sprint ONLY builds the foundation.

Future sprints will add:

- Image Cropper
- Image Optimization
- WebP Conversion
- Music Player
- QR Attendance
- Live Guest Media

Therefore design this module so it is easily extendable.

---

# BEFORE WRITING CODE

First inspect the existing project.

Understand:

- folder structure
- architecture
- dashboard
- invitation builder
- routing
- models
- storage
- upload implementation
- coding conventions

Then extend the existing implementation.

Never replace working modules.

Never introduce a second architecture.

Reuse existing helpers whenever possible.

---

# IMPORTANT RULES

DO NOT

- redesign dashboard
- redesign invitation builder
- redesign preview simulator
- redesign guest theme
- modify authentication
- modify unrelated modules
- refactor working code
- introduce unnecessary packages

Instead,

integrate naturally into the existing project.

---

# GOAL

Create a reusable Media Engine.

This Media Engine will later power:

Hero

Gallery

Story

Music

Gift

Future Themes

Future Builder

Future Mobile App

Therefore write reusable code.

---

# MEDIA TYPES

Support the following assets.

Hero Image

Maximum:
1

Couple Photos

Maximum:
2

Gallery

Maximum:
10

Story Images

Maximum:
5

Music Cover

Maximum:
1

Music File (MP3)

Maximum:
1

QRIS Image

Maximum:
1

---

# STORAGE

Use the project's existing storage mechanism.

Store assets by Couple.

Recommended hierarchy:

storage/

    couples/

        {COUPLE_CODE}/

            hero/

            couple/

            gallery/

            story/

            music/

            gift/

Never hardcode paths.

Always use helper functions or configuration.

---

# DATA MODEL

Do NOT create a complex Asset table.

Instead,

extend the existing Invitation/Couple data model using JSON metadata.

Example concept only:

{
    "hero": "...",

    "couple": [],

    "gallery": [],

    "story": [],

    "music": {

    },

    "gift": {

    }

}

Reuse existing models.

Keep database changes minimal.

Future prompts must be able to build on this structure.

---

# MEDIA MANAGER

Create a Media Management section.

IMPORTANT

Do NOT create an entirely separate dashboard if unnecessary.

If the existing Invitation Builder already manages invitation content,

integrate the Media Manager into it naturally.

Preferred approach:

Invitation Builder

↓

General

↓

Media

↓

Story

↓

Gift

↓

Music

instead of introducing a brand new navigation.

---

# UI

Media Manager should contain sections:

Hero

Couple Photos

Gallery

Story Images

Music

Gift (QRIS)

Each section supports:

Upload

Preview

Replace

Delete

Display upload limits.

Simple UI is sufficient.

Do not over-design.

---

# UPLOAD

Support

Click Upload

Basic Drag & Drop

Immediately show preview after upload.

Support:

Replace

Delete

Validation

No cropping yet.

No compression yet.

No image processing yet.

---

# VALIDATION

Enforce:

Hero

1

Couple

2

Gallery

10

Story

5

Music Cover

1

Music File

1

QRIS

1

Reject uploads exceeding limits.

Display user-friendly messages.

---

# LIVE UPDATE

After upload,

the dashboard should immediately reflect changes.

Do not require a browser refresh.

Simple reactive update is enough.

No websocket.

No polling.

---

# CODE QUALITY

Write production-quality code.

Reusable.

Modular.

Maintainable.

Follow SOLID where appropriate.

Avoid duplicated upload logic.

Centralize helper functions.

Document important functions.

---

# OUT OF SCOPE

Do NOT implement:

Cropper.js

Image resize

Compression

WebP

Music Player

QR Generator

Attendance

Theme redesign

Animation

Preview redesign

Guest redesign

---

# SUCCESS CRITERIA

When finished,

the project should have:

✅ Media Engine Foundation

✅ Media Manager

✅ Upload

✅ Replace

✅ Delete

✅ Validation

✅ JSON metadata

✅ Organized storage

WITHOUT changing existing user experience.

This implementation will become the foundation for Prompt 2 through Prompt 5.