1 00:00:00,800 --> 00:00:04,720 So the first component we would like to build is going to be the navbar. 2 00:00:04,920 --> 00:00:07,000 So let's go ahead and see the output. 3 00:00:07,040 --> 00:00:08,560 This is what we would like to have. 4 00:00:09,040 --> 00:00:10,520 This is the navbar component. 5 00:00:10,520 --> 00:00:16,160 On the left hand side we will have the logo itself and on the right hand side we will have this dashboard 6 00:00:16,200 --> 00:00:20,440 button and a toggle switch as well as the user button. 7 00:00:20,680 --> 00:00:22,880 So let's go ahead and try to build this. 8 00:00:23,280 --> 00:00:30,920 First I will visit the Next.js documentation and search for the dark mode because we would like to implement 9 00:00:30,920 --> 00:00:31,320 that. 10 00:00:31,560 --> 00:00:34,960 And it will tell us to get this script. 11 00:00:35,000 --> 00:00:38,880 Let's go ahead and paste this in into a new terminal. 12 00:00:41,120 --> 00:00:46,040 And while this is installing we can go ahead and try to set up the layout file. 13 00:00:46,800 --> 00:00:49,680 So here we are just taking taking the children. 14 00:00:49,680 --> 00:00:54,120 But I want to add the navbar component to my entire application. 15 00:00:54,120 --> 00:00:58,040 So in every single page I would like to see the navbar at the very top. 16 00:00:58,320 --> 00:01:03,970 That's why I will delete this for a For a second and I will say I would like to have a div with this 17 00:01:03,970 --> 00:01:04,770 class name. 18 00:01:04,810 --> 00:01:08,130 Minimum let's say height of screen. 19 00:01:08,490 --> 00:01:14,170 Then inside I would like to have a navbar component, which is something that will create. 20 00:01:14,170 --> 00:01:20,810 And then we can have our main tag where we will have the children itself can give some paddings, let's 21 00:01:20,810 --> 00:01:21,330 say padding. 22 00:01:21,490 --> 00:01:27,770 So for smaller screens and above we can increment this by two and larger screens and above. 23 00:01:27,890 --> 00:01:30,290 Let's try to implement this. 24 00:01:30,330 --> 00:01:33,450 I mean increment this by two as well. 25 00:01:33,930 --> 00:01:34,370 Okay. 26 00:01:34,770 --> 00:01:36,330 So now we don't have the navbar. 27 00:01:36,370 --> 00:01:39,130 Let's try to create it under the components. 28 00:01:41,570 --> 00:01:45,490 Let's say refs to get this boilerplate code. 29 00:01:45,490 --> 00:01:47,570 And this is the extension that I'm using. 30 00:01:50,930 --> 00:01:51,290 Okay. 31 00:01:51,330 --> 00:01:54,330 Once you install this one let me show you the entire name. 32 00:01:54,850 --> 00:01:59,610 You should be able to type Rvce and get this code snippet. 33 00:02:00,470 --> 00:02:06,430 So let's open up the left hand side, visit the layout file and try to import the navbar. 34 00:02:07,710 --> 00:02:09,750 Okay, so this is what we have. 35 00:02:09,750 --> 00:02:14,310 Let's try to save and go back into the navbar component. 36 00:02:14,710 --> 00:02:21,550 So I think first we should visit the documentation where we would like to create a theme provider where 37 00:02:21,550 --> 00:02:24,510 we can have light mode and dark mode implemented. 38 00:02:24,510 --> 00:02:24,950 Right. 39 00:02:25,230 --> 00:02:31,150 So I will go ahead under the providers I will say Theme Provider dot TSX. 40 00:02:31,630 --> 00:02:32,470 Paste this in. 41 00:02:32,870 --> 00:02:33,790 Save this file. 42 00:02:33,790 --> 00:02:35,790 And again this is a client component. 43 00:02:36,710 --> 00:02:37,750 And let's see what is. 44 00:02:37,750 --> 00:02:42,470 The next step is to wrap our children with the theme provider. 45 00:02:42,870 --> 00:02:44,430 I'll go ahead and copy this. 46 00:02:45,670 --> 00:02:55,110 Visit the layout and wrap my children so we can wrap our entire application actually with this theme 47 00:02:55,110 --> 00:02:56,390 provider component. 48 00:02:58,430 --> 00:02:59,630 And close this off. 49 00:02:59,630 --> 00:03:01,920 all okay? 50 00:03:02,120 --> 00:03:06,160 And I think they are adding one more prop to HTML. 51 00:03:06,520 --> 00:03:11,280 So I'll go ahead and copy this so that we can suppress the hydration warnings. 52 00:03:12,160 --> 00:03:12,640 Okay. 53 00:03:12,800 --> 00:03:16,560 So with that we should be able to have light mode and dark mode implemented. 54 00:03:17,360 --> 00:03:21,400 The only thing we left is to get this component and they have the code. 55 00:03:21,600 --> 00:03:30,280 I'll copy it and paste it into my components where I will say mode toggle dot TSX. 56 00:03:31,240 --> 00:03:36,280 Paste this in and this is using a component called drop down menu. 57 00:03:36,640 --> 00:03:39,480 Let's go ahead and try to install it from CDN. 58 00:03:39,720 --> 00:03:48,960 I'll say NP and let me kill the left hand side chat CDN at latest at drop down menu. 59 00:03:53,200 --> 00:03:54,840 So we just got that component. 60 00:03:54,880 --> 00:03:56,640 Let's try to shrink this. 61 00:03:56,640 --> 00:03:58,600 And the warning should be gone. 62 00:03:58,800 --> 00:03:59,400 There we go. 63 00:03:59,860 --> 00:04:04,340 We'll be using this mode toggle component in the nav bar component right. 64 00:04:04,540 --> 00:04:07,620 So all showing everything go into the home page. 65 00:04:08,580 --> 00:04:10,380 I'll delete everything from here. 66 00:04:10,420 --> 00:04:11,700 I'll just say home page. 67 00:04:11,900 --> 00:04:12,700 Save this. 68 00:04:12,740 --> 00:04:20,980 And in the navbar component we can say nav bar and then have our mode toggle component just to test 69 00:04:20,980 --> 00:04:21,580 this out. 70 00:04:23,260 --> 00:04:27,220 So we got the nav bar dark mode. 71 00:04:27,260 --> 00:04:33,260 Light mode is working and by default system is in the dark mode and we have the home page content. 72 00:04:33,780 --> 00:04:39,180 Okay, so with this in mind, I think we can go ahead and build the entire navbar component. 73 00:04:39,820 --> 00:04:47,820 So for this I will visit navbar TSX, and I would suggest you that you open up the source code. 74 00:04:48,420 --> 00:04:48,780 Oops. 75 00:04:48,820 --> 00:04:50,060 Let me go back to here. 76 00:04:51,060 --> 00:04:55,380 I would suggest you to open the source code which is in the description. 77 00:04:55,420 --> 00:05:01,510 Just open it up in a new tab because time to time will be copying and pasting some UI code, so you 78 00:05:01,510 --> 00:05:04,790 can just follow along with me without wasting any time. 79 00:05:04,990 --> 00:05:07,990 So if you have the source code, open a new tab. 80 00:05:07,990 --> 00:05:09,950 It would be awesome from here on out. 81 00:05:11,350 --> 00:05:16,190 Okay, so let's visit the navbar component and close everything. 82 00:05:16,430 --> 00:05:18,750 We would like to build this entire component. 83 00:05:19,110 --> 00:05:21,790 I will delete everything that we have so far. 84 00:05:21,950 --> 00:05:27,750 I will make this to be a nav element and I'll say class name of border bottom. 85 00:05:27,910 --> 00:05:31,550 Then we would like to have a div with some couple of classes. 86 00:05:31,870 --> 00:05:33,750 So I'll get the entire class name. 87 00:05:34,070 --> 00:05:41,390 Paste this in where we have a flex container, a height item centered padding x container, and centering 88 00:05:41,390 --> 00:05:42,910 everything into the middle. 89 00:05:43,150 --> 00:05:47,910 And I would like to have my left side, which is going to be the logo itself. 90 00:05:48,190 --> 00:05:51,990 So I will copy this from the GitHub repo and paste this in. 91 00:05:52,030 --> 00:05:59,130 Now this does not contain any logic at all, it is just a link with an icon and a text, so I don't 92 00:05:59,130 --> 00:06:03,810 really want to waste three minutes to type this out, and I hope you don't mind it. 93 00:06:04,330 --> 00:06:07,050 So we can just really speed up the entire process. 94 00:06:07,090 --> 00:06:14,130 Instead of having this tutorial ten hours, we can copy and paste UI and maybe shrink this down into, 95 00:06:14,170 --> 00:06:17,050 I don't know, six hours, five hours hopefully. 96 00:06:17,930 --> 00:06:18,370 Right. 97 00:06:18,690 --> 00:06:23,130 Okay, so that's the only reason I don't want to type out these classes and waste time. 98 00:06:23,450 --> 00:06:30,530 We got the left side which is our logo, and below to this link I will have my right side which is going 99 00:06:30,530 --> 00:06:31,770 to be the actions. 100 00:06:32,010 --> 00:06:33,570 It will have the buttons. 101 00:06:33,770 --> 00:06:39,690 So I will say um div and I only want to show this if we are signed in. 102 00:06:39,810 --> 00:06:42,770 So I can wrap this with signed in component. 103 00:06:45,450 --> 00:06:49,250 And go ahead and get the signed in from the clerk. 104 00:06:49,250 --> 00:06:50,010 Next.js. 105 00:06:50,570 --> 00:06:51,290 There we go. 106 00:06:51,330 --> 00:06:52,410 Inside this div. 107 00:06:52,650 --> 00:06:58,050 First we'll have some classes like flex items centered space x of four. 108 00:06:58,540 --> 00:07:00,500 then we would like to have ML auto. 109 00:07:01,100 --> 00:07:08,420 Then we'll have this dashboard button component that we will create in a second. 110 00:07:11,580 --> 00:07:18,500 We will have the mode toggle component and we will have the user button which is coming from Next.js. 111 00:07:18,820 --> 00:07:20,220 So let's go ahead and save. 112 00:07:20,260 --> 00:07:21,340 This should crash. 113 00:07:21,340 --> 00:07:22,980 But first I will copy this. 114 00:07:23,300 --> 00:07:24,740 Try to create it. 115 00:07:25,740 --> 00:07:28,300 Dot TSX and let's say Ahrefs. 116 00:07:28,500 --> 00:07:32,820 Just save it like this for now and try to import it. 117 00:07:33,100 --> 00:07:34,340 Now let's see the output. 118 00:07:34,380 --> 00:07:34,980 There we go. 119 00:07:35,020 --> 00:07:39,620 We can see the dashboard button, the mode toggle as well as the user button. 120 00:07:39,900 --> 00:07:43,060 Now this dashboard button will be a client component. 121 00:07:43,220 --> 00:07:47,660 That's why we separated this into its own file. 122 00:07:48,140 --> 00:07:54,380 So we'll go ahead and just say you will be a client component with this directive. 123 00:07:54,820 --> 00:07:56,500 Then we can implement the logic. 124 00:07:56,660 --> 00:07:59,440 So in Um, like, why are we doing this? 125 00:07:59,440 --> 00:08:05,760 Is because we will check if user is a candidate or if it is an interviewer, right? 126 00:08:05,800 --> 00:08:08,960 If it is a candidate, we will not return this component. 127 00:08:09,000 --> 00:08:11,080 We will just return nothing. 128 00:08:11,760 --> 00:08:14,600 So in this case, this user is the interviewer. 129 00:08:14,640 --> 00:08:17,120 That's why he can see this button. 130 00:08:18,240 --> 00:08:19,840 Okay I hope that makes sense. 131 00:08:20,000 --> 00:08:22,920 Now let's go ahead and try to build this component. 132 00:08:23,200 --> 00:08:25,080 First I'll just kill this empty tab. 133 00:08:25,120 --> 00:08:26,200 We don't really need it. 134 00:08:26,680 --> 00:08:29,880 And I will shrink the left hand side for now. 135 00:08:29,920 --> 00:08:31,960 Let's have this as hardcoded data. 136 00:08:31,960 --> 00:08:36,160 So I'll say is candidate is going to be let's say false. 137 00:08:37,280 --> 00:08:39,600 And let's say is. 138 00:08:41,640 --> 00:08:43,320 Is interviewer. 139 00:08:45,880 --> 00:08:46,800 Going to be true. 140 00:08:46,960 --> 00:08:49,360 So depending on this we'll take to return something. 141 00:08:49,400 --> 00:08:53,800 So I'll say if it is candidate we'll take to return nothing. 142 00:08:53,920 --> 00:08:55,240 So return null. 143 00:08:55,600 --> 00:08:58,050 But otherwise we can show a show a button. 144 00:08:58,530 --> 00:09:01,250 So first I'll just make this to be a link. 145 00:09:01,930 --> 00:09:04,170 Then inside I will have a button. 146 00:09:06,290 --> 00:09:11,730 And let's try to give this an href which would take us to the dashboard page. 147 00:09:12,290 --> 00:09:20,210 And let's get the button from UI folder which will have the class name of let's say gap of two and font 148 00:09:20,250 --> 00:09:21,530 would be medium. 149 00:09:21,530 --> 00:09:24,010 And we can say size would be small. 150 00:09:24,370 --> 00:09:32,930 Inside we will have sparkles icon or yeah, I think it should be this one where I would like to give 151 00:09:32,930 --> 00:09:36,370 this a class name size of four. 152 00:09:37,090 --> 00:09:40,170 Then below to it we'll just say dashboard. 153 00:09:40,810 --> 00:09:41,130 Okay. 154 00:09:41,130 --> 00:09:41,850 Let's save. 155 00:09:41,890 --> 00:09:46,010 And now that we are in a viewer right we're going to hit this return. 156 00:09:46,010 --> 00:09:48,450 And we should be able to see this button. 157 00:09:48,690 --> 00:09:49,370 There we go. 158 00:09:49,530 --> 00:09:50,490 Now this is white. 159 00:09:50,530 --> 00:09:56,770 We would like to get a green theme so we can go ahead under the themes in the CDN. 160 00:09:57,180 --> 00:09:59,060 And we can customize the theme. 161 00:09:59,300 --> 00:10:01,220 I would like to go with a green one. 162 00:10:01,420 --> 00:10:05,540 I will select this and try to copy this code. 163 00:10:06,100 --> 00:10:10,780 So let's copy everything and we would like to paste this into our CSS file. 164 00:10:11,500 --> 00:10:12,580 Let's say CSS. 165 00:10:12,740 --> 00:10:18,260 And by the way I can open up this command palette with command P or control p. 166 00:10:18,940 --> 00:10:19,380 Okay. 167 00:10:19,580 --> 00:10:20,100 Go ahead. 168 00:10:20,100 --> 00:10:24,260 Select this layer base which is around I think 50 lines of code. 169 00:10:24,540 --> 00:10:28,460 Paste this in save and we should be good to go. 170 00:10:29,860 --> 00:10:33,340 Now everything is in green theme in our application. 171 00:10:33,940 --> 00:10:39,660 When we click to it, it should take us to the dashboard page and we can go back. 172 00:10:40,700 --> 00:10:45,900 If you make this to be like if you are a candidate, you will hit this if check and you are not going 173 00:10:45,900 --> 00:10:46,820 to see that button. 174 00:10:47,140 --> 00:10:50,740 Okay, but we are getting this data as hard coded. 175 00:10:51,180 --> 00:10:53,980 How can we get it from our actual database? 176 00:10:54,220 --> 00:10:56,620 Well we can go ahead and create some hooks. 177 00:10:57,080 --> 00:11:01,480 So under the sauce I will go ahead and create a folder called hooks. 178 00:11:01,640 --> 00:11:07,600 And I will create my very first hook which is going to be called as Use User role. 179 00:11:07,960 --> 00:11:08,360 Yes. 180 00:11:08,760 --> 00:11:11,520 And we'll be calling this hook just like this. 181 00:11:11,520 --> 00:11:13,680 Let's say use user role. 182 00:11:14,240 --> 00:11:22,080 And this will give us the roles such as is candidate or it is interviewer. 183 00:11:22,320 --> 00:11:22,760 Right. 184 00:11:22,960 --> 00:11:27,320 So instead of getting this as hard coded values we will grab this from our hook. 185 00:11:27,680 --> 00:11:31,880 Now let's try to go ahead and build this hook in this file. 186 00:11:32,080 --> 00:11:37,600 So first I will go ahead and just say export const use user role. 187 00:11:37,800 --> 00:11:41,320 And we will make this an arrow function. 188 00:11:41,440 --> 00:11:44,840 Then inside I would like to get my user from the color. 189 00:11:45,200 --> 00:11:46,680 So we can say user. 190 00:11:46,720 --> 00:11:50,920 It is coming from this hook from Clark next JS. 191 00:11:51,400 --> 00:11:55,720 So we'll say we would like to get some user data from our database. 192 00:11:56,170 --> 00:11:58,130 And for this you can use a query. 193 00:11:58,170 --> 00:11:58,690 Right. 194 00:11:58,730 --> 00:12:00,130 We'll say use query. 195 00:12:00,250 --> 00:12:03,810 And we are going to call the API dot users. 196 00:12:03,810 --> 00:12:07,410 And here you can see it is type safe because we are using convex. 197 00:12:08,010 --> 00:12:09,570 It is completely type safe. 198 00:12:09,770 --> 00:12:11,250 We can go under the users. 199 00:12:11,250 --> 00:12:13,610 And once again it is still type safe. 200 00:12:13,650 --> 00:12:16,210 We can get any of these functions. 201 00:12:16,570 --> 00:12:21,410 And this is our query that we would like to call get user by clerk ID. 202 00:12:21,730 --> 00:12:26,810 So if you remember this was a taking an argument which was the clerk ID. 203 00:12:27,210 --> 00:12:29,330 And let's go ahead and paste this in. 204 00:12:30,490 --> 00:12:37,530 We'll say um I think clerk ID will be equal to user.id. 205 00:12:37,850 --> 00:12:44,970 And we can say if this is undefined, we can just pass an empty string and we're going to get an empty 206 00:12:45,010 --> 00:12:46,170 user object. 207 00:12:46,170 --> 00:12:46,530 Right. 208 00:12:46,570 --> 00:12:48,890 This would be null if we don't have it. 209 00:12:49,330 --> 00:12:49,810 Okay. 210 00:12:50,010 --> 00:12:57,230 So now um, convex returns you either null or undefined if it is in the in the undefined state, you 211 00:12:57,230 --> 00:12:59,910 should understand that it is in the loading state. 212 00:13:00,510 --> 00:13:06,270 Okay, so loading state is undefined and if you are getting null, that means there is no document. 213 00:13:06,270 --> 00:13:10,790 And if you are getting the document, as you can tell, you are getting the document. 214 00:13:10,830 --> 00:13:13,230 So let's say const is loading. 215 00:13:13,550 --> 00:13:19,670 You can say if user data is equal to undefined that means it is loading. 216 00:13:20,030 --> 00:13:26,950 But else we can go ahead and return the rest of the state such as the is loading is. 217 00:13:27,230 --> 00:13:28,070 Interviewer. 218 00:13:28,110 --> 00:13:28,750 Let's say. 219 00:13:32,070 --> 00:13:35,350 So we'll say if user oops, what have I done? 220 00:13:35,510 --> 00:13:38,030 Let's say user data dot roll. 221 00:13:39,270 --> 00:13:43,830 If it is equal to interviewer that means this should be true. 222 00:13:44,070 --> 00:13:46,310 But else let's duplicate this. 223 00:13:46,350 --> 00:13:55,230 Let's say if it is equal to candidate, that means this field is going to be called as candidate. 224 00:13:56,360 --> 00:13:56,800 Okay. 225 00:13:57,000 --> 00:14:03,480 So now by using this hook we can actually grab those fields from the user role. 226 00:14:03,480 --> 00:14:06,680 You can get the loading state right. 227 00:14:06,720 --> 00:14:10,680 You can get the is interviewer or is candidate states. 228 00:14:10,880 --> 00:14:18,960 So let's say if you are the candidate or if it is loading, we don't want to return anything. 229 00:14:19,160 --> 00:14:23,040 But if you are the interviewer, we would like to return this statement. 230 00:14:23,520 --> 00:14:26,160 And since we are not using this, let's go ahead and delete that. 231 00:14:26,800 --> 00:14:27,200 Okay. 232 00:14:27,240 --> 00:14:28,200 So that's going to be it. 233 00:14:28,200 --> 00:14:32,440 For our very first hook we have used a query from convex. 234 00:14:32,600 --> 00:14:34,200 This is how we can do it. 235 00:14:34,480 --> 00:14:39,920 Call the hook pass the API with the related table as well as the query. 236 00:14:40,080 --> 00:14:45,800 And if you have any arguments, paste that in and you'll get a data. 237 00:14:46,120 --> 00:14:52,440 If it is in the undefined state, that means it is in the loading state, and we can return these fields 238 00:14:52,720 --> 00:14:54,880 to be able to grab them from the hook. 239 00:14:55,740 --> 00:15:01,660 Okay, now we can actually check we don't see that button because this user is a candidate. 240 00:15:02,020 --> 00:15:04,380 Let's go ahead and try to update that. 241 00:15:05,260 --> 00:15:09,700 Um, why do we have this twice in the database. 242 00:15:11,020 --> 00:15:13,020 So that should be a mistake. 243 00:15:13,500 --> 00:15:17,700 Let's go ahead visit the users file. 244 00:15:21,380 --> 00:15:24,740 So we say if existing user return this. 245 00:15:25,900 --> 00:15:27,780 So this code looks correct. 246 00:15:28,300 --> 00:15:32,700 Uh, maybe we have tried to sign up before we implement this logic. 247 00:15:32,740 --> 00:15:34,620 That's why we are having this twice. 248 00:15:34,660 --> 00:15:40,580 I'll go ahead and delete the documents and delete the user from the dashboard as well. 249 00:15:40,580 --> 00:15:43,420 And try to do it once again from scratch. 250 00:15:46,740 --> 00:15:47,020 Okay. 251 00:15:47,060 --> 00:15:48,780 So let's try to sign up. 252 00:15:48,900 --> 00:15:56,590 And I think we can go into the layout file And I'll show you something else. 253 00:15:58,070 --> 00:15:59,910 The app layout. 254 00:16:00,190 --> 00:16:11,590 I will say, if you are signed out, you would like to redirect to sign up or sign in. 255 00:16:11,990 --> 00:16:14,750 In this case, I'll go with the sign in option and to. 256 00:16:14,750 --> 00:16:19,150 This will always get you to the sign in page if you are signed out. 257 00:16:19,190 --> 00:16:23,110 And we can wrap this with signed in. 258 00:16:29,590 --> 00:16:30,030 Okay. 259 00:16:30,070 --> 00:16:32,910 So if you are signed in you're going to see the application. 260 00:16:32,910 --> 00:16:36,670 But if you are signed out you're going to redirect it to the sign in page. 261 00:16:37,190 --> 00:16:38,830 Now we are not logged in. 262 00:16:38,830 --> 00:16:41,990 So we can go ahead and try to sign up. 263 00:16:43,350 --> 00:16:49,070 We should be able to have our account created as well as the user in the database. 264 00:16:49,190 --> 00:16:50,310 So this is candidate. 265 00:16:50,310 --> 00:16:52,030 We cannot see the button. 266 00:16:52,070 --> 00:16:54,310 Let's try to make this an interviewer. 267 00:16:58,090 --> 00:16:58,570 Okay. 268 00:16:59,090 --> 00:17:01,490 Now we should be able to get this button. 269 00:17:01,650 --> 00:17:06,570 As you can tell, and I didn't need to refresh this because it is working in real time. 270 00:17:06,810 --> 00:17:14,330 So that's going to be it for the navbar component where we built our very first hook into this dashboard 271 00:17:14,330 --> 00:17:14,970 button. 272 00:17:15,010 --> 00:17:18,850 This is where we are calling this hook to be able to get the user role. 273 00:17:18,850 --> 00:17:25,330 And we'll be using this in multiple different places to check if user is the interviewer or if it is 274 00:17:25,330 --> 00:17:26,210 the candidate. 275 00:17:27,490 --> 00:17:31,450 And other than this, we have put the logo to the left hand side. 276 00:17:31,490 --> 00:17:35,050 We have implemented the dark mode and then we put the user button. 277 00:17:35,370 --> 00:17:41,490 And then we also protected our entire application with this signed out and signed in components. 278 00:17:41,730 --> 00:17:45,010 So if you are not signed in we cannot do anything right. 279 00:17:45,050 --> 00:17:47,850 We will be redirected to the sign in page. 280 00:17:48,010 --> 00:17:50,330 Otherwise we can see our application. 281 00:17:50,650 --> 00:17:53,090 So that's going to be it for the navbar component. 282 00:17:53,090 --> 00:17:55,050 And we can move on with the next section.