Download Subtitles for FastAPI React B2B SaaS Project Tutorial

In this video, I'll give you a full tutorial on how to build a B2B

SaaS application that includes organizations, multiple team members,

billing, subscriptions, permissions, roles,

and everything you would need to create a SaaS app.

We're going to be doing this using Python specifically with fast API

for the back end, and then with react and JavaScript for the front end.

We're also going to be using Clarke for handling all of the complex billing and organization

related features, as well as the authentication like signing in, signing out, etc..

This will be a long project with a lot of coding, so for that reason I've included

all of the code that's written in this video linked in the description.

You can find the GitHub repository

in case you need to copy anything, or you prefer to follow along that way.

Also worth noting that this video is not designed for beginners.

Well, I will explain to you everything that I'm doing and the reason for the decisions that I have.

I'm not going to be going over the fundamentals of the frameworks or the language,

so I won't be teaching you fast API or teaching you react.

This is more about how you assemble all of the things you know into a large,

complex project that will act as a really solid base.

If you wanted to build something like a B2B SaaS.

Anyways, with that in mind, that's all I had to go through in the intro.

What I'm going to do now is give you a quick demo of the project, and then we'll get into coding it.

So let's get started.

All right.

So let's get started here with a quick demo of the finished application.

Now we're going to be building a team based task force.

So think of it something like notion or a sauna obviously with some simplified features.

So you can see I have a simple kind of landing page here.

And I have the ability to view the pricing, which requires me to sign in or to sign in or sign up.

So what I'll do now is I'll sign in.

You'll notice that what we're using to sign in to this is Clarke.

Now, Clarke has kindly sponsored this video, but they are completely free.

You do not need to pay to use them.

And they're the easiest way to set up authentication as well as things like organization, billing,

all of that stuff that you're going to see in this video,

which is precisely why I partnered with them and why we're going to use them.

So you can see it gives me a nice email address field. Here.

Let me sign in and then I'll be right back and show you what the app looks like.

Okay. So I was able to sign in here.

And you'll notice right away that the first thing I see is the current organization that I'm inside.

So I have this new org test.

I also have this hello world organization.

And I have the ability to create another new organization by simply pressing this button right

here.

Now, if I go to my dashboard, you'll notice that's going to start loading my different tasks.

Right now we don't have any shows.

Maybe we have two members in this organization.

If I want to make a new task, I can go like test, you know, this or

something, put it in the To-Do category and you can see that it's here.

And then if I want to change its category, I can simply just swap it.

And you see that it moves right over.

Now the interesting thing is that if I change over to my hello, world organization,

you'll notice that I now see some different tasks popping up in this board,

because the tasks that I have are defined per organization.

And what I can also do is click on the pricing.

You'll see that we have some pricing tiers here.

So we have a free tier. And then we have a pro tier.

And the way that I've set this up is that if you want to have more than two members

in your organization, you can use the pro tier, which I just put out $1 per month.

But you can set this to any price that you want.

And if you have less of that sub two or less members, then you can use the free tier.

Now the way that you manage the members is you go to manage with the inside of your organization.

You go to members

and you can see the various members that appear here, and you can set the roles for those members.

So for example, you can make them editor, a member and admin.

I'll talk about all of that in this video, but you can see that this really is kind of

like a B2B SaaS setup where you have billing, you have members, you have organizations,

you have subscriptions, right?

$1 per month.

We have kind of data that is shared between different teams.

We have different roles for members.

That's what I'm trying to show you in this video.

With that said, let's hop over to the code editor,

start writing some code and building this project.

So I'm inside my code editor here,

and what I've done is I've just opened a new folder called B2B SaaS on my desktop.

So open any folder in any code editor that you want.

And you'll notice that for this video I'm going to be using PyCharm.

Now like I said, you can use whatever you like.

But typically I recommend PyCharm for large Python based applications.

In this case a lot of the work is going to be in fast API.

PyCharm is specifically designed for working with frameworks like that gives us

really good typings as well as recommendations with a lot of great features,

so I would recommend using it.

Now, if you do want to use PyCharm and you want to access their Pro subscription,

try it for free and see if you like it.

You can do that from the link in the description.

I do actually have a long term partnership with them.

So again, if you click that link below,

you'll be able to test it out and use it completely for free and see if you like it.

Anyways, with that said, let's get into the setup here.

What I'm going to start doing is setting up two folders, one for my back end and one for my front.

So I'm going to open up my terminal here.

I'm going to go into my B2B SaaS application.

And I'm just going to make one folder here.

So let's go new folder.

Let's simply call that back end.

Then let's make another folder.

Actually we'll do that just from the command line.

That will be our front end.

So let's create our front end.

In order to do that you're going to need Node.js installed on your computer.

So make sure you have that installed because you're going to be using react.

And we're going to say npm create vite

at latest like that.

And then we're just going to simply put front it.

Now when we do that it should create a react application for us

if we select the correct framework.

So I'm going to select react here

I'm just going to use JavaScript I'm not going to use TypeScript for this particular project.

But you could if you want to.

I'm going to go know for roll down field.

And I'm going to say install with npm and start now.

Yes. And it's going to start installing and creating this front end folder for me.

So this is the setup for the front end.

Then we're going to set up the back end.

We're actually going to write the entire backend.

First we're going to understand the architecture of our application.

And then we're going to start building the front end the UI and kind of connecting

all of the pieces together. Okay. So you can see our front end is running.

If I click on it, you know,

this is kind of the default dummy front end that you get when you create the react application.

I'm just going to shut this down by hitting Ctrl C, I'm going to CD

into my back end directory and I'm going to start setting up the code that I did here.

So for this project I'm going to use UV.

So I'm going to type uv init and then dot create a new UV project inside of this back end directory.

You can see when I do that it creates five files.

Here we can delete this main file because we don't need this one for right now.

If you're unfamiliar with UV, I'll leave a video on screen

that explains how it works, but essentially it's a better version of Pip.

You can install it and then you can just use the UV commands like I am here.

All right.

So for our particular back end

project here, we're going to need a few different Python backend frameworks right.

Or Python modules.

So what we're going to do is type UV add.

And we're going to add the fast API module.

Because of course we're using fast API for our back end API we're going to install unicorn.

This is the web server that will run our backend API.

We're going to install SQL alchemy.

This is what's going to be used for connecting to the database.

Then we're going to use Python dot env.

This is for loading environment variable kind of configurations.

Then we're going to use pi JWT.

This is for verifying JWT tokens.

We're going to bring in the Clarke backend API.

This is the Python package for Clarke that allows us to use

Clarke on the backend for handling all of our authentication.

We'll talk more about that later.

And we're going to bring in SBX.

This is what we're going to use

to actually validate a webhook that we're going to get from Clarke later on.

But for now let's install all of this okay.

So you're going to see that that then creates the virtual environment for us.

Installs everything. We get this dot venv folder.

And now we're good to go and start setting up our packet.

So what I'm going to do to begin. So I'll make a new file.

And I'm going to call this dot env.

This is where we're going to put some environment variables that we need for the project.

Now for the env file I'm just going to put in the variables.

And then we'll grab the values that we need later.

So first things first we're going to type Clarke underscore secret underscore key.

We're going to type Clarke underscore publishable underscore key.

Then we're going to type Clarke under underscore sorry

UK s underscore URL.

Then we're going to have the database underscore URL which we can actually fill in right now.

And for the database we're going to use a local SQLite database.

But you could use anything that you want.

So I'm going to type SQLite like that.

And then colon three forward slashes dot slash.

And then task board dot db which is going to create

a database called Task Board for us where we store all of the information.

We then are going to have the front end underscore URL.

And we're going to make this equal to Http colon slash slash localhost.

And then port 5173, which is where our react application is going to run.

And we're going to have the Clarke underscore webhook underscore secret.

And we're actually going to put this up top because that is one of the Clarke values.

We might as well just keep them all together okay.

So we're going to look at all these values later on.

But like I mentioned for all of the authentication, all of the log in all of the organization billing

subscriptions, we're going to use a free framework or a free tool I guess called Clarke okay.

So that's why I'm putting in the variables here.

We're going to create that Clarke.

We're going to create that Clarke account.

And one minute after I start stubbing the API.

And then you'll see why we're using this and why we need this, these particular values.

Sorry okay.

So for our API what I want to start by doing is just creating the different directories and files

that we're going to need.

So we can start to kind of understand the architecture and how things are going to be set up.

Then after that, we'll start actually writing the code and going into the individual files.

So for now, inside of our back end folder, we're going to make a new file.

And we're going to call this start dot pi.

This is going to be the entry point for our application.

The file that we run to effectively run the app.

We're then going to make a folder here.

So a new directory called app.

And this is where all of the code for our application is going to live.

Now inside of app we're going to make a few new folders.

So we're going to have one folder.

And this is going to be called API.

This is for all of the API routes.

We're then going to have another folder.

This is going to be called core for the core functionality.

Essentially another new directory.

This is going to be called models for our database models.

And then another directory.

And this is going to be schemas.

Now the schemas are going to be used to essentially validate data.

Then inside of the app directory we're going to make a new file.

This file is going to be called main.py okay.

And then we'll just go ahead and press cancel there.

So what we have now is app.

We have four folders API core model schema.

We have our Main.py.

And now what we're going to do is start writing the different files.

And you're going to go inside of these folders.

Now I'm not going to write all of the code, but we're just going to write the file names

so that at least we know what we're going to have and how the app is kind of going to be structured.

So from API we're going to make a new Python file.

And this is going to be tasks.py

for handling all of the API routes related to our tasks.

We're then going to make another new file.

And this one is going to be called webhooks.py.

Later we'll discuss what a webhook is.

But essentially this is going to be for all of the endpoints to receive data from clerks.

So when some event happens, like we create a new organization or we subscribe to a particular

billing plan, we can get that information and handle it inside of our app.

We're then going to have core.

So inside of core we're going to make a few new files.

So here we're going to have a file called off API for handling authentication.

We're going to have another new file.

This is going to be called clerks Pi okay.

That's going to be a lot of files.

Just bear with me and then we'll start actually writing them out.

We're going to have another one called configure Pi for all of the settings for our application.

And we're going to have another one called database dot Pi for, you guessed it, handling the database.

Now we're going to go inside of models for our database models.

These are going to be pretty easy.

We're just going to have one called task dot pi.

And then we'll write the model directly inside of there.

And then for our schema same thing we're going to make a new file.

And this is going to be called task dot pi okay.

So quickly pause the video.

Have a look at all of the files that we've created.

Make sure that your app looks the same.

And this is just going to make your life easier.

As we continue that all of the files are already great.

Okay, so now that all of those files are created, we're going to start grabbing

some of the credentials that we need to store inside of this dot environment variable file.

Okay. So we're going to go to our browser.

And I'm going to quickly explain to you why we're using Clarke and how to create an account here.

So like I said Clark allows you to essentially manage all of the users

authentication organizations, billing, subscription, etc.

for your application so it has pre-built components like the ones you saw right here for things

like sign up, sign in, user button, user profile, all of the ones that you actually already saw

in the app that I download to you, things like switching the organization, you know,

creating the organization, looking at a profile of the organization.

So it just makes our life as a developer significantly easier.

And again, the best part is this is free and it's actually very widely used.

You probably seen these UI's in a lot of applications and large sources.

Okay.

So in order to use Clarke we need to do is just create a free account here.

I'll leave a link in the description where you can make that account.

Once you do that, simply go to your dashboard.

And we're going to create a new Clarke project.

So if you just go into your workspace you go here and you just go create application.

It will allow you to give the application a name.

So in this case I'm just going to call this, you know, be to be

task manager or something.

Or let's just go like SAS task manager maybe.

Okay.

And you'll notice that you can enable or disable a ton of different sign in methods.

So I'm just going to leave email for now.

But you could enable Google Sign-In Facebook Sign-In.

You can enable, you know, all of these sign ins at once.

Right.

And this is the benefit of using Clarke

is that if you ever want to change the authentication methods, you just directly do it from this nice UI.

You don't have to do a ton of setup. It's very easy to do it.

So you've been like you can sign in with notion okay.

So we're going to go with just email for now.

We're going to press on create Application.

And this is going to make a new Clarke app for us.

Now there's going to be a lot of instructions here that explain to you how to add this

to your front end.

We will do that later when we start setting up the front end.

But for now, what we're going to do is go to this configure button and start

grabbing some of the keys that we need for our environment variable file.

