Hey there, my name is Antonio and welcome to the newest video on my channel. In this tutorial you're going to learn how to build an amazing Trello clone which we are going to call Taskify. And as you can see I've already prepared some boards for us. So let's go ahead and check out what's inside my board. As you can see I've prepared a list to do in progress and done and we can easily move them between each other just by dragging and dropping And as you can see we also have a reflective notification in the lower right corner right here.
Now let's go ahead and add a new card inside of the to-do list. All we have to do is click on add a card or we can visit the options and click add a card from here. And now let's add a new task, optimization for example. And we can click enter or add a card like this. And we have a notification for that as well.
Perfect. Now let's see how easy it is to drag and drop that inside of another column. Just like that. We can do it as many times as we want. Perfect!
Now let's go ahead and click on an individual card to see what's inside. As you can see, it says the name, the list where it's in, its description, as well as its activity. For now, all activity that it says is that I have created this card. So let's go ahead and rename this card. And once I save this, you can see that I have a new activity.
I have updated the card and we have a new name right here. The same activity is triggered if I add a description and click save. Perfect! And now let's see how easy it is to copy a card. As you can see, I can select the landing page for example, and let's add a unique description here.
And let's click save. And now once I click on the copy action right here, inside of that same list, on the bottom, we have a new task, landing page copy. And as you can see, the description has been copied as well but the only activity we have is that we created that card perfect exactly what we want and we can just as easily delete a card if we no longer want it but besides this we can also go ahead and copy the entire list so let's do that with the done column right here I'm going to click copy list and look at this it is right here and the tasks have been copied as well. Beautiful! And we can just as easily delete an entire list or we can manually create a completely new list like for example design and let's click add a list and let's go ahead and move it to its appropriate place.
Perfect! So now we know everything that we can do inside of this board. We can also go ahead and rename the entire board as well just by pressing the enter and we have a notification for that as well. Now let's go back inside of our dashboard to see what else we have. As you can see on my left side right here, you probably noticed that I have some workspaces.
That is because this tutorial is also going to teach you how to create a business to business software as a service. So I have created a couple of workspaces and you're going to learn how to do that as well just by pressing on this plus button your users are going to be able to create as many organizations or workspaces as they want. So let's see what we can do in an individual workspace. First of all You can select an individual workspace right here in the sidebar. For example, I can select the boards inside of this organization and as you can see I have none of them here.
Or you can go inside of the navbar and from here you can select the organization that you want. Perfect! So let's go ahead now and let's click on the activity tab right here. As you can see inside of here we have a similar component that we saw inside of my card model. That is because inside of this page We have a list of entire activity inside of this organization, so you as an admin can keep track of everything that's going on inside of your project.
Besides activity, we also have the settings tab. Inside of here, you can manage new invitations and you can also assign roles like admins or members. You can also kick people and you can also manage profile settings like changing the name or uploading an image. Perfect! And last tab we have here is the billing tab.
And once I click here, we have a model which says to upgrade to Taskify Pro and you are going to learn how to build this entire thing. But let's not click on this right away. First, let's see how to create a new board. As you can see, I have an option here to create a new board and it says one remaining. And let's hover over this question mark to see why.
As you can see, It says that free workspaces can have up to 5 open boards. For unlimited boards, upgrade this workspace. So let's fill up these boards right here. Last one is left. And as you can see, we have a beautiful set of random unslash images loaded every time you click create a new board so you surprise your users.
Perfect! Let's select this one and as you can see we also have the name and a link to the author of that image so we oblige by Unsplash API guidelines. Perfect! And let's create this one to be last board and click create and you can see how fast that was created. Perfect!
Now let's go back inside of our dashboard and now it says zero remaining. So let's try and do that now. I'm gonna try and create a new board and as you can see I have an error that I have reached my limit of free boards. Please upgrade to create more. So let's go ahead and finally click on this upgrade button right here and we are redirected to the Stripe checkout page and as you can see we have a subscription of $20 per month.
So I'm going to go ahead and enter some fake Stripe information here. I'm going to enter a fake name and I'm going to click pay and subscribe right here and after this has been processed we're going to get redirected back to our organization page but you can see that now it says that I have unlimited boards and you can see that right here it says that I'm on a pro plan. So let's try if that is working. I'm gonna go ahead and pick another beautiful image from Unsplash here and call this board Premium Board. And let's go ahead and click Create.
And you might be wondering what does this big create button do in the navbar right here? Well, that is useful for when we want to create a new board without leaving this screen. And you might be wondering, well, how do we know inside of which organization is this going to be created? Well we can easily take a look at that inside of our navbar right here. So this is our selected organization meaning that that's where the board is going to be created.
So let's test that out when I click create there we go I am redirected to the new page. Perfect. And what I want to show you next is that inside of this organization I have unlimited boards. But if I go ahead and pick another organization, you can see that here I do not. Here it says free and I have five boards remaining.
That is because the subscription is per organization only. So this is going to be a true business to business software as a service. And of course, you're going to be able to manage your subscription in case you want to cancel it at any point for your business. Just right here. Perfect!
But that's not all. The entire application is going to be fully responsive on all devices just like this. And lastly we're also going to have a beautiful landing page so you can showcase to your users exactly what they're going to get out of your application. And one last thing that I'm very excited about and that is that this entire application is going to be using Next 14 and the new stable server actions. We have a lot to do, so without further ado, let's get started!