The Results of Launching my SaaS

hey a couple days ago I launched my first software as a service and the principle is extremely easy you basically get a bunch of slides and then you can create beautiful cold animations between those slides and y'all really seem to enjoy it this is the entire reason I started the channel one and a half years ago launching your first SAS what happens when you get a couple thousand users in like one day or two days how did the database handle it how did the server handle it we're going to take a look at the metrics the cost and everything that's interesting about launching your first software product and I say we start at the very beginning this is the landing page and it's also simultaneously the only page you can go to in this entire application it's pretty simple you know I built this in two weeks and um okay so here's the deal this is how it works architecturally if we click on the export button that's going to make a request to our export endpoint and then really interesting there's a polling approach behind this to know when the um export is done from the server first off this is the interesting part this is the export request we can kind of take a look at the data great it downloaded our file we don't really care about that right now and we can see the initial request gets back a status of processing and a random ID that we generate how is this done architecturally essentially we use nextjs both for the front end and also the backend functionality of nextjs that means when we make a request to export this initial request is actually sent we can see that right here to an endpoint that is hosted on the same domain that means to a nextjs endpoint and include it in that request from the front end to the nextjs backend because there's a second back end you're going to see that is the slide content this slide content is then put into our database on the nextjs back end in practice it looks like this we can go through the slides right here some of them are empty because since I opened this page the time to live has expired all of them are automatically deleted after some interval but on the right side you can see what this looks like the slide zero and then the text content in base 64 encod of that slide zero the first slide and so on by the way if you're not familiar with what this even does basically we have multiple slides and we can animate beautifully and between those slides and for each slide we also need to know the content that is shown on that slide to make the export work and that is stored right here in this format in our database so the answer from the back end also contains the ID that we can then keep polling with to see if the you know export is done the actual export is not hand in nextjs mainly because of the time it takes to process videos and also because at first I wanted to write this whole back end in go and you have to keep them separate and eventually I would like to move to go but currently it is written in typescript the back and from nextjs sends a request to a completely separate back end that is hosted in a separate um instance on the railway and this is just a basic Express server and let's take a look at some of the metrics on the server so if I go to 7 days you can clearly see when the launch happened when I I published the video um about this project there was some kind of traffic before this from Twitter and then I made the video right here with a giant Peak however one thing I really didn't expect is at the peak this only took 1.7 virtual CPU units and that's really surprising because this instance I upgraded to the paid instance beforehand actually has 32 virtual CPU units and it didn't need anywhere close to that now that's not completely accurate because when you go in closer you can see the Peaks are actually higher and in reality when you go into the 1hour view of course now it's not as high but during the publish the virtual CPU units actually reach like um five or six so the Peaks here especially in the 7-Day view are not totally accurate but just so you have an idea technically this would even be possible with a free tier this is the server that actually processes the video and we don't want anyone to be able to access that therefore the request from the nextg back end to the express backend contains a secure token that I generated ated with OP SSL this is always there in the request as a header that we can make sure on the back end that this request actually comes from or next JS backend and not from anyone and once the backend is done processing the animation video then it's going to store it in an S3 bucket right here and I've also got that open and we can see that more than 999 people uploaded something here and I don't think there's a way to exactly get how much content is in an S3 bucket it's definitely more than a couple thousand because AWS threw me out of the free tier um for this S3 bucket and I believe it only shows um the first 1,000 entries right here and each of these entries is basically marked with a date when it was generated and if we actually take a look at this it is the animation video that is coming from our server in this step right here that is processed then uploaded to S3 and the question now is how does the client know when the video is done and for this we also use or database right here where we can not only rate limit the amount of requests that people can send to us but also where we keep the let's find it it should be yeah right here a lot of statuses so we can see all these right here succeeded all the IDS that we generated it's basically a joint key of the status and then the ID the status is for where all of them have a success status which is awesome none of these arrowed apparently and do you remember in the very beginning when I said that we have a polling approach in this if we went to the network Tab and we tried exporting this as soon as the export went through we start polling an endpoint and that endpoint also belongs to nextjs it's hosted on the nextjs backend so that is serverless and essentially all it does is it sends a request to the database and checks for the status so basically the status can be either processing while the video is processing or the status can also be success as you just saw of course we need to update that status and that happens right here from our back end so once that is done processing it will update the status to success and then basically from the nextjs backend in the polling approach you just saw we always ask every I believe two seconds I said it to hey what's the status and once the status actually resolves as success we should be able to see that right here yeah right here perfect exactly once we get a success status back from nextjs we also attach the download URL which is essentially a signed URL that allows the current website visitor to download this file directly from the S3 bucket we could also mask this using nextjs with custom download links but I decided not to do it and once this resolved successfully the answer comes back from the database as yes this upload was successful and then from the back end right here the URL let's just get rid of this uh just for Simplicity sake the URL of that file is sent to the front end the S3 bucket URL and then automatically download it on the front end through a library so the total cost of this is not yet determined because AWS hasn't charged me yet but I believe it's going to be pretty cheap for the S3 bucket then it's I believe about 5 Cent earlier it was 4 cents now it's 5 cents for the up stash database so it's almost negligible and then it's $20 I paid for the railway server that actually needs the processing power or it doesn't really need it apparently but that would in theory need the processing power for the video processing and encoding which is pretty CPU intensive so the entire cost is like $20 a few cents from up stash and then a few cents probably from AWS so man it's been absolutely crazy going through the S3 bucket and taking a look at like one or two things that you guys created it's really funny you tried breaking the software in the funniest ways possible and it's still held up okay I'm I'm really proud of that the algorithms kind of work and and I'm really proud of that so thanks a lot for giving it a try for all your feedback and I'm really happy how you guys like the software and by the way I'm hiring one or two developers to help me work on this um I'm going to post like a job description maybe in the description or something or DM me on Discord for that I'm not super set on it yet but like one or two experienced developers that are familiar with Express and next CHS would be great because those are the two technologies behind it um DM me on Discord with like a portfolio or whatever again I'm not too s on it yet um but anyways thanks for watching the video that's going to be it for me I'm going to see you in the next one have a good one and bye-bye

Channel: Josh tried coding

Views: 84,184

Keywords: saas, express, nextjs, react, software as a service, react saas, nextjs saas, josh tried coding, joshtriedcoding

Id: sKDeTRlEVTE

Length: 8min 32sec (512 seconds)

Published: Sat Feb 03 2024