1
00:00:00,000 --> 00:00:09,357
[MUSIC]

2
00:00:09,357 --> 00:00:14,200
Welcome, everyone, I'm Laura,
a JavaScript instructor here at Treehouse.

3
00:00:14,200 --> 00:00:17,401
Today, we have an exciting
project in store for you.

4
00:00:17,401 --> 00:00:22,606
We'll be building a React scoreboard
app with the help of ChatGPT,

5
00:00:22,606 --> 00:00:24,994
a powerful AI language model.

6
00:00:24,994 --> 00:00:29,820
We'll tell ChatGPT the requirements for
our app and go from there.

7
00:00:29,820 --> 00:00:32,770
We'll improve the code and
even add some fun features.

8
00:00:33,800 --> 00:00:37,255
Before we dive in,
let's outline the requirements and

9
00:00:37,255 --> 00:00:39,913
features our scoreboard app should have.

10
00:00:39,913 --> 00:00:44,296
Our scoreboard's header will promptly
display the title scoreboard

11
00:00:44,296 --> 00:00:46,457
along with the number of players.

12
00:00:46,457 --> 00:00:50,196
We wanted to look like this,
where the number will dynamically change,

13
00:00:50,196 --> 00:00:53,250
depending on how many players there are.

14
00:00:53,250 --> 00:00:58,054
To kick things off, we'll start with
four players, Laura, Dustin, Rachel,

15
00:00:58,054 --> 00:00:59,790
and Travis.

16
00:00:59,790 --> 00:01:02,085
When you hover over a player's name,

17
00:01:02,085 --> 00:01:06,480
a delete button shaped like an X
will appear on the left side.

18
00:01:06,480 --> 00:01:11,330
This feature allows users to remove
players from the scoreboard with ease.

19
00:01:11,330 --> 00:01:13,920
Now, let's talk about managing the scores.

20
00:01:13,920 --> 00:01:17,626
For each player, we'll have a minus
button, a score counter, and

21
00:01:17,626 --> 00:01:21,430
a plus button placed to
the right-side of their name.

22
00:01:21,430 --> 00:01:25,235
Clicking the minus button will
decrease the score counter by 1,

23
00:01:25,235 --> 00:01:29,070
while clicking the plus
button will increase it by 1.

24
00:01:29,070 --> 00:01:34,060
This dynamic scoring mechanism ensures
a seamless and intuitive user experience.

25
00:01:35,490 --> 00:01:37,660
Now, this is where things get interesting.

26
00:01:37,660 --> 00:01:40,397
We're going to ask ChatGPT to help us out.

27
00:01:40,397 --> 00:01:45,283
We'll prompt ChatGPT with our requirements
and see what it comes up with.

28
00:01:45,283 --> 00:01:52,202
I'll prompt ChatGPT build a scoreboard app
using React, here are the requirements.

29
00:01:52,202 --> 00:01:55,231
The app should be built using Vite.js.

30
00:01:55,231 --> 00:01:59,646
The scoreboard's header should display
the title "SCOREBOARD," along with a stat

31
00:01:59,646 --> 00:02:03,350
indicating the total number of
players like this: "PLAYERS: x.".

32
00:02:04,720 --> 00:02:09,263
The scoreboard app should initially
have four players, Laura, Dustin,

33
00:02:09,263 --> 00:02:10,641
Rachel, and Travis.

34
00:02:10,641 --> 00:02:13,897
Each player's name should have
a delete button to the left.

35
00:02:13,897 --> 00:02:17,815
The button should only appear when
the user hovers over the player, and

36
00:02:17,815 --> 00:02:19,980
the button should display as an "X".

37
00:02:21,010 --> 00:02:25,426
To the right of each player, there should
be a minus button, a score counter, and

38
00:02:25,426 --> 00:02:26,830
a plus button.

39
00:02:26,830 --> 00:02:31,610
When the player clicks the minus button,
the score counter should decrease by 1.

40
00:02:31,610 --> 00:02:34,804
Similarly, when the user
clicks the plus button,

41
00:02:34,804 --> 00:02:38,370
the score counter should increase by 1.

42
00:02:38,370 --> 00:02:42,725
Once we receive ChatGPT's response,
we'll take it suggestions and

