Replit in action - Building the Survey

[00:00 - 00:06] This is the portion of the workshop where we're going to be switching over to a demo of Repel Agent. Let's jump right into the demo.

[00:07 - 00:28] So as you can see, this is basically the page that you get when you sign up for Repel it. So inside of the dashboard, you can basically see that, let's say, for instance, you're just someone with a free user account, you just want to try out Repel Agent. And so with Repel Agent, you're basically going to be allowed to create three apps for free under the starter plan.

[00:29 - 00:45] And in terms of the agent checkpoints, so I've seen the number of checkpoints that Repel it provides to starter counts range anywhere between five to 50 checkpoints. So with 50 checkpoints, you're going to be able to build pretty complex applications.

[00:46 - 00:58] If you just given only five checkpoints, you might not be able to build super sophisticated applications, but you can obviously increase the number of checkpoints. If you upgrade your plan to Repel Core.

[00:59 - 01:08] Okay. So besides that, so right here in the prompt input field, let's just take that prompt that we came up with for our type form style survey.

[01:09 - 01:19] And right here, we can basically see a one line description of the survey. Here are basically the features that we would want Repel Agent to implement for the survey app.

[01:20 - 01:34] And here's the tech stack that we would want Repel Agent to use to build the application. And in case you didn't really know where to get started, it does provide some app suggestions for pre-filling the input field.

[01:35 - 01:41] But as you can see, it's much different than the list that I showed you in the slides. Because right here, as you can see, there's one for AI chat.

[01:42 - 01:47] There's one for waitlist website. But then there's also this one here that was also present in the slides, local landmarks map.

[01:48 - 01:56] Anyways, let's just start building the application now. So right now, Repel Agent is going to formulate a plan for how to build this application.

[01:57 - 02:18] So this may take a minute or two, but as it's coming up with a plan, it's also going to be thinking about what other features might you not have suggested that it feels you should probably add to the application. Now, obviously, you don't want to give it too many features because if you give it too many features, then it might not properly implement some features.

[02:19 - 02:32] You want to make sure that there's a core set of features that it must implement. So this way it's able to implement those core set of features correctly, but you don't want to tell it to implement right off the bat a whole lot of features.

[02:33 - 02:45] And then afterwards, it poorly implements some of these features simply because there were just too many features for it to implement. And so as you can see, it comes up with these additional features that we may want to implement.

[02:46 - 02:55] So for instance, add support for file uploads in the survey. That's not necessarily something that we want for the time being or even implementing a survey result dashboard and analytics.

[02:56 - 03:12] Again, this might be its own separate application. This is probably something that you don't want Repel Agent to be working on at this time, since the main focus is just a survey app that allows users to fill out a survey, adding branching logic based on user responses.

[03:13 - 03:24] This might be nice, but this might be an improvement that you might want to make later on in the application after the core features have been implemented. And basically the same thing here enables survey type of customization.

[03:25 - 03:42] This could be nice, but then again, it would probably be spun under a separate application, which there might be a separate dashboard for monitoring survey results and for also being able to create surveys. But for now, let's just approve the plan and get started.

[03:43 - 04:00] OK, and so as it's building the project, you're going to notice that it's going to basically come up with a UI for the project. So in this preview pane, eventually it's going to show you the UI that comes up with for this application.

[04:01 - 04:11] So right here, as you can see in version two, you can actually see the components being added one by one in the preview panel in real time. And it's actually implemented a progress bar, which is very nice.

[04:12 - 04:22] It's also starting to implement different question formats for the survey and building here takes some time. You can also see here that it's also created an initial checkpoint.

[04:23 - 04:29] And this initial checkpoint is something that adds for free. So this doesn't count towards your checkpoint quota.

[04:30 - 04:37] This is just simply a place for you to be able to roll back in case of, say, for instance, I don't necessarily like the UI. Let's just start from the very beginning.

[04:38 - 04:48] Yeah, it's going to take some time for it to build the application. As it's building the application, you can see all the different files and all the different folders that's creating along the way.

[04:49 - 04:54] So you're going to see a little status. It's just it's currently installing packages and that sort of stuff.

[04:55 - 04:57] Yeah. So it's still taking its time to build the application.

[04:58 - 05:15] But in the meantime, we can also cover what are the different files and folders that repell agent generates for a web application? Generally, when you prop repell agent to generate a web application, repell agent often defaults to VIT and react for the client side.

[05:16 - 05:32] Now, if you were using, let's say V zero, the default would actually be a next JS stack. But for most of these app builders, whether it's repell agent, whether it's a ball or lovable, you're going to be seeing a tech stack that's generally going to be react types with the VIT.

[05:33 - 05:55] And in repell agent, it generally divides the client side and the service side code into their own separate directories where the client side code is your react application. And the service side application is going to be an express JS application with drizzle support and also sometimes it'll add zod for validation.

[05:56 - 06:02] But as you can see here, it's still writing to these files. It's not 100% to complete just yet.

[06:03 - 06:16] But as you can see, there's a drizzle config TS file. And this is if say, for instance, you were to hook up the application to a post cross-kill database that's possibly hosted on repel itself.

[06:17 - 06:28] This seems to be a file that repel agent always generates for web applications. And this just basically gives you the option in case if you want to add a database to your application.

[06:29 - 06:34] It's not 100% necessary, but it's usually there by default. Just the user has the option of doing so.

