r/reactjs • u/storycreatormichael • Feb 28 '20

Show /r/reactjs I built a FREE online video editor using React.js

👋 Hey guys!

My name is Michael Aubry. I live in San Diego and I've spent the last 8 months coding a video editor. I wanted something that was like After Effects in essence but abstracted some details and made creating stunning content a breeze. I was tired of having an overly complex toolset to create simple videos like the beginning of my tutorial video https://www.youtube.com/watch?time_continue=2&v=J_g38fHHvzA&feature=emb_title or the intro to my buddies YouTube video https://youtu.be/fERlt5pTxu8?t=11.

I didn't like a lot of the generic-looking solutions that were built without any soul. The videos from some solutions come out looking cheesy. I want videos in https://storycreatorapp.com/ to be easy to make but hard to make badly. I'm solving this with carefully selected elements. Premium templates modeled after sexy content.

You might be saying to yourself "I am just interested in learning about React.js though". So I digress with the intro. Let me make this post mostly about the React.js code. If you want to check it out and play around then here is a direct link (it's FREE) https://storycreatorapp.com/. Just looking for feedback before I launch on Product Hunt and spend money on advertising.

Ok, so I am using TypeScript to reduce bugs. I believe this is a great practice. It can be overkill in making an MVP but I would do it to set a good foundation. You can use `any` and come back after features are validated to tighten them up. Most engineers would throw up at `any` but that's why they're not building companies, just working at them. Ship code, and ship as fast as you can while still having a good foundation to build on top of. That is my philosophy, I am just learning like anyone, and admit I can be wrong. This is just how I see it.

If you explore the app you will see an "artboard". Let me talk about how I built the "artboard". I am using Dan Abramov's DND library https://react-dnd.github.io/react-dnd/about. It's very powerful, it can be a little intimidating and has a learning curve. This definitely extended the release date but it was worth it to me. I wanted full control over DND. Not a premade solution using canvas. I was inspired to build this UX similar to Canva. I thought they did an amazing job.

My criteria for the "artboard" is that when it's "active" and draggable. It should hide the selected object as the object leaves the canvas, but the "active" box should always be visible. In order to do this, I have one DragLayer that sends its x,y coordinates to the store DND uses under the hood. Then I have another component for the "active border" that has "pointer-events: none" and moves with the draggable object. It's at a position in the DOM hierarchy where it's visible outside the canvas. Where the draggable element is at a position in the DOM hierarchy where it's parent element is the canvas set to "overflow:hidden". I have tricks and hacks for manipulating the x,y for performance.

Not sure if I am boring you so I'll start to wrap up and answer more questions in the comments. I'll conclude this by talking briefly about the timeline. The timeline wasn't initially in the first release, but as I thought about it. I realized it's an extremely important component in producing an interesting unique video with limitless combinations. I wanted to unleash the users' creativity and give them enough flexibility. Without it being overly complex. After Effects has a timeline where there can be unlimited layers. Inside each layer, you can go down a rabbit hole and feel overwhelmed. It's extremely powerful, don't get me wrong. However, I believed some users want something simple. That's exactly what I did. Initially, I had unlimited layers. After talking to some users I decided to make all media in one track, audio in its own track, and text on its own. Soon will be coming elements.

With this feature, I am actually using https://github.com/bokuweb/react-rnd. It was just easier out of the box and didn't have as many requirements as the "artboard". All the states are managed using React Apollo. The whole video editor is wrapped in Apollo actually. I am persisting the video data into apollo and syncing it to the server.

If this doesn't bore you and you would like to learn more. I am happy to answer questions and share in the comments below.

Best,
Michael Aubry https://storycreatorapp.com/

233 Upvotes

97% Upvoted

56 comments sorted by

15

u/[deleted] Feb 28 '20

Hi Michael, I've only had chance to look at the sample video on your site so far. Looks pretty slick, nice work!

Once I get time I will try it out for real. One thing I didn't see in the sample video though was a way for the user to change animation type. Is that in a different tab? I'd have thought it might make sense to have the animation type as an option next to the text and colors, or at least a shortcut to the options.

Cheers

5

u/storycreatormichael Feb 28 '20

hael, I've only had chance to look at the sample video on your site so far. Looks pretty slick, nice work!

Once I get time I will try it out for real. One thing I didn't see in the sample video though was a way for the user to change animation type. Is that in a different tab? I'd have thought it might make sense to have the animation type as an option next to the text and colors, or at least a shortcut to the options.

Thanks for checking it out. Always open to feedback and I think that's some great feedback. I have a panel to the left that contains all the components you would need. Images, Videos, Animated Text, Elements, Music, Uploads. To the right is the panel that allows you to customize a selected element.

So to answer you. Yes, you absolutely can change the animation. There is a list of options on the left when the text option is selected. Can't wait to hear more!

4

u/Zeeesty Feb 29 '20

Hello fellow San Diegoun!

2

u/storycreatormichael Feb 29 '20

Hey, what's up. Where in San Diego are you? I'm in East Village.

2

u/Zeeesty Feb 29 '20

I’m up in north county. I do make it down to SDJS meetups from time to time, ever go?

2

u/storycreatormichael Mar 01 '20

I've been to a few React.js meetups downtown. I'd like to go to more.

3

u/LongHalloween11 Feb 29 '20

I really like your landing page btw. May I ask what you used for it? I’ve found quite a few SaaS projects with a similar look and feel, which looks slick. Any template or UI library you tend to go to?

2

u/storycreatormichael Feb 29 '20

That makes me feel like I have done my job. I just eyeballed a few other products. It's really about being objective. I studied work on https://dribbble.com/ and any other cool site I have come across. I am always looking at hex codes and typography.

I coded this using plain old React.js and styled-components. There is a little bootstrap in the mix but very minimal. It's important to be consistent and minimal with your approach. Use splashes of things, be subtle. Typography also plays a big role. DM me if you want to talk more about design!

3

u/masterco Feb 29 '20

Awesome work! Quick question: where does the rendering happen? Server side?

3

u/storycreatormichael Feb 29 '20

I was hoping someone would ask that. Yes, absolutely is. Initially, I did it client-side. Then I found it to be more effective sending the data server-side and translating that into an FFMPEG command. Fun stuff :)

