‫So now that we know the fundamentals
‫of both the technologies that we're going to use
‫in this project,
‫so that's React, Router, and CSS modules
‫we are now ready to build the actual pages
‫of the application.
‫And so let's now go do that.
‫And what I mean by actual pages is these pages
‫that we saw before in our demo.
‫So with the actual content and styling.
‫And remember that those are again, the homepage.
‫So this one that we already implemented
‫we have the product page, the pricing page
‫and the login page.
‫Well, this now brought us to the application
‫but if we log out and then log in again
‫then this brings us, yeah, to this login page.
‫And then in the next lecture we will implement
‫the application layout.
‫So with the sidebar, this menu right here and the map.
‫Alright, now of course we are not going to write the content
‫and the styling here ourselves, but instead we get them
‫from the starter files that we already copied
‫into our project folder.
‫And so now let's take a closer look
‫at what we actually have there.
‫And I want to do that
‫in the file explorer because that's a bit easier.
‫So we have the starter folder right here
‫and we have a couple of images and then these three folders.
‫Now let's start by dragging the data folder out here.
‫So into the root folder of our project.
‫And then let's also grab these four images
‫and drag them into the public folder.
‫So just like we have been doing before, we will use images
‫from the public folder, so not from this assets folder
‫that we also have inside the sources folder.
‫So the assets here are to be directly imported
‫into our JavaScript code.
‫So if we want to do that
‫then we place them here into this assets folder.
‫But that's actually not what we want
‫so let's just delete that folder actually.
‫And so then finally we have components and pages
‫which we also have in our starter files.
‫So in this lecture we are going to take care of the pages.
‫And so let's now grab everything that we have here
‫and copy into the pages folder that we already have.
‫So we will basically override a few files
‫or most of the files that we already have there.
‫So these pages, there were just dummy content.
‫And so now let's replace all of them.
‫So we got again, our pricing product login page.
‫And now what's different is
‫that we have now our corresponding CSS module files.
‫So let's quickly check them out back in vs code.
‫So you see that our pages folder has indeed changed.
‫Let's stand close everything we have here
‫and open them again because
‫in the meantime these files have changed.
‫And let's start with the homepage
‫and then also opening up the corresponding module.
‫And then I'm going to close the sidebar this time
‫using command or control B.
‫So otherwise we really don't have enough space here.
‫Alright, so our homepage now looks like this.
‫And you see it has exactly this content here in terms
‫of the markup that we have here except for this link
‫but we will add that here in a second.
‫So we also already have our styles
‫which is coming from the CSS module.
‫So just like we learned before
‫we are importing our styles object
‫from this module right here.
‫So here we have all these styles.
‫So we have a homepage class,
‫which we are using right here.
‫And then we have all these other styles that are necessary
‫for this page.
‫And so with this, let's check
‫out what our page looks like at the moment.
‫So that's already a bit similar, so not bad
‫let's just try to reload.
‫And apparently we have already an error here which says
‫that our background image could not be found.
‫So here we should probably remove these two dots
‫and that still doesn't work.
‫So let's check out if this image is actually
‫in our public folder and while it is not.
‫So let's come back to our starter files here once again
‫and grab that from here into our current public folder.
‫All right, let's try that again here.
‫And beautiful.
‫So now that works.
‫And if you find these going back between the starter files
‫and our own files, a bit confusing
‫then let me just mention that I decided to have so many
‫like pre-built files here for two reasons.
‫First, it's to save us a lot
‫of time so that we don't have to type
‫up all these styles and all this markup here on our own.
‫And second, it is also to prepare you more for a real job.
‫So for a job where you will collaborate
‫with other developers.
‫And so in this example
‫we can pretend that some other developer on our team
‫which is more of a designer, prepared all these CSS modules
‫for us and also these React components so that then we
‫as a true React developer can add the data and the logic
‫and really put it all together in a nice application.
‫So in this project, I actually really wanted to imagine
‫that you are now working on a team.
‫And so you are the React developer who builds
‫this application based on some files that you already got
‫from some other member of your team.
‫Alright, but now let's then complete this homepage
‫that our designer friend
‫or colleague gave us and add that button down here.
‫So this one right there.
‫So this button or this link actually should take us
‫to the app page, so to the app layout component.
‫And so this would be a link
‫so one of those links from React Router.
‫So again, this will take us to the app page.
‫And here actually we are now using a global class name
‫which is the CTA class, and then start tracking now.
‫And then of course we need to bring
‫in the link from React Router dom.
‫And so now that works.
‫So about this global class name
‫this one is located in or index CSS file.
‫So before I said
‫that we didn't have any global class names in here
‫but actually later I added this one.
‫So because we need this in multiple places, and so
‫I didn't want to declare this inside of one CSS module.
‫So we have that here and then we can just use it
‫as usual in all the components that need it.
‫And so now we linked here
‫to this app layout page, which actually hasn't changed.
‫So this one we didn't override.
‫And so when we click here now
‫then we get to that page that we built before.
‫Nice so next up, let's take care of the logo here.
‫So here we have this logo
‫which is actually part of this entire navigation.
‫So here in the homepage, we now want to get back
‫that navigation that we already started to build.
‫And so that's going to be inside this main element.
‫So then we have the page nav
‫and also this section element then, so let's bring that in.
‫And here we have now two go up one level
‫so that we can then move
‫into the components folder and then grab that from there.
‫And here it is.
‫It looks pretty bad right now, but so let's go fix that.
‫So that's page nav.
‫And now here we are using this nav class right now
‫which gives this this purple background
‫but actually we do have a starter file for that as well.
‫So that's right here in this CSS module.
‫So let's drag that in here, replace.
‫And so immediately you saw that it changed there.
‫So let's open that up.
‫But actually this is not the one that we want.
‫So we actually want the page now, right?
‫So let's grab that one, replace it as well.
‫And here I notice that I imported the wrong one.
‫So again, that's the kind
‫of thing that happens when you start working
‫with all these different files
‫but that's just how it is in React development.
‫And these are actually not that many files yet.
‫So later on we will have hundreds
‫of files as we start working in our next big project.
‫So but anyway, let's now open
‫up this component because this is going to
‫be our next task that we need to work on.
‫So building now this page navigation
‫and actually this is already looking pretty well.
‫So what we should do is to add another enough link here
‫for the login page.
‫So this one will move us to the login page.
‫And then actually in our real app here
‫we don't have a link for the homepage, but instead
‫that homepage will open as we click here on this logo.
‫So let's remove this one here.
‫And then let's bring in the logo that we already
‫have once again in our starter components.
‫So the logo and the corresponding module, let's select them
‫and then place them into our components folder.
‫So here it is.
‫And then let's just include this here
‫besides the unordered list.
‫So the nav will have two children,
‫the logo and then the UL.
‫So make sure it got correctly imported and beautiful.
‫There it is.
‫So our navigation is working fine.
‫We didn't include it here yet, but it is working.
‫But now the only thing that we need to do is to
‫actually include a link in this logo here.
‫So right now we see that it's not a link yet.
‫And so let's open
‫up the logo by clicking here on this component.
‫So command or control clicking or
‫of course you can also open it right there.
‫So here we return this image as you see.
‫And so let's just wrap this into a link.
‫So this link coming again, of course from React Router.
‫And then here we simply go to the root your L.
‫Now, okay
‫Give it a safe.
‫And so this time we are actually using a link
‫and not a nav link because we don't want to
‫add any special styles when this is selected.
‫So that's really not necessary here.
‫And so with this, we finish our logo.
‫And so now when we click here
‫of course we stay on the same page,
‫but now let's go to one of these other pages
‫and then add the navigation there.
‫And then we will see that this link also works.
‫So let's open up these other pages.
‫So that's the login page, the pricing page
‫and the product page.
‫So all these pages will get that navigation.
‫So here we see we already have some problems.
‫So that's because we're using use state
‫that is not imported.
‫So let's quickly get that.
‫So import use state from React.
‫And so you see that our designer colleague here
‫had a small mistake in his coat.
‫So this is where we need that page nav component, right?
‫So make sure that it got imported
‫and now we just do the exact same thing
‫in all the other ones.
‫So we want our page now here and there it is.
‫And finally also here in the pricing page.
‫Give that a save.
‫And with this, we should be finished.
‫So we can go to the pricing page
‫and it becomes active product login.
‫Well, this one was not found
‫I guess we didn't create that yet.
‫And then finally,
‫we also have the World Wise Image logo where we can click
‫and then we move there.
‫Beautiful, so let's see now.
‫And indeed I see
‫that we don't have a route yet for our login page.
‫So let's add that here.
‫And I like to keep the order of the routes here
‫in the order that the links appear up there.
‫And so let's create ourselves a new route
‫with the path of login like this.
‫And then here, the element that we need is
‫of course the login page that we just worked on.
‫Okay.
‫And now let's once again import
‫that here and there we go.
‫Now, the only thing that I want to do here is to
‫also add basically this green button there.
‫And so here in this special link,
‫so only in this one,
‫let's add the class name that is coming
‫from styles.CTAlink.
‫Okay, and there we go.
‫So let's just move here quickly
‫to that file to check out that class.
‫And so here we have that CTA link.
‫And notice how here we are using basically
‫the JavaScript way of writing the variable instead
‫of the normal CSS way, which would be like this.
‫And the reason for that is that a class name
‫like this would be a lot harder to then get into our JSX.
‫So when we're writing CSS modules
‫we usually define our class names like this.
‫So in this key map case style,
‫I think it's called.
‫And so yeah, then we included right there.
‫And with this, we finished our navigation
‫and we finished all our pages.
‫We will take care of this button here a bit later.
‫And so yeah, now everything works fine.
‫And so next up, let's take care
‫of building the layout here in this main application part.