I have no words to express how proud I am and I can’t describe how happy I am each time I watch your videos… You have such an incredible energy and I can’t imagine you are not at one million yet… You deserve more than that but I hope you get there in the next one and a half year from now 🎉🎉🎉🎉
I just want to say. I'll be posting my SaaS soon. But because of Josh and his ability to clearly express information I have gotten a solid understanding of how I can go about building my application. To you Josh, when my product is done. I hope you can view it. It will be things I have learned throughout your videos combined into my own application.
Love this video. As someone who came to learn coding from the traditional IT/ Infra side of things I have always wondered what all these apps would look like under production loads. No many people make videos showing this side of things and I would argue that building the app is less then half the battle. Hosting, support, shipping new features and keeping costs down is not something that takes care of its self. Great work Josh!
Hey Josh, so gut zu sehen, dass Du Deine initiale Idee zu einem echten SaaS-Produkt entwicklen konntest. Ich drücke Dir ganz fest die Daumen. Ich habe mich neulich schon gewundert, woher Du diese coolen Code-Animationen in den Videos hergezaubert hast. Jetzt weiß ich es 😃. Danke, dass Du Deine bisherige Reise schon bis hier her mit uns geteilt hast. Große Klasse! Ich freue ich total für Dich (und uns). Marco😃
Could you share more about the video rendering engine you wrote to process the slides? Is it by using a headless browser, taking screenshots and passing it to ffmpeg?
That was the idea at first, but turns out the chrome protocol does not support stable fps. TDLR: You have to acknowledge each frame, which takes time, and you dont get the next frame until you've acked the previous one, leading to a lot of frames dropping and a pretty unstable 60fps video. So I rewrote the entire thing using canvas, which lets you specify exactly how many FPS you want spread over how many seconds, and am really happy with that implementation
Overall a good thing, cool idea. although a few comments: - The site seams unusable in firefox, you can't create a new line in firefox it just bugs out, chromium works. - I think the tab character should insert a tab rather then to execute the default behaviour which is focusing the next element(if the editor is focused). - Maybe add highlighting for other languages: Java, c, c++, python, c#, php, kotlin, go, rust, sql and ruby are ofc not all but maybe a good start.
Yep, also it would be nice to have an actual text editor like Monaco so its easier to make changes, the current editor is quite buggy and also unusable on Firefox. Monaco would automatically handle all the other languages too!
This is a very interesting project. I am interested in understanding how you planned and coded this. Might not even be this specific project but something that is similar
Any reasons why you didn't make it client-side-only? You can render into a canvas (or just use html2canvas) and then stitch all frames together for a movie. No need for a backend (outside of static file serving which is free in many platforms)
I have a question about the pulling mechanism for the download. Are we actually having some meta data about how the progress is doing or we’re just faking the download time until we see the success and then we finish the progress bar. Great Video very informative 🎉
Hi Josh, love the software and how you built it from scratch. Congrats! I would be super interested on how you process this video using libx264 while using that less cpu power. Could you make a video on it or can you share any resources regarding that topic? Would be super interested on how you did that.
Awesome video 🎉 Why are you base64 encoding the text content? Doesn't it take more space and memory? Did you try aws lambda instead of railway for video export?
I would like you to make a tutorial how to mask the url that you mentioned that you could make it cuz I always wondered is that possible somehow. Also very nice project 💪
Probably because of timeframe, as setting websockets require more time. Also its is not clear, to which backend you should connect, as you probably don't want to expose express backend (it depends)
Silly question why not render this using OpenCV in C++ and stream the contents over a web socket? That would eliminate the use of a database and ffmpeg to stream and OpenCV to make the animation key frames is very fast and pretty low memory.
What about caching content where all slides are the same? I guess some people would just click generate to test so you end up with the same files many times in S3 and additional processing time.
Hi newbie here :) . Just curious about the server in railway which needs processing power for intensive tasks. When multiple users is requesting for something intensive, does the server get locked up? I've had a problem with intensive tasks before where when I try to test with 2 or more instances (users using the app) are performing the intensive task at the same time. It seems to lock out the others and process them sequentially whereas it should be simultaneous and asynchronous. How do you make this work. I've seen queues/worker threads, but have you used that for this? Just want any insights about how servers serve intensive tasks for multiple users in general. the do's and dont's. I'd really appreciate any feedback. Thanks so much!
Questions: What happens if I launch the export but reload the page? You'll have a zombie file on S3. What if I try and export n times the same thing, I haven't made any change or anything. Now you'll have n exports on S3 that are identical. What if the backend hangs up? For some 5xx or something, will the frontend just keep loading? Lastly, and this is not a question but a suggestion for this Saas which I really like btw, I think you should give the chance not only to export but also to save locally (in the app) so that I can go back and download as many times as I want and you save a lot S3 space and processing on Railway. Keep it up
You are not considering timeframe for this project (2 weeks, one dev) Of course there are plenty of room to impove, such as profiles with saved animations, reusing rended slides(i don't know how yet, but it seems like it will cut costs/time-to-render), paywall and so on
I wonder if it's profitable in the beginning? You said AWS threw you off the free tier, and that would suck it if it is not profitable (thinking as a first time SAAS creator)
It's definitely not profitable, there is no way to even pay for this if you wanted to lol. Just wanted to build something cool, can always think about monetizing later
Thank your for sharing. This seams like it could be at least 30% simpler if you removed nextjs from the equation. Like create just a spa that access the express backend (change to go later). It would be cheaper and easy to maintain. Or if you dont want a spa, create a route inside the express server.
Nice and cool idea, but such a waste of money, 20 something dollars for a low traffic website is not acceptable, i don't understand why people don't self host and instead use a dozen of services paying a lot of money for something that in reality is very cheap and not even having the performance they should have because of all the latency for the communication between data centers.
because these days developers don't even think about costs or budgets, they simply spend hundreds of thousands, if not millions of dollars on services for absolutely no reason.
@@sylum3 No, you can do just fine with a VPS or with a dedicated instance based on need or scale. Any of this ways are cheaper. Let's say you want to support US WEST + EAST + Europe, look at Hetzner prices as an example. If you use something like AWS EC2 you are getting ripped off. Those prices are crazy because they want you to pay in advance over 1-2 years, it's a price for big companies even for small servers.
Still don't understand if it's 20$/month or whatever. I pay 2€ for my vServer at Ionos monthly and host a Postgre DB, dotnet web api, blazor frontend alltogether with an nginx reverse proxy. The 1 vCore is mostly at 5%... The 500mb RAM are more of a problem at 20-30%.
First of all, its not a waste of money... now you are kinda right but we do that to ship faster and avoid taking bad design decisions for our infra. Also you can scale and change your infra whenever you want if you are smart with your choices. You have to validate your idea quickly that why we do that and afterwards if it evolves we can scale. Never overengineer when you're experimenting. NEVER.
This is super interesting, thanks for sharing Josh!
cheers man!
I have no words to express how proud I am and I can’t describe how happy I am each time I watch your videos… You have such an incredible energy and I can’t imagine you are not at one million yet… You deserve more than that but I hope you get there in the next one and a half year from now 🎉🎉🎉🎉
I just want to say. I'll be posting my SaaS soon. But because of Josh and his ability to clearly express information I have gotten a solid understanding of how I can go about building my application. To you Josh, when my product is done. I hope you can view it. It will be things I have learned throughout your videos combined into my own application.
Love this video. As someone who came to learn coding from the traditional IT/ Infra side of things I have always wondered what all these apps would look like under production loads. No many people make videos showing this side of things and I would argue that building the app is less then half the battle. Hosting, support, shipping new features and keeping costs down is not something that takes care of its self. Great work Josh!
Hey Josh,
so gut zu sehen, dass Du Deine initiale Idee zu einem echten SaaS-Produkt entwicklen konntest. Ich drücke Dir ganz fest die Daumen. Ich habe mich neulich schon gewundert, woher Du diese coolen Code-Animationen in den Videos hergezaubert hast. Jetzt weiß ich es 😃. Danke, dass Du Deine bisherige Reise schon bis hier her mit uns geteilt hast. Große Klasse! Ich freue ich total für Dich (und uns). Marco😃
This is a beautiful little app, Josh!
Congrats on launching your SaaS, simple idea but very nicely executed!
Could you share more about the video rendering engine you wrote to process the slides? Is it by using a headless browser, taking screenshots and passing it to ffmpeg?
That was the idea at first, but turns out the chrome protocol does not support stable fps. TDLR: You have to acknowledge each frame, which takes time, and you dont get the next frame until you've acked the previous one, leading to a lot of frames dropping and a pretty unstable 60fps video. So I rewrote the entire thing using canvas, which lets you specify exactly how many FPS you want spread over how many seconds, and am really happy with that implementation
@@joshtriedcoding Like a Boss!!
@@joshtriedcoding Have you tried Remotion?
@@joshtriedcoding that's fantastic. Did you consider using Remotion for video rendering ?
Overall a good thing, cool idea. although a few comments:
- The site seams unusable in firefox, you can't create a new line in firefox it just bugs out, chromium works.
- I think the tab character should insert a tab rather then to execute the default behaviour which is focusing the next element(if the editor is focused).
- Maybe add highlighting for other languages: Java, c, c++, python, c#, php, kotlin, go, rust, sql and ruby are ofc not all but maybe a good start.
Yep, also it would be nice to have an actual text editor like Monaco so its easier to make changes, the current editor is quite buggy and also unusable on Firefox. Monaco would automatically handle all the other languages too!
I'm just impressed by Josh ,your approach is different no BS direct to topic . I wish you all the best pal.
You can see object count and object size in S3 -> Metric tab. It updates daily, and will not cost you unlike listing all the files.
we need a tutorial for this, this project is far more interesting than any of your previous projects, which were heavily invested on frontend only
Amazing josh. The product is excellent & the outcome is great!!!
This is a very interesting project. I am interested in understanding how you planned and coded this. Might not even be this specific project but something that is similar
Great video as always.
This is amazing tool
Especially in presentation
I will use for that
Any reasons why you didn't make it client-side-only? You can render into a canvas (or just use html2canvas) and then stitch all frames together for a movie. No need for a backend (outside of static file serving which is free in many platforms)
4:22 You can locate the aggregate number of objects/content within a Bucket on the Metrics tab
josh, that website is not working
Thanks for sharing, do the express and nextjs backend have access to the same database?
I have a question about the pulling mechanism for the download. Are we actually having some meta data about how the progress is doing or we’re just faking the download time until we see the success and then we finish the progress bar.
Great Video very informative 🎉
I am pretty sure the progress bar is the progress of the video being rendered in the background
Yeah that also got me thinking
Hi Josh,
love the software and how you built it from scratch. Congrats!
I would be super interested on how you process this video using libx264 while using that less cpu power.
Could you make a video on it or can you share any resources regarding that topic?
Would be super interested on how you did that.
Super nice content! Thanks for sharing
Awesome video 🎉
Why are you base64 encoding the text content? Doesn't it take more space and memory?
Did you try aws lambda instead of railway for video export?
if your goal is to keep it free forever, consider porting it as a WASM app! that way you won't have to incur server charges as you process stuff
Can You make a seprate video about polling and how it works?
I would like you to make a tutorial how to mask the url that you mentioned that you could make it cuz I always wondered is that possible somehow. Also very nice project 💪
Curios if you have express app why not just websockets or some other service like Pusher instead of pooling?
Probably because of timeframe, as setting websockets require more time. Also its is not clear, to which backend you should connect, as you probably don't want to expose express backend (it depends)
Silly question why not render this using OpenCV in C++ and stream the contents over a web socket? That would eliminate the use of a database and ffmpeg to stream and OpenCV to make the animation key frames is very fast and pretty low memory.
Super interesting video. How much did nextjs side of things cost you? Was that hosted on vercel?
What about caching content where all slides are the same? I guess some people would just click generate to test so you end up with the same files many times in S3 and additional processing time.
Instead of Polling for status you could use SSE to track the progress and make an event based system
Hi newbie here :) . Just curious about the server in railway which needs processing power for intensive tasks. When multiple users is requesting for something intensive, does the server get locked up?
I've had a problem with intensive tasks before where when I try to test with 2 or more instances (users using the app) are performing the intensive task at the same time. It seems to lock out the others and process them sequentially whereas it should be simultaneous and asynchronous. How do you make this work. I've seen queues/worker threads, but have you used that for this? Just want any insights about how servers serve intensive tasks for multiple users in general. the do's and dont's. I'd really appreciate any feedback. Thanks so much!
Microservices B)
bro, nice work, one question, where are they from, or where did you consume the graphics you used in your project?
Hey hey josh! you can deploy go with a .go filename in your api routes!
is the polling just a SetInterval() function ?
Kinda confused about the express part.. why we need it? To convert the video or just to rate limit/poll the video when its done generatig?
To split heavy rendering load on service, so Nextjs instance would not have to degrade performance for end user
Questions: What happens if I launch the export but reload the page? You'll have a zombie file on S3. What if I try and export n times the same thing, I haven't made any change or anything. Now you'll have n exports on S3 that are identical. What if the backend hangs up? For some 5xx or something, will the frontend just keep loading? Lastly, and this is not a question but a suggestion for this Saas which I really like btw, I think you should give the chance not only to export but also to save locally (in the app) so that I can go back and download as many times as I want and you save a lot S3 space and processing on Railway. Keep it up
You are not considering timeframe for this project (2 weeks, one dev)
Of course there are plenty of room to impove, such as profiles with saved animations, reusing rended slides(i don't know how yet, but it seems like it will cut costs/time-to-render), paywall and so on
Why didn't you let railway handle your database as well? Any reason you chose S3?
I wonder if it's profitable in the beginning? You said AWS threw you off the free tier, and that would suck it if it is not profitable (thinking as a first time SAAS creator)
It's definitely not profitable, there is no way to even pay for this if you wanted to lol. Just wanted to build something cool, can always think about monetizing later
@@joshtriedcoding you could setup Ko-Fi donations. Or maybe show an ad while processing or something
How we can contribute to this josh?
Wondering what's the point of express backend, can't these logic be handled in nextjs backend?
Why not using Cloudflare R2 instead of S3? Better pricing for sure
The link is mission in description, can't find anywhere
Wow. This is insane. I would've predicted the traffic to crash the site or something.
0:48 did you try streaming instead of polling?
my question is how do you monetize this? or is this just a project for learning?
Did you host the NextJS frontend on Railway as well, or did you host that on Vercel or somewhere else?
Let the man cook🔥🧑🍳
So the polling for progress don't really have a way of knowing what percentage of progress has been made right?
Are you going to make this open-source at any point? I'd be very interested in learning what you used to make the videos
Where is the url for the SaaS site?
Hey, I need it. Where is the link?
4:29 wait, there's a free tier for S3? I thought that service didn't have one
5 gb storage for 12 months. After 12 months gotta pay.
i see, ty!
instead of using your server to check for file done you could use s3 sdk to check if the file exists and poll that.
But how would u know which file to check against?
Can you write this SaaS application?
I think it is better to rent a vServer. It’s much cheaper than AWS
How is this a SaaS? It’s just an app right?
Live the app though 🎉
Add gpt, make it output the steps to code something in this format. So it can give you code slides and explanations. Your welcome 😘
Oh wasm do video in browser.
To get the count of files use AWS CLI
Gzip video on s3 at least?
dude i remember you had only 4-5k subs, when did you manage to grow this channel so massive?
😃😃
Thank your for sharing.
This seams like it could be at least 30% simpler if you removed nextjs from the equation. Like create just a spa that access the express backend (change to go later). It would be cheaper and easy to maintain. Or if you dont want a spa, create a route inside the express server.
How did you setup your s3? is it public? How you make the user download the content? signed urls?
Imagine, working along side your mentor😁..i want to join the team🙂
you forgot to drop the url
Great developer, terrible marketer. What is the name of the app and what is the link to the app?
Good job bro
Couldn't you do all the processing client side? Might be a bit slower, but probably not even a lot
Make it open-source ✨🔥
This isn't a SaaS, coz there is no subscription model.
This is a Web app.
Your approach produces a lot of junk data in your redis data store. At least set some TTL expiration periods to some of your keys.
Who is the target demographic for this service?
people that wanna animate cool code
I broke it, it doesn't allow the 💩 emoji, great product tho!
re-do it in WASM, 0 servers needed 😀
Why can’t people just run this program on their own machines?
Jai Shree Ram
you are so cute
hi
Nice and cool idea, but such a waste of money, 20 something dollars for a low traffic website is not acceptable, i don't understand why people don't self host and instead use a dozen of services paying a lot of money for something that in reality is very cheap and not even having the performance they should have because of all the latency for the communication between data centers.
because these days developers don't even think about costs or budgets, they simply spend hundreds of thousands, if not millions of dollars on services for absolutely no reason.
You mean buying an on-prem server?
@@sylum3 No, you can do just fine with a VPS or with a dedicated instance based on need or scale. Any of this ways are cheaper. Let's say you want to support US WEST + EAST + Europe, look at Hetzner prices as an example. If you use something like AWS EC2 you are getting ripped off. Those prices are crazy because they want you to pay in advance over 1-2 years, it's a price for big companies even for small servers.
Still don't understand if it's 20$/month or whatever.
I pay 2€ for my vServer at Ionos monthly and host a Postgre DB, dotnet web api, blazor frontend alltogether with an nginx reverse proxy. The 1 vCore is mostly at 5%... The 500mb RAM are more of a problem at 20-30%.
First of all, its not a waste of money... now you are kinda right but we do that to ship faster and avoid taking bad design decisions for our infra. Also you can scale and change your infra whenever you want if you are smart with your choices. You have to validate your idea quickly that why we do that and afterwards if it evolves we can scale. Never overengineer when you're experimenting. NEVER.
1st Comment ❤
fastify is better then express
1) what
what? @@joshtriedcoding