And you'll also notice that there's a ton of settings here that you can mess with and play with.

For now, we'll just leave it as it is okay.

So we're going to go down here to where it says API keys from the settings.

And we're going to grab a few of the keys that are here.

So first one is the publishable key otherwise known as the public key.

We're just going to copy that.

And we're going to put that into our environment variable file where it says publishable key.

So let's paste that.

The next one is the secret key.

So I'm just going to copy that.

And same thing on a paste that into the Clarke secret key variable.

We then need the WCS URL.

We're going to find that from the right hand side here where it says WCS URL.

Same thing.

We're going to copy that and just paste that right there.

And then lastly we have the Clarke webhook secret.

We're not going to have that right now.

So we'll just put an equal sign and we'll fill that value in later when we get to the webhook okay.

So now we have the values that we need in our environment.

Variable file. Again we'll go back to Clarke later on.

But for now we're going to start filling in some of the Python files that you see here.

So for now where we'll start is inside of this core folder we're going to go into config.py.

And we're going to start writing

the code to load in essentially all of the settings that we need for this app.

So we're going to start by saying import OS.

We're then going to say from dot env

import load underscore dot env.

And I'm just going to configure my interpreter here so we don't get those errors okay.

So now we're going to type load envy.

What this is going to do is load this dot environment variable file for us.

So we can access some of the values inside of it.

We're then going to create a class called config.

This is standard and fast API to store all of your settings and variables in one class.

And we're simply going to write a mapping from our environment variable files or variable.

Sorry two variables inside of the class.

So we're going to say Clarke underscore secret key.

We're going to say this is of type string is equal to OS dot get env.

And then this is going to be the Clarke secret key or an empty string.

If for some reason that doesn't exist.

Next we're going to get the Clarke publishable key.

So we're going to say Clarke if we can type this in capitals underscore publishable

okay.

Underscore key.

And then this is of type string and lowercase.

And this is going to be equal to Oscar get env.

And then the Clarke publishable key.

And again an empty string.

We then are going to have the Clarke underscore

webhook underscore secret.

And this is going to be a string which is equal to the Oscar get env.

And then the Clarke webhook secret and again empty string.

We then are going to have the Clarke underscore J wcs underscore URL.

Same thing string is equal to Oscar get env

same variable Clarke wcs underscore url.

We then are going to have the database

underscore URL which is a string.

Same thing equal to Oscar.

Get env database url.

We then have the front end URL.

So front end underscore URL string

is equal to a stock at env front end url.

And then we're going to have two variables that we're going to define ourselves.

The first is going to be the free tier underscore

membership underscore limit.

This time it's going to be an int which is equal to two.

And then we're going to have the pro underscore tier underscore membership underscore limit

which is going to be equal to zero which stands for unlimited.

Now what I'm doing is just putting two values here that we'll need to use later

to essentially define, okay, how many members can you have in a free plan?

How many can you have in a pro plan that is stored in here?

And we're not hardcoding it multiple places in our app.

We're then going to go and say settings

is equal to config like that,

so that we have access to all of the effectively the settings for our application.

Okay. So that is it for the config.py file.

Now we're going to go and just write the database connection.

So from database we're going to say from SQL alchemy import

create engine we're going to say from SQL alchemy.

And then this is going to be Jaume import

the session maker and the declarative base.

We're then going to say from app score config

we're going to import the settings like so okay

we're then going to continue and we're going to say engine is equal to create underscore engine.

And we're going to say settings dot.

And this is going to be the database underscore URL is going to be essentially

how we're creating the database from what the URL is we're using for that particular database.

And then we're going to say the connect underscore arguments is equal to a dictionary.

And we're going to say check same thread and then is equal to false.

I'm not going to explain this too much in depth.

We're just going to make sure that we're able to run the database successfully.

We don't have any problem with it running inside of the same thread or something else.

We're then going to say session local is equal to the session maker,

and we're going to say auto commit is equal to false.

We're going to say auto flush

is equal to false as well.

And we're going to bind this to our engine.

Now I know a lot of this will look a little bit confusing, but this is very standard

when working with fast API to be able to connect to a SQL database,

we're then going to say base is equal to declarative base.

And what we're going to do is say define get database.

And we're going to say database is equal to session local.

When we call this it's essentially going to bind to the database engine.

It's going to create the database if it doesn't already exist.

And if it does exists it's simply just going to yield it to us.

We're then going to say try and we're going to say like this yield.

And we got to spell yield correctly.

The database.

And we're going to say finally.

So why is this not working like this.

Finally we are going to say DB dot close

okay.

So this is all we need for the database.

What this is doing is essentially just creating a database session.

And then we have this function where when we want to access the database, we just call it

it yields the database to us.

And if there's any issues then it just closes the database and make sure that it saves successfully

okay.

So let's continue here.

And let's now go into the clerk.py file.

And let's write this to connect to clerk.

This is super straightforward.

What we're going to do is say from clerk underscore backend underscore API import clerk.

And we're then going to say from app score

dot config okay.

If we spelled that correctly import settings.

And then we're going to say clerk is equal to clerk.

And we're going to say the bearer underscore auth

is equal to settings dot clerk

okay.

Let me just spell this correctly.

Clerk underscore secret underscore key.

Now the reason why we need to set up some stuff related to clerk here in the back end is the

clerk is going to handle all of our authentication automatically for us in the front end.

Essentially we can just bring in a clerk component and it will allow the user to sign

in, sign out, handle the organizations, and it will just do all of these.

However, we only want authenticated users to be able to send requests to our Python backend

because our backend is going to handle things like creating the tasks,

setting where the tasks are maybe deleting a task.

So what we want to do is ensure that only users

that have the right permissions to handle those tasks are able to do so.

So what we're going to do is from our front end, we're going to include the clerk

user data to a request to our back end.

And our back end is going to verify that this users

who they say they are by using this clerk package.

So essentially we're going to go to clerk and we're going to say hey clerk,

is this actually one of the users who signed into our app?

Clerk is going to say yes or no.

And then based on that information,

we can kind of gate what that user is able to do in our backend application.

It'll make more sense later on.

But that's kind of the basics of why we're setting up clerk like we are.

So with that in mind, let's actually go back to clerk, and I'm going to start setting up

some of the things that we need in order to make this authentication work.

So from clerk we're going to go to organizations here.

And we're going to go to settings.

Now what we're going to do is enable organizations for our app.

We're going to turn off allow personal accounts and just enable this.

Now effectively what we're doing here when we enable organizations

is we're allowing users to create organizations and invite other members to them.

This is very common in something like a B2B software as a service where one person creates

the org, they invite different members and maybe you pay per member, right?

Or you have like a certain number of seats and you upgrade to another plan to unlock more seats.

Clarke allows you to do that.

And that's kind of what we're enabling right now.

So what we're going to do is we're going to set the limited membership to two

right now and make that saved.

The reason for that is that I want to limit any new organizations or three organizations

to just have two members and then force them to pay

to upgrade their organization in order to have unlimited seats.

Okay.

Now we can scroll down here.

There's a few other things that we can set.

For example, the default role for new members, the creator's

initial role in the organization allow members to delete organizations.

Right.

There's a bunch of stuff that we can do here, and for now, we'll kind of leave it as is.

We also could turn off, allow user created organization so that you had to manually

create an organization yourself as the app creator or admin in order for someone to join that org.

All right.

So next thing though, we're going to go to roles and permissions.

Within organizations.

You can have various different roles right view or editor admin.

You know content manager sales manager.

You've probably seen that before if you've used any kind of sets.

So notice that we have advent currently. Right.

We can just kind of describe what the admin can do.

We have member. Right.

And then we can create our own rule.

So for this particular app because we're going to have kind of this task board,

I want to create a new role here called editor.

So I'm going to give this role editor.

See the keys editor I'm going to say a user who can edit tasks.

Cool.

And I'm going to go ahead and I'm going to save that.

Now with this role we can just check if a user is admin, editor or member,

but we can even get more specific and we can add particular permissions per each role.

So what I can do here is go to features

from features I can press add feature.

This particular feature I'm going to call is task okay or let's call it tasks actually.

And I'm going to say task in the task board.

And what I'm going to do is

start setting some permissions that I want to be able to set for particular users.

So I'm going to go create permission for the first permission.

Let's call this create.

We're going to say can create tasks.

And we're going to go ahead and create that.

You can see this one permission has now been created.

Let's make another one.

We're going to call delete can delete tasks.

Let's make another one.

Let's call this view can view tasks okay.

And let's make another one and call it edit and say can edit tasks okay.

So now we have four permissions create delete, view and edit.

Those are within the feature of tasks.

We're going to go ahead and save that.

Go out of here.

And you'll see now that we have this tasks feature created.

So now if we go back to our organizations we get to roles and permissions.

We can go to the admin for example.

And you'll see the permissions are now appearing.

And we can enable all of them for the admin okay.

Let's go ahead and save that.

And let's go back to the editor.

Same thing for the editor.

Let's allow them to do all of this okay.

So save and for the member let's just allow them to view.

So they cannot edit, delete or create.

But they can view the tasks in the task board.

Cool.

So there you go. We just added a few different roles.

We set up the permissions here, and now we can start using these directly from our code.

Whenever someone signs in with their clerk account so we know what permissions

they actually have access to.

However, before we do that, I want to start setting up the billing and the subscription as well.

While we're on this page.

So I'm going to go to billing and I'm going to go to settings.

Now from here what I'm going to do is enable organization billing and press on save.

Now when I do that, it's going to give me a few other settings like allow me to connect my stripe account

or to directly use the clerk payment gateway.

Now if you were in production, this would become more important for now

because we're just testing in development, it doesn't really matter which one you use here,

and we'll be able to just test with kind of like a fake credit card, which we'll see in a second

when we talk about these kind of different plans and upgrading to pro and all of that kind of stuff.

Now, what you also see here is that it shows me plans.

So it says create plan.

I can also just go to subscription plans here and I can start creating various

different plans for organizations or for individual users.

So what I'm going to do for now is I'm going to create a new organization plan.

I'm going to call this pro tier like that,

and I'm just going to write a description and say on limited

seats in the organization.

Okay. Like that.

And then for the fee I'll just make it $1.

You can make it literally anything that you want.

You could enable a free trial, make it publicly available, add various features

to this particular plan.

For example, you could add, you know, the tasks feature.

So maybe you can actually unlock different features with different plans.

In my case, I'm not doing that.

But maybe we have some you know, I feature something

that you only get access to if you're in the Pro plant,

then you could make that a feature, enable it directly in Clark, and then have it.

Actually one of the things associated with this plan.

And your code can then check that and see if the user or the organization has that particular feature.

This is super powerful.

That's why I'm using it.

But you can see for now I just created this new plan.

Now we have a free plan sorry.

And the pro tier plan.

And later I'll show you how we can display that.

And notice it's actually kind of showing it to us already by using this pricing

table component in react and using this method and kind of protect you protect certain features

based on what plan the organization or the user has.

Okay.

So that's pretty much all I wanted to do.

For now, I will quickly mention to you that everything you see inside of Clarke,

you can customize, you can change all kinds of other stuff you can look at here.

For now, though, we'll leave this as is, and we're going to go back to our code and we're

going to start writing this off module, which now hopefully should make a little bit more sense

because we just enable those kind of permissions inside of Clarke.

All right.

So what we're going to do for off here is we're going to start by importing http x.

We're then going to say from fast API import depends

Http exception.

If we can spell exception correctly request

okay and

status, we're then going to say from the Clarke

back end API dot security

import the authentication request options.

We're then going to say from app score dot

config import settings.

And we're going to say from Abc4 dot Clarke

import Clarke okay.

All right. So now we have the imports that we need.

And in this particular file we're going to handle all of the authentication.

And essentially understanding if a particular user has

the ability to edit a task, delete a task etc..

Now effectively what's going to happen is when someone signs into our front end,

like I mentioned, they're going to be using Clarke from our front end.

We're going to include the user's Clarke account details, which includes a JWT token,

which is essentially their identity as the user in our app.

And it's going to be sent to our back end.

So front end is going to send request to the back end okay.

And this is going to include a JWT token from click.

Now what we're going to do on the back end is the back end is going to authenticate this token.

When we do that, we're going to get the user details

from Clarke and check the user's permissions okay.

So this is effectively what this file is going to do.

We're receiving a request from the front end that includes some details about the signed and user.

Our backend is going to authenticate.

These details are valid.

