Senior React Engineer

5 - 10 years

0 Lacs

Posted:1 week ago| Platform: Naukri logo

Apply

Work Mode

Remote

Job Type

Full Time

Job Description

Job Title: Senior React/Next.js Engineer (FFmpeg-wasm & Stripe)

Location: Remote (India or China Preferred)

Contract: 4 to 6 weeks, Full-Time Contract

Compensation: $5,000 USD (Paid weekly upon milestone approval)

Project Overview

www.studionova.ai

not

  1. Client-Side Video Export:

    Using

    $FFmpeg-wasm$

    for in-browser MP4 export.
  2. Subscription Auth:

    Using

    $Stripe API$

    for recurring monthly subscriptions.
  3. "Database-less" Persistence:

    Using

    $Azure Blob Storage$

    as a JSON key-value store for all user data and projects.

We are looking for a true senior-level specialist who is comfortable with a hands-on, high-communication environment. You will work directly with me, and I will review every commit and PR for rapid, daily iteration. This is a direct-hire contract for an individual developer. No agencies, please.

Non-Negotiable: The 3 Core Skill Pillars

Candidates will only be considered if they have proven, hands-on experience in all three of the following areas:

  1. $FFmpeg-wasm$ & Media APIs:

    You must have experience shipping projects that use $FFmpeg-wasm$ or $MediaRecorder$ APIs for complex, in-browser video manipulation. You will be responsible for exporting a 10-minute timeline (composed of 120+ clips) into a single MP4, and you must be able to manage browser memory and performance to ensure a smooth, crash-free export.
  2. $Stripe$ Recurring Subscriptions:

    You need expert-level $Stripe$ integration experience, specifically for

    recurring subscriptions

    ($29.99/month). This must include building the Next.js API routes to securely handle $Stripe Webhooks$ for the full subscription lifecycle (e.g., subscription.active, subscription.canceled) to manage user access.
  3. $Azure Blob Storage$ as a Database:

    You must be proficient with the $Azure SDK$ and comfortable using $Azure Blob Storage$ as the application's primary "database-less" persistence layer. You will design and implement the JSON schemas for user profiles (email, hashed password, Stripe Customer ID), project drafts (timeline state), and the user media library.

Required Technical Skills & Stack

  • Mandatory:

    You

    must have shipped a web-based timeline or media editor before

    .
  • Core Stack:

    Expert-level fluency in

    React (v18)

    ,

    Next.js (v14)

    , and

    TypeScript (strict mode)

    .
  • State Management:

    Deep experience with

    Zustand (v5)

    . You will be extending OpenCut's existing stores, not building from scratch.
  • UI/UX:

    Proficiency with

    react-beautiful-dnd

    for drag-and-drop timeline manipulation.
  • Environment:

    Familiarity with

    Bun

    as the package manager (per the OpenCut fork).

Key Responsibilities & 6-Week Milestone Plan

You will be responsible for delivering the following milestones. This updated 6-week timeline provides adequate time for high-quality, senior-level work.

  • Week 1: Core Timeline Integration

    • Fork the OpenCut repo and set up the Next.js environment.
    • Implement the core timeline logic: modify the OpenCut timeline to start with a centered "Create Scene" button.
    • Integrate the movie_maker logic cleanly into OpenCut's $Zustand$ store and $Canvas$ renderer (per the PRD, "no DOM hacks, no ref-scrolling voodoo").
  • Week 2: SceneBuilder Modal & Media Logic

    • Build the complete "SceneBuilder" modal (prompt field, upload, library picker).
    • Mock the AI API call (a 5-second stub is fine) and ensure the new 5-second clips are added to the timeline tracks.
    • Implement "Extend Scene" and "New Scene" logic.
  • Week 3: Authentication & $Stripe$ Subscriptions

    • Build the complete auth flow: Sign Up, Login, and Password Reset pages.
    • Integrate $Stripe Elements$ for secure card input and the $Stripe API$ for the

      $29.99/month recurring subscription

      .
    • Build the Next.js API routes and webhooks to manage user subscription status (active, canceled, etc.) and protect the application.
  • Week 4: Persistence & User Dashboard

    • Implement the "database-less" persistence layer using $Azure Blob Storage$.
    • Build the user dashboard (project grid, "New Project" button) that loads project drafts from Azure.
    • Implement "Save Draft" (both 30-second auto-save and manual) and "Load Draft" functionality, serializing the $Zustand$ timeline state to and from JSON blobs.
  • Week 5: $FFmpeg-wasm$ Export

    • Integrate $FFmpeg-wasm$ to handle the client-side MP4 export.
    • This is the focus of the week: ensure the exporter can correctly compile all timeline clips (up to 10 minutes) into a single, downloadable MP4 with no performance crashes.
  • Week 6: Final Integration, Stress Testing & Deployment

    • Integrate all features end-to-end (Auth -> Dashboard -> Editor -> Save/Load -> Export).
    • Conduct the 10-minute/120-clip stress test to ensure "no lag, no bugs".
    • Fix all performance bottlenecks and bugs, and deploy the final application to the live URL.

How to Apply (Mandatory)

hire@studionova.ai

must

specifically highlighting the most complex web timeline or media editor you have built.

2) A brief, written answer to these two screening questions:

$FFmpeg-wasm$

recurring subscription system

3) Confirmation of your availability for a 6-week, full-time contract.

Applications that do not include specific answers to these questions will be ignored. We look forward to seeing your work.

Role & responsibilities

  • Proven experience shipping a complex web-based timeline or media editor.
  • Expert-level fluency in React (v18), Next.js (v14), and TypeScript (strict mode).1
  • Demonstrable, hands-on experience with client-side video manipulation using

    $FFmpeg-wasm$

    or advanced $MediaRecorder$ APIs.1
  • Expert-level experience integrating

    $Stripe$ for recurring subscriptions

    , including building and managing $Stripe Webhooks$ for the full subscription lifecycle.1
  • Proficiency with the

    $Azure SDK$

    and proven experience using

    $Azure Blob Storage$

    as a primary, JSON-based persistence layer (database-less architecture).1
  • Deep experience with

    Zustand (v5)

    state management, specifically with integrating new logic into large, existing stores

Preferred candidate profile

  • Familiarity with

    react-beautiful-dnd

    for complex drag-and-drop interfaces.
  • Familiarity with

    Bun

    as a package manager and runtime.
  • Experience with Docker and Docker Compose for managing local development environments.
  • Specific experience with FFmpeg for audio merging (lip-sync, sound effects) in the browser.
  • Previous experience working in a high-communication environment with daily PR/commit reviews.

Mock Interview

Practice Video Interview with JobPe AI

Start TypeScript Interview
cta

Start Your Job Search Today

Browse through a variety of job opportunities tailored to your skills and preferences. Filter by location, experience, salary, and more to find your perfect fit.

Job Application AI Bot

Job Application AI Bot

Apply to 20+ Portals in one click

Download Now

Download the Mobile App

Instantly access job listings, apply easily, and track applications.

coding practice

Enhance Your Skills

Practice coding challenges to boost your skills

Start Practicing Now

RecommendedJobs for You

Hyderabad, Telangana, India

Hyderabad, Telangana, India

Noida, Uttar Pradesh, India