43
00:02:42,725 --> 00:02:45,070
improve our app from there.

44
00:02:45,070 --> 00:02:50,198
Some exciting features we plan to
add include a high-score indicator,

45
00:02:50,198 --> 00:02:53,811
an input field to add new
players dynamically, and

46
00:02:53,811 --> 00:02:58,120
even a stopwatch to keep
the game fast-paced and engaging.

47
00:02:58,120 --> 00:03:01,470
I recommend that you follow
along with us on this journey.

48
00:03:01,470 --> 00:03:05,850
Below this video, I've added a link
to my conversation with ChatGPT.

49
00:03:05,850 --> 00:03:09,986
You can copy the same code I used, or
feel free to explore your own ideas and

50
00:03:09,986 --> 00:03:14,550
brainstorm additional features you'd
like to include in your scoreboard app.

51
00:03:15,960 --> 00:03:18,180
All right, let's get started.

52
00:03:18,180 --> 00:03:23,370
To setup the project, we need to ensure
that Node.js is installed on our computer.

53
00:03:23,370 --> 00:03:25,610
If you haven't installed Node.js yet,

54
00:03:25,610 --> 00:03:28,240
you can find a link to
our Node.js course below.

55
00:03:30,260 --> 00:03:34,466
Now, the instructions suggest creating
a new directory for the project and

56
00:03:34,466 --> 00:03:36,260
navigating inside it.

57
00:03:36,260 --> 00:03:40,781
However, since the v command will
create the project directory for us,

58
00:03:40,781 --> 00:03:43,060
this step is not necessary.

59
00:03:43,060 --> 00:03:48,350
Instead, I'll navigate to the desired
location where I want the project to be.

60
00:03:48,350 --> 00:03:53,145
It's also worth noting that
the command suggested by ChatGPT,

61
00:03:53,145 --> 00:03:58,030
npm init vite@latest differs from
what Vite recommends in their

62
00:03:58,030 --> 00:04:02,070
documentation, which is
npm create vite@latest.

63
00:04:02,070 --> 00:04:05,940
So I'm just gonna use the command
from Vite's documentation.

64
00:04:05,940 --> 00:04:10,760
Let's open up the terminal since I want
the project files to be on my desktop.

65
00:04:10,760 --> 00:04:15,930
I'll navigate there by typing cd Desktop,
then I'll use the vite

66
00:04:15,930 --> 00:04:20,749
command to set up the project and
utilize the React template.

67
00:04:20,749 --> 00:04:21,493
All right,

68
00:04:21,493 --> 00:04:26,343
now, ChatGPT suggests navigating to
the newly created project directory.

69
00:04:26,343 --> 00:04:31,563
In my case, I named my project
scoreboard ChatGPT, so I'll simply use

70
00:04:31,563 --> 00:04:36,790
the command cd scoreboard-chatgpt
% to navigate to that directory.

71
00:04:38,110 --> 00:04:42,740
Let's move on to step two, which involves
installing the project dependencies.

72
00:04:42,740 --> 00:04:45,939
To do this,
simply type npm install in the terminal.

73
00:04:48,707 --> 00:04:52,330
All right, step three looks like
we're getting into some code.

74
00:04:52,330 --> 00:04:57,275
We need to replace the content of
the app.jsx file with the code provided by

75
00:04:57,275 --> 00:04:58,840
ChatGPT.

76
00:04:58,840 --> 00:05:01,861
To open up the project files
in Visual Studio Code,

77
00:05:01,861 --> 00:05:05,300
I'll use the command `code.` in the terminal.

78
00:05:05,300 --> 00:05:09,570
In this command opens Visual Studio
code at the current directory.

79
00:05:09,570 --> 00:05:12,412
If you'd like to add this
command to your terminal,

80
00:05:12,412 --> 00:05:15,590
you can find instructions on how to do so
in the link below.

81
00:05:16,770 --> 00:05:19,487
I'll navigate to the app.jsx file and

82
00:05:19,487 --> 00:05:23,860
replace the existing code with
the code suggested by ChatGPT.

83
00:05:25,070 --> 00:05:28,400
However, there's a small
error in the code.

84
00:05:28,400 --> 00:05:31,650
React is defined, but never used.