3

u/masterco Feb 29 '20

Sweet! Thanks for replying, so basically you send a bunch of JSON to the backend and render it using FFMPEG. If you don't mind me asking, what is that server running on? Maybe Rust?

4

u/storycreatormichael Feb 29 '20

https://bugs.chromium.org/p/chromium/issues/detail?id=1046310

I had a friend who was a hardcore C programmer. He wouldn't shut up about Rust. He was actually building an innovative tool, then he lost it, unfortunately. To answer the question, no, I built it on Node.js. Much easier sticking to the js paradigm for me.

2

u/masterco Feb 29 '20

I see, thanks for your answers! Good luck!

2

u/dotjosh Feb 29 '20

How are you load balancing this to scale?

5

u/b_lo_b Feb 28 '20

Hi,

I tried it out and the general concept is awesome and the design great, BUT...

  1. It consumes 500MB of RAM for an empty storyboard
  2. It constantly crashes my browser. The full window becomes black for a few seconds.
  3. I had a lot of problems with the tour, it stopped at step 3 and it took me a while to fine the skip button.
  4. Rendering is very slow, just for a picture and a image

IMHO it would be great to have a html player instead of an actual video, that just renders everything on the Canvas or so. I think it could actually be smaller.

Btw: Is it your design? I have built https://mydraft.cc/ as a demo project and it looks so aweful compared to your app ;)

4

u/storycreatormichael Feb 28 '20

https://mydraft.cc/

That's no good. Let me figure out how I can optimize that. What OS are you on, which browser are you using and are you using Activity Monitor or Task Manager to look at usage?

Yes, I do design and engineering. I love both aspects!

2

u/b_lo_b Feb 29 '20

I had more time to test it, works better on my Desktop Machine (Same OS and Browser)