[06:35 - 06:55] And obviously, if you want to integrate a database into your repellate app, you can basically click on this plus button here and then you can search for all the different tools that repellate offers. So in this case right here, you can type in database and then afterwards, it'll pop up with database as well as with repellate key value store in case if you wanted to add those to your application.

[06:56 - 07:04] And so it is still building the application. It is actually correcting issues that it's encountering as it's building your application.

[07:05 - 07:22] And we can also look at some other files that repel agent introduces to your code based on, for instance, here's a schema TS file. And as you can see, this is basically a file that contains your ZOD schema, your type definitions, the ones that are generated from the drizzle ORM schemas.

[07:23 - 07:34] And these are generally shared between the client and the server for type safe data validations, right? You're also going to see some files such as like post CSS config, JS and tail wind config TS.

[07:35 - 07:54] And these are files that are going to help you be able to integrate tailwind into your application. So here you can see there are plugins for auto prefixer to basically automatically handle those prefixes that you may want support for certain CSS styles and also tailwind CSS to be able to process tailwind CSS styles.

[07:55 - 08:13] And then here's just a config file for tailwind basically allowing you to extend the default theme in tailwind and repellent has its own plugins that in wants to add to tailwind such as the tailwind CSS animate or tailwind CSS typography plugins , right? Stuff of this nature.

[08:14 - 08:22] We can also cover more of the files that is also generated such as this TS config JSON file. Very standard TS config JSON file here.

[08:23 - 08:40] It's just enabling strict type checking with some support for ES next modules and DOM libraries. And it basically preserves JSX and it configures incremental builds and it also sets up these path aliases.

[08:41 - 08:55] So for instance, in some of these client side application files, you might see this at forward slash prefix and that's just referencing a local file in your project directory. And lastly, there will also be a V config TS file.

[08:56 - 09:20] And in this file, you're going to see repellent add a plugin for error overlays . It's also going to be loading in a specific repellent plugins like repellent feed, plugin cartographer and it's also going to be able to establish path aliases for add and for add shared and add assets.

[09:21 - 09:33] And it will also configure a build output for this public directory so that when you build the application, you can expect the build to end up in this this public directory. And it's great.

[09:34 - 09:42] So it looks like it's implemented the initial prototype of the application. And so let's just take a look and see what it's implemented.

[09:43 - 09:46] Right. So as you can see, it's got the progress bar.

[09:47 - 09:55] Let's see if we can just answer some questions. So right here, we can see, okay, let's just say it was a five star experience using this application.

[09:56 - 10:05] We can just jump to the next step. As you can see, there's a nice fade in fade out animation and you can see it guide the progress bar smoothly from one step to the other.

[10:06 - 10:11] From here, let's just say, okay, which feature do I find the most valuable? I'd have to select one option.

[10:12 - 10:20] Let's say we find solar panel efficiency monitoring to be the most valuable feature. We can then click next, whether additional features would we like to see?

[10:21 - 10:28] Maybe mobile app integration or notifications and how can we improve this application? So let's just use Loremism for the time being.

[10:29 - 10:34] And then lastly, your email. So let's just say that I use my email.

[10:35 - 10:41] If we click submit, then afterwards it brings you to this. Thank you for your feedback page.

[10:42 - 10:44] Looks very good. Client-side-wise, it works.

[10:45 - 10:47] Right. Everything is there behavior-wise.

[10:48 - 10:58] And if you click on home, right now, you can't necessarily jump back to the beginning of the survey, but you can click on this refresh button. So this way it will automatically refresh the survey.

[10:59 - 11:06] But it seems like more or less the application works. And so what we can do then is we can just give it some feedback, right?

[11:07 - 11:21] So let's just say the user experience is excellent. The animations are smooth and the survey is easy to navigate and form validation works properly, right?

[11:22 - 11:34] Everything seems to work as expected, but all right. So once we give it this feedback, it'll then give us some suggestions as to what other directions we may want to take the application, but let's give it some time to analyze and think.

[11:35 - 11:57] So in the meantime, you might have also noticed that like right here, as you saw previously as it was generating the application files, this snippet wasn't necessarily yet present in the server index file. But basically this says in a development environment, we'll want to use V to step servers as way you can automatically see changes that you make to your client's side application.

[11:58 - 12:04] And so in development mode, you'll be using V to step server in production. You'll basically use the base express shares at the server.

[12:05 - 12:11] Okay. So it says here that everything looks great, but there seems to be an issue.

[12:12 - 12:28] And just looking at this application, we're going to notice a couple of things that are the same. So one is that it's not sending the server responses to notion. You're also going to notice that some of the code here might be a bit questionable.

[12:29 - 12:38] For instance, it's actually importing in the notion SDK for JavaScript. Anytime it sends a response, and this is not something that you would ever want to do in production.

[12:39 - 12:54] So you should definitely move these two lines of code directly out of this controller function. And then you're going to put those lines of code outside here. But this is just a highlight that repel agent is not necessarily perfect, but it does give you a starting point.

[12:55 - 13:05] It's mainly there just to build an MVP. This is why it is very important for you to actually monitor and to see what exactly is actually generating for you, right?

[13:06 - 13:25] Because if you just let it generate the code and you're not reviewing it yourself, you might be exposing your end users to potential security issues as well. So you got to make sure that you're analyzing the code and just making sure that everything looks fine or that something is missing, right?

[13:26 - 13:37] And if anything is missing or if anything is not necessarily working to what you think it should work to, then you should obviously make the necessary modifications.