We're going to get the details from Clarke about this particular user.

And we're going to check their permissions to see okay.

Are they a member. Are they an editor. Are they an admin.

What do they actually have the ability to do.

So I'm going to make a class here called auth user.

Inside

of here I'm going to say define underscore underscore init.

And I'm going to take in self a user underscore id

which is a string, and org id which is also a string

and org underscore permissions like this which is a list.

Then what I'm going to do is say self that user id is user

id, self.org id is org i.d.

and self.org permissions

won't spell this correctly or org permissions.

Then I'm going to say define has underscore permission.

We're going to take in self and then a permission

which is a string.

And we're going to return a boolean.

We're going to say return

permission in self-talk permissions.

Now this is simply just going to check if this user has a particular

permission inside of this permissions list.

That's because whenever we check the user in Clarke,

it's going to give us a list of permissions that user has.

Those permissions are going to include the ones that we just created.

Like can they edit a task, can they delete a task, etc..

So we're going to check those essentially.

And if we have them then we're going to tell the back end or whatever function okay.

Yes they can actually do that particular task.

So now I'm going to create a few properties.

So I'm going to say app property define can underscore view

okay.

This is going to take in self.

It's going to return a boolean.

And we're going to return self. Dot has permission.

And then we're going to say org colon tasks colon view.

So the way that the permissions are set up inside of Clarke is that the particular permission

that we create it's like view create delete edit is associated with some feature.

In this case the feature is tasks.

And that feature is associated with an organization.

So we're saying org tasks view.

We're checking in this particular organization.

In the tasks feature do we have the view permission.

So I'm going to copy this now this method.

And we're going to write it for all of the different properties that we have.

So as well as can view we're going to have can create.

And we just change this to create.

Same thing for can

delete change this to delete.

And then what is the last one that we have.

So we have you create delete.

And then we're going to have edit.

And then simply change this to edit.

And that's it.

We now have these four different properties in this class.

And I can use this auth class to determine if a user has a particular permission okay.

So now we're going to write a few functions that essentially takes the data that are front

end sends to the backend

and sends it to Clarke to validate this data and make sure the users who they say they are.

So we're going to write a function called convert underscore

to underscore Http underscore request okay.

Now inside of here what we're going to do is have a fast API

underscore request which is of type request.

And this is going to return an Http dot request.

Now inside of this function I'm going to go return

http dot request.

And I'm going to have the method which is equal

to fast API request dot method.

I want to have the URL which is equal to fast API request URL.

And we're just going to convert this into a string.

And we're going to have headers which is equal to a dictionary.

And this is going to be the fast API request dot headers.

Now effectively all we're doing here is we're just taking the fast API request object.

And we're converting this into an Http request object.

Just a different request object that's going to be used directly with the clerk module.

Now we're going to have another function that's going to be async define.

And this is going to be get underscore current underscore user.

This is going to take in a request which is a fast API request.

And it's going to return an authenticated user okay.

And let's spell request correctly here.

Awesome.

So from this function what we're going to do is we're going to say Http underscore request is equal.

To convert to Http request.

And then we're going to pass this fast API request.

So we just take the request convert it into this Http one.

We're then going to say the request underscore state

is equal to clerk dot authenticate request.

And we're going to pass the Http request okay.

As well as the authenticate request options.

And we're going to say the authorized parties is equal to.

And this is going to be settings dot front end underscore URL.

All right.

So effectively what this is saying is okay get the data from this Http request.

Authenticate it with clerk.

And also just make sure that we're only going to authenticate once they come from our front end URL.

We're going to say if not request

underscore state dot is

signed in okay.

Because what's going to happen

now is this request state is going to give us a bunch of information about the user.

What's their username. Are they signed in.

Are they signed out.

Have they create an account etc. etc..

So if they're not signed in then we're going to raise an Http exception and we're going to say

the status underscore code is equal to statuses

Http underscore 401 underscore unauthorized.

And we're gonna say detail is equal

to not authenticated

okay.

So that's going to check if the particular user is signed in.

And then we're going to say claims are equal

to request underscore state dot payload.

We're going to say the user ID

is equal to claims dot get and then sub.

Now what's going to happen effectively is that when clerk authenticates this request right.

And it kind of pulls out the information from this JWT token.

It's going to include something called a payload.

Now in the payload

we're going to have some information like the sub which is actually the user's ID in clerk

as well as the organization ID that they're inside of and things like their permissions.

So we're going to get that information.

So we can then use that from our backend.

So we're going to say the org ID is equal to claims dot get.

And then org underscore id we're going to say

let's get out of this parentheses here okay.

Go back that the org underscore

permissions are equal to claims dot get.

And we're going to get permissions.

Or we're going to get claims dot get.

And then org underscore permissions.

Or that's because it could be stored under permissions org permissions.

Or if we don't have either of those then we're just going to have an empty list

because we have no permissions.

We're going to say if not user underscore ID then same thing.

We're just going to raise this error.

Because if we don't have a user ID that means there's some error and the user's probably not signed in.

We're also going to say if not and this is going to be org ID.

So if they're not a part of some kind of organization,

then what we're going to do is we're going to return a 400.

So we're going to say 400 bad request, and we're going to say no organization selected

okay.

Because they need to select some particular org organization.

Sorry.

And then if all of that is good we're going to return an off user.

And we're going to pass to the auth user the user ID which is equal to the user

ID, the org id which is equal to the org id

and the org underscore permissions, which is equal to the org permissions.

So effectively you're saying this function will get us the current user from Clarke.

We can convert the request.

We're going to authenticate with Clarke.

We're going to check if they're signed in.

If they are we're going to get information like their user ID, the org ID and the permissions they have.

If for some reason they don't have that data, there's some kind of error.

So we'll return that.

Otherwise we'll return the authorized user.

Now just from this file we're going to create a few more functions as well, which are going to act

as helper functions to essentially get access to particular functionality.

Bear with me. These are going to be pretty simple.

Once we write the first one, the first one is going to be called require view.

This is a function we're going to use to require the view permission from a particular user.

So we're going to say user.

And then this is going to be off user equals depends.

And then this is going to depend on the function.

Get current user okay.

We're not going to call the function. We're just going to write its name.

We're then going to say this will return and auth user.

And what we're going to do from here is we're going to say if not

and then user scan underscore view,

then we're going to raise an Http exception.

And inside of here we're going to have a status code which is equal to status

dot Http underscore 403 okay.

Underscore forbidden saying you don't have this permission.

We're going to say detail.

And we're going to say the view

permission required okay.

Pretty straightforward.

Then down here we're going to return the user.

And we're going to copy this function.

And we're going to have this for every permission.

So rather than now require view we're going to have require create.

We're going to change this to can create.

We're then going to have creates permission required

okay.

And then we're going to do the same thing

except rather than require creates we're going to say required delete.

We're going to change this to be delete.

We're going to change this to say

delete permission required okay.

Now let's go down here rather than require view.

This is going to be require edit.

We're going to change this to say can edit.

And then same thing edit permission required okay.

That's all the we need.

The reason why I'm writing these four functions is we're going to use this is what's

called a dependency injection in a minute and fast API.

So if a user wants to, for example, create a new task, we just call this function.

It will then get the current user and see if the user is actually able to create the task or not.

That's why we have that inside of this off file.

So I know that was kind of complicated thing. That was a lot of code.

But now we've handled the core work for our API and we're going to start working on the database.

Then we'll write the back end API route.

And then we're done with the API.

We can test it and then we can move on to the front end.

So let's close all of this for now.

Again we have kind of the auth stuff handle which is the most complicated.

And what we're going to do is start writing our database models.

So the only database model that we're going to have here is simply to represent a task.

Right.

And a task can be in different stages like pending started, completed.

That's kind of how we'll set it up.

But you can make this more complicated if you want.

So from this task file inside of models, I'm going to define what a task looks like.

So I'm going to import Uuid which will allow us to create a unique ID

I'm going to say from date time

import date time

I'm going to say from SQL alchemy okay.

And then import

column string,

text datetime and enum.

And by the way, if you're getting lost here, all of this code will be available

from the link in the description. I should have mentioned that earlier.

Now let's continue.

I'm going to say imports enum and I'm going to say from App

score dot database

import base okay.

We're then going to say class task status.

And this is going to be string comma enum dot enum.

And we're just going to make a simple enum in Python.

So we're going to have pending which is equal to pending and lowercase.

We're then going to have started

which is equal to started in lowercase.

And we're going to have completed

okay which is equal to completed in lowercase as well.

So this is just be status for a particular task.

You can have more. We're just going to pending started complete.

Then we're going to have class task.

This is going to inherit from base.

And what we're going to do is just define

the table names underscore underscore table name underscore underscore okay.

And this is going to be equal to tasks.

Then we're going to define all of the different data that's going to be stored on this task.

So the first is going to be the ID.

So we're going to have ID column.

This is going to be string primary key true.

And then the default is going to be lambda and then string uuid uuid.

For what this is going to do is just by default create a new unique

ID for all of the tasks automatically for us.

Next we're going to have a title of the task.

This is also going to be column.

It's going to be of type string.

Now we're going to put 255 to limit the length to 255 characters.

And we're going to say knowable is equal to false meaning.

This cannot be empty.

We're then going to say description.

This is going to be column.

We'll just make it text because it can be long.

But this time we're going to say knowable is equal to true because it can be empty.

We're then going to say status is equal to column.

This is going to be of type enum with the task status.

The default is going to be task status.

Dot pending and knowable is going to be false.

This cannot be empty.

Then we're going to have the org ID because every task needs to belong to some org.

So we're going to say column

string.

And then we're going to say nullable is equal to false.

And we're going to say index is equal to true.

So that we can look up values based on this column very quickly

to find all of the tasks for a particular organization

we're then going to have created by and this is going to be the user who created this.

So this is going to be column and then string and then nullable

is equal to false.

We're then going to have created Add.

And this is going to be column datetime.

And we're going to say noble is equal to false.

Or actually we don't need that.

We're just going to say default okay.

Default is equal to date time dot UTC.

Now and then we're going to have updated add.

And this is going to be

column and same thing date time.

And then default is going to be DateTime dot UTC.

No okay. Perfect.

So what this is going to do is it is going to essentially just define

the table schema for our task.

So we have an ID title description status, the org.

This task belongs to who it was created by, when it was created out and when it was updated.

That's all of the information that we need to store about any given task.

Now that we have that we're going to go into schemas and we're going to write

essentially the data validation for creating a task, updating a task,

and getting a task so that we have the correct types in our fast API application.

So what we're going to do is we're going to say from date time import date time,

we're going to say from pedantic import

the base model, we're going to say from typing

import optional okay.

And we're going to say from app dot models dot task okay.

The when we just created imports the task steps.

Now what we're about to create and let's go back to here is something called schemas.

Schemas are essentially Python classes that use pedantic

to help us validate information that gets sent to or returned from our API.

So if someone wants to create a task, for example, they need to pass a title, a description, a status.

That's what we're defining here.

And then we'll use in just one minute.

So we're going to say class task create.

This is going to be the schema that's going to be used

when someone wants to create a task it's going to inherit from the base model.

We're going to say title string.

We're going to say description.

And this is going to be optional

okay.

And then string we're going to say status.

And this is going to be task status.

And then is equal to task status.

Dot pending okay.

So that's kind of the default when they create a task is that it will go and set a pending.

So now if a user wants to create a task

they need to pass this information effectively which we'll use in a minute.

Next we're going to have the task update.

Now this is going to be

pretty much the same thing as the other one, except all of the fields are going to be optional.

So our essay title and then optional string okay is equal to none.

Then we're going to say description and same thing.

This is an optional string is equal to none.

And the status here optional task status equal to not.

So if you want to update the task you can pass any or none of these different combinations of values.

And we'll update based on the ones that you pass.

Right.

Then we're going to have class task status update okay.

So if this is just for updating the status

now we're going to take in the status and the task status like so.

And then lastly we're going to have the class task response.

Now the reason why we write a task response model or schema is because

sometimes we don't want to include all of the information that's in our database

when we return information about data in the database.

So in this case, we're kind of writing a slim version of a task that we'll return to the front end

that might hide any of the sensitive data that we don't want to return.

So we're going to say ID int

we're going to say title string.

We're going to say description

okay.

And this is going to be optional string.

We don't need to make this equal none just optional.

Then we're going to say status is going to be the task status.

We're going to say the org underscore ID is a string.

We're going to say created underscore by is a string.