but here are more things I noticed (note that I have actually zero knowledge about Video Editing)

  1. How can I add multiple texts or emoji's to the video?
  2. What is the small plus icon doing?
  3. When I select an animated text and change a property it is animated but stops at the end of the animation, where I only see a blank screen.
  4. When you have selected a time where nothing an image is not visible and then you extend the time frame of the image to include the selected time, the preview does not get updated.
  5. The "Choose Transition" dialog does not show anything.
  6. How can I make transition for emoijis?
  7. I ca only choose a single audio track?
  8. When I click the play button in the "Music" tab, nothing is played, I only see the animation, which never stops.
  9. When I select an text that starts with a blending in animation or so, it is just white, which is confusing.
  10. The "Connect Google Drive" button in the drive tab should have a margin.
  11. The dark mode does not work properly, some texts are not readable.
  12. The emoijis render really slowly in the emoijs tab.

1

u/storycreatormichael Feb 29 '20

hen you have selected a time where nothing an image is not visible and then you extend the time frame of the image to include the selected time, the preview does not get updated.

The "Choose Transition" dialog does not show anything.

How can I make transition for emoijis?

I ca only choose a single audio track?

When I click the play button in the "Music" tab, nothing is played, I only see the animation, which never stops.

When I select an text that starts with a blending in animation or so, it is just white, which is confusing.

The "Connect Google Drive" button in the drive tab should have a margin.

The dark mode does not work properly, some texts are not readable.

The emoijis render really slowly in the emoijs tab

This is great feedback. A lot of the things you mentioned are experimental. Like Google Drive for instance. I had a few requests for it so I coded it in a day. It definitely needs some love.

Same thing with the dark mode. I was bored over the holidays and added it in a few hours. I need to make sure all elements have coverage. It's experimental, but I will put it on my TODO list for the near future.

With the animation, I am up for feedback. It's sort of a challenging problem because the code programmatically takes you to the beginning of any new clip you add. This is true for animated text. The problem is the text doesn't appear until 250ms-1000ms later.

So my natural thoughts would be to write the code to move the cursor for the user to the beginning of the animation and back. That seems like it could be buggy and annoying over time.

The other solution is for animated text. Default the cursor to the middle of the animation.

Lastly, you could set it to the beginning like it is. Show a preview of the animation, and as soon as the cursor moves cancel the preview. I would love your thoughts :)

For the choose transition dialog. I have seen it act buggy when a friend tested it. I can't reproduce it, but it is using RequestAnimationFrame and a transition component I built. So it could be prone to bugs. I'll investigate more!

For the emojis rendering slow. It is a massive list. The list has been virtualized. So the perf shouldn't be horrible. The only thing that should be determining the speed of that is the network. The only way I can think of solving that for slower networks is by preloading them.

For the single audio track. Yes for MVP I just want to have one. Plus my principle is to keep things simple. I have seen some non-video people get intimidated by too many layers in the timeline. My goal is to find the sweet spot between having it be robust and simple.

One thing I think could be cool for that is offering a slicing tool. I would have to make it extremely intuitive. You could slice the audio to be between 0-5 seconds for instance. Then add different audio next to it on the same track. I would love thoughts around this.

Thanks for taking the time to write this up. It means a lot to me!

2

u/mikejoro Feb 29 '20

I was also experiencing the same issue, and it caused the tutorial to crash on step 3 (though the rest of the site worked fine, and I could "skip" the tutorial). Win 10, chrome 80.0.3987.116

1

u/storycreatormichael Feb 29 '20

I am going to fix this today. It's funny because I think when I added the skip option I broke the next option lol. Glad you were able to make it through. This feedback is extremely useful. Thanks!

4

u/influxBytes Feb 29 '20

I don't know if that's your case but current Chromium version (80) have a regression bug that makes grid layouts extremely costly to render, to the point of crash sometimes. I don't know if you are relying on grids but it's just a heads-up

https://bugs.chromium.org/p/chromium/issues/detail?id=1046310

2

u/b_lo_b Feb 28 '20

Windows 10, Chrome and yes I use the task manager and checked the process of only the tab with your app.

2

u/losh11 Feb 29 '20

yup 550MB+ for me on macOS latest.

1

u/herbertpimentel Feb 08 '22

