Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Building a React App with ChatGPT!
You have completed Building a React App with ChatGPT!
Preview
In this exciting video, we harness the incredible power of ChatGPT to swiftly build an interactive scoreboard app. Witness the remarkable speed and convenience of generating code suggestions from ChatGPT. Explore how artificial intelligence revolutionizes app development, accelerating the process and bringing creative ideas to life.
ChatGPT
- ChatGPT website
- This video's ChatGPT History
Node.js Installation
You can install Node.js from the Node.js website. We suggest downloading the LTS version.
The code . command
In the video you see Laura opening up her VS code using the code . command. In order to use this you'll have to enable this option in VS code first.
New to React?
Check out our React Track
More Treehouse content
Click here for more AI content
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Welcome, everyone, I'm Laura,
a JavaScript instructor here at Treehouse.
0:09
Today, we have an exciting
project in store for you.
0:14
We'll be building a React scoreboard
app with the help of ChatGPT,
0:17
a powerful AI language model.
0:22
We'll tell ChatGPT the requirements for
our app and go from there.
0:24
We'll improve the code and
even add some fun features.
0:29
Before we dive in,
let's outline the requirements and
0:33
features our scoreboard app should have.
0:37
Our scoreboard's header will promptly
display the title scoreboard
0:39
along with the number of players.
0:44
We wanted to look like this,
where the number will dynamically change,
0:46
depending on how many players there are.
0:50
To kick things off, we'll start with
four players, Laura, Dustin, Rachel,
0:53
and Travis.
0:58
When you hover over a player's name,
0:59
a delete button shaped like an X
will appear on the left side.
1:02
This feature allows users to remove
players from the scoreboard with ease.
1:06
Now, let's talk about managing the scores.
1:11
For each player, we'll have a minus
button, a score counter, and
1:13
a plus button placed to
the right-side of their name.
1:17
Clicking the minus button will
decrease the score counter by 1,
1:21
while clicking the plus
button will increase it by 1.
1:25
This dynamic scoring mechanism ensures
a seamless and intuitive user experience.
1:29
Now, this is where things get interesting.
1:35
We're going to ask ChatGPT to help us out.
1:37
We'll prompt ChatGPT with our requirements
and see what it comes up with.
1:40
I'll prompt ChatGPT build a scoreboard app
using React, here are the requirements.
1:45
The app should be built using Vite.js.
1:52
The scoreboard's header should display
the title "SCOREBOARD," along with a stat
1:55
indicating the total number of
players like this: "PLAYERS: x.".
1:59
The scoreboard app should initially
have four players, Laura, Dustin,
2:04
Rachel, and Travis.
2:09
Each player's name should have
a delete button to the left.
2:10
The button should only appear when
the user hovers over the player, and
2:13
the button should display as an "X".
2:17
To the right of each player, there should
be a minus button, a score counter, and
2:21
a plus button.
2:25
When the player clicks the minus button,
the score counter should decrease by 1.
2:26
Similarly, when the user
clicks the plus button,
2:31
the score counter should increase by 1.
2:34
Once we receive ChatGPT's response,
we'll take it suggestions and
2:38
improve our app from there.
2:42
Some exciting features we plan to
add include a high-score indicator,
2:45
an input field to add new
players dynamically, and
2:50
even a stopwatch to keep
the game fast-paced and engaging.
2:53
I recommend that you follow
along with us on this journey.
2:58
Below this video, I've added a link
to my conversation with ChatGPT.
3:01
You can copy the same code I used, or
feel free to explore your own ideas and
3:05
brainstorm additional features you'd
like to include in your scoreboard app.
3:09
All right, let's get started.
3:15
To setup the project, we need to ensure
that Node.js is installed on our computer.
3:18
If you haven't installed Node.js yet,
3:23
you can find a link to
our Node.js course below.
3:25
Now, the instructions suggest creating
a new directory for the project and
3:30
navigating inside it.
3:34
However, since the v command will
create the project directory for us,
3:36
this step is not necessary.
3:40
Instead, I'll navigate to the desired
location where I want the project to be.
3:43
It's also worth noting that
the command suggested by ChatGPT,
3:48
npm init vite@latest differs from
what Vite recommends in their
3:53
documentation, which is
npm create vite@latest.
3:58
So I'm just gonna use the command
from Vite's documentation.
4:02
Let's open up the terminal since I want
the project files to be on my desktop.
4:05
I'll navigate there by typing cd Desktop,
then I'll use the vite
4:10
command to set up the project and
utilize the React template.
4:15
All right,
4:20
now, ChatGPT suggests navigating to
the newly created project directory.
4:21
In my case, I named my project
scoreboard ChatGPT, so I'll simply use
4:26
the command cd scoreboard-chatgpt
% to navigate to that directory.
4:31
Let's move on to step two, which involves
installing the project dependencies.
4:38
To do this,
simply type npm install in the terminal.
4:42
All right, step three looks like
we're getting into some code.
4:48
We need to replace the content of
the app.jsx file with the code provided by
4:52
ChatGPT.
4:57
To open up the project files
in Visual Studio Code,
4:58
I'll use the command `code.` in the terminal.
5:01
In this command opens Visual Studio
code at the current directory.
5:05
If you'd like to add this
command to your terminal,
5:09
you can find instructions on how to do so
in the link below.
5:12
I'll navigate to the app.jsx file and
5:16
replace the existing code with
the code suggested by ChatGPT.
5:19
However, there's a small
error in the code.
5:25
React is defined, but never used.
5:28
Since React version 17,
there's no need to import React.
5:31
I'll delete the React keyword
from the import statement.
5:36
Now, let's move on to step four,
where ChatGPT instructs us to
5:40
create a new file named app.css and
add the provided code.
5:45
However, if we look at our project files,
5:50
we can see that app.css already exists,
so we don't need to create it.
5:53
I'll simply select the entire
file's content and
5:58
replace them with the code suggested by
ChatGPT, and remember to save the changes.
6:01
Now, to our final step,
we need to save the changes we made,
6:08
run the command to start
the development server and
6:12
visit localhost3000 in the browser
to see the scoreboard app in action.
6:15
However, there's a slight mistake in
ChatGPT suggestion when using vite,
6:21
the project runs on a different port,
not 3000, but let's follow along for now.
6:26
Since Visual Studio Code has a built in
terminal, I'll be using that from now on.
6:32
I'll run npm run dev, and
when I hover over the link,
6:38
Visual Studio Code suggests using Command
Click to open up the link in the browser.
6:42
All right, let's take a look.
6:49
It seems that the CSS styling is
a bit off, especially the X and
6:52
the Delete button, it isn't centered.
6:56
I believe I know the cause of this issue.
7:00
The starting files provided by
Vite includes two CSS files,
7:03
app.css and index.css.
7:08
To avoid any conflicts between these
files, I'll delete the index.css file and
7:11
remove the corresponding import
statement in the main.jsx file.
7:17
Let's save the changes and check out
the app in the browser once again.
7:23
The layout looks much better now,
7:27
let's see if the app meets
all the requirements we set.
7:29
It displays the correct header
with the title scoreboard,
7:33
shows the total number of players, and
correctly lists the four initial players.
7:36
When I hover over a player,
the delete button appears, and
7:42
clicking it successfully
removes the player.
7:45
Additionally, each player
has a score counter, and
7:49
I can adjust the score by clicking
the plus and minus buttons.
7:52
This is amazing, thanks to ChatGPT,
7:57
we were able to create a fully functional
scoreboard app within minutes.
8:00
In the next video,
8:05
we'll take our app to the next level by
improving the code generated by ChatGPT.
8:06
We'll ask ChatGPT to help us
split the app into component,
8:12
which will make our code more modular,
reusable, and maintainable.
8:16
By breaking down the app into
smaller manageable parts,
8:22
we'll be able to enhance its scalability
and make future modifications much easier.
8:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up