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 Create a Portfolio Using React!
You have completed Create a Portfolio Using React!
Preview
It’s time to round things up by adding interactivity to the mobile navigation, making the project component change direction and hosting our project on Vercel.
Resources
Next Steps
Continue your React journey by taking our other React content.
Or even take our Learn React Track
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
Our portfolio is coming along nicely,
but there are a few improvements and
0:00
functionalities to add.
0:04
You may have noticed that
in our project component,
0:06
there are a bunch of warnings
about missing prop validations.
0:09
Setting up prop types will make
our project less error prone.
0:12
If we take a look at the finished
project in the browser,
0:17
you'll notice that projects
are alternating their orientation.
0:21
Finally, back at the top of the page,
we'll have to add interactivity to our
0:25
hamburger menu so
the user can open and close it.
0:29
To finish up this project,
we'll deploy it to Vercel so
0:35
that we can share our work with fellow
developers or potential employers.
0:39
Let's get started with the interactivity
of our hamburger menu.
0:44
Back in VS Code,
I'll navigate to our header component.
0:47
At the top of the component,
before returning the JSX,
0:51
I'll set up a useState hook called isOpen
and give it an initial value of false.
0:55
Make sure to import the useState
hook at the top of the file.
1:01
Then on our button tag,
we'll add an onClick handler
1:06
that sets our isOpen state to be
the opposite of what it currently is,
1:09
this will toggle the value every
time the button is clicked.
1:13
While we're at it, let's also add
an aria-label of navigation menu and
1:18
an aria-expanded attribute set to
the isOpen state to improve accessibility.
1:24
When the button is clicked and
the state is being changed,
1:32
we want our image to update from the
hamburger icon to the X and back again.
1:35
Let's use a ternary operator in
the source attribute of the image.
1:40
If the menu is open,
we wanna show the close icon, otherwise,
1:43
the hamburger menu should be rendered.
1:47
Let's import our close icon
at the top of the file.
1:50
Thank you once again Copilot.
1:54
Our state and icon are now correctly
updating, but to make our nav show up,
1:57
we'll have to add the open class to the
nav element when the state is set to true.
2:02
So I'll change the className of our nav
to be a template literal with the class
2:06
of nav, and if the state is open,
we'll also give it the class of open.
2:11
Moving back to our project, our navigation
is now opening and closing as expected.
2:18
Wonderful.
2:24
Now to make our project components
alternate their direction,
2:25
let's open up our project component and
give it an additional prop called reverse.
2:29
When this prompt is passed to the
component will apply a styling adjustment.
2:35
To apply a different
style to our article tag,
2:40
I'll add a style object and
change the flex direction.
2:43
Based on the value of the reverse prop,
we'll set it to either row for
2:47
the default or
row reverse to flip the contents.
2:51
In our projects component where the
individual projects are being rendered,
2:54
we'll use the index of the map method,
then we'll pass our new prop
3:00
to the project component and
set it to a value of i remainder 2=0.
3:05
This will evaluate to true for
even indexes, which when navigating
3:10
down to our projects should result
in the alternating orientation.
3:15
Perfect.
3:20
You can play around with the value here,
such as reversing all of the projects or
3:23
only every third project for example.
3:28
Feel free to experiment and
find the results you like.
3:30
I'll revert it back to the previous
value so it matches our mockups.
3:35
Now let's get rid of those red squiggly
lines in our project component by adding
3:41
PropTypes.
3:45
I'll start by importing PropTypes from
prop-types at the top of the file.
3:47
This should come pre installed
in your Vite project.
3:52
Then at the bottom of the file,
I'll write Project.propTypes and
3:59
set it equal to an object,
4:04
this object should represent the props
we're accepting in our component.
4:05
So for starters, I'll give it
a property of data that resembles our
4:10
prompt containing the project object.
4:14
In the shape method, we can pass an object
with each of the projects properties.
4:16
We expect the data object to have an ID,
which should be a string and
4:21
isRequired, the same goes for the title.
4:26
Our tech looks a little different
as this is an array of strings.
4:32
We can use propTypes.arrayOf and
pass it propTypes.string to let it know
4:36
that each value in the array
should be a string,
4:41
then we'll set the remaining properties
to be a string that isRequired.
4:44
That's it for the data prop.
4:53
Now let's add our reverse prop
which is of type boolean.
4:55
I'll also add the isRequired flag, even
though we technically could do without it.
4:58
Now, if we scroll back up
through our component,
5:04
we'll notice that all the red
squiggly lines are gone.
5:08
Let's do the same for our other component
that accepts some props in link.jsx.
5:12
First, I'll import PropTypes from
prop-types at the top of the file,
5:18
Then at the bottom of the file,
we'll set things up in the same way using
5:24
Link.propTypes, and passing it
both the href and children props.
5:29
The href is supposed to be a required
string, and the children can technically
5:34
be an element as well, so let's adjust
that to be a required node instead.
5:39
And that completes our portfolio project.
5:45
We've created a fully responsive portfolio
with React, set up reusable components,
5:48
added state to handle the hamburger menu,
and
5:53
added prop types to make
it less error prone.
5:55
There's only one thing left to do, and
that is to share our work with the world.
5:58
Let's get our project deployed to Vercel.
6:02
To get our project deployed, we'll
have to set up a repository on GitHub.
6:05
After signing in at the top right,
6:09
let's click the plus icon
to create a new repository.
6:11
I'll name my repository react-portfolio,
but you can name it differently
6:14
if you prefer, then scroll down and
click the green Create repository button.
6:20
GitHub will provide us with some snippets
to push our project up to the remote
6:25
repo we just created.
6:30
Since we do not have
a local repository set up,
6:31
I'll copy the by clicking
the clipboard icon.
6:34
Back in VS Code,
I'll open up my terminal and
6:37
paste in the snippet we got from GitHub,
this will initialize a new
6:40
local repository and make a first
commit containing the README file.
6:44
Let's also stage all our other files
by running the command git add,
6:48
commit them by running git commit- m and
give it a message of finished project.
6:52
Finally, run the command git push
to push our project up to Github.
6:58
When we navigate back to github.com and
refresh the page,
7:06
all our files should now be present.
7:11
Perfect.
7:13
For the next step,
we'll visit vercel.com and sign in.
7:15
I've already created an account, so
I'll choose to continue with GitHub.
7:19
Once you're signed in,
7:27
click on the white button in the top
right to create a new project.
7:28
If you've set up your account with GitHub,
7:32
you should be presented with
a list of your repositories.
7:34
The repository we just created is right
here, so let's click the import button,
7:37
the cell will prompt you for
some additional settings and
7:41
environmental variables.
7:45
Since our project doesn't have any,
we'll keep everything at the default and
7:46
click Deploy at the bottom of the page.
7:50
Now Vercel will do its thing and
start building our app.
7:53
This shouldn't take too long.
7:56
Once finished,
you'll see the congratulations page.
8:06
When clicking the large
preview on the left,
8:09
you'll be taken to your
live deployed project.
8:12
Let's see if everything is working as
expected and navigate to our projects.
8:15
Great, all components seem to be rendered
and images are showing up as expected.
8:19
When we scroll back up and
zoom in a little further,
8:24
we'll see our mobile navigation,
which is toggling as expected as well.
8:27
Beautiful.
8:32
Here's your impressive portfolio,
ready to display your top projects and
8:32
promote your developer skills.
8:37
I hope this video has been useful and
inspiring for your portfolio, don't
8:39
hesitate to share your completed project
with the community here or on Discord.
8:43
Thank you for being a part of this.
8:47
Happy coding.
8:49
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