All right, it's time to get started on this.
The very first thing I like doing is, imagining what we're going to build and trying to separate out
the components of our application.
So I did a quick wireframe here, of what we want our project to look.
We want to have some sort of a logo.
We want to have a user's name, displayed with their rank and this rank is going to correspond to how many
face detections they've done, compared to all the other users.
So we're going to want some sort of a sign in and sign out feature.
So this is the home page.
But if they click sign out, they'll be signed out, and in order to sign in, there will be a sign in form.
We have a url input here, where we can enter url for an image.
If we click detect, then it will display the image with the face detection, on hopefully the face.
And we obviously want it to be responsive, but looking at this, if I was going to divide this into components,
I see that there is a navigation component, there is maybe a user info, maybe rank component, there's
a logo component of some sort.
There's an input form component.
There is an image component. And possibly within that a(an)
another component that does the image detection.
OK, so I think, the first step that we can do is to start building out these components, using create react
app and the sign in and registration form is maybe something that we can work on afterwards.
All right so let's minimize this.
So, I've actually just ran create react app,
I called this project face recognition brain.
You can do the same as well but as you can see I haven't changed anything if I do 'npm start'
I have the skeleton of what 'create react app' gives us.
All right to start off, I'm going to start removing some of the things that I don't need,
I know, that I don't need their logo so I'm gonna
delete that, OK.
And then, if we go to app.js
and we could just remove the logo, and we can just remove everything that's inside here.
So we're left with just a 'div' with the 'classname' "App".
And let's just build out some components even though we haven't created them, let's just build them as
so we have them in our heads.
We have a 'Navigation' component.
That's where we have this sign out.
We have a 'Logo' component.
That will create.
We also have perhaps an 'ImageLinkForm' that's our input form, and then finally, we have our
'FaceRecognition' which will be the image with the face recognition on it.
Looking at these four components, I think we can build them fairly fast.
So let's start to do that.
I'm going to actually comment out, I'm going to wrap these in a curly bracket, so that it's a javascript
expression, and then comment them out in the standard javascript way.
So we can start off with navigation. As we know, because this project is going to get a little big.
We're going to just create a new folder, we'll call it components, and within these components we'll create
a new folder and we'll call it navigation.
And this navigation folder will have anything related to our navigation component.
So that is CSS, javascript, in our cases just javascript for now, so we'll just do
navigation dot js(navigation.js).
All right, we have our file all set up now.
So in here, we do the standard 'import React from react'
and it's going to be a simple component with no states.
So again we can just do, a pure function,
and it won't accept any parameters
for now, we'll just simply return, just do something like a 'nav' and this navigation because we're working
on our home screen for now, we're just going to have a 'p' tag
that says 'Sign out',
and we obviously wanna 'export default Navigation', save that, let's go back here
and import that now.
So we'll do 'import Navigation' from current directory(./).
wanna access the Components folder navigation then navigation dot js, we don't need to put the
js at the end. Save that. Oh! and I have capital components, should be lowercase and it should be thus.
Let's go back, we have a nice little sign, don't worry, it's going to start looking much better than that.
We want this to actually display on the right hand side.
So a nice simple way of doing that, we can just add a 'style' attribute for now.
And again, we're passing it on an object and we'll just say, the 'display' will be 'flex' and 'justify' and
remember, because this is a javascript object,
we can do this,
it's camel case. So (justify)Content and react you just use camel case any time you need to use a dash, to
'justifyContent', will be 'flex-end',
so it's at the end to the right. Save this, and it's to the right, you need a bit of padding but for now
that's fine.
And you know what, looking at this, I have a feeling, we're going to need some CSS.
So I'm going to install 'tachyons' here, so that you don't have to worry too much about CSS and I can just
give you the 'tachyons' properties, because again, CSS is something that is very dependent on the specific
project and because we've already covered it,
we don't want to spend too much time on it.
So using 'tachyons', I'm just going to use there, Oops!,
I got to install it.
Let's clear this,
and this way when we go to app dot js, we can just or in our index dot js, we can just import 'tachyons'.
Perfect, so using 'tachyons', I'm going to start styling this, and you can just pause the video and copy
and paste this, if you want on your project or grab the project files, afterwards.
So based on size, I'll do that.
It's going to be a link.
It's going 'dim', when I click on it will be black.
It's going to be underlined, padding of three and pointer,
when we hover over. Kind of reads nicely with 'tachyons'.
I'm a big fan of them. Let's do 'npm start'
All right, look at that.
That's a lot better all ready. And you know what? when we look at this white screen,
it's kind of discouraging and feels like we haven't done much.
So let's add a nice background, so that again we're look, we're making a bit of progress and we're now
looking at a blank screen.
Even though styling is not the most important in an app, I do like having a bit of progress when we start a
projects, just for that confidence boost.
So in index dot css,
I'm going to add a background to family and this is a gradient that I really really like so I'm just
going to copy and paste it here.
You can find your own gradient and decide what is good for you.
I'm gonna save that, see we're just using linear gradient.
Look at that, that's already much better to look at.
All right, so navigation, from what I can see, it's pretty much all we want for now.
We don't need to add any functionality, we're just building the skeleton.
So let's move to building the input. So the input, we call that the 'ImageLink Form'.
Oh! actually let's do the 'Logo' first because I see it here, and I put the comments out here. Again,
we're going to do the same thing.
So I'm just going to copy and paste this,
and we'll just say 'Logo' from 'components/logo' and 'logo.js', we're just going to create a new folder
again.
And within that we'll have new file, 'Logo.js'.
And by the way, if you're getting sick and tired of constantly clicking javascript, then making sure that
'Babel' is the default instead of the regular javascript, so you can see jsx
Well, if you go to views in sublime, and then go to syntax, you can do, 'open all with current extension as...'
'Bable' javascript and this way every time you open a javascript file,
well, this will be the default extension.
All right, with the logo you don't want to make things fast.
I'm just going to copy the navigation, paste it in here, and I'm just going to change 'Navigation' to 'Logo'
And obviously we going want to return something different.
So will say, this one will have a 'div',
and will give it a 'className' again using 'tachyons', some margins, that are nice.
And that's margin top to zero.
And then for the logo, we have nothing yet, but I wanna show you this cool library that I found which
is 'react-tilt', and it actually allows you to create,
something like this.
It can hover and tilt around. Again, beauty of 'react' and 'npm' is that you can use these packages to
make your project go a little bit nicer.
So I'm going just copy this command, 'npm install dash dash save react-tilt', and in case you're wondering
what,
what the dash dash(--) save is? before in the earlier versions of 'npm', if you wanted to have, the package installed
on 'package dot json'(package.json)
and the dependencies you had to do '--save'.
Now it does it by default, so you don't have to the 'dash dash save'(--save) anymore and you can see that
'react-tilt' and 'tachyons' is in our package.
Alright, let's start that back.
And, if we go to the documentation here, it actually gives you, exactly what you need.
You just import, 'tilt' from 'react-tilt'.
So we'll do that.
So we have the 'tilt' component now, and we just copy and paste this 'Tilt' component,
that they've created for us.
Again the power and being a web developer and just overall in general, it's nice to be able to use things
that people have built, and also be able to share things that you've created. So you can create your own
'react-component' that other people can use and it makes things as I said before, more reusable.
So looking at this everything is good.
I'm going to change the height and width, maybe a little bit smaller, and for now we'll have this alien
figure, although we're probably going to change it with our/to our own logo, but I'm going to save this
and we get our narrowboat emojis.
But it's fine for now.
If I go back.
All right it's looking a little bit off.
Let's see, what's going on here.
So, if we go to 'Logo', let's just add some 'tachyons',
I see the 'border radius two(br2)' and 'shadow-2', so this way I can see, more clearly, where it is.
OK.
All right. So it's working,
but our colors are a bit off it looks like we need to added some background, for this.
But look at that, it's already working nicely.
So I'm going to create a new file,
'logo.css', and we're going to make the background
sort of using the 'Tilt' class name, so we can just piggyback on that to say 'Tilt'
and I'm going to use the same background as we have in our 'index.css' file,
just because I think it looks nice, I'm going to copy that,
put the same 'background' in here, and the only thing we need to do is just 'import'
'Logo dot css(Logo.css)'
from the current directory(./).
Let's check that out.
Look at that.
That looks great.
So one of the cool things you can do with 'Tilt' is that, you can add it a few options based on what you
want to do.
So you can read through this yourself.
But, I kind of want this to be more exaggerated a bit.
And we can do that by just changing the max to something a little bit higher, if I save that,
all right,
that looks, that looks nice actually. All right, the next thing, we want to do is we want to change this alien emoji,
we want to have an actual logo.
So let's grab a free logo that we can find online.
So let's just add, let's find a royalty free icon and I want wanted to have a brain as an icon.
So let's see, if we can find something here.
All right, this is my bigger list to brain, and see if we can find any cool icons.
Oh!, there you go.
This might be a nice one.
Let's do 'png' and will ah! 100 pixels or little,
actually that works.
We can have different files but we'll just do 'png', 100 pixels.
We will download it.
Nice that looks great.
And will just, move it to our project folder, which is on our desktop,
and we can just actually open it up and put it into the folder that we want.
In our case it will be the logo component. So let's just move that in there and we'll call it 'brain.png', perfect.
Then I close that, now that we have a 'brain.png' in there, we can just 'import',
we can just call it
'brain' from the './brain.png'.
And that would be the default name given to it.
So we can actually just create an image tag in here, we're going to remove that little alien and we'll
just do image(img) and this image will have a source(src), obviously and that source will just be our 'brain'.
So let's see if that works.
Make sure we close the tags here,
save. We're also getting an error saying that we should have an 'alt' tag.
So let's just do that.
'alt' equals 'logo'. Save that.
Look at that!
There you go.
We need our brain a little bit lower, so I'm going to do that quickly with some css.
We're going to do 'padding' of 3(pa3).
And just because I've done this before and I know, we need a bit of padding.
I'll just add a style on the image that says 'paddingTop' of five pixels.
And I make that smaller just so you can see it better.
Let's save, see how that looks.
There you go.
Looking nice, we got ourselves a nice logo.
You can see that we're moving through this fairly quickly, it's nice using react, it's, as long as you figure
out your styles,
it's nice to be able to use all these different components to build out your website. It all goes back to
app
dot js(app.js)
and see what else we have.
We need the 'ImageLinkform'.
So again, let's remove the comments, and bring up the 'ImageLinkForm', will create once again, a new component,
that is the
'ImageLinkForm',
we use our good old copy and paste
and we won't be needing the 'Tilt' or the 'Logo'.
We're going to have an 'ImageLinkForm', 'ImageLinkForm'.
All right, so let's think about what we need in here.
We, definitely want to have a paragraph, that will give it a 'className'.
So it has, size of three,
and within here, we will just say, and I like instead of using text this way because it is javascript
like wrapping it in curly brackets and then doing the quotes and we'll say 'This magic', I can spell, 'Brain
will detect faces in your pictures. Give it a try.'
All right, so we have the paragraph, we also want to have another 'div', where we have an input and a button
perhaps.
So we'll just do 'div',
we'll have an 'input' of 'type', will just be 'text'.
This is where we'll be entering our 'url'
closing that bracket.
And then finally, we'll have a 'button' that will say 'Detect' and again, we can add a few class names to
this just to make it look nicer, using 'tacheons'.
I'll do say, a size of 4(f4), 'padding' of 2(pa2), width is going to be 70 percent,
it's going to be 'centered' and because I said width 70 percent, I can do something along the lines of this,
I can say, width is 30 percent.
So total of 100 percent for that, will grow when you hover over it, 'f4' there will be a link.
And this is, like I said before, if you 'tacheon' commands that you can look up,
it's more for stylistic reasons, so we don't really need to worry too much about it, but most of them
should be pretty self-explanatory.
'Background(bg) light purple'.
Let's save that and see, if that works.
All right awesome.
We want these to actually be in one line together.
A good way to do that is again using the 'div' the parent 'div' that's wrapping them, and we can just give
it a 'className'.
We're going to do 'display', 'flex' and 'justified-content', 'center', we can just create a class on the app.css,
because I feel like we're going to use that a lot. And it will just say 'center' is 'display', 'flex'
and 'justify-content' will be 'center'. You're going to use that a lot,
so, like I said, it's better to just have it there.
And well I think, I,
all right, you put comma in there instead of a semicolon.
There you go.
If I do 'center' here now,
there you go,
that looks much better 70 percent width with 30 percent width,
but we kind of need something to wrap it here.
Make it a little bit smaller.
So I'll add another 'div',
and this 'div' will have 'className' of some 'tacheon' magic, which will be 'pa4', border radius three(br3),
and 'shadow' which is one of my favorite properties, because it gives it a nice shadow.
All right, it looks a little bit off.
We need to fix a couple of things.
And do you know what? I think, for this one we're going to need a few more css properties.
So I'm going to create a new file, in our image link form,
dot css(.css) and within here, we can just create a, a 'form', 'class' and will give it a width of 700 pixels.
If I save that,
and I'll give it the 'center' property here as well.
All right.
That looks better.
Now, for the background again I don't want to be the exact same with this.
Hopefully we can use a nice pattern and I have one my favorite pattern galleries here where you can pick
css patterns.
So the one that I really like is the honeycomb, and we can just copy and paste this
which Paul Salentiny created for us.
Thank you Paul, and just to add it in here.
Let's save that, and go back to our project and we actually should be adding 'form' in here.
Oh! and we don't see any differences because we need to 'import', our file.
All right.
Perfect.
Ah! again we should add 'display', 'flex' to here, so everything is on one line, so we can just use the 'center', class
name.
And there you go.
Look at that.
We have our pattern,
we have our button that grows, and I do want the aah!, the mouse to actually be like this, a pointer and I know that for
any buttons that I create on here that's the default behavior that I want.
So I can actually go all the way to the top of index dot css file, and just say that buttons are going
to have 'cursor' of 'pointer', so that it affects every button on the page.
There you go.
That's much better.
All right.
We're building this pretty fast.
I'm, I'm impressed we're doing,
we're doing a good job.
So we have the input and the last thing is the image.
But I think, we need some functionality before we can actually display the image.
We forgot to do the 'rank' which we want something at the top. So let's do that, let's add a 'rank' component.
And this 'rank' component will give us our user name and our rank compared to all the other users that
have submitted pictures.
We can simply, copy and paste and you can see that there is a lot of repetition here.
But we're building things really really fast because we have a common way of creating these components,
which is really really nice.
Copy the 'ranks',
and by doing 'command control g', you can actually select all the instances of image link form and change
it with logo, again.
Pretty awesome feature of Sublime text, oh! and instead of rank this should say, or instead of logo this should
say 'Rank' and within here, we'll just create a nice little component,
by the way, if you're wondering how I'm adding these styles so fast,
trust me, it took me way too long to figure out what looks good and what doesn't.
I'm just avoiding you the pain of watching me, figure out what cells look best and come back and forth with
the Google Chrome developer tools.
Like I said, styling is just so specific to each app that once you get to your specific app, it'ill, it will be,
very dependent on your specific needs. So, as long as you know the basics, you'll be able to evolve and
change the style of the app, whichever way you want.
So again in here, we'll just have for now,
this is going to be dynamic but for now we just need some text.
I'll just say 'Andrei, Andrei, your current rank is', and below it will do the same thing.
Maybe a little bit bigger this time around.
Or do 'f1',
which is a little bit bigger and I'll say number 5(#5)
for now, save that.
Let me put that back there.
Save and all right.
It's starting to look better.
I think the last thing we want to do before we go into the next video and add some functionality,
is, this fonts pretty generic, so we want to change that a little bit.
So I'm going to change the font in index dot css, because well this is going to affect our entire
app and you can pick your own but I like 'Courier New'.
In case, in case a web browser or the computer that it's on doesn't have that, I'll have some backup.
And yah!, this font,
I am a big fan of, let's check it out.
Look at that, very nice. Build that pretty fast.
Right. You know what?
The very last thing I will do, even though I said this was the last thing is one of my favorite things
is this particles
dot js(particle.js) library.
You actually see it in a lot of Web sites being used. Particles dot js,
yeah! it lets you do these sort of things.
So you can have a background that's interactive.
And you can change how many particles you have, and do all these cool things.
And I think it makes your webapps look really really nice.
So we're going to use this.
They actually have a react version that we can use, so we can just say, 'particles react npm',
and there's a few you can pick from, but this is the one I used before so we'll stick to this one.
And again, we can just copy and paste the 'npm install'
and just so, I don't have to keep stopping and starting this, if you do 'command d' with terminal you get
a new window.
But if you want it to be below, if you do 'command' + 'shift' + 'd', you will get a window right below it.
So in here, I can just do 'npm install'
So now that, that's downloaded, if we go down to here, we can see exactly how we can use it.
So we can just copy and paste, these particles component, will add it because it's the back of right below the
main 'div' element.
And as you can see there's a couple of options here.
And there's a few things that you don't really need in here, so I'm going to remove those and for the
parameters, I don't like having our render method be so ugly, so I like taking out the parameters,
and creating a 'constant' called, let's call that, 'particlesOptions' and outside of here we can just create
that variable, just to keep things clean.
And have this object configurable.
So if we save this, let's see how that looks.
Oops! I'll get an error because I haven't imported the 'particles' library yet.
So again going back here, I can just copy and paste the 'import' syntax.
Save it,
and close this for now.
Let's go back to our app.
You see over here that it's over written on top of everything, and everything else is below it.
This needs a bit of configuration, and it's a little bit tricky but we can add something, like a new
'className' and we'll call it 'particles', and we'll create this 'particles' class and our css, you know what?
all this over here we don't use,
so I'm going to delete just to keep things clean, and we'll save 'particles'.
And this is a new css syntax that you might not have seen.
It's called 'fixed'.
So everything stays,
even if you scroll of things stays, exactly where it is. And you can actually get these properties on
the 'particles' website.
So if you want to read more on it, you can check it out but it makes sure that everything is full screen.
The background's fixed and finally, to make sure that everything is underneath our, the rest of our app,
we do something called 'z-index' and 'z-index', you're allowed to use when you use position 'fixed' or position
'absolute'. And it tells you, what layer you want the image to be on.
In our case we're adding 'minus 1' because we're saying that this should be below pretty much anything
else on our website.
If we go back.
All right.
And aah!, you can see here that the patterns are a little bit weird and I've played around with it already
to figure out what 'particle' options I enjoy.
And you can customize this and play around with it yourself.
The main thing I want to do is have the number of particles,
to definitely have a lot more.
So I'm gonna say, 'value: 30' and 'density'
will have a few options.
That should make our app look a lot nicer, look at that. Again all these options,
you can read up on them on 'particles
dot js(particle.js),
and the 'npm package' itself, you can make it interactive as this if you want, but there's definitely a
lot of options for you.
All right.
This is pretty incredible, right?
We did that pretty fast and the cool thing is that, everything is responsive.
Look at that.
So, as I move this, we can display this app on our phone, as well.
And all these mobile devices, very cool.
So we took care of the view and the basic components for now.
In the next video we're actually going to start adding some functionality over here.
I'll see you in the next one. Buh-bye