We're going to say created add is a date time object.

Let's go created and spell that correctly by the way.

And let's go update it at updated underscore at

date time.

And then we're going to say class config.

And we're going to say from underscore attributes equals true.

Which means this will automatically create this response class

based on the attributes of another class which you will see in a minute.

Okay. So that's the schema.

Again we're going to use this in a second where it will make a little bit more sense.

Now what we're going to do is we're going to go to our tasks.py file inside of the API.

And we're going to start using all of the code that we just wrote to define.

The endpoints are kind of the root of our API

for the different operations related to our tasks.

So we're going to say from fast API imports, the API router,

the depends

the Http exception and the status.

We're then going to say from SQL alchemy forum import session,

we're going to say from typing import

the list, we're going to say from app

score dot database

okay.

We're going to import the get database.

We're going to say from app score off imports.

The get underscore current underscore user

we're going to import require view

require create.

So all these functions that we wrote require delete

and require edit okay.

Now you can't see that but I wrote require Edit.

All right then we're going to say from app dot models

dot task import the task model.

And we're going to say from app dot schemas dot task

import the task, create the task,

update the task status update,

and the task response.

Okay. So that's all of our imports.

Now what we're going to do is we're going to create our router.

So we're going to say router is equal to API router.

The prefix is going to be slash API slash tasks.

And then we're going to say tags is equal to tasks.

What we're effectively doing here is saying okay all of the endpoints I'm about to write

here are going to be prefixed with API slash tasks.

So if I have an API here like slash create

I would go to slash API slash task slash create it.

Also let me just quickly fix this because this needs to be inside of a list for the tags.

All right.

So now we're going to say at router dot

get we're going to put just an empty string for now.

Which means if you go to this exact route what we're going to do

is we're going to specify the response underscore model,

which is going to be equal to a list of task response.

And what we're going to do is return all of the tasks that are in the current user's organization.

So we're going to say define.

And this is going to be the list underscore tasks we're going to take in the user.

So we're going to say user of user

equals depends and then require view.

So what's going to happen now is we're saying okay and we need to make this a capital sorry.

We're going to depend on this require view function.

So we're going to call the required view function.

And if that doesn't give us back in authenticated user

it means we don't have the ability to actually view these tasks.

So then we will just raise an exception. Right.

If we do get the authenticated user then we're good to go and we can view them.

We're then going to say DB session is equal to depends and then get database.

So we need the database as well as the permission to view in order to run this function

we're then going to say tasks is equal to db dot query.

We're going to query

the task and we're going to say dot filter.

Then we're gonna say task.org underscore id

is equal to user.org underscore id okay.

And then dot all.

So what this is going to do is it's just going to filter it.

It's going to make sure that the user's organization ID matches the tasks, organization ID, if it does.

And we will return those particular tasks

because those are the tasks that this user is currently in the organization us.

I think that makes sense.

So I said that, but hopefully you get the idea. Okay.

Next we're going to write something very similar, except this time it's going to be to create a task.

So I'm going to copy this and I'm just going to start changing some things.

So rather than row toget we're going to change this to rounded up post,

which means you need to send a Post request to this particular endpoint.

Now for this endpoint we don't need to change it.

We can actually just leave it as this.

Because if you send a Get we'll list the tasks.

If you send a post, we will create the task now rather than the response model being a list.

This time it's just going to be one individual task.

And similarly to before, we're going to take in the user,

except this time it's going to be require create.

We're going to take in the session because we need the database.

But before that we're also going to take in the task underscore data

which is going to be from task create schema that we wrote earlier.

Now let's actually just clean up this function a little bit so it's easier to read.

So let's put our dependencies on separate lines and then go

like this and start writing the rest of the function.

Okay.

So similarly to before again we're getting the user.

We're getting the database.

But now this time we're taking the data from this schema.

Let's have a look at it. Right.

So we need the title description and status in order to create the task.

What we're going to do now is just create the task.

So we're going to say task is equal to task.

We're going to say title is equal to the task data dot title.

We're going to say the description is equal to the task data dot description.

We're going to say the status is the task data dot status.

We're going to say the org ID is the user org ID and created by

is going to be equal to.

And this is the user dot user underscore ID

okay. So that now creates a task.

And by the way the reason why I don't need to check if any of these values exist is because fast API

automatically does that for us by using that schema we created.

So when I put this in here as a requirement for this endpoint, fast API checks okay.

The schema. Did you pass all of this correct data.

And if you didn't it automatically returns an error message to the user okay.

So let's continue here.

We're now going to say db dot add the task.

So after you create the task you need to add it to kind of the staging area for the database.

We're going to say db dot commit.

When we say db commit this is actually going to save it to the database.

And then we can type db, refresh

this task and return the task.

And what refreshing does is it checks the database and kind of re

populates this object with any new values that were created.

So for example, when I create this task here, I didn't set the ID for it.

I didn't set the created at time or the update at time.

But when I refresh here because I added that to the database

and the database will automatically make that for us, it adds those values back to this object,

and then we can return it with all of the populated kind of hydrated values.

Hopefully that makes sense.

Now let's go and start writing a few more endpoints that we need.

So the next one we need is going to be to get a particular task.

So we're going to say router dot get and type slash and then task underscore ID.

Because this is going to be a dynamic path.

We're going to say the response underscore model

is equal to the task response.

We're then going to say define get underscore task.

We're going to take in the task underscore ID

which is a string which is going to match with what's in this path parameter right here.

We're then going to take in the user right which is the author user equals depends.

And then this time it's going to be require view because we're viewing a particular task.

And then same thing DB session okay.

Autocomplete come command is equal to depends get database.

And let's clean this up again like we did before so that we can read these values a little bit easier

okay. And now let's start writing this function.

So what we're going to do to get a particular task is we're going to say

db query task okay dot filter.

And we're going to filter the task.id

is equal to task underscore ID.

And the task dawg id is equal to the user.org ID.

To make sure that both these things match.

Because sure you can know the task ID,

but it needs to be the task that's in this particular organization.

Now we do dot first, which is gives us the first response.

If it exists.

Now, if it doesn't exist, we're going to say if not task, then we can just return a 400 form.

So we can say res http exception.

Okay. Now let's go back here.

This is going to be status.

Underscore code is equal to status

dot http underscore 404 not found.

And then we can say detail is equal to task not found.

And then if that's not the case.

So if we did find the task we can simply return it okay.

And let's add a space there.

So we get rid of that highlight okay.

So that is getting one particular task.

Now let's go to updating a task okay.

So to update the task we're going to say at router

dot put we're going to go slash.

And then same thing.

We're going to take the task ID and the response model will be the task

response I'm doing dot put because that means we're updating.

If you send a put request and we're going to call this define update underscore task.

Now for the parameters we're going to take in the task ID which matches this.

We're also going to take in the task data which is going to be the task update schema.

We're then going to have the user right.

And we're also going to have the database like so okay.

So now that we have all of those we're going to try to find the task right.

And we're also going to make sure sorry that we have the required edit permission.

So let's make sure that it says require edit in the defense right there okay.

So first things first let's try to find the task.

So let's just copy what we found here.

The task needs to exist in order for us to edit it.

So that's the first thing that we're doing now similarly to before we can actually

just copy this right here and paste it.

Because if the task doesn't exist, well, we cannot edit it.

Now, what we're going to do is say if the task underscore data dot

title is not none, then what we're going to do is say task dot

title is equal to task data dot title.

Now we're going to do the exact same thing for the description.

So we're going to save the task data dot description. It's not none.

Then task description is equal to the task data dot description.

And we're to say if the task underscore status

okay we're sorry task data dot status is not none.

Then same thing.

The task status will be equal to the task data dot status.

So we're essentially checking the update data saying okay well if the update data is not none

then we will actually update this current task with that information.

And then we can just type db dot commit which will save that information.

We can then refresh this right from the database.

We can refresh the task and we can return the task.

And that will be the update function.

Now the last function we need is simply to delete a task.

So it's going to be very similar to what we did before.

In fact let's copy everything we have here.

Let's come down.

Let's paste that.

Let's change this to router dot delete.

Let's make sure they have the required delete permission.

We'll remove the task data. We don't need that.

We'll try to find the task.

We'll make sure the task exists.

And if it does we can just delete it.

So DB delete task.

And then we can say TV dot commit to save that in the database.

And then we can just return none.

And for the response model we're just going to change this to actually remove it.

And we're going to say status underscore code is equal

to status dot Http underscore 204 underscore no content.

Because when you delete something well there's nothing really for us to return.

So we're just returning none right.

Find the task exists.

Delete it.

If we have the right permission to do that and then we're good to go.

Perfect.

So that is it for the tasks API okay.

This allows us to get the task.

I also realized that sorry this needs to be called create task.

So it doesn't have the same function name as list task, but okay, get all the tasks,

create a task, get one individual task and then same thing here and delete a task.

I forgot to change the name

and now we have pretty much all of the functionality that we need for handling the various

different tasks.

The last thing we need to do is essentially hook this up to actually start running

the API, add kind of all of the configuration, and then we can test it.

So let's quickly write that so we can go to this main.py file.

Now that we've written all of these individual files and we're going to say from fast

API import with some capitalization, fast API,

we're also going to say from fast API, dot middleware, dot course

import the course middleware.

We're then going to say from app score

dot config import.

And this is going to be settings.

We're then going to say from app dot core dot database

import the engine and the base.

And we're going to say from app dot API

import tasks like that.

Now what we're going to do is we're going to say base dot metadata okay.

Meta data dot create underscore all.

And we're going to say bind is equal to engine.

What this is going to do

is it's going to look for all of the different models that we've defined in our database and create them.

If they don't already exist in the database, we're then going to say

app is equal to fast API.

We're going to say the title of the app is equal to.

And let's go to Task Board API.

We can give it a description

so we can just say, you know be to be task board app

okay.

And then we can go version.

And we don't need to put this here.

But I'm just going to put version 1.0.0 okay.

And then I'm going to say app dot.

And this is going to be add underscore middleware.

And I'm going to add the course middleware.

Now core stands for cross origin Resource sharing.

This is going to allow us to have the API be called

from a different domain or a different resource essentially or origin story.

So I'm going to allow this to be called from our front end.

So I'm going to say allow underscore origins

equal to settings dot front end underscore URL.

To make sure our front end is able to actually call this.

And I'm going to say allow credentials.

True.

So we can pass our authorization tokens I'm going to say allow method star.

So allow everything and allow headers star to allow all of the various headers

okay I'm going to say at app Dot include router.

And I'm going to include the tasks

dot router which is the API router that we just wrote here.

So we just connecting this to our main fast API application.

And then I'm going to say actually I think that's it.

That's all that we need from this particular file.

Okay.

Now I'm going to quickly go to my starts.py file because this is the entry point of my app.

I'm going to import unicorn.

And I'm going to say if underscore underscore name underscore underscore equals

and it's going to be underscore underscore main underscore underscore.

Then you Richaun

dot run.

And I'm going to run like this

app dot main colon app okay.

And say host is equal to 0.0.0.0.

And port is equal to 8000.

And reload is equal to true.

Because we're doing this in debug mode.

Now what this is going to do is it's going to look for this app folder.

It's going to look for this main file.

It's going to look inside the main file for an app called app.

And it's going to run it using unicorn.

It's going to run it on localhost which is this right here on port 8000.

So now we should be good to actually run the API and see if it works.

So what we can do is make sure we're in the back end folder.

We can type you've run starts.py and we should see that the API starts running.

If the API is running that's good.

However it's giving me some error saying no module named backend.

So let me quickly check why I'm getting that.

Okay, so I just had to make a fix here.

Inside this file I had from back end app score dot off.

I seem to change this say from app dot cordon off.

But actually I think that I should have just put this import up here.

So off user like that.

So I'm just going to remove this from here.

Have the off user imported from that.

And now if I save this and run it it looks like we're all good.

The application is started up and we're no longer getting that error.

So the API should be functioning.

Now we're not able to really test this until we actually have a clear account.

And we've signed into our front end.

Fortunately, that's pretty easy to do.

So now what we'll do

is we'll leave the back end running because pretty much all of the functionality is done,

and we can start working on the front end, where we actually sign in.

Users write the UI and then send the request to our back end where they're authenticated by click.

So we're now moving on to the front end.

Now for the front end, we're going to change directories in our terminal

into the front end directory.

You'll see it looks something like this.

What we're going to do from here is just install a few npm packages that we need

