Doc: No Dedicated Architecture Documentation

[paruuup]

Problem

The README mentions docs/ARCHITECTURE.md under the Architecture section, but the file does not exist in the repository. New contributors have no reference for understanding how Reframe's components fit together internally.

Proposed Solution

Create docs/ARCHITECTURE.md with:

• A Mermaid diagram showing the full system flow:
  • Next.js 15 frontend (port 3000)
  • FFmpeg.wasm processing pipeline (client-side WASM)
  • Static export flow (out/ directory → Vercel / Netlify / GitHub Pages)
  • COOP/COEP headers for SharedArrayBuffer support
• Data/processing flow diagram (User uploads video → FFmpeg.wasm → processed output → download)
• Short explanation of each layer (UI, processing, export)
• Key files table for new contributors
• Browser compatibility and WASM requirements

Why This Matters

• The README already links to docs/ARCHITECTURE.md but the file is missing — this is a broken reference
• Helps new contributors understand the codebase before diving in
• Makes onboarding faster for GSSoC'26 contributors
• Follows open-source best practices

Acceptance Criteria

• docs/ARCHITECTURE.md created
• Mermaid diagram included
• Written explanation below diagram
• Key files table for contributors
• Contributor-focused and concise

I'd like to work on this — contributing under GSSoC'26

[github-actions]

👋 Thanks for opening an issue, @paruuup!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[paruuup]

Hey @magic-peach! I've raised this issue and I'd love to work on it. Could you please assign it to me?

[Kokila-chandrakar]

/assign

[github-actions]

Hey @Kokila-chandrakar, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[Kokila-chandrakar]

Hi @magic-peach ,

I currently have 5 assigned issues, and PRs for them have already been submitted. They are awaiting review and feedback from the maintainers.

Could you please review them when possible, or let me know if I should unassign any issue while waiting?

and please /assign this issue.

Thank you!

[github-actions]

Hey @Kokila-chandrakar, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[Kokila-chandrakar]

/assign

[github-actions]

Hey @Kokila-chandrakar, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[JalkamTanusree16]

Hi, @magic-peach, I would like to work on this issue as a GSSoC'26 contributor.

Understanding the Problem
The README has an Architecture section that directly links to docs/ARCHITECTURE.md
That file does not exist anywhere in the repository
Any new contributor who follows that link hits a dead end
For a project like Reframe with a non-obvious architecture (client-side WASM, no backend, static export), this missing file is a real blocker for onboarding

What I Will Create
docs/ARCHITECTURE.md — a new file covering everything in the acceptance criteria

Contents of the File
Mermaid diagram showing the full system flow — Next.js 15 frontend, FFmpeg.wasm pipeline, static export to out/, deployment to Vercel/Netlify, and COOP/COEP headers for SharedArrayBuffer support
Data flow diagram — video upload → edit recipe built from controls → FFmpeg.wasm processes locally → file downloads to user
Written explanation of each layer (UI, processing, export) in plain contributor-friendly language
Key files table mapping VideoEditor.tsx, ffmpeg.ts, presets.ts, types.ts to their purpose so new contributors know where to look first
Browser compatibility and WASM requirements section

Why Assign This to Me
I have read the CONTRIBUTING.md guide
I have studied the repo structure and understand that Reframe is fully static with all processing happening client-side via FFmpeg.wasm
The file I write will be accurate and specific to this project, not a generic template