this is the tutorial that will teach you the skills that most of the companies today are looking for by building this
full stack project management app called scrum with features like authentication with both Google and custom email
password ability to create your organization or join another organization as a member an organization
can have multiple project and a project can have multiple Sprint Cycles just like what we see in jira we can create
issues inside of a Sprint we can update them reorder those issues inside the Sprint board apply filters to them and
much much more along with this fully responsive and beautiful user interface that we will be building using nextjs
and Shad CN UI so right off the bat we have this professional and modern looking page streamline your workflow
with scrum and if you scroll down we have the key features of our app and if we further scroll down we have this
beautiful Carousel which shows all of the companies that are using our product and now if I go down over here we have
frequent asked questions about our app if we click on any of one of them we can you know expand them as well okay and if
we further go down we have a call to action button at the bottom just like all of the modern SAS websites do and
you know a landing page like this can play a huge role on if you'll be getting a call back from that HR or not so let's
click on over here start for free and we are on the login screen now we can either continue with Google or we can
use email password to login so let me just continue with Google and here we go we are currently on the onboarding
screen where we can either create an organization or if we are already a part of an organization we can join it or you
if we have been invited to an organization we can join it so let's go on and create my own organization I'm
going to call it roadside coder and we can set the URL slug for it over here let's go on and upload the logo and
click on create organization now one thing about this page if you're on the onboarding page and you try to go onto
some other URL you won't be allowed to go we have added the protected routes feure inside of this app as well okay
now that we are in our roadside quarter organization we can see we have our user drop down menu over here and this is
made possible by using clerk this comes right out of the box of clerk so if we click on manage account over here we can
see our email address we can you know change our email address remove it we can click on update profile and we can
you know change our first name last name over here if you go to security you can also delete your account and you can see
all of the you know active sessions for your account so this is like mind-blowing production great features
now here in our organization we have our organization settings as well we can click on over here in the manage
organization we can leave this organization delete his organization update details about this organization
or we can invite some members over here let's go on and invite some members if I click on invite let me just enter some
emails over here okay I've entered two emails over here and I'm going to click on send invitation and those people
should get an email for joining my organization even if if they are not on the app currently there we go on our
mail we have the invitation to join roadside coder this is such an amazing feature right if you show this to your
uh you know interviewer they will be very very impressed so let's click on accept invitation and this will take us
straight to our app here we go this is logging Us in automatically and you can see it showed us like it did everything for us we
didn't have to do anything it you know logged in it joined us in that organization and now we can see over
here we are a member in this organization and in that ID we are the admin right members have some limited
functionality like if you click on manage you can just leave organization and you cannot invite anyone right now if I go back and let's
try to create a project now for inside of this organization and one organization can have more than one
project because when you're working in a company we have multiple different projects going on right let's say for
web app for you know mobile app so we have considered all of those things so if I click on create new over here or if
you click on over here create project it will take you to this page right here create new project as a member let's try
to do this if I click on create project you're going to see oops only admins can create project now we can click on over
here and we can create our own organization and this will present to us with this popup right here to create the
organization let's not worry about it let's go back and create a new project also to manage all of the forms inside
of our app we will be using react hook form along with the Zod validation Library by creating schemas such as this
right so this is a very robust error-free app let's just say I'm working on a jira clone right and we can
provide a project key over here now this is very important because this is something your Sprints will be named on
you know let's say if I say RC JC right so all of our Sprints will be RC jc1 RC jc2 RC jc3 Etc we can say project
description um let's say click on create project it's creating and you can see a beautiful toast over here project
created successfully if I click on over here and click on my organizations we can go back to our organization page and
we can see the list of our projects over here okay let's click on view project over here so let's go on and create new
Sprint so you can see our Sprint has been automatically named for us RC jc1 since it's the first Sprint let's click
on over here and decide when this Sprint starts and when this ends now by default it has selected 14 days if we want you
know we can change it as well like say if I want it to go till 8 right and let's click on create Sprint over here
there we go Sprint created successfully and we have our jira board right here now in this state we can plan our Sprint
right we can create issues and all and after our planning is done we can click on start Sprint to start our Sprint
let's go on and create some issues if I click on over here you can see we have this title button we can select the
assign so let's say I want to create a issue for implementing drag and drop functionality for kban board so let's
say if if I want to assign it to ELO Agarwal and the description this right here accepts markdown format so let's
say if I write something like this you can see it has beautify it for us right over here and let's select the priority
let's say hi and create issue and there we go our issue is on the board if I click on it we can see the description
you know if it's to-do or if it's in progress the priority we can also change now this thing right here priority can
only be updated by person who created it that is reporter over here that is me assign can only you know change this
thing if it's into to do in progress Etc so we can go on over here we can drag and drop issues as well but you can see
the Sprint has not been started yet so we cannot do that let's create more issues over here there we go I've
created some issues over here I've assigned some issues to me some issues to roadside coder some issues to ELO
agal and you can see if it's low it is green border if it's medium it's yellow on urgent it's red on high it's orange
right and so let's go on uh let's go and start the Sprint right and there we go the Sprint has been started now we can
go on and drag and drop cards you know according to how the work is going on and it works seamlessly just like a
production grade apps should we can search any issue over here let's say over here just like that if I want I can
select any priority over here right low priority tickets high priority I can clear the filters from here I can select
it with respect to this uh you know user so you might have seen this feature in other project management apps as well if
I click on over here I can see the Alo aaral shoes if I click on over here I can see issues for both of these people
I can remove it I can clear the filters as well right so this is absolutely amazing now if I click on over here
create new Sprint and let's say if I create uh the Sprint after it which will start from 9 and it will go till 23 and
click on create Sprint we can switch between Sprints from over here let's say if I click on the next Sprint you can
see starts in 13 days we can create issues and all over here we can plan it ahead of time you know that's what TPMS
do right in our companies so I have included all of those features inside of this app and now if I go back to my
organization page you can see we have this my issues section over here where we can see the assigned to you issues
reported by you issues so that we don't have any friction finding any issues let's say if I click on it and click on
this button right over here it will take us to that particular project and that particular Sprint as well and we can see
inside of our database our project has been added in this project table right here we have Sprint table user table
issue table right so this is a pretty complex application but don't worry I will make everything very easy for you
all right so open vs code over here and let's go on and initialize a new nextjs app so I'm going to say npx create next
app at latest it's going to say we supposed to proceed yes what is the name of your project I'm just going to press
dot so that it creates a new project right inside of this folder would you like to use typescript no would you like
to use es lint yes would you like to use Tailwind CSS yes SRC directory no we're not going to use SRC directory app router yes this is the
latest uh way of you know routing in nextjs so I'm going to say yes would you like to customize the default import so
no we don't want that we just going to be needing this to import and yeah it's going to create a new nextjs app in this
folder right over here you can see it's installing all of the dependencies and installing all of this Tailwind CSS
dependencies along with es lent as well all right so our next JS app has been initialized over here now uh let's go
and quickly run this so I'll say npm run Dev just to see what do we get initially let's go onto this Local Host 3000 and
it's going to be open inside of our browser just like this okay I'm going to go back to vs code and inside of the app
folder over here you can see we have this page file and inside of over here this is the code that we see right over
here so let's just remove all of this inside of this return and over here I'm going to have a div which will simply
say subscribe to roadside coder which you should if you haven't yet now if I go back we will see we have subscribed
to roadside coder but it has some default Styles as well so over here you can see in the layout we have all of
these things like we have a body tag which is wrapping all of the children and this is this children is nothing but
this page file right over here and I'll show you as we go on to explore next JS in this video I'll show you how routing
works exactly in nextjs and what this layout file and what this page file is all about right so layout is basically
this is the root layout which wraps all of our app and over here we have the title and description of our app let's
just say scrum and description will say project management app right all right now what I'll do I'll go back to my
browser and I'll install Shad CN UI so Shad CN UI is basically beautifully designed components that you can copy
and paste inside of your app this is not a component library but these are like pre-built components that we can use and
this is very popular nowadays so if I click on docs over here and click on installation just click on nextjs here
and you can see it tells us this is how you can initialize a new project take this and I'll paste it right over here
so I'll create a new terminal open a new terminal and paste it here and it's going to ask us a bunch of questions
here so let's proceed yes so theme I'm just going to go with New York neutral would you like to use CSS variables yes
now it's going to be writing to components. Json file over here so this is the file right here where it you know
basically contains all of its configuration it's going to update the Tailwind CSS configuration file so that
it can work with that and also this shared CN UI all of these components are basically made on Tailwind CSS that is
the reason why we need Tailwind CSS along with it so now if I go to this global. CSS file you're going to see
that this has added these Styles over here like basee color dark color and few more Styles which we don't need to care
about right so let's just close this global. CSS and now if I again go back to our app you can see now it has reset
all of these Styles right here now there's one thing that I need to do first so over here in the page.js you
can see if I say let hello and do nothing right this variable is not being used over here but this should give us
error right so by default nextjs doesn't have these settings so inside of this eslint rc. Json I'm going to add a rule
over here so comma and I'll say rules and inside this rules I'll say no unused Wares right so when there are
unused vs over here I'm going to say warn me that's it and now if I go back you're going to see this shows us that
hello is declared but uh its Valu is never used so this will help us a lot in you know debugging the errors during the
development cool then now let's understand what shat and UI is all about so if you go on over here you can see we
have bunch of different components over here let's just go to this button component for example there we go how do
we create this button inside of our app if you go to code this is it this is the code that we will need and how will we
install this button this is how we do that npx sh CN at latest add button so let's copy it and paste it inside of our
terminal press enter and now you're going to see it will create a components folder over here just like this and
inside of this there's this UI folder which we are not going to touch this is just for Shi and UI and here it has
installed this button so basically using Shad CN UI is much more lighter than using any other component library right
because it gives us pre-built components over here so now I can simply go on and use this inside of our app so uh in the
page.js file let's say I'm going to say button and I'll say go inside of it right those you can see import button
from components SL ui/ button and make sure whenever we are importing shad UI components they're important for
components slui folder okay let's go right here and there we go you can see we have this go button over here amazing
all right so similar to this button we are going to be needing bunch of different uh things inside of our app
like if you see in our deployed app where like this is the button and if you scroll down this is the card component
this is the carousal this is um the accordion component right we have bunch of different things from shat and UI
that we are using inside of our app so let's go on over here and if you go on to let's say accordion again the process
is exactly the similar right so let's go on inside of our app and install all of these components so that later on we
don't have to install them one by one right so npx CN latest at accordion I'm going to be needing Avatar badge card
Carousel dialogue drawer input for our uh you know forms and all pop over for our models select you know select drop
down saer saer is basically going to be the toast component that we'll be showing in some places tabs is going to
be useful in some places like assign issues or created issues tabs right and text area again for our forms and press
enter there we go it has installed all of these components it might ask that you know button already exist if you
want to overwrite it just like this so just press enter for that all right cool all right now uh there are a couple of
things that I need to make sure uh when it comes to Shad CN UI and theming right that we want Dark theme for our app so
you can see this deployed app has dark theme to set this dark theme uh you can just search a documentation dark mode in
nextjs it's going to tell that we can start by installing next theme so this basically this is the uh you know
package that we are going to be needing so let's go back to our terminal and I'm going to paste it here npm install next
themes and then it's going to install this package and then it's going to tell us that we need to create this component
called theme provider. TSX or jsx right so you don't need to worry about all of these things just copy it up and go to
our components folder I'm going to create a new file called theme provider. jsx and paste it basically all
this is doing over here is it's wrapping whole of our app in this next themes provider so that we can you know make
our app light mode or dark mode Etc we are not going to be needing this type since we we are using JavaScript and
let's remove this type from over here as well and if you want to follow this project in typescript that is also fine
it is just a syntax no big deal right you should focus on logic more instead of you know building app in typescript
or JavaScript so cool now it's going to tell us that we need to wrap whole of our app with this theme provider and we will wrap it inside of over here app.
layout. TSX so if you go to this layout.
JS or TS over here you can see first of all I don't need both of these fonts so I'm going to get rid of them both of
these fonts over here and then inside of our body I'm going to wrap whole of my app with theme provider just like that
and we're going to be giving it two things attribute class and default theme is going to be dark that's all this will
help us to make our app dark themed so if I go back over here yep you can see the background turned to dark and button
turned to White so we have successfully converted our app into the dark theme let's remove this anti alest over here
and I'm going to be importing another font so cons enter equals enter and we will be importing this from next SL font
SLG Google so let's import this enter font from next font SLG gooogle and simply inside of it we will say subsets
to be Latin and this will import this font inside of our app and we can simply go on over here in the body class name
and we can say enter dot class name so this will basically you know uh convert whole of our app with this enter font
okay that's fine now inside of this theme provider over here let's plan a few things we're going to have a header
of our app first right and then we're going to have the main content so let me just wrap it in this main tag inside of
it I'll keep the children below this I'm going to have a footer tag which will simply say made with love by roadside
coder okay let's see all right looks good let's just add this add some Styles over here now if you have not used
Tailwind CSS before no worries I'll explain you everything over here so simply Tailwind CSS is just like
pre-made class names it's just like bootstrap that we don't have to write custom CSS we can simply say let's say
background gray 900 and I'll say padding vertical to be 12 and if you hover on these class names you can see exactly
what they are all about right so if I go back now you can see this is applied let's just make this uh main tag height
of 100 viewport so I'll say minimum height to be screen yep that's fine our footer is now at the bottom let's go
inside this footer and wrap this in a d and I'll put this inside of this div and this div will have the class name of
container so basically container adjusts our app with different different breakpoint so if you hover on it you can
see this is basically a media query with let's say 640 pixels 768 pixels so it adjusts our Max width with respect to
the screen size I'll show you in just a minute but I'll say MX to be Auto that is margin horizontal to be Auto so that
everything is in the middle and I'm going to give this some padding horizontal to be four text is going to
be at the center text Gray is going to be 200 okay let's see yep you can see our footer looks beautiful all right great
so now coming back let's just create the header file over here inside of our components and then we will start
working on the user authentication okay so I'll say header. jsx R AF C header let's just remove this react from over
here and yeah that's all let's just import it yeah instead of this header I'll say header or here okay cool let's go back and yeah we
can see the header and we have all of these content let me just remove the button for now we are not going not
going to be needing it currently all right so now it's time to implement user authentication I'll show you how easy it
is to implement user authentication inside of our app so click the link in description down below and you will land
on this page right over here and I'll show you how easy it is to implement user authentication by using clerk so
click on this signin button over here and let's sign into Clerk using our Google account or GitHub whatever and
you will see this page right here now over here we need to configure what are all those signin flows that we need to
add inside of our app if you want to keep email sign in as well you can keep it on else if you keep it off it will
just have the Google sign in so I'll in my case I'll have email and Google both and let's just say scrum that is what
our app is called right let's create application and there we go we are in so over here you can see it right out of
the gate it tells us how you can use clerk with nextjs so all we need to do is do at clerk SL nextjs inside of our
terminal so I'll just copy this command let's go back to our vs code and the terminal I'll paste it make sure you
install version 5.7.1 because this is the version that I'm using while you know creating this video later on it
might get updated and you know you might not be able to follow this tutorial properly make sure you install version
5.7.1 by writing it just like this let's see what else we need to do we need to set our environment variable Ables okay
so if you want to see you can just click on over here you can see your environment variables else you can copy
them just by clicking this copy button right so let's create a EnV file over here do EnV and I'll paste both of these
environment variables and these are basically the API keys right which will help us to connect to clerk okay next
we're supposed to update middleware function so just copy this middleware dots file so what basically this means
is so over here okay we don't have any middleware files so let's create a new file middleware do JS and paste it over here
so this uh middleware basically runs every single time right you can see so clerk middleware helper enables at
authentication and is where you will configure your protected routes so this is the file where we will be in the
future you know writing code like what are all the page that user is supposed to be landing on without signing in or
you know what are all the protected page what are all the public Pages Etc which user has the access to which
organization so all of that uh you know code we will be writing inside of this middleware do JS file right so okay
after that we need to just simply wrap our app using this clerk provider so okay let's take this clerk provider and
go back to our layout. JS file and over here right after return I'll say clerk provider and I'll just wrap all of my
app in this clerk provider let's import it from at clerk SL nextjs the package that we just installed now let me show
you how easy it is to you know Implement user authentication using clerk so if I click on continue to nextjs guide they
have this signin button component right so let me just not bore you with this documentation if I just go simply to our
header component if the user is signed out if that's the case I'm going to show this sign in button and all of these
things comes inbuilt in clerk right but if what if the user is signed in then we will show show the user button component
now see the magic this is the only code that we're supposed to write over here if I go back to my browser now you can
see we have the signin button if I click on it it's going to be taking us to a complete inbuilt signin flow if I click
on this continue with Google we did not build this page let's just sign in with Google continue and it's logging Us in
and you can see we have this user drop down as well amazing so all of these things comes inbuilt inside of Clerk and
you can see I can update my profile you know update update my profile picture we can also add you know the option to
update our name so for example if I go to the configure over here in uh Clerk and let's say if we want to change our
name yeah over here and click on Save let's refresh this app now and let's go to manage account now we have the option
to update our username as well right let me just make it like this and save so this is the magic of clerk but don't
worry when we signed in we went to some third party URL right we we we will make sure that this is replaced by our local
host or you know basically our domain so we will create our signin and sign up page as well but we don't need to create
you know those uh forms and all for user authentication so this is how easy clerk makes our job but I want to make one
change so over here you can see when I click on this uh user drop down we can see this White theme over here right
since our app is in the dark theme I want some dark theme as well so if I go back to the layout. JS for this clerk it
takes appearance prop and inside this it takes a base theme which I'll say shades of purple and actually to uh you know
import this we have to install a library called clerk SL themes so I'll say npm install at clerk SL themes and this uh
these themes and all will be contained inside of it okay it's installed now let's try to import it okay it's
imported let's go back and see inside of our app yep we can see this purplish theme over here amazing so not only this
provides us inbuilt component but it's also highly configurable now let me show you how we can make sure that uh the
signin page is inside of our app and not some third party URL right so if I go back to my code over here inside the EnV
file we need to add some environment variables so for signin it will be next public clerk sign in URL right what is
going to be this URL I'll just simply say you know slash sign in if you want to keep like login you can write login
over here whatever uh you want right let's duplicate it and I'll say sign up URL it's going to be sign up instead of
sign in and where will this be going after sign in so we have another uh environment variable for that so next
public clerk after signin URL so after signin I want it to go to slash onboarding now we haven't haven't
created this yet but don't worry we will be creating this soon and similarly we want to go over here after sign up as
well okay let's save this and to make this sign in work what we need to do inside of our app we need to create a
folder inside of which we will keep all of the authentication related things right so I will be explaining you in
much in- depth how routing Works in nextjs in this video but for now just understand that routing in nextjs works
with respect to the files that we create like for example over here if if I say sign Dash in this is a new route in
nextjs so if I say new folder and so if I say new file and page. jsx I say r a f c sign in and now if I go to this slash
signin you're going to see slash sign in this will show me this uh sign in text over here right so this is how basically
routing Works in nextjs let's just delete this fonts folder we won't be needing it so since we want to create a
sign in and sign up page for clerk this is exactly what we will be doing it and let's just say if you want to keep both
of these routes in some uh you know folder or basically to manage all of our routes right so I will create a new
folder over here for o but if we write it like this this will create a new path or you know new route inside of our app
so to ignore this folder I will drop this in this parenthesis just like this and next JS will completely ignore this
this folder and now we can move this sign in inside of it and you're going to notice that this still continues to work
and will show us sign in okay now inside of this signin folder over here we want to create a new folder with this square
brackets double square brackets inside of it I'll say dot dot dot sign Dash in so basically this is a catch all route
whatever comes after sign in it will catch it you don't need to understand it right now just understand that this is
needed so that clerk can work properly right with signin and all and I'll move this page. jsx inside of this signin
route as well again we will go on and understand routing in depth in this video so then I will show you you know
the exact docs where you can find information about all of these things catch route and all of those right so
yeah this is the signin page and let me just copy it and duplicate it inside of the O and here I will simply call it
sign up sign up and it's important to keep the name exactly same as what you gave in here in the EnV file right I
gave sign in and sign up so that's what I'm keeping over here I think there's some issue let me just uh delete this
folder and create it from scratch so inside the O I'll create a new folder for sign up insert this new folder with
double square brackets dot dot dot sign Dash up inside this I'll create a new file for page.
jsx okay now whenever we click on that signin button it should take us to that signin page so if I let just say sign
out and if I click on this signin button so let me just write something different over here so let's say sign in page