specifically for Clarke again for handling all of the authentication,

and then for react router Dom for routing between different pages.

So we're going to type npm I.

And then this is going to be at Clarke

slash Clarke and then dash react.

And then beside this we're going to install react dash router dash dot.

So let's go ahead and install that and wait for that to finish okay.

So all of that has been installed I'm now going to close the terminal.

And I'm going to go into my front end directory.

Now for this project, I am not going to write all of the CSS completely from scratch,

because there is a ton of it, and it's just a huge waste of time for me to do that on the video.

You know, truthfully speaking, most of the CSS was just generated with IE.

Anyways, so what I'm going to allow you guys to do is just download all of the CSS

and bring it into your project, and then write all of the components manually.

If you want to follow along with me so that you don't have to go through

all of this tedious, you know, hundreds actually probably close to a thousand lines of CSS.

So what I'm doing is I'm linking all of the code in the description via GitHub.

If you go to that repo, you go to front end, you go to source, you go to styles.

You'll see all of the styles are organized by pages.

So badges, cards, Kanban layout, all of this kind of stuff.

So you can click into them and you can view all of the different CSS styles

and just drag them right into your project, which is where I'm starting.

All of the CSS is already here.

Again, I'm not going to write any of it, it's just already inside of the project.

Now, same thing with this index dot CSS file.

What I've done is I've just imported all of the individual styles

from this styles folder inside of this indexed on CSS file.

So just make sure you were aware of them.

Now what we're going to do now do we have all of the styles

is we're going to actually start setting up the Clarke authentication.

Then we're going to start writing all of the pages that we need.

So for now I'm just going to delete this assets folder because I don't need it.

So let's get rid of this okay.

And we're gonna go back to Clarke.

And I'm going to show you how we can set this up on the front end.

All right.

So from Clarke we're going to go to overview.

We're going to select react.

And it's going to show us here exactly how we can set up Clarke.

So what we need to do is install the react package, which we already did

and need to create a dot env file where we put in this Clarke v publishable key.

Read Clarke publishable key.

So we're going to go back to our code.

We're going to go inside of front end.

We're going to make a new file called dot env.

And we're just going to paste this in here V2 Clarke publishable key okay.

Perfect. So we've got that in. Now let's go to the next step.

And it's telling us that what we need to do is need to import this inside of our main

dot TSX file where we have the Clarke publishable key.

So let me copy these two variables right here.

And let's go ahead and do that okay.

So we're going to go to main dot Json.

Now from here I'm just going to copy in these two variables.

So the publishable key like that.

And I'm just going to change a few things here

because I need to essentially wrap my app in the Clarke provider component.

But I also need to wrap it in my browser router so I can do the, what do you call it?

Kind of routing or page routing.

So from here I'm going to say import.

And then this is going to be the Clarke provider.

Okay.

From and this is going to be at Clarke slash Clarke dash react

I'm then going to import the browser router

from.

And this is going to be react dash router Dom okay.

Now for my app I'm going to wrap this in the Clarke provider.

For the Clarke provider

we're going to provide our publishable key which is stored in the variable publishable key okay.

And then we're going to put our app directly inside of here.

Now around that we're also going to wrap.

Let's just close this the browser router.

So we're going to say browser router like that okay.

And again inside of the browser router we're going to put our app okay.

So now we should be good from the main.js.

So what we're doing is we're just wrapping the app in the Clarke provider in the browser router.

So we get access to the Clarke settings or the Clarke configuration

as well as the React Router Dom features.

Okay.

Now what we're going to do is go inside of app dot JSX.

From here we're just going to clear everything that is inside of this app component.

We're also going to remove the import of APKs because I've deleted that.

We're going to remove the imports of the React's logo and the Veet logo.

And even same thing with use state.

We actually don't need that.

And we're going to start setting this up to actually handle the routing for our application.

Now, before I can do all of the routing, I do need to have the different pages that I will be routing to.

So what I'm going to do is just stub those pages in my front end.

So from source I'm going to make a new folder.

So let's go new directory like this.

And we're going to call it pages.

Now inside of pages we're just going to create some empty pages that we can route to.

So the first page we're going to have so let's make a new file is going to be the dashboard

okay.

And then page dot JSX.

Now for this all we're going to do is we are just going to write a really simple component.

So we're just going to say function dashboard like so.

And actually this can be dashboard page.

And then we're just going to return an empty fragment okay.

And then we're going to say export default

the dashboard page like so okay.

Now we can just copy that and let's go to the next page.

Now for the next page this is going to be the home page.

So let's just go home page dot JSX okay.

And then we can just change this from dashboard page to say home page

like so now let's have another page.

So let's go new file.

This is going to be the pricing page.

So pricing pages same thing.

Just change this to say pricing and pricing.

Perfect.

Now we have two more pages I believe we're going to have the sign in and the sign up page.

So we're going to say sign up dot JSX.

Same thing.

Just change this to be the sign up page

and the sign up page.

And then let's go a new one. So new page.

And this is going to be this sign in pages.

And from here sign in like that and sign in

okay.

So those are our five pages.

Let me just close all of those.

Now what we're going to do is go to app.

And we're going to start setting up the router

to route between these different pages that once we write them, they're already showing up.

So at the top of our file we're going to say import

and then routes and router

or sorry not router route from.

And this is going to be react dash router dash Dom okay.

That's the first import.

And then we're going to say import signed in signed out

and redirect to sign in from act Clark Clark dash react.

This allows us to essentially gate pages that if you're signed in we show you something.

If we're signed out, we show you something else.

We're then going to import the home page.

Okay.

We are then going to import the sign in page okay.

So let's do that.

Then we're going to import the sign up page.

Then we're going to import the dashboard page.

And then I think the last one we need is the pricing page.

Let's import the pricing page like that.

Now we're going to create a very simple protected route function.

So we're going to say function.

And this is going to be protected routes like so.

And we're just going to take in some children.

And what we're going to do is we're going to return a react fragment.

And inside here we are going to say, if you are signed in,

then we will simply show the children of the protected route.

Otherwise, if you are signed out,

then what we're going to show is the redirect to sign in.

Okay.

So all this is going to do is redirect to the sign in page.

If you are not signed in. That's it. Very easy.

Now from our app what we're going to do is we're just going to define the different routes.

So if you've ever used React Router Dom all we're doing here is we're saying

okay, these are all of the different pages that you could access.

For example sign in slash sign out.

That's all we're putting here.

And then when you go to one of those routes it will just render the component that we wrote,

which is one of these pages. So we're going to say routes.

Now we're going to make a route here for the first route.

We're just going to say path is equal to slash okay.

So that's it.

So that's it for that.

Now inside of this routes we're going to have a bunch of other nested routes.

So we're going to say route index.

Index is the default one.

And we're going to say element is equal to.

And then this is going to be the home page

okay.

So let's close the component like that.

And then for the route we actually don't need to close the row.

We can just make it self enclosed.

Then we're going to have another route.

Now for this route we're going to say path is equal

to sign in slash and then Asterix.

And then we're going to say the element is equal to.

And this is going to be the sign in page

like so then we're going to have another route okay.

So let's just do actually the exact same thing that we did here.

And let's change this to be a sign up.

And then you guessed it this is just going to change to sign up.

Then let's copy that again for the next route.

Let's change this to be slash pricing okay.

So let's give be the pricing page for the elements.

This is going to be the pricing page.

And then we can have the dashboard.

So for the dashboard we're going to say route.

We're going to say the path is equal to dashboard.

Then beneath here we're going to say the element is equal to.

And for the element this time it's going to be the protected route okay.

So protected route.

And inside of the protected route we are going to have the dashboard page.

So essentially what we're saying is okay if you are signed in will allow you to access dashboard.

If you're not signed in we're not going to let you access the dashboard.

So that's why we're using this protected route component for all of the other pages.

You could access them even if you're not signed in.

That's fine. Okay.

Now that's it for kind of handling the routing.

Now if we run this and we go to these different pages,

you'll see that it will actually just render those pages.

Although they won't look any different because we don't have anything different in those components.

But we can actually test it for now because we can test, for example, the protected route.

So let's open this up.

Let's go npm run dev okay.

It should run that for us.

Let's open up our front end okay.

Notice this is kind of the home page.

And if I go to slash dashboard for example you'll see that it should redirect me.

And you see it redirects me to the sign in page here with Clarke, where it asks me

to sign into my account because I am not already signed in.

Okay, let's go back now.

Let's try to go to slash sign up or something.

And you can see we can just go to that route.

But if we try to go to the protected one, then it brings me to the sign in page.

Awesome. So that is running.

Now what we're going to do is we're going to start building kind of like that nav bar,

which allows us to sign in and sign out, see if we're signed in, navigate

between the different pages, and then we'll start building the various other components.

So we're now going to make another folder inside of src.

So new folder call this components.

And for the components we're going to start by creating a layout component

which is going to always be on the screen which is going to act kind of like a nav bar.

So I'm going to say layout dot JS.

Now inside of here I'm going to import

outlet as well as link from okay.

And this is going to be React Router Dom.

Then I'm going to say import.

And this is going to be signed in

signed out user button.

The user button is kind of like the profile button.

Then we're going to have the organization

if we can spell this correctly switcher

as well as use organization

from at Clark Clark Dash react.

And for some reason it's giving me an error here.

It says it's defined but never used.

Okay. That's fine. So we will use it later.

Then we are going to define the function.

So we're going to say function layout like so

we're going to say const

organization okay.

And this is going to be equal to use organization.

Now we're just going to put this inside of braces so we can grab the organization.

We're then going to say return.

And we're going to are building this layout component again.

The way that the layout works is that we're effectively just going to have this

always be on the screen, where we're kind of showing this like nav bar at the top of the page.

So for this div we're going to have class name equal to layout.

We're then going to have another div.

So let's add this here we're going to say

class name is equal to and this is going to be nav.

We're then going to have another div.

If you can't tell right now we're building the nav bar.

We're going to say class name is equal to nav dash container.

We're then going to have a link.

So we're going to say link.

And then this is going to be two equals slash.

So to the homepage and we're going to say class name is equal to nav dash logo.

And for this we're going to put the names.

We're going to say task board.

If you press this it will just bring you to the homepage.

Now beneath that we're going to have another div.

This is going to be class name equal to nav dash links

where we'll have the different links that you can navigate between.

So the first link let's put this here is going to go to.

And we're going to go to the pricing page okay.

So this is going to be slash pricing yet needs to be slash pricing.

The class name will be equal to nav dash link.

And then here we can simply say pricing okay.

And now we're going to have some dynamic things.

So we're going to say is signed out.

So if you're signed out then we'll show you the ability to sign in or to sign up.

So we're going to have a link okay.

We're going to say two is equal to. And then same thing.

This is going to be slash sign dash in.

Then we're going to have class name

is equal to nav dash link.

And you guess what this one is going to say.

It is sign in.

Then let's copy it.

And directly below that we're going to have the sign up

and just change this to sign up okay.

That's it. So if you're signed out we'll show you this.

However if you are signed in then we're going to show you

your organization as well as your profile.

So to show the organization we're going to say organization switcher.

This is a component that comes directly from clerk.

And there's a bunch of settings

that we can pass here to change the styling, which is what I'm going to do.

So first I'm going to say hide personal.

And then I'm going to say after

okay.

And this is going to be create organization

URL is equal to dashboard.

Then I am going to say after select

okay expose correctly organization

URL is equal to the dashboard as well.

Then I'm going to say create

organization mode is equal to modal.

So this means it's going to pop up as like a pop up on screen rather than be a separate page.

Then we navigate to

and then we can override the appearance, which I'm just going to quickly change

because we need to change it from kind of light mode to dark mode.

So we're going to say elements.

And then here we're going to say use or not use user

preview main identifier text underscore underscore

personal workspace I know this is a lot of code, but this is how I change.

The color is going to be color and then white like that okay.

And it looks like we spelt identifier correctly. So incorrectly.

So so let me just fix that okay.

Now after that one we're going to have organization

preview main identifier

underscore underscore organization switcher

trigger is and let's spell trigger correctly.

And then same thing I always keep spelling identifier

incorrectly is going to be color dash white okay.

Again I just need to change this from light mode effectively

where the text is going to be black to dark mode where the text will be white.

Okay, so that's it for the organization switcher.

Kind of annoying to do that override, but that is just one thing we need to do.

And then I'm going to say, okay, if you're currently in an organization.

So let's spell organization correctly.

