The Tech Stack I’ve Used To Build 7 AI Apps In 7 Weeks

after working as a software engineer for 5 years I finally found my perfect teex stack I Ed it to build seven a apps in 7 weeks that's one app released every week ranging from chat Bots to resume reviewers to Art generators each app was deployed online got real users costed me $0 to run and I did it while having a full-time job and YouTube channel to run using this text tack you're going to be able to build real solo projects in hours instead of weeks or months and it's not just me the students of my boot camp also use this tack to build their project fast let's start with the front end I use nextjs as my weapon of choice it's a react framework that provides me with a couple of nice features like a router and I also like their API routes which provides me of a back end without needing to have a separate application running since I use nextjs I also use react since it comes inside of it right nextjs a react framework I don't do anything too fancy do of react I just use use effect and use State I could optimize my code more but for me this is enough uh for like 90% of what I need for the CSS I use tailwind and the only reason honestly that I use Tailwind is because chat GPT rides good code with it like imagine if I need to create a dashboard in a minimalistic style dark team with buttons that have this rounded corner I can just describe all of this to CH GPT and it's going to generate all the code and I can easily copy paste it without wasting any time that's literally the only reason I can also provide a picture of like a UI that I like and I and I say oh can you build something similar to this but for my application and it writes all the Tailwind classes correctly I just copy paste add it to my application and then it's very easy I do use UI Library sometimes like I've used shade CN in the past and a few others but honestly I'm not too attached to them sometimes I use them sometimes I don't use them it's up to you to decide if you need it or not next for the back end I mentioned that I'm using the nextjs API routes so that's what I do I use Edge functions for this so for example in my case I'm building a applications right so you're going to have one API route for your AI if it's like open AI if you need some do some text processing or image generation if you use doly uh so my client side nexj is going to call this internal API route that API route is going to process the request maybe add some extra prompts to it add the system prompt and then it's going to send all of this to open AI to like this external API model uh and also this allows me to protect the API key because I pass it on the server side on those API routes that's super convenient nextjs provides you the ability to have a front end and a back end through those API routes it's really nice for authentication though I don't like to build the back end myself so what I do is that I use clerk clerk is like an authentication provider that makes it super easy to add user signups and sign in to your application super easy I think the first time I used it I I spent just a few hours setting that up and from there I always use it now for all the projects that I do just copy paste that code that I set up once but it's very easy probably in like um 20 30 lines of code something like that you're able to set that up that's very convenient and then also the nice thing with clerk is that it gives you all the general authentication providers like Google like LinkedIn like whatever it is that you want people can also log in using those those accounts that they have the other thing that you have to consider for your back end is especially if you're building AI applications and especially if like me you're making them available for free or you don't charge based on the number of requests that users are making for you the more requests people do the more it's going to cost you right so you have to think about that and especially I was giving my apps away for free so you could sign up and use real a apps for free and if people are going to use them to like burn all my credits I don't really want that right I'm not making anything from them like I just wanted to share it to the maximum amount of people so I implemented rate limiting using up stash up stach provides you with a radi database that is going to track all the requests that you're making to your API and you can limit specific apis to a specific number of requests on a time frame that you want so for example on some of my applications I limited the number of requests to three per day I made like an art generator for example every day they could generate three images and that's it and then they have to wait till the next day and up stash makes it very convenient also free to use the only job of up stash is that they only provide you one database for free so you can essentially only have one app that uh that is running for free per account but then if you really want to stay for free just create a multiple accounts and you can keep using it like that for hosting it's very easy I just use versel for all my applications and the nice thing is that it integrates GI up super easily so I just go on my versal dashboard I click on one button to import the GI up project after 2 minutes your app is fully deployed and then that's it you can share it with your friends you can share it with your parents share it with online strangers um to get some users so it's very easy I have 10 apps right now that are running on my free versel account I'm still on the free hobby tier and so far all good right you only run into limitations when either you want to build something that is an app that is computationally intensive so you're going to run into limitations on the API side or if you start to get too many users but then that's a nice problem to have you can charge them and essentially make money it's not going to cost you a lot even if you have like a PID tier on versel for analytics the nice thing of using versell is that versel also provides you with an analytics dashboard that just comes out of the box the only thing you need to do is you need to install a versel analytics package in your app but also it takes like two seconds to add like two lines of code and then you need to enable analytics on the versel dashboard and then that's going to give you the page views like the number of visitors coming in where they're from like which countries are they from which device they're using to access your app so it's very basic like analytics nothing too advanced I use this for my projects because right now I just didn't spend too much time on analytics to be honest if you want to do something more advanced and something that I'm going to start doing later is uh Google analytics that can be one way otherwise you can set up something like uh mix panel or Heap to track your analytics next is the Special Sauce like the extra spice that I like to consider in in the stack is the API that you're using so if you're building AI applications you need to use AI apis the thing that I like to do though is because since those apis cost money and if I want to make my apps available either for free or as cheap as possible I found that there is a work around a lot of companies these days companies like Nvidia cloud flare like big companies who have a lot of capital they make AI models or AI apis available for free on a very generous free tier for example if you use Nvidia Nim API it provides you with a bunch of Open Source models like mistol like llama 3 those models for most people they're just as good as gp4 like for a lot of applications most people are are not going to even tell the difference between the two of them because they're pretty good like those open source monitors or they're decent and if you get them for free versus paying a bunch of money to open a obviously it's nice if you can just use something for free so Nvidia n API has a very generous free tier Cloud flare AI API has an even better free tier and then together AI also has a nice one so you could essentially alternate between the three like whenever one of them you reach the the max amount of credits that you can use you just move to the next one and you can keep updating your app like this so that's a nice thing if you really want to go with paid though like let's say you really care about performance maybe you want to use GPT 4 you want to use do 3 you can use the open API that's fine as well or you can use replicate also that's another nice one that has like a huge library of apis that you can use but that's essentially all the ones that I I've personally tried this is the text tag that have allowed me to build seven unique a apps in 7 weeks this tack is designed to help you prototype apps in the shortest amount of time possible if you want to build real SAS applications though like production level where you can charge people money obviously you also need the database to track all the user data and then a payment provider I recommend just using stripe that's the simplest and best one to use C banders thanks for watching and always remember code is just a tool and a teex stack is just a series of tools to help you solve some problem provide the maxim amount of value to your users and based on the value that you provide that's what they're going to be ready to pay you for customers or users don't care about which text tack you use which codes you write they only care about the quality of the app and how much does it solve their problem always think about this now if you want to get the skills to build any app that you have in mind I've created this special video for you check it out

Channel: Master Codebender

Views: 3,190

Keywords: tech stack, tech stack for web app, tech stack for startups, nextjs, typescript, next js, vercel, saas, javascript, react js, marc lou, ai web development, coding projects, ai projectg, openai, ai tech stack

Id: yhZKG86MVos

Length: 7min 34sec (454 seconds)

Published: Thu Jul 04 2024