# Motion Bro plugin front end @ Motion Bro

[Full CV index — Tony Miasoedov](https://cv.tony-m.dev/)

- Candidate: Tony Miasoedov, Senior Software Engineer
- Company: Motion Bro
- Period: 2022
- Role: Front-end Developer
- Team: Worked directly with the owner; team of a front-end developer (me), a backend developer and an Adobe plugin developer
- Main result: Designed and built the React front end of Motion Bro, a Premiere Pro and After Effects plugin with a built-in effects marketplace; 1,000+ autoplay videos at once without lag, persistent caching over a slow shop API, and instant search across all packs.

## Context

Motion Bro is a plugin for Adobe Premiere Pro and Adobe After Effects. It adds a virtual marketplace where different authors sell music, presets and video effects.

Users can buy any preset pack in the built-in shop or activate packs bought on Envato. Among the plugin's key features: a separate sound pack that changes the sounds of all compatible videos, and searching for an effect across all installed packs.

Detailed description of the features with demo videos: [Motion Bro project overview](https://motion-bro-project.webflow.io/).

## What I did

I was responsible for:
- System design of the front end.
- The front-end architecture and structure.
- Front-end technology choice (React).
- UI kit development.
- Implementation of all elements.

Key challenges:
- **Performance.** 1,000+ autoplay videos can be shown at once. Videos can have any aspect ratio, so CSS `aspect-ratio` or fixed proportions can't be used. Users can change video size in the settings, and all 1,000 videos must shrink or grow without lag. Users can also change playback speed.
- **Caching.** The client's shop runs on WordPress + WooCommerce, and the plugin reaches it via an API that takes 3–4 seconds per request. I implemented caching that persists even after the plugin is reloaded.
- **Search across all packs.** Users can search for any effect in all packs at once, across a huge number of deeply nested elements. Settings "bubble up": if a video has no settings, the category's apply; if the category has none, the parent category's; then the pack's. All of this must be resolved and shown instantly.

## Results

- 1,000+ autoplay videos of any aspect ratio display at once and resize without lag.
- The shop's 3–4 second API responses are hidden behind a cache that survives plugin reloads.
- Search and inherited settings across all installed packs resolve instantly.

## Stack & skills

- **React**: Chose React and built the plugin's whole front end with it.
- **Software architecture**: Designed the system, architecture and structure of the plugin front end.
- **UI kit**: Built the plugin's UI kit.
- **Performance optimization**: Showed 1,000+ autoplay videos of any aspect ratio at once, resizable without lag.
- **Caching**: Built a cache over a 3–4 s shop API that persists across plugin reloads.
- **Search**: Built instant search across deeply nested effects in all installed packs.
- **API integrations**: Connected the plugin to the client's WordPress + WooCommerce shop via API.
- **Adobe plugins**: Built the front end of a Premiere Pro and After Effects plugin.
- **Communication**: Worked directly with the product owner.

[Full CV index — Tony Miasoedov](https://cv.tony-m.dev/)