So I'm can say organization.

And and then we're going to have a link.

And the link is going to say two equals.

And then slash dashboard okay.

And class name

is equal to nav dash link.

And then here we're just going to say dashboard like that okay.

So the idea here is that a user might be signed in but they might not yet be a part of an organization.

So if they're not a part of an organization, well,

I can't show them the dashboard because the dashboard only exists per organization.

So that's kind of what we're talking about here in this sign in component.

Now, if they're not signed in, of course they're not in a what do you call organization

because, well, they're not signed in.

So we'll just show them this to sign in or to sign up.

Okay.

Then we need to export this.

So export default layouts.

And I think we are all good.

Now the only thing is that we need to render this outlet.

And we also need to display the user button which I forgot.

So let's quickly do that. So out or so inside.

But at the end of this sign in container we're going to put the user button

which is just going to show the user's profile.

And then down here in the end of this div we're going to say main.

And we're going to put outlets

okay.

Now what this is going to do is it's going to take whatever should be showing in the page

that we're navigating to and just put it inside of here.

So effectively, the way the layout works is that we're just rendering the page inside of this outlet.

Everything else is just static and always stays on screen.

So this layout is always visible based on what's happening here.

And then we show whatever else kind of the content that the current screen

is showing inside of this out.

Hopefully that makes sense.

So now what we need to do is just import layout from here.

So we're just going to say import layout from.

And this is going to be component.

So I think it's dot slash components slash layout like that.

And then we're going to go to our route like this.

And we're going to say the element is equal to

layout.

Cool.

So now if we do that and we go back here, we should see the nav bar popping up.

And you can see that we have pricing, sign in, sign up.

And for some reason the styling is not working 100%.

So I'll have a look at that in one second.

But that is a good start.

Okay, so I was just having a look at the styling and I noticed some issues,

right, in terms of how the styling is here.

So I just realized I made a few errors when I was building this layout

where first for this link, I actually needed to remove the nav link

that was here before and change it to this btn btn dash primary.

And I need to take all of this and just put it one div up.

So essentially after the pricing it goes inside of here

okay.

So then it's in this nav links div which it wasn't in before okay.

And let's just fix this a bit so that it is all inside of here correctly.

Let's fix the indentation.

And you can see now this inside of this nav links div.

So now if I come back you can see that

it's properly on the right hand side of the screen which is what I was looking for before.

Okay.

So now the layout component is finished.

And what I want to do is start writing the sign in and sign up page.

So we actually have the ability to create an account and sign in to our application.

So let's start with the sign up page.

Now for the signup page.

This is very easy.

All we need to do is just say import sign up.

And then this is going to be from the add

Clark Clark react package.

And then what we can do is just return a simple div.

For the div.

We can say class name is equal to off dash container.

And then inside the div we can put a sign up component.

We can say routing is equal to and this is going to be path.

And then we can say path is equal to slash.

Sign up. So it knows that it goes back to this page.

And then we're going to say the sign in URL is equal

to slash sign dash in okay.

Then we can actually just self enclose this component.

And that is the sign up component from Clark.

We just use it and it will work like this.

Now let's do the same thing for the sign in page.

So for the sign in page it's going to be literally the exact same thing except sign in.

So we'll just copy what we have here okay.

So we're going to say from a we're going to say import sorry.

And this is going to be sign in okay.

From at Clark Clark react for the return.

Make it the same thing except this is going to be sign in.

This is going to be sign in.

And this is going to be sign up.

And this is going to be the sign up URL.

So just swapping those around.

And now let's remove this sign up component.

If we go back here we refresh and we press sign up for example.

You see that.

It brings us to the sign up page where we see the sign up modal.

If you go to sign in brings us to this sign in page.

So what we can do now is try to make an account.

Let me create one.

Press continue and we'll go from there okay.

So I'm just going to make an account here with my email.

Let's close that.

Okay I'm going to need a new password.

So let's set a new one.

Go continue.

And then what it's going to do probably is ask me to verify email.

So yes, you can see I have to verify the email.

Let me do that and I'll be right back okay.

So this is the code I got in my email.

And now I press enter and I get brought back to the page.

Looks like there must have been some error or something.

I don't think it's signed me in.

Maybe so I signed up, but it didn't sign me in.

So let me try to sign in to that account now.

Oh. Now it's saying set up your organization to continue.

Okay. That's interesting.

So let's just create an organization, I guess, like Tim or something.

Okay. And let's see if it works.

And there we go. Okay.

Now we get brought into the dashboard where it looks like we are all good.

So it's a little bit buggy

when we're creating the new account where we need to actually create the organization first.

Otherwise it doesn't let us access this page.

I also still need to change the color, so I think I might have just had a spelling mistake

when I was adjusting the parameters here, but you can see I'm inside an organization.

I can now manage this information from this kind of clerk dashboard here.

And I have the ability if I want to invite someone to my organization, I can view the dashboard.

I can go to the pricing page even though there's nothing there.

And then if I press on my little user account guy, you can see that I have the account again

because of Clarke.

And I can, for example, just go here and go sign out and then the UI will update and show me this.

And if I go back to Clarke now and I refresh it, it should start showing me my users.

And you can see that I have a user here, Tim, a tech with Tim Dunn, that I can view

all the information about the user when they signed in their password.

Well, actually, I don't think I can view their password,

but I can change or reset their password, etc.

etc. etc.

and I can even see their organizations which one

they belong to, invite them to an organization, mess with all of their settings.

You get the idea.

Okay. Super cool. So the author's working.

We're able to sign in, we're able to sign up, create a new account, and create organizations.

Now what we want to do is start handling kind of the task board

and then get into some more of the advanced stuff where we're inviting

different users, having the billing, the subscriptions, the pricing, all of that.

All right, so now that we finish the login functionality, what

we're going to start working on is the actual task management.

So having that kind of Kanban style board like you saw creating tasks

deleting tasks, and then of course the pricing and upgrading the organization.

So let's actually start by going to the home page and let's code this out for now

so that we have kind of some styling.

And we have like a nice landing page people can go to.

Then we can build the dashboard where you're going to be to actually see

the different tasks and move those around. Okay.

So from the homepage we're going to start by importing a link

from React Router Dom.

Then we're going to import

signed in

and then signed out use organization

which comes from Clarke as well as create organization okay.

All right.

So now we are going to go and inside

of the home page component we're going to check the organization the users in.

So we're going to say const organization is equal to use organization okay.

So let's pull in that react hook.

And from here let's start creating the UI.

So we're going to return a div.

For the div we're going to have class name is equal to.

And this is going to be the home dash container okay.

Let's spell container correctly like that.

Now inside of this div we're going to have an h1.

The h1 is just going to be the title.

So we're going to have class name equal to home dash title.

Here we're going to say team task management.

Like that.

And then we're going to put a span.

We're going to say class name is equal to home.

And then dash title and then dash accent.

And we're just going to have made simple

just to add some kind of nice styling here to the header.

Then we're going to have a paragraph tag.

We're going to say class name

is equal to.

And for the class name this is going to be the home dash subtitle.

Inside the subtitle we're going to say organize

your team's work with powerful.

And let's spell this correctly with powerful task boards.

Then we're gonna say create, assign

and track tasks across

your organization.

Okay.

Then we're going to have a signed out container for the users that are signed out.

We're essentially just going to tell them, hey, you know, go and like create a new account.

So we're going to have a div.

We're going to have class name is equal to the home dash buttons.

Then inside the div we're going to have two links.

So for the first link we're going to say two is equal to sign up.

And this is going to be slash sign up.

And then for the class name we're going to say this is equal to btn

btn dash primary btn dash lg.

For large.

And inside the link we're going to say get started for free okay.

Then we're going to have another link for this one.

We're going to say two.

And this is going to be slash sign in.

And then we're going to say the class name is equal to.

So btn btn dash outline btn dash large again.

And then this is just going to say sign in

okay.

So that's it.

If you are signed out now if you are signed in the UI is going to look a little bit different.

So first we're going to check if you're currently in an organization or inside organization.

Question mark okay.

Now if you are in an organization then we're just going to have a link.

And the link is going to go to the dashboard

and just telling you, okay, you know, go manage your task from the dashboard.

So here we're going to say the class name for this link is going to be equal

to the n btn dash primary and then btn dash lg okay.

And we're going to say go to dashboard then.

Otherwise if you do not have an organization we're going to have a div.

So let's create the div here.

The div is going to have a class name which is equal to home dash.

Create dash org.

And then we're going to put create organization like this.

So this is essentially a form that is rendered by Clarke.

So we want to show them hey you need to create an organization.

So we're just going

to show this directly on the home page so that they can see it and they can create it.

And we're going to have after create

organization URL

is equal to slash dashboard

okay.

So after they create an organization will redirect them to the dashboard okay.

So that's going to be it for the home page.

Effectively what we're saying is all right if the user is signed out

tell them to sign in or sign up if they're signed in, check

if they have an organization, if they do, allow them to go to the dashboard.

If they don't have an organization, then simply tell them to create one.

Okay, so that's the home page.

Let's test it out. Let's go here.

And there we go. Nice team.

Task management made simple I think we're going to have to add

like a line break there because looks like it's on the same thing.

So let's just add a PR like that. There we go.

It looks good.

And we can see we have this nice UI okay.

So let's continue from here. And the next thing we're going to do

is start coding out some of the components related to the tasks.

So actually I'm just going to close all of these windows for right now.

I'm going to make a new folder here.

And I'm just going to call this one services.

And inside of services.

What I'm going to do is I'm going to write a file called API dot js.

We're going to put all the calls to our backend APIs.

We're going to say API dot js.

Here we're going to make a variable.

We're going to say const API underscore URL is equal to import

dot meta dot e and v dot

Veet underscore api underscore URL.

Or that this is going to be http colon slash slash

okay localhost port 8000.

Now if we want to define this as a variable in the environment variable file, we can.

Otherwise it'll just load this by default.

If we don't have anything there then we're going to have a function.

So we're going to say export async function.

And this is going to be fetch with us.

What this is going to do is this is going to send a request

to our back end with the clerk authentication.

So what I'm doing in this file is I'm writing all of the requests that will be sent to our back

end. So we can simply just call the functions from our front end code.

Now here we need to make sure that we include the correct headers, which includes

the clerk JWT token, which is essentially how clerk identifies are signed in users.

We're going to send that to our back end along with every single request.

So that's what this kind of helper function is going to do.

So we're saying export async function.

And this is fetch with all we're going to take in some endpoint.

We're going to take in get token and then options

which is equal to an empty object.

We're going to say const.

And this is going to be token is equal to await get token.

This is a function that we're going to call from clerk

which is going to give us the token that we need to use.

Then what we're going to do is we are going to say const

response is equal to await fetch.

What we're going to do is we're going to fetch the following URL.

So this is going to be inside of a dollar sign because we're putting a variable.

The API underscore URL.

And then we're going to have another dollar sign.

And then we're going to put the endpoint that was passed to this function.

So that's the URL that we're calling now.

The options that we're going to pass is dot dot dot options.

So this right here one of our parameters as well as we're

going to pass the content dash type.

And this is going to be application slash Json.

And then we're going to have auth.

And then we're going to have

authorization is bearer.

And then we're going to put our token in here.

This identifies the user.

And then we're going to say dot dot

dot options dot headers.

And this reminds me that I need to actually fix something because I need to put headers like this.

So I need to say headers.

And then all of this is going to be a header that we're passing with our options okay.

So let's just quickly fix that as we did. Perfect.

So now after the response we're going to say if not response dot okay.

So response dot okay.

Then what we're going to do is say const error is equal to await

response dot Json.

Let's spell response correctly

dot catch.

And for the catch we're just going to put something empty here

because we're not going to handle that right now.

Then we're going to say throw new

error.

And we're just going to throw the error dot detail

or we're going to throw request failed like that.

Okay.

Then we're going to say if the response dot

status is equal to 204.

So it has no content, we're just going to return null.

Otherwise we're going to return

response dot Json which is essentially the response right.

And whatever we got back from the API okay.

So this is the function that we're going to call

when we want to send a request to the back end with our clerk authentication.

So now what we're going to do is we're going to write the individual functions for the operations

that we want to perform in the backend.

So the first one it's going to be export async function.

And this is going to be get tasks.

And this is going to get all the tasks from our backend.

So same thing we're going to take in this get token function.

And we're going to return fetch with us

okay.

And when we fetch with auth we're going to fetch the API slash tasks.

