1
00:00:00,160 --> 00:00:07,640
So in today's video, we're going to build a coding interview platform which has a video and audio calls,

2
00:00:07,640 --> 00:00:11,400
screen sharing, reactions and screen recordings.

3
00:00:11,520 --> 00:00:18,440
On the right panel there will be a code editor just like VS code, and it will support multiple programming

4
00:00:18,440 --> 00:00:22,480
languages such as JavaScript, Python and Java.

5
00:00:22,480 --> 00:00:26,400
And there will be multiple coding problems with the starter code.

6
00:00:26,400 --> 00:00:30,480
So you can imagine that we are building this platform for a company.

7
00:00:30,480 --> 00:00:36,840
There will be some candidates as well as interviewers, and they can join a call where the candidates

8
00:00:36,840 --> 00:00:40,440
share their screen and try to solve a coding problem.

9
00:00:40,440 --> 00:00:46,800
And at the end of the interview, admins can end the call for everyone and they can add comments about

10
00:00:46,800 --> 00:00:51,400
this candidate so they can decide if the candidate has failed or succeeded.

11
00:00:51,440 --> 00:00:55,640
This is the general idea of the platform, but there is a lot more to it.

12
00:00:55,640 --> 00:01:00,960
So let me give you a complete showcase of this application so that you know what you're going to have

13
00:01:01,000 --> 00:01:02,080
at the end of this video.

14
00:01:02,080 --> 00:01:06,420
And then we will talk about the technologies that are going to be used in this project.

15
00:01:06,420 --> 00:01:09,700
So everything starts from the authentication page.

16
00:01:09,700 --> 00:01:13,140
If you are not authenticated, you cannot visit the platform.

17
00:01:13,140 --> 00:01:17,860
You have three options to log in, which are GitHub, Google and email.

18
00:01:17,860 --> 00:01:19,300
Password combination.

19
00:01:19,300 --> 00:01:22,860
Once you are logged in, you will be redirected to the home page.

20
00:01:22,860 --> 00:01:29,180
By default, you will be a candidate and from the database dashboard admin can decide who is going to

21
00:01:29,180 --> 00:01:30,340
be a candidate.

22
00:01:30,340 --> 00:01:36,660
And in a river, as a candidate, you can see your past life and upcoming interviews.

23
00:01:36,860 --> 00:01:43,180
If the call is live, we can click to this join button, which would take us to the setup page where

24
00:01:43,180 --> 00:01:47,380
we can select our devices for camera and microphone.

25
00:01:47,420 --> 00:01:53,980
We can turn them on and off, and we have a quick motivation message that says, hey, do not forget,

26
00:01:53,980 --> 00:01:56,060
our team is super friendly.

27
00:01:56,100 --> 00:01:58,860
We want you to succeed and crack this interview.

28
00:01:58,860 --> 00:02:00,580
So let's go ahead and join.

29
00:02:00,620 --> 00:02:06,740
We can see the participants on the left panel and the coding question, as well as the editor on the

30
00:02:06,740 --> 00:02:07,500
right panel.

31
00:02:07,500 --> 00:02:12,810
And these panels are resizable both vertically and horizontally.

32
00:02:12,850 --> 00:02:19,650
We are going to have a couple of different actions, such as turning on and off our camera and microphone,

33
00:02:19,690 --> 00:02:26,370
adding reactions, sharing our screen that can be either a single window or the entire screen.

34
00:02:26,370 --> 00:02:32,410
We can record the screen, change the layout, see the participant list, and leave the call.

35
00:02:32,450 --> 00:02:36,970
On the right hand side, we can select a coding problem and a language.

36
00:02:37,010 --> 00:02:41,410
Then we can write the solution with syntax highlighting and autocomplete.

37
00:02:41,410 --> 00:02:43,970
This is what you can do as a candidate.

38
00:02:44,010 --> 00:02:47,530
Things get a lot more interesting when you are an interviewer.

39
00:02:47,570 --> 00:02:54,690
You can start an instant call, join with a link, schedule a meeting and see the past recordings.

40
00:02:54,690 --> 00:03:00,810
When you click this schedule link, you will be navigated to the schedule page where you can see all

41
00:03:00,810 --> 00:03:07,930
the interviews and schedule a new one with a title, description, candidate, and inner rewards, as

42
00:03:07,930 --> 00:03:09,570
well as the date and time.

43
00:03:09,570 --> 00:03:14,950
And in the meeting there can be only one candidate and multiple interviewers.

44
00:03:14,950 --> 00:03:20,910
Once it is scheduled, it will be saved to our database, which is going to be working in real time.

45
00:03:20,910 --> 00:03:28,070
And as the interviewer, you can visit the dashboard, add comments, and decide if they failed or succeeded.

46
00:03:28,070 --> 00:03:33,550
And if you are the owner of the call, you can end it for everyone, which would navigate us to the

47
00:03:33,550 --> 00:03:34,270
home page.

48
00:03:34,390 --> 00:03:39,510
And finally, in the recordings page you can watch all the recordings that you have.

49
00:03:39,550 --> 00:03:45,350
On top of this, there will be light and dark mode support with a responsive UI design.

50
00:03:45,350 --> 00:03:49,030
So this is the entire application that we're going to build in this video.

51
00:03:49,070 --> 00:03:55,390
When it comes to the technologies we're going to be using react with Next.js, we will use convex for

52
00:03:55,390 --> 00:04:01,190
the real time database, Clarke for the authentication and stream for the video calls.

53
00:04:01,230 --> 00:04:05,430
And you don't need a credit card to be able to follow along with this video.

54
00:04:05,470 --> 00:04:09,630
Every service that we use is completely free to get started with.

55
00:04:09,670 --> 00:04:13,190
And at the end of this video we are going to deploy this application.

56
00:04:13,190 --> 00:04:15,670
So if you are ready, let's get into it.