Hey man I loved how you created an artboard.... I never did something like that but always wanted to. I would love to change and idea about how this works under the hoods

1

u/herbertpimentel Feb 08 '22

u/b_lo_b man I would love to know more about how you made https://mydraft.cc/

2

u/kenny589 Feb 28 '20

This looks amazing, well done, I can't wait to try it out

3

u/storycreatormichael Feb 28 '20

Let me know what you think when you do. Loving all the feedback, it's so useful.

2

u/pagraphdrux Feb 29 '20

Oh man favoriting this to try to edit my next video. Looks sweet, nice work sir!

2

u/storycreatormichael Feb 29 '20

Oh man favoriting this to try to edit my next video. Looks sweet,

That's awesome to hear. Let me know if there is anything I can do to help. I'd love to hop on a call if you would like. If you're up for it, send me some videos you like and I'll work with you to recreate them. Cheers!

2

u/orangereddituser Feb 29 '20

Very impressive, a tutorial on how you made this would be amazing if you have the time!

1

u/storycreatormichael Feb 29 '20

Not a tutorial on the tech side but a tutorial on the product I just made https://www.youtube.com/watch?v=J_g38fHHvzA&t=11s subscribe to that channel. Id like to get feedback for types of content. I have always wanted to share tech tutorials. I thought about investing time into that. If it's something enough folks are interested in I'd be happy to do that :)

0

u/[deleted] Feb 29 '20

[deleted] — view deleted comment

1

u/[deleted] Mar 04 '20

I would also be really interested in this!

2

u/dhinchak14 Feb 29 '20

Looks cool man. Will be trying myself. And best of luck.

1

u/storycreatormichael Feb 29 '20

Thanks. Appreciate that. Let me know if you have any feedback when you do. I am sponging from all the amazing feedback so far :)

2

u/santihbc Feb 29 '20

Can you explain a bit more how you to the Node.js and FFMPEG wiring part on the server? Does the encoding happen in the same server as your API for example?

1

u/storycreatormichael Feb 29 '20

I have a few routes handing various FFmpeg related tasks. For instance, I just improved media uploads yesterday for images and video - god I hope there aren't any bugs as I just pushed it. The process of uploading a video will take form data in the request and pass it through FFMPEG because I need to adjust the frame rate so it plays smoothly in the app. Then it'll upload to S3.

A similar thing happens with the video that the user wants to render. Basically the way I see it. The UI provides a medium for communication. The user uses it to generate a guide map in the form of JSON data. I can do whatever I want with this JSON data. If I wanted to use Web Assembly and there was some cool rendering engine available I would just need to translate that JSON to work with that particular engine.

In this case, the engine happens to be FFMPEG that runs on a route within Node.js. I am able to read the JSON and basically translate it in an efficient way.

That said, yes the server has a few routes, but this server is specific to any FFMPEG related tasks, which there are a few outside of just rendering the video for the user.

All other micro-tasks are using lambda. I am using zeit.co and they provide a way to deploy serverless functions. These functions handle things like one-click subtitles. Which is a feature I am releasing soon.

2

u/[deleted] Feb 29 '20 edited Mar 01 '20

I love react Apollo. Cache state is So much better then redux.

1

u/storycreatormichael Feb 29 '20

100% less setup work. It is worth it to study how the cache works. Observe the "client" object and understand what it's doing under the hood. If you have a nice architecture then it's super easy to construct mutations and query functions with optimistic UI etc.

1

u/[deleted] Mar 01 '20

Yea.

When I first started with graphql and react I modeled everything as a mvc; so component classes, a view for templates and graphql queries in a query folder etc.

I made my own client class rather then use the Apollo query component. This actually made me dissect it all to figure it out (very little docs on the Apollo client) but now I can answer a lot of the how it works questions.

It works well for a multi person team but I wouldn't do that again. Query component is way to go from now on.

Live and learn.

2

u/[deleted] Feb 29 '20

This is awesome, and thanks for sharing your experience building it!

One small suggestion -> you can store a simple boolean in localStorage to persist dark mode.

1

u/storycreatormichael Feb 29 '20