Sorry wrote.

And we're going to pass the get token function okay.

Now let's copy the same thing.

And for the next one rather than get tasks we're going to say create task.

This time we're going to take an get token and we're going to take in a task.

And then we're going to call API slash tasks.

But this time it's going to be a Post request.

So what we're going to do is we're going to add in some options here.

For the option we're going to say method is equal to in all capitals post.

And we're going to say the body is equal to Json

dot Stringify Stringify like so.

And we're going to pass in the task okay.

So that is now how you create the task.

Now we'll paste this again.

And now we're going to do update task.

So we're going to say update task okay.

We're going to take in get token.

We're going to take in task ID as well as the task we're going to fetch with auth.

Same thing API slash tasks.

And now this time we're going to say

the method is equal to put because that's the method we use when we want to update.

Then we're going to say the body

is Json

dot stringify and we're going to stringify at the task.

And actually one small change, we need to include the task ID in the URL.

So we're just going to do that like this by changing these to backticks okay.

It already is Backticks perfect. That's great.

So slash API slash tasks

slash the task ID of the task that we want to update.

And then in the body we just include the new task data that we want to use when we're updating.

Okay.

And then the last thing we need to do is delete a task.

So we're going to change this to say delete task.

Same thing. We're going to take an get token.

And this time the task ID then we're going to change this to be a backtick

okay.

And we are going to include the task ID we want to delete.

So let's include that.

And we're going to change the method to be delete.

So we're going to say method

delete in all capitals like that.

And now we have the for function.

So get task create task update task and delete task.

And now we can use those to call the back end API okay.

So with that in mind let's start writing the components that we need

for representing the tasks.

So we're going to go into components directory.

And the first component that we're going to work on is just going to be our task card.

So we're going to say task card dot JSX.

And inside here we're just going to write a card that represents one individual task.

So we're going to say function task card.

And we're going to take in as values here the task on edit.

So function to call if we're ending the task and a function to call.

If we are deleting the task then we're going to say const we're going to say can edit

is equal to exclamation mark exclamation mark on edit.

So essentially did we pass that function.

Then we're going to say const can delete okay.

And this is going to be equal to exclamation point exclamation point.

And then on delete

okay.

Then we're going to return the UI.

So we're going to return a div right.

I said the class name is equal to.

And this is going to actually be in Backticks.

And we're going to say task dash card.

And then we're going to have a dynamic name based on if we can edit the task or not.

So we're going to say can edit question mark.

And then if we can't edit we're going to have the following task dash card dash clickable.

So you can click the task to edit it.

Otherwise we're just going to have an empty string.

So if you can't edit it we're not going to let you click on the task.

Or at least we're not going to show that with this class name.

Next, what we're going to do is have the onClick handler.

So that's going to be in the div as well.

So let's fix this here.

So we're just going to fix the styling okay.

And we're going to say

like this onClick is equal to same thing.

Or we're going to say can edit question mark if we can edit.

So we're going to call the on edit function.

So on edit with the task.

Otherwise we're going to say undefined okay.

Then we're going to have another div inside of here.

For the div we're going to have class name equal to.

And we're going to start with the header.

So we're going to say task card header.

Inside this div we're going to have an h h4.

So let's write that for the H4.

We're just going to put the task name.

So we're going to say class name is equal to task card dash title.

And then inside of here we're going to have task dot title

okay.

Now underneath the H4 we're going to have a can delete.

So if we can delete. So we're going to show a delete button.

So we're gonna say can delete.

And and and then we're going to put a set of parentheses.

We're going to put a button for the button.

We're going to say the class name is equal to.

And this is going to be task dash card dash btn.

And then task dash card dash btn dash delete.

Okay.

Now let's just fix the classes a little bit here.

Beneath this we're going to have the onclick.

The onclick is going to be the following.

So we're going to have e okay.

Then we're going to go into a function.

Now inside of the function we're going to say E dot stop.

And this is propagation okay.

Then after that so we're going to call the on delete function

that's passed into the parent with the task.id to delete it okay.

Then we're going to continue and we're going to have title.

And the title is going to be delete

task like that for this particular button.

And then we're just going to simply have an X inside of the button.

That's what we're going to render on screen okay.

So if we can delete we're going to show that.

And then beneath this we're going to say task dot

description just to make sure it does have a description.

If it does then we're going to show the description.

And for that we'll just have a paragraph tag.

We'll say class name

is equal to.

And this can be task dash car dash

description like that.

And then for the description we can just show the task dot description okay.

So that should be it for the task card.

Then what we can do is export this.

So exports default okay.

And then task card like so.

And then we can start using the task card okay.

So as well as the task card now we're going to create the task column

because we're going have three columns full of task cards.

So we're going to say task column dot J asks for the task column.

This is just going to display the various task cards.

So we're going to say import task card from there okay.

We're then going to say const status underscore labels is equal to.

And then we're going to have the label.

So we're going to have pending is equal to to do

we're going to have started

which is equal to in progress.

And then we're going to have completed which is equal to done.

Okay.

Then we're going to have function task column.

This is the component we're going to take in status.

We're going to take in the tasks.

We're going to take an on edit and on delete as those functions.

And then we're going to return the UI Sorento, return a div

the class name

is going to be for this first div,

the Kanban dash column okay.

Now inside of this div we're going to have another div.

So for the first one we're going to have class name.

And this is going to be inside of Backticks because it's going to be dynamic.

It's going to be Kanban dash

column dash header.

And then Kanban dash column.

Let's spell column correctly dash header dash.

And then we're going to put the status.

So whatever the actual status is we're going to use that in the class name.

So that we can show a different color. What do you call a board.

Kind of based on what the status is.

Then we're going to have an H3 tag for the name of the column.

So we're going to have a class name for the H3.

And the class name is going to be the Kanban

dash column dash title.

And what we're going to do is we're going to use the status labels,

and we're going to pass in the status that we get kind of the string representation.

And we actually want to show in the header.

And then we're going to have a span that's just going to show the number of tasks that are here.

So we're going to have class name equal to Kanban

dash column dash count.

And inside of here we're going to have the tasks dot length okay.

Now beneath that we're going to have a div.

We're going to say class name is equal to Kanban

dash column dash body.

This is where we're actually going to display the tasks.

And we're effectively just going to take all the tasks.

And we're going to map them to their component.

So we're going to say task okay.

And then this is going to map to the task card.

So we're going to say task card

like that.

Now for the task card we need to write all of the values.

So let's actually just put this in parentheses okay.

Put another set of parentheses and put this down here so that we can actually write it properly.

So we're going to say key is equal to task.id.

Then we're going to say the task is equal to the task.

We're going to say on edit is equal to on edit.

And we're going to say on delete is equal to on delete okay.

And that's going to render the tasks. And then that's it.

We can just export default the task column

from this component or from this file. Perfect.

So now we have the task column.

The task column renders the task cards.

Now we need essentially like a Kanban kind of layout.

So we can render the Kanban layout which renders the columns, which renders all of the tasks.

So let's write another component.

This time it's going to be called the can.

Then board dot JSX.

And inside of here we're going to start writing all of the kind of complex logic

with the functions to actually pull the tasks, display them in the correct columns, etc..

So we're going to say import.

You state from, and then we're going to go to react.

Then we're going to say imports

use organization

from at clerk slash clerk react.

Then we're going to import the task column from

dot slash task column okay.

And I don't need the JSX there.

Then I'm going to import the create task

update task okay.

As well as delete task.

Let's write this from the services okay.

So from dot dot slash services slash API

because that's where we wrote these different functions also.

Now we're also going to need to have a form for creating the tasks.

But we will write that in one second.

And then we're going to have const and in capital we're going to have status.

Is is going to be equal to pending

started

and completed as it matches up with our backend.

Now we're going to have the components.

We're going to say function Kanban board

here.

We're going to have the tasks.

We're going to have set tasks.

And we're going to have get token as the functions that we need.

Now inside of here we're going to say const

membership is equal to use organization.

And it's going to tell us what our role is within the organization.

So if you want to get the role of the particular user you can use this use organization hook from clerk.

And then you can pull membership.

So previously we were looking at the organization itself here.

However we can also get the membership.

And that will tell us if they're a member and had been an editor.

Whatever their role in the org is as you've defined in clerk, when you set it up,

we're also going to have const

show form set, show form.

This is going to be for showing the creation form, which we will write in a second.

So we're gonna say use state.

And that's going to be false.

And we're then going to have const editing task

okay.

Set editing task.

And this is going to be equal to use state and false.

And then let's get rid of that.

We're going to get the roles.

So we're going to say const role is equal to membership question mark dot role.

So this is going to give us their role in the organization.

We're going to say const can manage.

So essentially can they edit is equal to role equal equal to.

And then we're going to say org colon admin.

So this is the role if they're an admin in the organization or role

is equal to org colon editor which is the other role that we created.

If you add your own custom roles, all you would do is just change what you see here after the colon

colon.

Sorry to that custom roles name right as you saw in Clarke.

Okay then we're going to have function get tasks by status.

We're going to take in a status.

And we're going to return tasks like this dot filter.

And then task.

And we're going to go task dot

status is equal to the status.

So this is just going to filter all the tasks in our task list and give us

the ones that are a particular status, so we can put them in the correct column.

Then we're going to have a function.

And this is going to be handle edit.

We're going to have a task.

And inside of here we're going to say set editing task.

And we're going to put the correct tasks that we're currently editing.

We're going to say set show form to true okay.

So actually I need to change this state to say no.

So essentially the task that we're currently editing, we're going to store in this variable right here.

The reason we need that is because in a second we're going to pop up a form.

It's going to show the information for the tasks that we either want to create or edit.

So we have two variables right? One okay.

Should we show the form on screen. Yes or no.

And if we are showing the form do we have a task we're currently editing.

If we do, we'll put that inside of the form.

So we can edit that particular task.

Okay. Now a few other functions that we're going to need.

So for example like deleting the task etc..

So what I'm going to do here is say function.

And this is going to be actually an async function because we're going to call our back end.

So we're going to say async function handle delete

this is going to take in a task ID to delete.

And what

we're going to do here is we're going to say if not confirm

and we're going to say are you sure you want

to delete this task to work?

Okay.

And we're just going to return.

So if they didn't confirm this because this is just going

to pop up on the window, essentially ask them, hey, like do you want to delete this or not?

So if they don't confirm it then we will not delete the task and we will return.

Otherwise what we'll do is we'll say const task to delete

is equal to tasks

dot find.

And we're going to find the task with the particular id tid

is equal to the task id like.

So we're going to say set tasks.

And then we're going to say previous.

And we're just going to remove this task from the screen so that it goes away right away.

We're going to say previous dot filter.

And then t t.id does not equal the task id.

So effectively what we're doing is we're just finding the task that we want to delete.

And then we are just removing that task from the task list

immediately so that it no longer shows on screen.

So we're then going to say try await

and then delete task like so

when we delete the task, we're going to pass in the get token function.

And the get token function is right here because we're passing it to this component.

We're also going to pass in the task ID that we want to delete.

We then are going to catch any errors here.

So we're going to say catch error.

And we're going to say set tasks.

So if there was an error

and we're going to add this task back on the screen, we're going to say data dot previous.

And then the task that we originally were going to delete.

And we're going to say console dot error.

And we're just going to show the error like that okay.

So this is the handle delete function which I think is all good.

Now what we're going to do is handle the submit function,

which is how they're going to update a task or create a task for us.

Okay.

So we're going to say async function handle submit.

Again this is going to be for editing or deleting a person on deleting creating a task.

Sorry.

We're going to take in some task data okay.

What we're going to do here is we're going to say if we are currently editing a task.

So if we have one that we're editing, then what we're going to do is we're going to say

const updated task is equal to and we're going to say dot

dot dot editing task and then dot dot dot.

The new task data that we have.

So we're going to merge those two together to effectively update the task

that's currently on our UI.

We're then going to say it's set tasks.

We're going to take the previous list of tasks.

And we're going to say previous dot map.

And then we're going to do is say t okay standing for task

are going to say t.id

and this is going to be equal to editing task.id question mark.

If it is, we're going to put the updated task.

Otherwise we're just going to put the original task.

And that's going to update the tasks on screen for us.

We're then going to say set show form false and set

editing task to no.

Okay.

Now inside of this

if statement, we're then going to send the request to our back in to actually delete it.

So effectively what we're doing is we're updating the UI so it looks like it happens right away.

