1
00:00:00,020 --> 00:00:00,230
All right.

2
00:00:00,230 --> 00:00:05,090
So I just want to quickly go over the tools that I'll be using throughout the course and what I would

3
00:00:05,090 --> 00:00:05,960
recommend.

4
00:00:05,960 --> 00:00:12,470
And these are just kind of the major tools as well as some of the text editor extensions I'll be using.

5
00:00:12,470 --> 00:00:16,309
Now, when it comes to a text editor, of course, you can use whatever you'd like.

6
00:00:16,340 --> 00:00:18,560
I'm going to be using Visual Studio code.

7
00:00:18,560 --> 00:00:20,480
That's what I also recommend.

8
00:00:20,510 --> 00:00:24,530
It's very, very popular, especially in the Web development community.

9
00:00:24,530 --> 00:00:29,780
It's cross-platform, so it doesn't matter if you're on Windows or Mac or Linux, but that's what I'll

10
00:00:29,780 --> 00:00:30,620
be using.

11
00:00:30,620 --> 00:00:37,160
So and again, I'll show you some of the extensions I'm using as well after I'd also suggest installing

12
00:00:37,160 --> 00:00:38,690
Git if you don't already have it.

13
00:00:38,690 --> 00:00:43,700
If you've been doing any kind of programming or any kind of web development, then you should already

14
00:00:43,700 --> 00:00:45,260
have git on your system.

15
00:00:45,260 --> 00:00:51,230
I'd also suggest having a GitHub account and when we deploy this project at the end, we're going to

16
00:00:51,230 --> 00:00:53,510
be using a service called Render.

17
00:00:53,510 --> 00:01:00,060
And basically we can just select our git repository and just and just deploy it from there.

18
00:01:00,060 --> 00:01:05,850
So definitely get that installed and then you're going to need NodeJS on your system because we're going

19
00:01:05,850 --> 00:01:07,590
to be using NPM quite a bit.

20
00:01:07,590 --> 00:01:16,410
And obviously our back end is going to be written in NodeJS Express and a bunch of other NPM packages

21
00:01:16,410 --> 00:01:16,980
as well.

22
00:01:16,980 --> 00:01:22,050
So get that installed and you can install either the long term support or the latest current version.

23
00:01:22,050 --> 00:01:28,200
It doesn't really matter for this course and we'll be using Postman to interact with our back end.

24
00:01:28,200 --> 00:01:34,770
So before we create our interface and we'll be going back and forth from front end to back end, but

25
00:01:34,770 --> 00:01:38,970
when we're creating our initial routes, we're going to need a way to test them.

26
00:01:38,970 --> 00:01:44,100
So we'll be using Postman and I'm going to show you how to use it where we can create a workspace,

27
00:01:44,100 --> 00:01:51,120
we can create folders and collections, and we can save requests, create environment variables.

28
00:01:51,120 --> 00:01:53,280
So we'll be using Postman quite a bit.

29
00:01:53,520 --> 00:01:59,820
And then as far as extensions and plug ins, I would suggest installing the React developer tools.

30
00:01:59,820 --> 00:02:03,480
If you're using Chrome or if you're using Firefox.

31
00:02:03,480 --> 00:02:08,580
And then the Redux dev tools, which I think are really, really important because that will show you

32
00:02:08,580 --> 00:02:11,790
your entire state, all of your actions, etcetera.

33
00:02:11,790 --> 00:02:16,320
So I would get those installed, whether you're using Chrome, Firefox.

34
00:02:16,320 --> 00:02:21,450
And then as far as extensions, let's just jump into VS code real quick.

35
00:02:21,450 --> 00:02:24,660
So I have quite a few extensions installed.

36
00:02:24,660 --> 00:02:29,340
As you can see, I have about 51, but there's only a couple that I would suggest using and you don't

37
00:02:29,340 --> 00:02:30,540
have to, but they do.

38
00:02:30,570 --> 00:02:32,760
They will help your developer experience.

39
00:02:32,760 --> 00:02:40,440
So one is this Es7 Redux, React Redux snippets and this will just allow us to quickly generate a component,

40
00:02:40,440 --> 00:02:45,570
whether it's a regular function or an arrow function, however you want to format it.

41
00:02:45,570 --> 00:02:52,650
I prefer to use arrow functions and have the export at the bottom so I can just type in F and then hit

42
00:02:52,680 --> 00:02:55,290
tab or enter and it generates a component.

43
00:02:55,290 --> 00:02:57,000
So I'll be using that quite a bit.

44
00:02:57,750 --> 00:02:58,920
Let's see what else.

45
00:02:58,920 --> 00:03:02,850
Prettier is something I would recommend, which is a code formatter.

46
00:03:02,850 --> 00:03:08,880
So I have it set up so that when I save it automatically formats my code and adds the correct indents

47
00:03:08,880 --> 00:03:09,840
and so on.

48
00:03:10,080 --> 00:03:12,450
And I am using semicolons.

49
00:03:12,450 --> 00:03:17,310
I did go about a year and a half where I wasn't using them in courses, but I'm back to using them.

50
00:03:17,310 --> 00:03:21,120
So if I do miss a semicolon, it will add it in for me.

51
00:03:21,120 --> 00:03:23,220
But of course that stuff is up to you.

52
00:03:23,220 --> 00:03:24,600
That's all preference.

53
00:03:24,600 --> 00:03:28,860
And then let's see, there's also a JavaScript snippets.

54
00:03:28,860 --> 00:03:32,520
This right here, JavaScript, ES6 code snippets.

55
00:03:32,520 --> 00:03:39,170
I use this for like console logs because you can just do CLG enter and trycatch you can just spell out

56
00:03:39,180 --> 00:03:44,460
just right Trycatch and hit enter and it will create the structure you can do use it for conditionals

57
00:03:44,460 --> 00:03:45,390
and stuff like that.

58
00:03:45,390 --> 00:03:47,370
So it does come in handy.

59
00:03:47,490 --> 00:03:50,550
And then let's see what else.

60
00:03:50,580 --> 00:03:56,370
Copilot I am going to be using this quite a bit through the course just to because I'm not the fastest

61
00:03:56,370 --> 00:03:57,000
typer.

62
00:03:57,000 --> 00:04:00,840
So if it's going to give me what I need anyway, then I'll use it.

63
00:04:00,840 --> 00:04:06,630
And a lot of times it does because I already have the first version of this project on GitHub.

64
00:04:06,630 --> 00:04:13,830
So it, it looks at that and I can just hit tab and instead of typing everything out and that's pretty

65
00:04:13,830 --> 00:04:14,580
much it.

66
00:04:14,580 --> 00:04:19,500
I mean, as far as my VS code theme, I'm using the GitHub theme.

67
00:04:19,510 --> 00:04:24,120
It's GitHub dark and what else here?

68
00:04:24,830 --> 00:04:26,660
Yeah, I'd say that that's about it.

69
00:04:26,660 --> 00:04:29,780
As far as as far as what I'll be using.

70
00:04:30,140 --> 00:04:35,440
But of course, if you have your own set of extensions that you want to use, that's absolutely fine.

71
00:04:35,450 --> 00:04:36,470
So that's it.

72
00:04:36,470 --> 00:04:40,040
Let's go ahead and jump in and we're going to start to create our project.