Building a Kanban Task Management Web App from Scratch with Replit

Transcript

This is. In this video, we're going to keep exploring what we can build with Replit without writing a single line of code. So this time I've decided to build a web app and we're going to build a Canban board. So step by step, we'll add features starting from basic things like creating cards, editing them, to storing them in a database, to adding Google authentication, and maybe a few And of course, once we're done, we'll deploy the app for real. Okay, sounds good. Let's get started. Okay, so let's start building this app. Okay, make sure you selected web app and build. This is a simple app. We could plan, but we can go and build directly. I broke down the tasks a little bit. Okay, so let's go really step by step, and let me grab the first prompt where we really want to build the basics, okay? So create a Canban board with three columns, add some sample cards, clean, minimal design, and at this point, I just want the layout, okay? I don't want database, I don't want anything else. You know, RAPLIT is very eager to build and sometime it will anticipate on your needs, but let's just take it slow and validate step by step. Okay? So let's just go and start. And well, very quickly, we should get this first very minimal version of the app and then we can add more stuff to it. Okay, so here's the first version. Very, very simple. Let's maybe tweak the layout just a tiny bit. So I should say use a blue palette with an enterprise load. And alignment is just a little bit off. So maybe add more spacing between columns to avoid overlap. Okay, let's give that a shot. All right. And if we're happy with that, then I guess the next step will be to start adding the database and the ability, of course, to create new tasks at this point. This is just static HTML and CSS. Let's see what this goes. Okay, so again, after a minute, we see the spacing looks much better. We have a bit of blue here. Okay, now let's go and add the ability to create cards, add an ad card button at the top. When clicked, show form to enter title and description, save cards to a database. We need a title or description, it belongs to, obviously. And when the page loads, fetch cards from the database, display them in the correct columns, convert the existing samples to database entries. Okay? And that's the only thing we want. We'll look at drag and drop and editing cards later. Okay? Let's take it slow and validate every single step. All right, so lots of progress here. The database has been created. We see the three cards have been added to it. We see the button. It has been added and we see a replica is actually running a test and checking, I guess, that it can add a card, et cetera, so that's nice. Okay, let's see how this goes. That's super cool. Oh wow, let's see, it's testing on its own, perfect. And the button works, it's adding a test card, adding a test. Description then I guess it's going to click add okay so replete is happy with its own testing so let's give it a shot well reloaded the page okay so we have the ad card let's say right product documentation description user manual plus API docs I'll add this. It's in here. We see the test card that Replit added. And if we go, we see it's been updated. Okay, so we have basic functionality here, the add button and the ability to add a card to the board. Okay, so that's pretty nice. Right? Let's keep going. Okay, so here's my next step. Now we want to add drag and drop. Okay, so dragable between columns when a card moves update the database immediately and let's add some visual feedback let's not do card editing okay again I would recommend one step at a time and testing validating before you move on to the next thing okay that's always a good strategy okay let's run this so replet decides to use native I'll drag and drop, which is fine. We're not looking for anything super fancy here. If you had specific requirements, maybe a specific library you wanted to use, of course, you would mention that in the prompt. But here, you know, I'm assuming a very non-technical persona. So I try to stay away from giving rep with any technical advice. Okay. So a lot of you are there can do the same. Even if you're not a developer, you can just go and build things exactly like this. You don't need to worry about what's happening under the hood. Just make sure it looks good, make sure it works, focus on testing, focus on the UX, and let Replit decide what to build. Okay, so it looks like it's done adding, okay? Yes, we started the app and now I guess it's going to test it. Okay, here we go. Browser on the side. We should see a replica trying to move cards around. Oh, bam, there it goes. Okay. Okay, so it's happy with the testing. Am I happy with the agent so far? Oh, yes. I'll give you five stars. Okay, so let's try this. Okay, it's moving. Oh, it's grayed out. Okay, let's figure this one later. Let's just go and look at the database for now. So it should say in progress. Yes. Okay. And then if I move it again, okay. Okay, it's done. So this works. We have a bit of a rendering problem, so let's go and try to fix this. Okay. So when I'm moving cards, they're grayed out. , they should look like other cards instead. Okay. Okay, I'm not sure if it's an amazing problem, but let's see if this is enough to fix it. Okay, that took 10 seconds. So, all right. Yeah, this looks good now. Yeah there was a that visual feedback thing showing dragging state maybe maybe that's the assumption here okay anyway that was super easy to fix and now we have something that does what we want okay we can move those cards around good let's keep going so now we should be able to edit and delete cards right so let's ask for that when I click a card Open a model window showing full details with edit and delete buttons. Edit, I should let me change the title, the description. Delete, obviously, should delete the card from the board and the database. Okay? And yeah, we don't want multiple boards. That's my next step. So let's just go and add editing. And now it is testing. Okay, let's give it a shot. Do your thing. So is it going to go and open a card and change it? Oh, there we go. Okay. All right. Looks like the Q3 marketing strategy is going to be changed or deleted. Who knows? Okay, yeah, looks like we need to update the marketing strategy. Go. Yes. Come up with something smart. Come up with something smart here. Oh, no more marketing strategy. Yeah, maybe we don't need marketing after all. Okay, but the important bit is we're able to edit the card, right? Okay, so it's going to probably save it or cancel it. And then it's going to go and then it's going to go and delete something, I guess. Yep, just deleted something here. Okay, so we'll let it finish and then we'll run our own test and check the database, et cetera, et cetera. Okay, so let's go and well, let's maybe open this one. It's going to test card, so why don't we delete it? It's gone. Let's check the database. Yeah, it is gone. Okay. And why don't we open this one? Edit it. Yeah, new marketing strategy. Do we need one? Save. Okay, and the card is here. Let's check the database. Yes, dated. And yeah, let's move this thing around. In progress. Okay, so everything still works. Okay, and of course, if we reload again and again, we have the database, and so we have the database. So, I'm running a persistence of information here. Okay, let's keep adding stuff. Okay, now I'd like to have multiple boards, okay, because I'm running multiple projects or multiple teams, and of course, I don't want all those things to be mixed up on the same board. Okay, so add board management, show board naming header with a drop-down selector, and the ability to add new board to the button, store everything in the database, figure it out. And users can switch, create new ones, and I don't want authentication yet. We'll do that later. I just want the multi-board capability. Okay? So this is a bigger change. Let's go. So there's a bit of work here because we need to update the database to store boards. But we have existing data in the database, as we see here, we have cards. So it's not a huge migration, you know, three cards, but we still need to migrate the data to the new schema and make sure those three cards. Are assigned to whatever board this is. It doesn't even have a name. Okay. Yeah. So that's what we see here. We need to handle the migration carefully. Let's see how that goes. Okay. So this looks pretty good. There was a lot of stuff happening here. It deleted all the data in the database, probably stored it somewhere safe. Then it applied the schema change, It created a new table for boards and it actually reinserted the three tasks and attached them to a board that it created, right? Board ID, so this is pretty sweet, right? All right, okay, now it's testing, apparently creating a new board with a random name and creating some tasks. Okay, so it did a bit of testing and it's saying everything works. Okay, took a little longer. I mean, that's definitely a bigger job. Okay, let's give it a go. Just reload here just in case. Okay, so we still have the original board. Let's go maybe to create a new board. Okay, now we can add a card. Card, blah blah blah. And okay, let's check the database. So it should be in tasks, right? My test card, blah, blah, blah. To-do board ID 3, which sounds about right? Okay, I guess we should still be able to move things around. Let's go back to tasks. Okay, in progress. Okay, well that's pretty good, right? Looks like we have implemented what we want in here. So we could go and implement board deletion and so on. Let's go and try something very different. Let's try to add Google authentication, because if we want to deploy this, to a group of colleagues. We need to know who's working with what, who is who, et cetera. And here we have zero authentication. Okay, so let's go and add that. Okay, so here's the prompt. We want Google sign in. We want to store user info. They should have a sign in with Google icon to click on before they get access, obviously. Each port belongs to the user created it. All users, So should be able to see all boards, right? We could create board permissions, but that's a different feature and they should be able to sign out. Okay, this is a big one too. Let's see here it goes. Okay, so lots of progress. We have a landing page because of course now we need users to sign in before they can get to the boards, right? And yeah, it looks okay. That's pretty good. Your replica testing, so logging in and getting to boards, etc., checking that the API won't let you access anything unless you've signed up, and so on and so on. Okay, so let it finish its test, and then we'll run our... So let's wait for a replete to finish testing, and then of course we'll run our own. Okay, so let's go and try this. And we have a message that says, open a new tab to test So let's just go and try this. I'm guessing this built-in view is not capable of doing that. Okay, so we see our temporary website here. Let's click on sign in. Okay, board design like to access your replete account. Yes. Let's just go add a card. We'll add a few. Real quick make sure everything still works okay and let's just put this one in progress and this one in done can we still edit everything let's delete this one let's edit this one So why don't we go and deploy it, right? Put it on the internet and test it one last time. So let's just go and do this. Yes. Go. Okay, so it's deploying, security scan, development database schema, et cetera, et cetera. And once we have that, of course, we'll open the URL and test it one last time. Okay, done. Let's go and grab this URL. Temporary one. Okay, so here's the real production app. Okay, let's go and sign in. And of course, we have an empty database this time. Because it's the production DB, not the test DB. So let's quickly create a board and some tasks. And move them around. Comp. And if we look at the database, we can switch between the production and the development database here. We see the board. We see a single session. We see our three tasks. And we see me. OK. Well, I think this is good. I think this is more than good. And definitely we've achieved a lot in just, I don't know, 20 minutes or something. So yeah, this is it, right? Just you as a non-technical user, prompting a replete to build something that is a little more than a toy, honestly. We have authentication, we have users, we have a database, we've deployed it to the cloud, and we haven't written a single line of code. And I'm sure you would have a million ideas to you keep exploring, adding labels, adding private boards, adding board management, delete, transfer boards across users, and so on and so on, right? The list goes on, but hey, I have to stop somewhere, and I think we've covered a lot with Replit, and I, of course, encourage you to go and try on your own, okay? So, I hope you liked it. I hope this was informative and hopefully fun, too. And until next time, my friends, you know what to do. Keep rocking.