Admin tools for your form application with Replit
1. Admin tools for your form application with Replit
So we've built out our MVP and now we're gonna start layering complexity onto our application. And in this lesson we're gonna talk about exactly how to do that and how to think about context engineering in that sense. So as we discuss, good context is specific and uses the right keywords as well as the right media, whether that's error logs, images, or research requests. Now, we've already built out the MVP for our app, so we sort of have the scaffolding or the skeleton, if you will, and what we're gonna do is successively add these major features in discrete steps. Why are we doing that? Well, as a manager, our job is to break down the overall idea or goal or solution that we're trying to build into manageable steps for our AI sort of employee. And by doing this, we increase the likelihood that we're going to get a good outcome because we're focusing on one thing at a time. So we're gonna go from our MVP to our response dashboard, to our form builder. Then finally, authentication and user management. And along the way we're gonna learn context engineering and prompting best practices. So what is a Kanban board? Well, I drew this out. This is a simple view of what a Kanban board might feel like, where we have those responses and those submissions, and we're moving them between different stages. I'm not gonna send this through with my prompt. This is really just for me to understand what I want my dashboard to look like. The reason I'm not doing that is because I want AI to build a form that's consistent with the rest of our application, and this might influence it to do something else. So we're gonna stick with a text prompt for this one. Now, what is the ideal user flow we want? Thinking about the stages that our application is going to evolve into, we're gonna walk through those. First, we want our user to submit a form. We already did this. Then we want the form to be written to a database. Why? Because when we have data in our application, we need somewhere to persistently store that data. And for text that's semi-structured or structured data, we'd want to use a database. There are other ways of storing data on Replit, but in this course, we'll specifically focus on databases. Finally, we want to be able to manage those form responses. So in our Kanban board, we'll need to retrieve what was submitted from our database and display it in an engaging and user-friendly way. We wanna be able to drag and drop those responses between stages, which has to update the data in the database. And finally, we want the ability to export responses with the stage that those responses are in, which would make this app much more useful to our teammates. So as I'm breaking down all of these ideas, you can see things get complicated pretty quickly and understanding how our app works and the architecture behind what we're building is really important, even though we're not writing code. So now we're gonna head to Replit and we're gonna walk through our sample prompt for adding on our very first feature. So we have our prompt here and we're saying ‘Now let's add an admin panel. The panel should not be visible at all from the forum, but should be present if we go to admin’. This is to keep our admin panel discrete. ‘The first goal of our panel is to allow us to see responses in a Kanban style board and process them. We should be able to move our responses between “backlog”, “in progress” and “done”. You could add more or less stages if you'd like. 'Keep our simple minimalist user interface. Do research on the best, most up-to-date library for clean and functional drag and drop interfaces’. And I added that last bit because drag and drop can be really tricky. So that's something we'll have to work through. Now we're gonna send this prompt and see what happens. I'll meet you back here after agent is done running. Alright, so we've ran our first prompt and I actually ran a follow up prompt, so I wanna walk through that as well. But first we're gonna head to our admin page and see what we got. So the Kanban came out very well, and I've noticed that agent is getting better at building these types of interfaces. But what I noticed was that the drag and drop functionality was a little laggy, so I followed up with this prompt. ‘The drag and drop functionality works, but it has a delay and the animation isn't very clean or user friendly. Can you optimize it so there's no delay when I drop the item and so that it appears smooth to the user?' And then reading the response here. The delay comes from waiting for the server response before updating UI. So this is a little complicated, but what we're doing when this app was built is that when I would drag an item into a new category, agent was waiting for the database to update and send us the response back before it updated the front end, which resulted in a lag. And so by implementing what agent calls, optimistic updates, we get an instant drag and drop in our app. And this is much more clean and responsive than what we had before. So adding in like little follow up prompts where you observe what's happening can be really powerful. And another way to take a peek under the hood is to go to the console, which shows you all of the backend updates. This is a little bit more technical, but if we break this down, we can see what's happening. We're saying: "Hey, I want to get our form submissions", that means our app is fetching the form submissions from the database, and then when I drag and drop a form submission, we're patching the form submission in our database, which means that we're updating that entry to display something different on our front end. So the console can be a useful tool for you to see the logs and the backend of your application. So we've created our admin panel. I'm gonna send through one more prompt, which is to add our CSV export of these items with the status. And then we're gonna move on to building out our form builder. So we're sending through the prompt: ‘Add the option to export our form submissions as a CSV, include all form submission data, as well as the status of each item’. So we have our CSV export, and now I wanna show you a couple ways that we can modify how that button looks. Just to give you an idea of some of the visual editing functionality in Replit. So we can either select an element to then pass through to the prompt, so now if I prompt agent, it will get the prompt specifically and make changes to this button, which can be useful. Or I can go to our visual editor and then select the button. And from there I'll be able to change things like the text color, the background color. I can select any color I'd like, as well as the font size. So maybe I want the button to be a bit smaller, and I want it to be bold. Perhaps we want more padding or less padding, so we could say 24 point padding and you'll see the button is a bit wider. And just like that, I can save changes without submitting an additional prompt to agent and knowing I'll get exactly what I want. Now, in the next lesson, we're gonna build on this app and add a custom form builder so we can customize the questions our user see.2. Let's practice!
Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.