I also forgot to mention one thing that we'll be learning in this section of the course and that is CSS grid. So we'll also be learning a lot about flex box even though we already went over that we'll be going back over it.

But mainly we'll be really learning how to use CSS very well in this app using CSS grid. So CSS grid is a really really easy way to develop your front end applications without using frameworks like bootstrap or react strap like we've used in the past.

So it looks like it might be a little bit complicated but it's actually really not. I went over it myself the past couple days, and it's been really great to use and really easy to use, so I think you'll pick it up really quickly.

Now if I head over to this page right here it's a course that Jordan recently built and it's been really helpful in grasping a few specific concepts in CSS grid. So if you want to go through that I recommend doing that in your own time. It's very helpful and it will help you a lot throughout this application that we're building.

So I've created a pen here just to kind of create the layout of the dailysmarty app before we get into it.

And I think that this will be a really good way to show you how we're going to go over the lay out how we're going to build it CSS before we get started so we'll be doing this in the next guide.

But really quick let's get that repo up and then we'll start in Codepen so I can kind of explain to you how this works. So I'm going to head over to github.com I'm going to make sure I am signed in and I'm going to hit start a project. And you've all been through this so I'm not going to explain too much. I'm selecting a different owner just because I want to put this under a different owner. Your supposed to put in your own name, well it doesn't matter just make the repo and make sure you're pushed into it.

So now I'm going to put repository name I'm gonna put DailySmartyUI and the reason I'm just calling it UI is because we're not actually building the backend for this like we haven't with any apps but this is just the client side application. So I'm going to put a description and call it Daily Smarty User Interface and make it public and create it.

I'm now going to open up a terminal instance and we're actually going to have to generate our project before we place it under version control obviously. So in my terminal I'm going to run js-generate and then I'm going to select react redux router

and I'm going to call this DailySmartyUI.

And then I'm going to cd into it and I'm going to open it up in my text editor. I have the code . command for vs code. Just make sure you open this in your text editor and the next thing I want to do is actually close out this terminal window and then I'm just going to deal with the terminal in vs code. If you're not using a code editor with a built in terminal just use the terminal that we were just in if you closed it open it back up and use it.

So in here I'm just going to let's see what I'm going to do. I'm going to change the .gitignore.example to be called .gitignore make sure you do this before doing anything with git so we can actually ignore the node module. So next thing I want to do is run npm install to install or dependencies and then when that's done basically we'll just check if it's running correctly and then we'll put it up on version control.

So while it's installing I'm just going to head over to the source folder(src) and I'm actually going to head over to static as well. I didn't mean to open vendor, lets close .gitignore. And in static I'm going to go to index.html and here I want to change the title so the title is what you're going to see at the top here. Like on here it says a pen by Max Nelson, up here it says DavCamp react starter.

We want to change that, I will also increase my font size right now so you can see this a little bit better. So I'm going to go to preferences settings and I'm going to change this to 16, that should be good.

Now I'm going to close that and in here I'm just going to call it Daily Smarty because we don't want to really tell the user that it's a UI and that's just not something you want to tell the user.

We're not hiding anything, it's just not a good experience, but basically these are installed. Now, let's run npm start in the terminal here and that will be running on localhost:3000 or whatever you have here in your env.js for port.

Now, the next thing I want to do is go to the browser and open it up. Open a new tab and run localhost:3000. All right, it's running now I'm just going to change that to say something else. So I'm going to go to my components/app.js and instead of that Devcamp react starter I'm just going to actually set up a couple div's here. I'm going to type in logo because that's where we want we want the logo to be the first thing there. So I'm gonna reload it and it says logo there so thats great.

So let's go ahead and put this under version control. So heading back here we have our repo created. And now what I want to do is just copy this link or you can do this.

We don't want to create a new repo since we just created one. But you want to do this or follow along with me you're going to copy the link, head back to my app and my terminal, I'm going to open a new window since it's running and I'm going to run `git add origin and paste that in, git remote add origin.

Okay, so basically what we need to do is initialize our repository so we have to type in git init get it and then I'm going to type that in. So git remote add origin and paste it. Okay so now if you go git remote it will say Origin.

I haven't shown you this in the past but that's just one of the remotes and we'll be pushing this up to Heroku after. So I will show you how we can create another remote and push to Heroku instead of our origin github. So now what we want to do is say git status and it will have all of our files. And if it says node modules in here just make sure you have this .gitignore file and it has node modules in there.

Let's add these so let's say git add and then let's say git status again and it should all be green.

Now let's just say git commit -m for a message and let's just say generated project and let's push this up to our repo so git push origin master

terminal

git status
git add .
git commit -m "generated project"
git push origin master

And that will set us up, we have a project ready and we'll hop into the next guide where we will go over CSS grid and briefly build it out here in the code pen I set up and to gave you a good idea of how we want to structure this and a little bit of an idea of how CSS grid works, so we'll see you in the next guide.

Resource

Source code