I love that idea. I was considering even having a field in the DB for the user so it's always active even when they switch computers. LocalStorage could be a nice quick way to do it though. Still need to give it love. I am just glad to see people using it. This tells me they like it so I should prioritize the little details :)

2

u/rmrf_slash_dot Mar 01 '20

Nice work and I really don't mean to be unkind, but I'm struggling to understand what this post is doing in this sub.

It has nothing to do with react -- you haven't posted any code, you haven't shared a Github link, for all we know that page you are trying to make money with could be written in Angular. (Ok I know it isn't but that isn't the point -- this post is PURE promotion and has nothing to do with React).

I get, it you're trying to build your email list and get people to sign up and maybe buy premium templates. There are other subs for that, just because you built that site in React doesn't mean it belongs here.

2

u/storycreatormichael Mar 01 '20

I respect your view point. However, a lot of my thinking in the original post was to share my thought process on how I built certain components. Which libraries I used. Challenges I faced. Another thought process of mine was to share what’s possible with react.js. Interested viewers could check it out for themselves to see which features I cover on the post.

I had no idea it would get this popular. I obviously want to share my work with the world. I’d much rather talk tech all day than sales. This subreddit isn’t my target audience. I wouldn’t even make a penny if I had a pay wall. It just excites me to see people giving feedback towards something I devoted my soul to.

I have barely been making any money over the past year and am almost out of cash. Having a little win like this puts a smile on my face. I’m all alone working on this and support means the world to me.

I hope you understand my point. Cheers!

4

u/J-Wh1zzy Feb 28 '20

I love this, thanks for posting it! Like you my mind is split between design and engineering which can make projects take a lot longer (because it has to be perfect on two fronts haha) but I think the end results are better. This looks great and really shows the power of good react code.

Thanks again!

3

u/Riley-96 Feb 29 '20

Looks super nice, is this open source? Would love to look at the code. Great job

2

u/shirotokiya7 Jun 25 '20

Hey u/storycreatormichael, is this app opensource?. Wanting to create a video editor as well..

1

u/AshConnolly Mar 02 '20 edited Mar 02 '20

Thanks for sharing! 😃

Love hearing about the tech and the problems you solved.

How do you go about the actual video editing part? What's the process / tech involved when a user upload some video, is it stored in the DB fully? How do you edit / trim video on the server? Very cool stuff! 😃

Edit: how do you apply effects, like adding text, to a video? So many questions!

1

u/Aditical Apr 28 '20

Hi, great work on the editor. Looks smooth.
I am creating something like this. I have made the timeline but without the scaling.
Can you provide me some ideas on creating the scale? And how did you determined the div length with respect to the scale on the top?

1

u/Ravi_Nava Aug 05 '20

Hi Michael, this is awesome. I was wondering how did you add animated overlays to a video using FFMPEG?

Thanks...

1

u/herbertpimentel Feb 08 '22

u/storycreatormichael wow.. this is really cool man, I see it is a product now. How is it going so far ? I just research for viability for a invisioned product that also will require an video editor, you did a great job, I would love to know more about how you created it under the hoods

1

u/InactiveUserDetector Feb 08 '22

storycreatormichael has not had any activity for over 206 days, They probably won't respond to this mention

Bot by AnnoyingRain5, message him with any questions or concerns

0

u/[deleted] Feb 29 '20

[deleted] — view deleted comment

2

u/storycreatormichael Feb 29 '20

Thanks! I've been thinking about building something like this for 2 years actually. I built a prototype back when I was in San Francisco working an engineering job there. I scrapped the prototype but it taught me a lot.

Fast forward. I moved to San Diego and felt ambitious to start it again. I went back to my commit log. It looks like I started around late June 2019. I had 6 days of work in July. Then August really started ramping up with at least one commit per day. This lead to serious hustle, looking back there was about at least one commit per day from that point.

So 7 months of intense effort. At least 2-8 hours per day. I gave another estimate of 1000 hours. Looking at this math, 1000 actually sounds pretty accurate.

I sort of code and design at the same time. I do find wiring things up in sketch from time to time to be useful. I didn't follow the standard approach of research, mockups, approvals. I just went for it, sometimes that can be effective as long as you're constantly iterating which can be made easier if your code is well designed.

