Motion Bro plugin front end @ Motion Bro
Full CV index — Tony Miasoedov
- 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.
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-ratioor 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.