This is an exciting moment. 1
We're finally ready to apply everything that we've learned so far to get started building 2
our final project, the keeper app. 3
So in this lesson I've got a challenge for you that is going to get as part of the way towards our final 4
product. 5
So this is what we're aiming for. 6
We've got a header component, 7
we've got a note component and we've got a footer down here as well. 8
Now in the index.js file, I've got all the steps that you need to go through in order to complete 9
this challenge. 10
If you want to work on this project locally instead of on code sandbox, then the simplest way is to go 11
to the link that is listed in the course resources for the starting project and then once you're here, 12
go ahead and click on this button to export this project as a zip file and then unzip that file and 13
you should end up with a project folder. 14
Now once you've got your project folder, you can click and drag it into your VS code and add it to 15
your workspace. And then you can remove any previous folders that you've been working on. 16
And if you expand all the files, you end up with the same starting files. 17
So in this case the files that we've got are a index.html which is kept very simple. It's got a title, 18
it's got a link to google fonts. 19
So if you remember from previously we can simply select the fonts we want from Google and then embed 20
the fonts as a style sheet link. And then we've got a link to the style sheet inside styles. 21
CSS, 22
and finally we've got a link to our index.js as a JSX file. And of course as always we've got 23
that prerequisite div with the idof root. 24
So the other files to take a look at is the styles.css file because in here I've already added a 25
bunch of styles and classes which you're going to be applying to the code that you're writing with React. 26
It's up to you whether if you want to work on this in code sandbox or on your local environment that 27
you've set up in the last lesson. 28
Now if you do decide to go down this route, I recommend the first thing to do 29
once you've downloaded it is to open up your hyperterminal and cd over to the location of your project. 30
So in my case it's in download/keeper-app-part-1 and then go ahead and run npm install. This 31
way you'll install the react, the react-dom module and the react-scripta module that's included with 32
the package. 33
And once that's done, then you can go ahead and run npm start for it to run the server to be able to 34
view it inside your browser under localhost 3000. 35
So it's up to you if you want to complete this challenge using code sandbox or if you want to do it 36
locally using your editor of choice. 37
But either way, the goals are going to be the same. You're going to be creating a new React app that includes 38
a app component. Inside that app component, you can have three components: a header component, a 39
footer component and a note component. The header is going to look something like this showing the keeper 40
app title or whatever it is that you decide to call it, and then the footer is going to look like this 41
with a dynamically rendered year so not a statically typed number. You're going to use what you've learnt 42
about Javascript dates to try and get the actual current year showing up here. And then finally you've 43
got this note component which is going to show a title and some content. 44
And the final step is just to make sure that the styling is the same for the website that you've created 45
and this sample completed app which you can access right here. In order to get the styling right 46
you might have to take a look inside these styles.css and see which classes are being targeted 47
and which HMTL elements are being targeted in order to render the same style as you see here. 48
So the goal is to test everything that you've learnt so far. 49
And if you want to, you can even update the styles.css to whichever style you want it to be to customize 50
it if you wish. Or if you want to completely create the styles.css from scratch then you can also 51
just delete that and try to create your own style if you wish. 52
But what I recommend is to go through each of these points in the index.js and try to complete 53
it. 54
And once you're done with the challenge, head over to the next lesson and I'll go through the solution 55
with you. Pause the video now and try to complete the challenge.