85
00:05:31,650 --> 00:05:36,410
Since React version 17,
there's no need to import React.

86
00:05:36,410 --> 00:05:39,320
I'll delete the React keyword
from the import statement.

87
00:05:40,930 --> 00:05:45,344
Now, let's move on to step four,
where ChatGPT instructs us to

88
00:05:45,344 --> 00:05:49,450
create a new file named app.css and
add the provided code.

89
00:05:50,470 --> 00:05:53,085
However, if we look at our project files,

90
00:05:53,085 --> 00:05:58,180
we can see that app.css already exists,
so we don't need to create it.

91
00:05:58,180 --> 00:06:01,421
I'll simply select the entire
file's content and

92
00:06:01,421 --> 00:06:06,780
replace them with the code suggested by
ChatGPT, and remember to save the changes.

93
00:06:08,020 --> 00:06:12,174
Now, to our final step,
we need to save the changes we made,

94
00:06:12,174 --> 00:06:15,675
run the command to start
the development server and

95
00:06:15,675 --> 00:06:21,700
visit localhost3000 in the browser
to see the scoreboard app in action.

96
00:06:21,700 --> 00:06:26,901
However, there's a slight mistake in
ChatGPT suggestion when using vite,

97
00:06:26,901 --> 00:06:32,757
the project runs on a different port,
not 3000, but let's follow along for now.

98
00:06:32,757 --> 00:06:38,290
Since Visual Studio Code has a built in
terminal, I'll be using that from now on.

99
00:06:38,290 --> 00:06:42,591
I'll run npm run dev, and
when I hover over the link,

100
00:06:42,591 --> 00:06:49,294
Visual Studio Code suggests using Command
Click to open up the link in the browser.

101
00:06:49,294 --> 00:06:52,434
All right, let's take a look.

102
00:06:52,434 --> 00:06:56,855
It seems that the CSS styling is
a bit off, especially the X and

103
00:06:56,855 --> 00:07:00,560
the Delete button, it isn't centered.

104
00:07:00,560 --> 00:07:03,060
I believe I know the cause of this issue.

105
00:07:03,060 --> 00:07:08,211
The starting files provided by
Vite includes two CSS files,

106
00:07:08,211 --> 00:07:11,230
app.css and index.css.

107
00:07:11,230 --> 00:07:17,758
To avoid any conflicts between these
files, I'll delete the index.css file and

108
00:07:17,758 --> 00:07:23,161
remove the corresponding import
statement in the main.jsx file.

109
00:07:23,161 --> 00:07:27,438
Let's save the changes and check out
the app in the browser once again.

110
00:07:27,438 --> 00:07:29,428
The layout looks much better now,

111
00:07:29,428 --> 00:07:33,220
let's see if the app meets
all the requirements we set.

112
00:07:33,220 --> 00:07:36,924
It displays the correct header
with the title scoreboard,

113
00:07:36,924 --> 00:07:42,780
shows the total number of players, and
correctly lists the four initial players.

114
00:07:42,780 --> 00:07:45,880
When I hover over a player,
the delete button appears, and

115
00:07:45,880 --> 00:07:49,100
clicking it successfully
removes the player.

116
00:07:49,100 --> 00:07:52,502
Additionally, each player
has a score counter, and

117
00:07:52,502 --> 00:07:56,440
I can adjust the score by clicking
the plus and minus buttons.

118
00:07:57,770 --> 00:08:00,194
This is amazing, thanks to ChatGPT,

119
00:08:00,194 --> 00:08:05,870
we were able to create a fully functional
scoreboard app within minutes.

120
00:08:05,870 --> 00:08:06,949
In the next video,

121
00:08:06,949 --> 00:08:11,540
we'll take our app to the next level by
improving the code generated by ChatGPT.

122
00:08:12,750 --> 00:08:16,725
We'll ask ChatGPT to help us
split the app into component,

123
00:08:16,725 --> 00:08:22,150
which will make our code more modular,
reusable, and maintainable.

124
00:08:22,150 --> 00:08:25,656
By breaking down the app into
smaller manageable parts,

125
00:08:25,656 --> 00:08:31,000
we'll be able to enhance its scalability
and make future modifications much easier.