Transcript for:
Revolutionizing App Development with Replic

this is absolutely insane I am a developer I've been developing websites and apps for nearly 20 years now I have my own company doing it I live and breathe code but today I found a new tool called replic and this changes everything in 2024 I think it was 2023 a tool called Devin got released and it was this kind of AI agent that would go off and build your application for you now we're about a year later and I think rep is a natural progression of that where you prompt your way through building an application so instead of writing code and then debugging it or getting AI to write chunks of code you describe your application it builds it and you describe your bugs that you encounter and it asks you whether it works and various things like that and in the end you get pretty good prototype built in a couple of hours which is absolutely insane it completely rewrites the process the rule of how to develop applications and I really do think it's the future particularly if you know how to code because you really get the most out of this tool rather than talking about it I'm going to show you it and really dive into why I think this is the future of building applications and if you're not on board now you better make sure you are CU you'll be left behind let's just go through quickly what we're trying to recreate here this is an app that I built a couple of years ago it's basically a a gratitude Journal where it asks you three questions uh every single day at the end of that month or four weeks you get asked to kind of reflect and I've added some AI into it to help you re reflect on common themes and various things like that oh it's all encrypted and all the rest of it but ultimately it's as I say a gratitude Journal so if we quickly just log in here I've already got an account and you can see that I've logged uh daily log and these are my sort of past logs I guess just to as a test account I can edit this um go back through the questions and and all the rest of it and I can edit My Account Details we've got Ai and various things like that this is what I'm going to try and recreate we're not going to go through all in this episode But ultimately we're just going to get started on recreating this in replay but let's just run through the interface real quick obviously you can see here I've got my code the great thing here is that I can actually sync this to GitHub and the powerful thing about that is because I use cursor which is an AI powered coding environment and it really means that I can narrow in how the files operate and things like that which is really cool the other thing here and I can open these files and look into them and stuff like that um you've got also got like an assistant here which I can just chat I mean theoretically you get a certain amount of credits uh to chat with chat gbt or Sonic uh doesn't look like they've updated to 3.7 yet but point is you can chat with your assistant inspect for errors or whatever um but realistically you're just developing in this chat interface it's even giving me good ideas here for like export functionaly for journals I didn't even think about that that' be great um Advanced analytics and insights really really cool here we got a console and this is great for looking into sort of bugs that are coming up errors and things like that you can actually just copy and paste those in and it will try and solve those this is obviously the git thing here so I've connected my GitHub and then it will just kind of syn back and forth to git which is just absolutely incredible and we've got deployments and I can look into my databases as well so got my Reflections here got my users here which is me um and all the rest of it which is great so that's the interface so what we'll do we'll basically delete this project let's just start again from fresh and see how we get on I've actually got a paid version as well I'll put actually I didn't see this I'll put this link in the description so it refer you hopefully you'll get a discount or you need more credits or something like that check that out this is a slight edited version of The Prompt that I Ed to make the existing app but basically let's have a little look a journaling app called journaling for clarity and didn't asks the user three questions a day for four weeks and on the 28th day ask them to reflect on their month their diary entry should be encrypted uh to their account which is really important and something that um I didn't quite get right in the final version we've still got encryption but it's you know Works in a different way three questions are these uh the dashboard should show them all their entries for the month as well as their last for Reflections they pay a subscription they get access to all we entries and basically a calendar system they can navigate back through the months um the first page should be a marketing website dashboard is takes them to the app login all the rest of it let's just go this actually took a long long time after um it probably took about 10 minutes something like that to build this app but once again it's sort of it's a chat it's it's getting me to a point where it kind of works and right out the box Google login worked um I think I was able to create entries it was just fantastic so let's probably speed this up now and we'll talk about anything of note that comes up okay so this is interesting I remember this um it's saying build the initial Pro uh prototype using Firebase and Shad Z Nui that's fine would you like any of these additional features so it sort of understood the app what it does and I'm going to do that um custom reflection questions probably don't want that enhanced encryption for entries m don't have that differs from normal uh encryption but let's have let's leave that and then Advance let's give that and now you start to see it open up as it did when I showed you the result earlier and as I say if you're a developer I think this will be um very handy if you if you already know how to develop I think you've already got a leg up on those who don't know how to develop because if as a developer you can open this code base in something like cursor and really interrogate the files what it's doing make changes edit things and and really dig in and also just to be able to articulate what you want more so as an example I'm able to look into the errors and say well it was reporting a 404 or a 500 error um I noticed in my original version of the app that the encryption key was missing and I told it the encryption key was missing because it was logging out what the user data is as a developer we're kind of used to all of this kind of debugging situation so by no means is this going to take away developers as a as a as a job I really don't think so I think if anything empowers you to learn development in order to be able to build better apps so from a foundation standpoint absolutely learn how to code an app first I mean maybe this will get better in time and you just will not need to code but only time will tell with that but I seriously do think this is the the the correct and new way to develop an application it's completely prompt-based and you're describing your problems or features in natural language in order for the agent to do whatever it is you need to do and then use a developer mindset to actually debug these things cool this is really important now um it's asking me for my API keys and again if you're not a developer this sort of stuff becomes um tricky um and it might confuse you a little bit but I already have these SA because I've already built this app I've already built a I've already created a Firebase account and all the rest of it but I don't need to create one anymore so Firebase API key it'll be interesting to see how because I've got Dev uh instance of Firebase and a production instance of Firebase cool and here we go so it's asking me now can you try accessing the homepage and click the login or sign up buttons are visible so yeah they look good now verify our Firebase authentication setup is working correctly with the provided secrets and our recent fixes to typescript issues so I don't know what typescript issues they're talking about can you check if the marketing page loads and you can sign in and log into Firebase so let's do that so start my journey create my account let's just do this let's just create a password Here create account okay fail create an account let's just double check the console here so there's nothing in the console so now I can say it failed to create an account uh I get an error so again your natural language just describing what the problem is and also something I'd suggest as well which I should have done then is make a list as you're debugging make that list of things that you you're encountering because you you'll see something and you'll forget cuz you're focused on in this case I'm focused on actually logging in I could say and cre and um allow for Google you're using less credits and you're just not letting things like slide go under the radar or get forgotten about so after a bit of tweaking here's basically the app and I want to just show you how easy it is to add a new feature but but we've got all of our uh entries here we've got our account which we can um sign out and all that sort of stuff we can write today's entry blah blah blah blah blah save it we go back to the app and there it is and then we can edit it update so that's all working and let's say for example okay let's um add a sign out button when you hover over account giving um access to settings or log out let's just see if that works so it's doing its thing I've added a drop- down menu to the account button because you check by hovering let's see what happens when you do this okay so nothing there let's go to dashboard okay and there you go and can go through the settings or I can sign out so it's not on Hover I have to click but we're getting somewhere let's try something else let's go to journaling for clarity let's just get this purple here let's try making it mostly purple as well because you can make design updates as well make the dominant color of the app let's see if that's does it I'll update the app's primary color to that to make it the dominant color throughout the application so I can see that it's added the CSS there which is a pretty simple change probably could have added that in the file there you go I can already see it everything looks good work on a new feature and look at that isn't that incredible and I think the point that's really special about this system is that you as I showed you earlier you have deployment so you can actually set up your deployment um all the rest of it and actually get your app live so it's this allinone solution that other where I feel like other platforms fall short they kind of want you to code and then you've got to start the deployments and scaling yourself this one has it all built in so I think that's a really really important feature that I just want to draw a note to it also looks like we've got analytics here and logs which is amazing cool and now that's deployed so let's just check it out so I can sign in with my Google account oh so this is a new domain uh which I'll need to set up in Firebase so that's that's fine I can totally do that but this is live now obviously if you go to I I'll leave a link to the actual version that's actually live and you can subscribe to that uh it's called journaling for clarity. for.app but hopefully in time this will replace that version and we can move on to a completely uh production ready replay version of my app journaling for clarity amazing even though we built a web app here I've built a WordPress plugins in this you could build native app react native apps and things like that it's not necessarily limited just to web apps I think you just need to specify that in the initial prompt and you're free to kind of build a static website even um really just think of the deployment and make sure you mention that in the initial prompt now I don't want this to go on any longer because I just wanted to introduce you to the tool but what I did want to quickly show you is that because of my I've linked my GitHub into this I now have imported the original project the nextjs project into here and one thing I really liked about the uh repet version is that there was encryption key that was stored per user so every single user had a different encryption key so what I've done here I've asked it to add a secret key to all of the users and I can go through the files here so here's a way of generating a unique key they've added that function there and it's really taken into account my my project as it already stands and it's being sensitive to my coding Styles I think this takes it Far and Away Beyond if you already have projects so I highly recommend if you already have projects going on importing it and having some fun I honestly think this is really the future of development it does not take away the need for developers in fact like you just saw being able to understand how to debug issues and articulate yourself can really put yourself ahead of the pack when it comes to being able to develop the best application here saying that rippl it there's a Code down in the description to give you more credits I think this is really a game Cher when it comes to building applications I hope you enjoy it like this video subscribe if you haven't already this channel is all about AI building apps and things like this check out jub draft.com and I'll see you in the next one