ProfessionalClivie Tech · 2023 – 2024
AI video editor
An AI-assisted video editor with uploads, transcripts, captions and overlays, with trimming and encoding running in the browser through FFmpeg.wasm.
- Trimming & encoding
- In-browser
The problem
Creators needed to edit transcripts, captions and overlays on AI-processed videos without waiting for a server round-trip on every change.
My role
Frontend engineer on the editor and the authentication and account flows.
Main workflows
- Uploads, transcripts, captions and image overlays
- Browser-based trimming and encoding
- Google OAuth and account management
Technical decisions
- Ran trimming and encoding client-side with FFmpeg.wasm and Vidstack playback.
- Synchronized editing events with the backend over Socket.io.
- Introduced Zustand for new editor features while keeping existing Redux Toolkit state, instead of a risky full rewrite.
- Standardized forms on React Hook Form and Yup.
Results
- Trimming and encoding run in the browser, and edits stay in sync with the backend in real time.
Stack
- React
- Ant Design
- FFmpeg.wasm
- Vidstack
- Socket.io
- Zustand
- Redux Toolkit
- React Hook Form
- Yup
Limits & context
Employer product: no source code or screenshots are published.
“I am writing to wholeheartedly recommend Mohamad Nour Shahin for any position pertaining to software development, particularly in the realm of frontend development. As founder at CLIVIE, I have had the pleasure of working closely with Mohamad throughout his employment from May 2023 to the present day.”
Ali MohammadCo-founder, ClivieAll recommendations