And then we're actually deleting the task by sending the request to the back end.

So we're going to say try await.

And this is going to be update task okay.

So this is calling that back end function right that we imported here.

So update task.

Now when we call sorry update not updated.

When we call update task we're going to pass in the get token.

The editing task.id

as well as the task data that we want to update it with.

Then we're going to catch any errors to fix this here.

So we're going to say catch error.

And for this we're going to say set tasks.

And then same thing.

We're going to restore the previous task if there was an error.

So we're going to say previous previous dot map t t.id

is equal to adding task.id question mark

adding task colon and then t okay.

So essentially we check is the current task.

So we're looking at the one that we were editing.

If it was okay just put the editing task back.

Otherwise just put the original task okay.

We're then going to say console error.

And we're just going to log the error so we can see the message okay.

Now if that's not the case.

So if we're not updating the task then that must mean that we're creating a new one.

So what we're going to do is say try const

new task is equal to await create task.

To create the task we're going to pass again that get token function as well as the task data.

We're then going to say set tasks.

And we're going to add this new task. So we're going to say previous.

And then this is going to be a list or say dot to dot previous.

And then the new task like that.

And then we're gonna say set show form

false like that to no longer show the form.

And then we can catch any errors.

And if we have any errors, we can just console dot error.

The error. Right okay.

So let's spell error correctly. Perfect.

So that should be good for essentially handling these submit.

So this is when they submit the form.

But we still need to have a few other functions.

So we're going to have the function.

Sorry to handle cancel.

So this is if they're canceling it edit or a creation.

So to handle cancel we're going to say set show form

is false.

And set editing task to no okay.

And then we're going to have a function.

And this is going to be handle add task.

Let's spell handle correctly.

What we're going to do here is we're going to say set editing task to null.

So if they're adding one that we're no longer editing one.

And then we're going to say set show form

to true to show the form that's going to allow us to start editing.

Now, I know we don't have that form yet.

We're going to put that on the screen in just one second.

For now, though, let's return kind of that empty Kanban board so we can at least have a look at it.

And then we can create that creation form.

So we're going to have div class name here.

This is going to be the Kanban dash wrapper.

Then we're going to have another div.

Inside this div we're going to have a class name which is equal

to the Kanban dash header.

Then inside of here we're going to have an H2.

For this. It's going to be called tasks.

And then we're going to have the class name equal to the Kanban dash title.

For this particular H2.

We're then going to have a can manage variables okay.

If we are able to actually manage the tasks that means we can create one.

So what we're going to show is the ability to create a task by adding a button

with the class name, which is equal

to btn btn dash primary.

Then we're going to have onclick which is equal to and this is going to be sorry

the skin handle add task like so.

And then for this we're going to say plus add task.

So essentially if you have the ability to edit.

So you can create a new task, then we will show you this button where when you press the button

effectively we're going to call this where it will show the form and let you make a new task okay.

So let me go to that div because that's the header.

And let's make another div.

This time we're going to say class name is equal to.

And this is going to be the Kanban board okay.

For the Kanban board what we're going to do is show three columns.

So we're going to say statuses right.

Dot map I think we called it statuses up here.

Let's check yes statuses dot map.

We're going to take the status and we're going to map

this to a task column component.

So here let's make sure the correct.

And we're going to put task

column which I believe we imported already for the task column.

Let's go down here.

We are going to have a key.

The key will be equal to the status.

Then we can have the status which is of course equal to the status.

Then the tasks for the task.

This is going to be the function get tasks by status.

And then we'll pass the status there to get all the tasks.

Then we're going to have on edits which is going to be equal to can

manage question mark, handle, edit.

Otherwise no.

And then we're going to have on delete which same thing is going to be equal

to can manage question mark handle.

And this is going to be delete.

And then otherwise no okay.

So only if we're able to edit are we going to have the ability to delete.

Or of course we'll edit the tasks.

And then down here we're going to have show form.

And and for now I'm going to write no.

And in a second this is where we're actually going to show the form that allows us to create new tasks.

Then we're going to say export default, the Kanban board okay.

So what we're missing here is the form to be able to create the tasks.

However, before we put that there I want to first show this Kanban board on screen.

In order to do that, I need to go to my pages and I need to go to my dashboard page,

and I need to quickly write the dashboard page

to display the Kanban board and also load all of our tasks.

So let's do that.

So we're going to go to the top for our Kanban or our dashboard sorry.

And we're going to say imports use state imports

use effect import

use call back from react.

We're then going to say imports

use of

use organization

as well as create organization from Clark Clark react.

Then we're going to say import get tasks okay.

And this is going to be from dot dot slash services.

So the file we write before slash API.

And we're going to import the Kanban board from the components file.

From the dashboard page.

There's a few things that we need to first we need that get token function.

So we can get the token from clerk.

So we're going to say const get token

equals use of.

Now this is how it works in Clarke.

You can use this hook called use auth which will give you access to a get token function.

We can call the get token function which will then give us the Clarke authorization token or JWT token,

which we can then pass to the back end to authenticate the request.

So that's where I'm getting it right from this particular hook then,

same as before I can say const organization

membership

okay is going to be equal to use organization.

And for this what I'm going to do is I'm going to say membership okay.

And then

infinite

is equal to true.

Now what this is going to allow me to do is get the membership status as well as the organization's.

Okay.

When I say memberships infinite true, what that's going to do is just allow us to display

all of the memberships that a particular user has, which is what we're looking for.

Okay.

So now what we're going to do is say const and then we're going to say tasks.

Set tasks is equal to use state.

And this is going to be an empty list for now because we haven't loaded the tasks.

Then we're going to say const loading. Set the loading

is equal to use state.

And to start the loading state is going to be true.

Then we're going to have const error.

And then we're going to say set

error is equal to use state.

And then for now this is going to be null.

Then we're going to say const member.

And this is going to be count is equal to membership.

Question mark dot count or zero.

So we can figure out how many members are in the particular organization.

Because that's what we want to display on this page.

Then what we're going to do is we're going to say const

or guid is equal to organization question mark.id.

And now we're going to start writing some functions to load the task.

So we're going to say const load tasks okay this is a function.

So we're going to say use callback.

And this is going to be async.

And then inside of here for this particular function we're going to say try.

We're going to say set loading is equal to true.

We're going to say set error okay.

It's errors will correctly.

Yes it is too. No.

Then we're going to say const data is equal to await

get tasks which is the function we're calling from that file we wrote before.

Now we're passing that get token function.

So we can actually get the clerk token.

We're going to catch on error.

And we're going to say set error.

And this is going to be error dot message.

And then we are going to go here to a finally block.

And for the finally we're going to say set loading equal to false.

Because no matter what we want to stop that loading state.

Then what we're going to do is just remember to set the tasks with the data, because we need to do that.

Otherwise this isn't going to update anything for us.

And we're going to put in the dependency array of this callback the get token function,

so that if that update that we will do this again to get the new tasks for this new token,

which will be based on the organization that the user is currently active inside of,

as well as which user is signed in, then we need a really quick use affect hooks

so that we can run this automatically when the component mounts.

So in the dependency array we're going to put the org ID

as well as the load tasks function.

And then what we're going to do here

is we're going to say if org id.

So if we do have an organization load tasks

okay.

Otherwise we're going to say set loading to false okay.

And load tasks.

Is this function right here. Perfect.

So we're essentially doing a user effect. We're saying all right right.

When it loads.

If we have an organization ID we'll try to load the tasks.

If we don't we don't need to load anything

because there's no task to load unless we're inside of an organization.

Now quickly we're going to say, if you are not in any organization,

then what we need to do is return just a quick little UI to show you something.

So we're going to say class name is equal to dashboard

dash container.

Then we're going to have another div with class name equal

to no dash org dash container.

Then we're going to have an H1.

This is going to have a class name which is going to be equal

to no dash org dash title.

And then we're going to say welcome to task board which is going to be the name of the app.

Right.

Then we'll put a paragraph tag and we're going to say class

name is equal to no dash org dash text.

And then inside of here we're going to say create

or join an organization

to start managing tasks with your team okay.

And let's spell managing correctly.

Now after that paragraph tag we're just going to show the create

organization form

from clerk, which I think was right there.

Perfect. So create organization.

And after create organization

URL is going to be equal to slash dashboard which I know is the page we're currently on.

But it will refresh the page okay perfect.

So that's if you don't have an organization.

Now if you do have an organization, we're just going to simply show the dashboard with the Kanban page.

So we're going to say div class name is equal

to the dashboard dash container.

Then inside of this div we're going to have another div for the header.

So we're going to say div class name is equal to

and this is going to be the dash board dash header.

Then we're going to have a div with no class name.

And here we're going to have an h1 for the h1.

We're going to put the name of the organization.

So we're going to say organization dot name.

And this is going to have a class name.

The class name is going to be equal to dashboard dash title.

Then we're going to have a paragraph tag.

This is going to be class name equal to the org dash members.

Then we're going to show the member counts.

We're going to say member count.

And then we're going to say member.

And then we're going to put the member count does not okay.

So it does not equal one question mark.

We're going to have an S.

Otherwise we're going to have an empty string.

So we're going to say like one member or two members or three members.

So plural or not plural depending on if we have one or more.

Okay.

So this is our little header component right here.

Now beneath that we're going to say loading question mark.

So if we are loading we're going to quickly show let's do this.

We're going to quickly show a loading paragraph tag.

So we're going to say a paragraph class name

is equal to text dash muted.

And we're just going to say loading tasks dot dot dot.

Otherwise we're going to say is there an error.

If there is an error there were quickly going to show what that error is.

So we're going to put a div.

We're going to say class name is equal to.

And this is going to be card dash error.

And then we're going to have a not div but actually a paragraph tag

with class name equal to text dash error.

And then this is inside of here text dash error dash title.

And we're going to say error

like this loading tasks.

And then we're going to show what the error actually is.

So we're going to do another paragraph tag and same thing.

We're going to have class name is equal to text dash error.

And then this is going to be text dash error dash message.

And we're going to put this particular error okay.

Now if that's not the case.

So if it's not loading and we don't have an error we're finally going to show the Kanban board.

So we're going to show Kanban board.

For the Kanban board we need to pass in the information.

So we're going to pass in the tasks which is equal to tasks.

We're going to pass in set tasks which is equal to the set tasks state.

And we're gonna pass in the get token which is equal to that get token function okay.

So that should now load all of the tasks for us and display them in the dashboard.

Let's try it out by signing into our account and seeing if it works.

Okay. So I just signed into my account.

I also just created a new organization called test, and you can see that

we now have the Kanban state we have to do in progress and done.

It's all showing up properly for us.

And if we decide to maybe make a new organization, test one, two, three or something,

create organization and notice that this changes.

Now right in the background to test one, two, three.

And we can change between the different organizations.

And the dashboard page will update accordingly.

Now we need to make the form to create a new task.

Let's go ahead and do that.

So let's go to components.

Let's make a new file.

And this is going to be called the task form dot Json.

Now for the task form we're going to start by importing what we need.

So we're going to say import use state

and use effect from react.

Or I'm going to say function

task form.

And we're going to have the if we can write this correctly

task on submit and on cancel.

Now what we're going to do here is say const and we're going to say title

set title is equal to use state.

So we're going to start putting in all of the fields.

So we need to create a new task.

We need a title a description and a status.

So we have the title.

Now we're going to do the description. So const

description set description is equal to use state.

And then same thing empty string.

Then we're going to have const status.

Set status is equal to use state.

And by default we'll just start it in the pending status.

Then we're going to have const is

editing is equal to not not task okay.

So do we already have a task.

If we do then we're editing.

If we don't have a task we are not editing.

We're then going to have a use effect.

And we're essentially going to check, okay, are we currently editing the task

if we are currently editing the task.

So we need that in the dependency array, then we need to update the state

here with what is passed from this task.

So we're going to say if

task okay then what we're going to do is say set title.

And this is going to be tasked title.

We're going to say set description.

And this is going to be task dot description okay.

Or and then this is an empty string.

Then we're going to say set status.

And this is going to be task like oops let's go fix this task

dot status like so okay.

We're then going to have an else in the else we're going to say set title to an empty string.

So this is if we're not editing then we just want to make sure that it's empty.

We're going to say set description to an empty string.

And we're going to say set status equal to pending.

Okay.

So this is the beginning of our form again just handling if we're editing or not.

Because we could be pass some data in this task variable here.

That is what we want to populate the form with.