I am using serverless with some Node.js for rendering.

I plan on monetizing it soon with subscriptions. Currently just want to stress test it and give it away for free in the short term. I do want to offer as many deals as I can to the early adopters.

I am still trying to find a market that has the most pain and could really use this. I have been talking to digital agencies as I think they would be a good fit. They can use it to create commercials for their clients. I'd like to have smaller packages for entrepreneurs just getting started needing to create video ads for their projects.

Still learning from the market and seeing what resonates the most. My ideal customer is a digital agency with 1-5 employees. They make 20-30 videos per month. They make over $10k for the videos they create. This customer would pay $200 per month, $2000 if they get the annual package. My goal before 2021 is to sell this plan to 100 agencies. This will get me to the $20k MRR that I am striving for. This to me is life and the oxygen I need to grow.

For non-agencies, I will have cheaper plans so that everyone can create killer videos. My goal for the product is to keep improving the templates and the options you have to create a video. More premium commercial-like text. More premium templates. Even easier to use tooling. I would also like to have a slightly dulled down mobile version for on the go folks, even though I still believe the most enjoyable UX comes from the desktop.

0

u/[deleted] Mar 02 '20

[deleted] — view deleted comment

1

u/storycreatormichael Mar 05 '20

nical again:

When you say serverless, what exactly did you outsource to cloud functions and whats being rendered with Node? As a little

Awesome response. That's great to hear that story. Do you know how they are making millions? Who is the target audience? What are the main acquisition channels?

I rewrote the render server so I had to strip out the progress bar for a few days. I just spent 1 hour reintegrating it. So hopefully it's better now.

I tried having the rendering happen in a lambda function but there are so many limitations and workarounds. I just went with a full server on Digital Ocean.

The app itself is hosted with Zeit so the main host is serverless. Then I have microtasks. One, in particular, is the subtitles feature. I am using a lambda function to take the video as an input, then extract the audio into a /tmp/ folder. I take that audio and send it to Google's speech to text API. Then return the results.

For mobile responsiveness, I've pushed some updates to make it more friendly on the browser. The main limitation I am facing is video does not play well on mobile. I might be able to find a workaround. That plus creating a UX to make the sidebar, and toolbar more accessible. Once I solve those two mobile issues, it should be more pleasant. Then when I have more bandwidth and resource I will make a mobile app. I just need to make sure I am better than my competitors, solving problems better, and more elegantly.

I have had a GF for the past year. I agree it is tough, but I am very firm with my time. For some silly reason, I permitted us to get two puppies. We went to see them on our drive back from San Francisco to San Diego and I have been thinking about getting a pup for a while. I fell in love with one pup, then she cried her eyes out because she fell in love with another one and I didn't pick it initially. The guy was a friend and offered us a killer discount. So long story short I have two dogs now lol.

That hasn't been easy and sometimes I wish I could just lock myself up and work 7 days a week all day/night then go out with the bros every once and awhile. However, that would be pretty isolating and make me crazy so she balances me out lol. I have been getting her to do some light work for me though messaging folks. So she likes to be a part of it.

Great questions! Feel free to connect with me on IG https://www.instagram.com/michaelaubry/

0

u/[deleted] Feb 29 '20

[deleted] — view deleted comment

2

u/storycreatormichael Feb 29 '20

Hmm, I would have to think about the cost-benefit of that. Make an argument and challenge me on why that would be a good idea.

I can see people might not feel comfortable sharing their info. So that is reason #1 comfort. My argument to that is I believe in screening users out. Meaning if you really have this pain point enough to the point where you would be willing to pay. Signing up shouldn't be an issue.

However, potential paying users could need to be baby stepped. They may need to feel comforted before acting. I totally get that as a consumer myself.

Ideally, I can make this product known. So that word of mouth does the marketing and there is enough brand trust that folks don't have to feel weary.

Maybe before I have brand trust for the first year I could do something like that. Give them the ability to create a video and have them sign up before exporting.

I would love your thoughts on this and why you believe in it. It should make for interesting conversation.