**Building and Deploying a LinkedIn Clone with Firebase**

In this article, we'll go through the process of building and deploying a LinkedIn clone using Firebase. We'll start by initializing a new project and going through the setup process.

The first step is to initialize a new project in Firebase. To do this, we need to navigate to the Firebase console and create a new project. Once we've created our project, we can move on to the next step. In this case, we're using an existing directory to build our LinkedIn clone. We'll make sure that we have all the necessary dependencies installed before moving forward.

Next, we need to configure our project as a single-page app. To do this, we select "use an existing project" and choose our dummy LinkedIn clone. We then confirm that we want to overwrite any existing files in the build folder.

With our project set up, it's time to move on to building and deploying our app. We'll start by running `npm run build` to create a production-ready build of our app. This will include all the necessary assets and code for our LinkedIn clone.

Now that we have our build ready, it's time to deploy our app to Firebase. To do this, we navigate to the Firebase console and click on the "Deploy" button. We then select our build folder and confirm that we want to overwrite any existing files in our deployment.

As we wait for our deployment to complete, we can review the logs to ensure that everything is going smoothly. Once our deployment is complete, we'll be able to test our app and make sure it's working as expected.

**Testing Our App**

Once our app is deployed, we can start testing it to ensure that it's working correctly. We'll start by signing in with Google and verifying that our app is authenticating users correctly. Next, we'll try posting a new item to the database to test its functionality.

To test our app, we use a YouTube video to demonstrate its capabilities. We upload a video of ourselves playing chess and share it with our audience. As we wait for the video to process, we can review the logs again to ensure that everything is going smoothly.

**Conclusion**

With our LinkedIn clone deployed and working correctly, we've successfully completed the build and deployment process using Firebase. This is just one example of how we can use Firebase to build and deploy web applications.

As developers, building and deploying apps like this one requires careful planning and execution. We need to make sure that all our dependencies are installed, that our app is configured correctly, and that it's deployed successfully to a production environment.

If you're interested in learning more about building and deploying web applications using Firebase, be sure to check out the resources below. Our course on Building with JavaScript covers the fundamentals of web development and provides hands-on experience with building and deploying real-world applications.

Additionally, our success stories showcase the results that students have achieved by completing our course. From landing six-figure developer jobs to achieving a 90% pass rate on coding interviews, our students are experiencing incredible success in their careers.

**Resources**

* Clever Program: [cleverprogram.com](http://cleverprogram.com)

* React Daddy Smash: [your YouTube channel URL]

* Building with JavaScript course: [your course URL]

Don't forget to like and subscribe for more content!

"WEBVTTKind: captionsLanguage: enwhat's up guys welcome back to another Banger LinkedIn clone with reactjs I hope you're excited let's get your mind blown so I'm just going to show you on the screen and let's go to the LinkedIn clone as you can see from the URL that is not the real LinkedIn right this is the one that we've actually built so check it out this one has really sweet functionality and if I actually switch to a mobile version Look you can see that it actually looks absolutely beautiful even on mobile okay now what we're going to do all right so now check it out right most bills that you'll see anywhere they're not mobile responsive but this one is that's exciting now let's go ahead sign in with Google this is powered by Firebase and we have Google authentication coming in let me click sign in awesome put this in we should be good to go in just a second Beautiful look at that okay we're in side of the LinkedIn clone okay going all the way up top I can see my card here on the left hand side my right hand side feed and all the posts down the middle I have my search bar on the top left all of my little things and I can sign out if I wanted to and another cool thing is that actually I can even make a post so I'll click here we got our nice little model and let's just go this is my LinkedIn clone hopefully you're excited to build it boom all right and guess what we can actually even add images to this so let me actually add this image right here you can even add video links to it I'll hit post and waiting waiting waiting look at that that is a thing of Marvel that is absolute Beauty so I hope that you're en en joying this so far with that said guys let's just get straight into the actual build I'm so excited for you now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever.com pwj okay so then you don't just watch me do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript you can get your your skills up so freaking high and really get to that next level so go ahead you know if you want to take it to the next level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we have't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing six-figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out your yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need and we're going to start from absolute scratch and what that means is we're going to start from our command line okay so let's go ahead and clear out everything on my command line I'll make my screen just a little bit bigger here and um let's just go here and do a couple of things okay so I'm just going to go into my GitHub folder you can go wherever you want okay and um I'm going to do npx create this is the important command for you to follow uh LinkedIn clone oh it's complaining what is it complaining about okay so let's go ahead in the start and let's try doing pseudo npx let's see if it's a complaint about this no it's not okay so the complaint is that we need a new new version that right new minor version available okay so they want us to install the new version so let's just take that command you might actually need to do this as well and now it's complaining so let's do pseudo okay actually let's do this okay I'm just going to do create react app okay for you npx probably works for me sometimes on this computer I have to do create react app for whatever reason and I'm just going to do Linked In clone like so and let's hit enter and let's see what happens beautiful let's installing hopefully it's installing for you as well beautiful okay let's wait for it to finish all right great we have the entire app pretty much installed uh ready to get started the create react app adds in a lot of useful things that we need that's why this is important and once this is done we are actually ready to go ahead and get started now what I recommend we do is let's open up visual studio code okay and I'll bring that over here and inside of our Visual Studio code okay we're going to do this okay I'm going to open let's go I'm going to go to my GitHub I'm going to go to my Banger projects here's my LinkedIn clone I'm just going to open that uh bad boy up and we're pretty much right at the start okay so let me open up my command line and let's go into our appjs this is what you should have okay now I'm going to do yarn start and that will actually in uh start my development server and let's go here and start it boom this is what we should be seeing right about now okay awesome one note for you by the way if you're watching this um if when I do yarn start you can do npm start okay so for example if you don't have yarn just do npm start okay otherwise you'll have to install yarn and I'm pretty sure it's something like this and you could actually install yarn uh but you know if you don't want to get fancy just do npm start and you should be good I just um I just like to do yarn I'm just used to it now okay so your Local Host 3000 is open uh you should be good to go now we're going to do a couple of things we're going to delete unnecessary files okay so for example setup test I don't really need it report this one logo SVG uh not going to need that um not going to need ab. test.js so I'm holding command and I'm just clicking each one of these okay and now I'm just going to delete them so they're all gone okay uh next up what I'm going to do is actually pretty much every line inside of my index I'm going to just remove don't need it okay so let's just go like that and get rid of that okay cool that's good good let's go to app CSS and uh inside of app CSS I also don't really want anything so I'm just going to hit command a to select everything and I'm going to hit delete okay and I'm going to hit save so now all of that should be gone as well and now in appjs now here's what's going to happen Okay so on the right hand side when I hit refresh you should see this error your error will be like something something something logo SVG complaining about it well it makes sense why it's complaining about it because you just removed the logo silly all right so now in our appjs we're going to go and that import line at the top where we're look we're not importing the logo anymore so now we're just is going to go ahead and remove that line okay so I'm going to delete that line right there and um also there's a bunch of stuff in this file that we don't need anymore so for example everything inside of this uh div right here I can just get rid of and instead I'll just say let's build the Linked In clone like that okay and on the right hand side now it's complaining about report web vitals okay that's simple just go to index.js and remove this line there remove this line there where we're importing hit save wait for it to stop complaining and hey making some progress that's what you should be seeing right now okay so great job so far by the way okay beautiful so we got rid of all of the fancy styling or anything like that we want to pretty much start this app as barebone as humanly possible okay and kind of go from there so now what I'm going to do is we're just going to kind of set like LinkedIn type of styling okay so first things first I'm actually going to take the LinkedIn image all right and again I'm going to drop these images for you guys in the link okay so you can grab the LinkedIn uh image from from this file here okay or you can just go online and find a LinkedIn image so I'm going to go and um you know I'm going to grab this LinkedIn image okay and what I'm going to do is I'm going to put it in my images uh public folder and I'm going to create a new folder in here and I'm I'm going to call this images so inside of your public create a new folder called images cool and inside of there I'm going to put my linkedin.png and again if you want to find the LinkedIn PNG very simple just go online type in LinkedIn PNG and you know again you can use the one I gave you or just find one from online okay all right so now what we're going to do is now that we have the image okay I'm going to go inside of my um let's go inside of my index.html okay um and that's also inside of public you have index.html and we're just going to make a couple of changes to that all right so where it says public URL it says favicon uh blah blah blah we're going to replace all of that and remove that and replace it with Images slash the image that we just added LinkedIn linkedin.png okay and hit save now at the top of your app you should actually see the LinkedIn logo as your favicon okay do you see it beautiful okay nice and uh so that's good to go okay now we're going to go down and uh let's go where do I want to um add the rest of this okay so let's go ahead and see where it says Apple touch icon and here instead of this logo we're going to replace this logo here with the same logo so let's do images SL link and PNG just like that okay great so we're making good progress so far now let's go inside of our index uh index. CSS okay so that file is going to be inside of your Source directory so go inside of that okay index. CSS now we're going to add in a su styling okay and this is going to be the common styling that we're going to be using for LinkedIn so I just decided to Splat all of that kind of in the start all right we're going to start with making sure the Overflow Y is scroll okay so basically if we're scrolling up and down I want to see the scroll bar on the right hand side so that's what that's going to do and now I'm going to do overflow X and we're going to do hidden okay and what this is going to ensure also remember to put semicolons and also remember to keep HD command s or contrs and saving okay and overflow x hidden is what it's going to do is if we're scrolling horizontally we're not going to see any bars on the bottom okay that's what this is going to do cool and now let's just do a couple of things um to root to our body to our HTML we're going to add in a background color of the following F5 F5 F5 okay this is a white color the kind of color that kind of LinkedIn uses okay okay that's uh that's what this is going to do okay let's also add box sizing and I will just do border box here border box all right so that's good that's that makes it easier for us to like design our app okay and make sure that things fit kind of like how we want them to and it doesn't do anything weird Okay um next up we're going to do a couple of things all right so now I'm going to basically add some styling to things like H1 H2 blah blah blah I'm going to just reset their styling so they behave in the way that I want them to okay so um let's grab our div let's grab H1 H2 H3 H4 H5 H6 so all basically H Tags I'm going to also throw in header in there I'm going to throw in HTML um this tag here I'll throw in an image tag let's throw in label these are all things that we're going to need later okay my bullet points Li nav P tag let's throw in small tag as well span and unorder list okay that's it I promise okay I know it's looks freaking crazy looks stupid but I promise that's it okay now we're going to do a couple of things to it so margin we're going to make it zero okay that's uh first things first so already you you saw your headline go above okay cuz I removed the margin so I'm resetting the settings on here uh padding I'm going to set to zero as well okay we're going to go and set border to zero of all of theirs cool outline we'll just set it to none okay and then um font size I'll do 100% on these nice okay let's throw in a vertical align on this bad boy and we'll do Baseline okay and background let's do transparent cool so you shouldn't see too many changes happening right now but what this is doing is setting us up for Success kind of like if your parents were investing into like a 401k or your college uh funds that were setting you up for Success even though when you were born you had no idea what they were doing okay you're like that just buy me candy with that money okay what are you doing all right I hope you're making good progress so far okay now uh we're going to do a couple of things guys so what I want to do now is first of all I want to focus myself okay good now what I'm going to do on top of that is uh let's start working on some of our components like our login component okay so login component is going to be our component after I sign out at the app so if I sign out it's going to be our log login page okay so let's work on that so first things first I'm going to install a couple of things that I'm going to need okay so I'm going to need let me just open up another terminal thing here by hitting that button over there okay and um actually actually you know what I won't do that let me close that terminal just so you can see things clearly and um we exit out of this and what I'm going to do is I'm going to do uh yarn ad but you can also do npm install okay either one is fine I just like yarn better so whenever I do yarn ad you do npm install yarn ad npm install okay so I'm going to do yarn ad uh react router Dom cuz I want to use react routers okay so that's the first thing that I need to install the second thing I'm going to actually need to install is um styled components because guess what we're going to be using styled components in this beautiful beautiful beautiful beautiful okay so we pretty much got what we're looking for all right we we got what we're looking for those are the two things we're looking to install and now we're going to go inside of our appjs okay um actually you know what let's build out our component first so let's go inside of our source let's add a new folder and it'll be called components like that inside of our components folder I'm going to create a new file and it'll be called login.js okay and uh in our log injs file we'll just start off with import styled from styled components like so and then let's um add in the actual component okay so let's capitalize the name and uh we'll pass in any props that it needs and open that bad boy up okay and we'll just have it return a div that says login inside of it so pretty much not that much right now and of course let's export this so we have access to this component outside of this file into our other files capish good so I'm going to hit save now let's go into our appjs file because what I want to happen is I want to take this component use it inside of my appjs file and then have that be displayed on my screen so now let's go to our appjs file well in order to use that file what do we need to do the first thing we need to do is starts with an i then it has an M import okay so let's go ahead and import uh login okay from um and we're going to do components SL login all right and uh another thing we need for this is we also want to start using our react router okay so let's go ahead and import all of the things we need for that so we're going to do browser router okay like so and uh we're going to do as router okay comma switch um and let's do route okay so I'm I'm I'm basically getting browser router switch and Route those are the three things I'm getting okay and where am I getting them from great question from react router Dom like that okay and uh that's it cool well now we actually got to do our routing so I'm going to remove this H2 and I'm just going to start it off with router and I'm going to hit tab to auto complete that okay inside of that I got my switch okay and inside of my switch I'm going to have my route all right and this route is going to be an exact path all right and this exact path is just going to be the homepage okay so let's hit refresh it's complaining about something what is it complaining about well let's see what is the error about let's hit save okay did we do yarn start we did not do yarn start so of course it's complaining Mak total sense boom now let's hit restart beautiful okay and now you're like hey I don't see anything on the screen there's nothing here well yes because inside of Route you still didn't add in the login component so let's add in the login component Let's uh do that okay this is a component we imported we added it there and now you see login taada okay that's it so we're pretty much now set to go and start working more on like styling our login component and adding more things to it so let's just go ahead and start doing that now okay great job so far so now let's keep rocking and rolling okay we got basic login component functionality working okay now we're going to add a container and we're going to start adding some nav components and we're going to add some styling to this okay so let's go ahead and do that so I'm going to do a few things so first of all um I'm going to find this SV G right here okay uh I'm going to put that inside of my images folder so I want you to actually find uh an SVG again it's going to be in the comments below or in the description below for you so don't worry about that to put it right here in my images okay awesome so hopefully now you got it in your folder let's keep on rocking and rolling and guys you know if you want to know how to stop and start your server is contrl c contrl c stops it okay then you can install whatever modules you need to install and then you can do npm start so um just make sure your server is running otherwise your app is not going to show up here okay just a little note Okay cool so now let's keep going through this so I'm going to go inside of my login component and uh we're going to now start adding some uh styling and stuff here okay so uh just bear with me so first things first okay I'm going to just remove this entire line right now don't need that and we're going to start with a return statement okay and let's create a container component okay and inside of our container component let's create our nav component and again hit tab okay and then inside of our nav I'm going to add a link tag okay and then this link tag is pretty much going to uh do nothing as of now and it's just going to be the LinkedIn SVG logo okay that's it so effectively what is this going to be it's going to be this thing right over here okay just so you know where headed and what we're doing that's what we're building okay so it's going to be a link and inside of this link all right we're going to add our image tag okay so notice the hierarchy container nav inside of there we have a link and inside of there we have our image tag okay IMG hit tab to autocomplete um from my images folder I'm going to get my login logo. SVG that gets me my um SVG that I'm looking for and now look it's complaining it's like hey I don't know what container is or nav is make sure to keep hitting command s or control s to keep saving okay so now what this is complaining about is all that means is we actually need our container and nav style styling okay so let's go ahead and just style them not a big deal at all so first things first I'm going to hit cons container okay and I'm going to create a style div and I'm going to put Tilda Tilda okay Tilda is the key that's right above tab okay and just hit save so I'm going to leave this style component empty for now okay and then I'm going to create a style component for my nav bar so I'm going to do const nav and I'm going to do styled. naav and I'm going to do Tilda Tilda and save and stop right there okay so what am I doing here I'm giving it empty styling okay if I do that well you should now have a LinkedIn clone okay awesome okay so now I'm going to start adding some styling okay and what that's going to allow me to do is it's going to allow me to control that image cuz that image right now is just straight up out of control right cuz you don't want your LinkedIn to look that freaking massive so inside of here I'm just going to hit enter enter okay and then uh padding going to give it zero pixel padding okay so on the container side I'm done for now and inside of my Nav Now I want to style this okay and this is where it gets like interesting what I need to do all right so let's go ahead and give it a Max width of uh 1128 pixels hit refresh okay cool and then uh let's go ahead and give it margin Auto okay and um going to give it a padding of 12 pixels by 0 x 16 pixels okay so now we saw a little bit of like padding kind of kick in so it's not completely touching the the top part right of our um of our browser cuz that didn't look great and now we're going to actually use flex so to enable Flex you got to do display Flex okay now you might be wondering hey where did it go bring it back don't worry we're going to bring it back really soon okay just hang in there for me align items this is going to allow us to align it centrally okay this is vertical alignment and then let's go ahead and do position relative okay and um I'm going to do another thing I'm going to do justify content and I'm going to do space between and I'll explain why I'm going to do space between in just a second all right and uh let's give it a flex wrap of no wrap I don't want these to wrap and go to new lines because for my browser right if I have this Navar right here I don't want it to wrap and then go essentially to new lines that's not something that I want okay so this is looking good so far and um then I think I just want to do a few more things to make sure that we're good to go okay I'm just going to say hey anything that's you know inside of the a tag do a few things with it give it a width of 135 pixels so now this image has a specific width we controlled it right this is what we essentially want wanted to do now let's go ahead down and I'm going to give it a height of 34 pixels cool okay and now what I want to do is Media query okay so this is something cool that I want you guys to learn and what I'm saying here okay is on a phone this line here all that means is on a phone do the following okay so I'm going to open squiggly brackets just going to say give it a padding of 0x 5 pixels like that okay so if we're on a responsive mobile device it's just going to look slightly different all right this is going to make a big impact later on so with that said with the currently with the Navar and where we're trying to place our LinkedIn clone we are good now let me explain why we did space between remember how the final version should look well guess what guess how this is separated because of space between okay and guess why it doesn't run on new lines Why join now is not here and why sign in is not here CU of flex no WP okay all these little things make a huge freaking difference okay and you can play around with it you can delete lines and like go back and forth and see if that actually does anything okay and that's another way to like like pick up and get better at these skills okay so let's keep going and by the way if you're wondering why your code especially inside of the style components doesn't look like mine and it's looking like it's just one giant long string and it freaks you out um what I recommend is go to extensions and you can get vs code um just type in styled components okay and you can get like one of the styled components extensions that might actually help you I think it's called vs code styled components that one so you can get that one and I think that'll like give you the highlighting you're looking for and make your things look normal okay I have tons of extensions but that's um one of the ones that's really helpful all right cool so now let's go ahead and add the join now button in our app okay and that's going to be that beautiful button right there and it has couple of features I want to show you when I hover over it it has that little gray color that happens also notice that it has a nice little border radius so we're going to go ahead and build that now so let's go ahead and do that so first things first I'm going to go inside of my login.js I'm already here so that's good and then underneath this image right here uh the the login logo so go underneath that okay that link tag as well and I'm just going to open up a div and inside of it I'm going to create a new component called join inside of that I'll just say join now okay now again you should be at this point where it's complaining join is not defined blah blah blah blah blah okay cool well not a big problem now all we have to do is actually just go ahead and create our join component so I'm just going to do const join and let's just get started okay and um styled a and leave it empty for now save okay so now at least you have join now up here on the top right okay so now let's start with the styling so go inside of it hit enter twice and let's go so let's choose font size and I I think I'm going to go with font size 16 pixels on that one all right so now underneath the font size I'm going to add a padding of 10 pixels by 12 pixels on this thing okay so you can see it got pushed just a little bit from The Edge that's exactly what we're looking for uh text decoration um none because for my link tags I don't want want them to have an underline so that is to just make sure that that happens and for color I'm going to go with something like this okay just a not completely black it's a little bit grayish okay so that's what I want to do here um as a matter of fact actually what I can do is 0.08 okay so I think yeah let's leave it at this actually I'll 0.08 after hover okay so let's go here let's give it a margin right of 12 pixels great get giving it some more distance from the right hand side because we're going to put something else there and then let's go ahead and say that on Hover we want certain things to happen because right now it still doesn't have any hover functionality right so let's go ahead and do that so on Hover we're actually going to change the background color and um I'm going to do this to the background color okay so what does that mean when I hover over it has a lighter gray right so it's kind of a dark gray joint now when I hover over it there's a lighter gray behind it okay cool now I'm also going to change the font color on Hover okay and I'm probably going to what I'm going to do is I'm probably going to make it just a little bit darker so let's go here boom so the font color turns a little bit darker as you can see and then let's add text decoration of uh none okay and all of that is looking good so when I hover over okay no underlines no weird stuff happening and you know one last thing is that it's still looking pretty Square to me what I want to happen is I want to give it the little little rounded Corners so let's add some border radius to this thing so I'm going to go border radius and uh for Border radius I'm just going to say hey give me four pixel border radius on this thing okay so when I hover over I got a nice little rounded corners and uh the join now button is looking absolutely great okay amazing we're doing great so far guys if you guys are enjoying this video by the way so far smash that like button break that thing and of course subscribe to the channel if you haven't already and uh let's just keep on going so and the one thing I still want to do is to index I want to actually add to our index as CSS I just want to add some fonts okay so going to um our body right what I want to do is actually just want to add a font family here okay so let's go ahead and add uh to our body okay and we're going to add uh certain uh fonts okay and the only fonts I really want to add here is font family I just want to add aial aiel like this and then I just want to add Sans serif okay fall back and so yeah now the fonts are looking good kind of what we're looking for and with that said let's just jump in to start working on our sign in component okay that's that thing right there so let's go ahead and do that so signin component we're going to need a couple of things so let's go to our login um component inside of our login component I'm going to make a our sign in component right underneath the join uh the join button okay but it's going to be in the same div okay so this is important to understand same div the join now component and right underneath it we're going to have sign in component okay hit tab to autocomplete that and then I'm just going to do sign in okay now again it's complaining his sign n is not defined so same thing here you guys know the rules let's create a St in for our signin component okay and uh this is going to be a a tag AKA link tag and then let's just hit save cool so what you should see now is you should have sign in on your screen if you full screen it you should have sign in right there okay and now we're going to go inside of this and start actually adding this thing so I'm going to add a little box Shadow to this and um you know I use the Box Shadow generator that's what you can do as well but here you're just going to get the final version so we got a little box Shadow around this thing so you see now a blue outline outside of your sign in all right we're going to give it a color of um a little bluish color for the sign in as well okay and for Border radius let's give it 24 pixels cool so now it's looking nice and round that's good okay I'm going to give it a transition duration of 167 milliseconds okay so you're going to see that's going to come into play later on like for example when I hover over this it has a little nice transition that's happening there that takes 167 milliseconds it seems like just give it a font size of 16 pixels okay and I'm going to give it a font weight of 600 okay so now it's a little bit Bolder line height give it 40 pixel line height okay so now boom all of this stuff got pushed down just a little bit and um on top of this I'm going to do a couple of more things to this let's give it a little padding I think okay so padding I I'm thinking 10 pixels by 24 pixels like that okay so now sign in component is looking a little bit funny it looks good here but on mobile mobile device it's freaking cut in half so it looks stupid so we're going to fix that don't worry okay so that's our padding Now text align it um in Center okay and then we're going to go background color for it and background color is going to be a just that okay so so far so good and then on Hover we're going to give it some functionality okay on Hover I'm going to say that the background color is going to be let's go like that okay actually let's make it this to 49 by okay it refresh cool okay so now when I hover over it you see that there's a blue color that's happening okay and when I remove the transition look it just happens instantly so we don't want that effect I want that transition there because it allows me to make it blue but with a nice little transition on Hover and then on top of that I want the font color to change when I hover on it and I want it to be this blue uh right here on Hover okay so that's good and then of course text decoration even though right now it's good but let's just add this for safety and just good um you know default behaviors and patterns Okay cool so our sign in on your computer should be looking good okay it's just cuz I was zoomed in like too much at 175% so when I'm in here it looks good okay cuz I'm on a giant TV so I'm trying to zoom in but now you should be good okay so with that said our login component is looking pretty good now we're going to start adding in our sections and putting in main content in there right now okay so now let's actually work on our section so in section basically it's going to be this big section over here okay so now we need to make that work at the image so it's also mobile responsive right cuz for example it's here like this but when I full screen it ta completely different right boom and now it's here but when I go mobile the image is in the middle the text at the top how is that happening so we'll show you the magic behind the scenes let's uh go to our log .js over here now right underneath the nav bar we're going to add our section that's going to be our new component all right all right so now of course it's going to complain and do our favorite complain which is section is not defined okay so now it just means that we haven't had it added the styling part of this okay so let's go ahead and do that I'm going to uh create a section styling like this and it's going to be section okay save um cool so that's good now of course you know the drill enter enter inside of here and let's start adding what we want okay so first things first let's go align content and start oops start okay now make sure let's also do display Flex because we're going to need that okay uh Min height I'm going to keep that at a 700 100 pixels for this thing okay and uh let's give it padding Bottom now some of the stuff you guys are not going to see okay like for example padding bottom you're not going to see it but what it's actually doing is if you added more content underneath this so like for example say section is like this right if I added something else underneath section it would start adding it from here but that's not what we want we want to give it a little padding so that padding that's what we're giving it right now okay so that's why some of the stuff is going to be invisible and you're be like what the hell are you writing KY and why isn't it it's not doing anything but trust me it's actually adding padding that is good convention to do that okay uh conversely this is going to add padding to the top so just like this right now you saw it gave some breathing space between the Navar and this section starting over here okay so cool we added padding to the top padding to the bottom and now we'll do this all right cool so just giving it some additional padding now I'm going to make the position relative okay and um Flex wrap I'm going to actually do Wrap okay and the reason why I'm doing that is this is the wrapping is what's align allowing this image to get wrapped around which means when I do this it wraps it okay so that's what we want that means if the screen goes too small those things wrap and actually form new rows this is why Flex is so freaking helpful uh width we're going to give a width of 100% on this bad boy Max width is going to be 128 pixels okay align items because I want things to be in the center let's give it an align item of Center um margin Auto okay and then of course last and pretty important thing is on media how do I want it to behave so meaning like on my phone on my iPhone how do I want it to behave this is how I want it to behave okay and let's give it a Min height Min height of0 pixels like this okay let's open full screen okay so now the section is in the middle you guys are going start to see a lot of this Behavior once I start adding content to it okay it's going to start becoming a lot and a lot more clearer so now let's go ahead and start adding content to this thing and start adding stuff in our hero okay so let's go ahead and get our hero image so this is going to be our hero image that we're going to use right over here okay so we're are going to put that inside of our images folder oh and just one fix right here guys um this is PX right there okay so just make sure you have that 768 uh pixels cool okay now let's go to our um I mean we're already here in our login component okay hopefully you're here now underneath our section we're going to add hero under um actually it's going to be within our section okay so the hero is going to be within here okay so let's do this let's remove where we say section because that's not what we want anymore let's do hero as a component and hit Tab and uh just hit save so what it should look like is you should have section and hero should be inside of your section component okay now inside of your hero we're going to add an H1 and that's going to say welcome to your professional Community kind of like how it is on LinkedIn right it's save now again it's complaining hey here is not defined well again that makes sense my friend because you know the deal we need to actually go ahead and uh make the style component for it so we're going to do const hero style div okay do that and hit save so now we should have welcome to your poor professional community so let's um fix that welcome to your professional Community great and let's just go here and start start adding our width at 100% why does it always autocomplete to that it's so silly okay and uh we're going to style the H1 inside of here like the following okay so we're going to give it a padding bottom of zero okay we'll give it a width of 55 Jesus so welcome to your professional Community that's what it should be looking like okay and that just happened because of the width that I gave it cool all right now we'll give it a font size of 56 pixels like so big font that's kind of cool like it actually looks powerful as soon as I did that and let's give it a color of 2977 C9 okay so this is going to be a light blue font weight let's give it a 200 font weight okay so not super thick and bold not Thicker Than a Snicker okay this is very linked iny linked iny vibe that we have here let's give it a line height of about 70 pixels okay great so that gives it some Breathing Room in between each line like so and um after line height let's add in a media query so we tell it how to behave on a mobile device okay so let's go Max withth okay and this is a mobile device 768 pixels text align on a mobile device should be Center so it should be vertically aligned okay let's go font size to be 20 pixels all right great and then let's go width to be a 100% great and then let's go line height to be about two great okay so this is what it looks like on a normal screen and then this is what it should look like on a mobile screen right in the center fits nicely looks great just like you thanks for watching so far let's keep going all right so this is good now I want to get outside of this H1 okay and now let's style the image inside of here because we we want to add the image and we want to tell it how to um how to behave okay so let's go uh above all the way here where inside of our hero we added the H1 let's also go ahead inside of this H1 and inside we're going to add our image okay so let's go outside of this you know correction hit image and autocomplete that and um I want to pull the image that we added okay and it's basically login Das hero . SVG okay so now you should have the image showing up man it's already looking pretty freaking nice okay just make sure you didn't do any misspelling so like look welcome to your professional Community is looking good but this image is looking way too big so we need to control it that's what we're going to do let's go to the bottom and let's go inside of our image and we're going to just control this freaking thing okay right now so first of all let's give it a zindex of minus one and why we're doing that is so if a text is overlapping it it's always on top okay image should have this image should not have the most priority the text should have a higher priority than this okay now wi let's go 700 pixels on the width cool uh it just exploded but don't worry we're going to control that so now on full screen notice we have made it already smaller okay before it was like even bigger than this okay for position we're going to do absolute okay and then bottom let's go -2 pixels okay look at that it's like in a weird position look at that boom right there right there okay don't worry we're going to take care of that right now let's go Nega 150 pixels uh right there cool and um it's kind of kind of like watching a painter paint you know where it's like not making sense and then all of a sudden it kind of comes together and your brain is blown uh apart on a phone how I want it to behave is top give me uh 230 pixels okay and then with so like from the top right from the top make it drop that's a wet you know what I'm talking about so like for example if I change this to like 50 pixels right it goes higher up but to 2 30 pixels is gives me that nice little touch that I'm looking for on a mobile device but don't worry right now it's like kind of invisible on the full screen so we'll we'll um fix that as well okay but let's just make sure it's good on the mobile device so with we're going to go with initial and then position we're going to go with um going to go with initial as well and um I'm going to do the same thing for height and I'm going to go with initial okay so now on mobile device it is looking beautiful okay absolutely gorgeous so so far so good all right folks so one of the problems I'm running into right now is my image on full screen is going invisible but on Mobile screen it's there if that's happening with you um actually comment out the zindex minus one line and now your image should be showing up okay okay and you should be good to go so let's keep on going ahead here and adding more functionality to our app so I want to add in the Google form component okay so I want to add in like the Google login um so let's go ahead and get that Google logo okay so take that add it to your images okay awesome so now after adding that Google SVG let's go ahead and start adding that to our login okay so here's how we're going to do it uh let's go right underneath um actually we can keep this inside of the hero section right because that's where we want it so inside of our hero I'm going to add a form okay so let's go ahead and add that form um actually this form I'll probably add it right outside of the hero okay I apologize for the confusion and throwing you all over the place let's add form here okay and we're going to work on the styling of this form and then inside of here I'm going to have another component called Google just like that okay and I'm going to throw in an image inside of the Google component and it's going to be my uh Google SVG component okay or not component I'm sorry the SVG file okay the image and um right underneath this let's go ahead and just say sign in with Google like so okay now again it's complaining hey form is on different Google is not defined you guys know the drill let's create stylings for them that's what it's complaining about so I'm going to create a form and this is going to be a styled div all right we're going to leave it like this and then I'm going to create Google and this is going to be a style button and I'm going to leave it like that refresh boom we got the sign in with Google form all the way at the bottom you should be seeing that right there there let me make myself just a little bit smaller okay so you can see it okay now let's go full screen like so beautiful looking good so far I can be here and be good all right full screen and uh looks great now inside of our form let's start adding styling in here so let's start off by giving it a margin top of 100 pixels start there so that gave it a bunch of margin and that's really good okay because we definitely want to add some margin in there so that way nothing weird happens okay and also it gives it plenty plenty of spacing that we want all right cool so that's good the other thing I'm going to add to my form is I'm going to give it a width of 400 pixels 408 pixels okay and then let's go ahead and give it a media query whoops media query I'm going to say Max width of 768 pixels which means hey I'm on a mobile device buddy on a mobile device I want you to give it a smaller margin top so it's not a huge margin top okay so you see it now it's a little bit closer to our image which makes sense which makes sense okay now inside of our let me actually all right so in our styled button let's go ahead and now add um let's basically add styling to this okay so let's just start with display Flex so we have Flex box enabled on here and then inside of here we're going to justify content and this is going to allow us to horizontally Center things so let's Center that I'm going to add a background color to this and uh let's just do FFF okay which is going to be this bright white that you just saw happen right there okay and um align items so I want to I want to Center align this thing okay so that's now looking a lot better let's go ahead and give it a height of 56 pixels so 100% width let's give it a border radius to give it nice little rounded Corners beautiful and now I'm going to give it a box Shadow that's going to be a little bit complicated here but again you can Auto generate these uh from box Shadow generators okay but just bear with me here because it is going to be worth it cuz it will make it look great okay ins set pixels RGB okay and uh let's give it a 0% here here okay I'm going to just save this and then let's do another inset there okay and um I think I'm going to just make it let's go RGB here and 0000 / 0% okay so that's a mysterious looking thing but it gave it the Box shadow that we were looking for okay without it we just don't have that box Shadow so not the end of the world honestly whether you have that or not but you can add that in okay if you don't want to write all that out I won't blame you if you um if you avoid that cool so let's do vertical align and let's go middle okay and then um I'm going to give it a z index of zero let's also start adding in a transition duration for this because I want it to have a nice little effect as I hover over it okay and a font size of 20 pixels so now sign in with Google is looking much bigger so great and then uh I think color let's color it like so so that makes it just that little bit grayish color that is looking great and then now let's add in Hover functionality on this thing guys because once we have that hover then it's going to do things when we hover on it does that make sense okay let's go ahead and do that guys and let's keep the freaking energy alive and up in here so I'm glad that you guys are with me and rocking and rolling okay if you have been if you made it with us so far smash the like button like look at how good this freaking thing looks right on your portfolio it's going to look so great and it's just going to make you stand out from so many of the other people out there so let's keep going so on Hover let's basically add a background color changing all right so let's do this uh let's give it it 207 207 another 207 and we're going to give it a 0.25 okay so now when I hover it has that little gray color showing up in the background okay all right so we gave it a little background color now let's go ahead and also add a f color for this okay and I'm going to get give it um this color right here 0.05 so when I hover over it makes the text a little bit darker okay that's a nice little touch and now again we're going to add a little Annoying box Shadow thing with honestly I'm just going to skip because I hate for you guys to have to type it all out just looks annoying it's just annoying so this is uh great so far I think this is good and I think that um this looks great so far so let's keep going okay so next up um we're going to um add a couple of more things to this okay so that should complete your basic form and the sign in with Google and let's basically add now some header functionality okay so I'm going to go inside of my header and this header is going to be on the homepage so what does that mean if I go to slome okay we I want to be able to get routed there so this is the completely built app okay this is the built version the final deployed version and when I sign in with Google right when I do slome it should take me to this page so now we're going to actually start working on this page and working on this header here as well so let's go ahead and get started with that so first things first inside of my um let's make our header component and then we're going to make our home component or let's do it the other way let's make the home component first so in inside of components I'm going to make a new not folder new file and this is going to be home JS and I'm going to do import styled from styled components here all right and then I'm going to create a component called home okay and then I'm going to return div and let's just do home like this okay perfect that's all good and let's just go ahead and Export default home so now this is a component we have access to in other areas now let's go ahead and create our header component okay so let's go inside of components new file header. JS just like so and inside of our header JS we're going to do this pretty much the similar thing import style from style components and let's create our header component like that give it the argument of props and we'll return a div that just has the text header inside of it that's it for now and now inside of our app.js we're just going to import these okay so here's what that's going to look like so under login we have uh under login we have this route ending we'll create another route okay create another route and this is going to match the path of home like this and then inside of here we'll have header okay let's go header let's make sure that in our header component we export default header because that's why it couldn't autocomplete it it seems like let's go back and now I'll go header and boom it will autocomplete it and uh it we just imported header up there and uh let's also import uh home okay so I'm going to do home home like that and so I imported header from components header I imported home from components home we got header and home under the route called path slome so that means now I should be able to go slome and it should take me to it so both of those components are showing and that's exactly what we wanted perfect so now you should be able to go to slome see all of this stuff and uh let's keep rocking and rolling here okay so next up let's add in our containers you know how I like to do these things guys so let's go to our header file okay and inside of our header we're going to do a couple of things so you guys are going to need to keep up with me okay so let's go ahead and um add a container inside of the container let's add our content okay it's added there let's add just text that says header for now okay so this is what it should look like for now and now we're going to add these style components right underneath here okay so I'm going to do container style div and let's leave it empty for now and let's do the same thing for content and we're going to do style div and we're going to leave it empty for now okay let's hit refresh boom so so far this is what you should be seeing okay if I change this with boogie boogie hit save you should now see boogie boogie here okay cool now we're going to start styling this stuff in here so let's add a background color and let's go white dope so it looks a little funny right now cuz it's just this bright white and so almost like somebody was cleaning a really dusty board right that's what it looks like now let's add a border bottom one pixel let's make it solid and okay uh weird did not need that many parentheses so bugger off might cool okay and uh now let's go ahead and add left zero okay and underneath this let's add some padding so we'll go uh 0 by 24 pixels just like that position I'm I'm going to go ahead and go fixed top give it zero and I'm just going to give it a crazy Z index cuz I want to make sure that that always stays on top okay and that's like never going away anywhere again a lot of this stuff is going to be invisible until you click into it like this and now you'll see this header okay I'm I'm in inspect mode so just bear with me promise it's going to get better let's give it a background color or actually no I'm sorry let's not do that let's give it let's do display Flex so now we have the flex mode enabled now let's go align items Center on this thing okay that'll Center align items let's go margin zero Auto and let's go main height 100% okay hit save and let's go Max width of 128 pixels okay awesome now with this guys you're not going to see much again this is to set us up for our next step where we're going to now start adding the logo in the header okay and then you're can actually start to see what this code was doing so let's go ahead and now add the logo so I'm going to grab the home logo and um I'm going to add it in our images okay boom right there now let's go back to our header file and in our header file I'm going to now start by adding this image so let's go to the top and inside of content let's remove the word header we don't need that anymore let's add a component called logo inside of that let's add a link tag okay and um we're going to say that this image should take us to the homepage meaning that if I'm logged in if I hit that image right right there you know it should take me essentially to the homepage okay which is this page right here okay so now we're just going to add the actual logo and the image so inside of this link tag let's add an image tag like so and this image tag is going to be/ images slh home- logo.svg okay that's what we just added right here here home logo.svg now style components is going to complain it's going to say hey I don't see this component or The Styling for it no worries let's go ahead and add it my friend so I'm going to add a logo like this styled and I'm going to make it a span tag let's make it empty for now and let's do margin right 8 pixels and then let's go ahead and do font size about 0 pixels just like so let's hit refresh and TDA all of that work that we had done earlier is now showing us what's going on okay so let's try removing these things and let's see if it makes a difference right so I removed container and look you cannot see anything right but now let me bring everything inside of container and now you can see it and now you can see why we gave it a color of white cuz now it's visually there okay so great work all right so now let's go ahead and add search and input and search icon so for example this search bar right here let's go ahead and add it and let's go ahead and uh get started on it right now boom so first things first we're going to go ahead into our header file okay and uh in our header file we're going to do a bunch of stuff okay along with like some stuff with SVG okay so what I'll try to do is I'll try to kind of um give you this SVG so you can have access to it as well okay so let's keep going I'm going to give you access to the SVG file too in a second but let's go ahead under our logo and under our logo what I'm going to do is I'm going to create a search component okay and uh let's hit search and I'm going to hit tab all right inside of my search component I'm going to create a new div inside of that div I'm going to create an input okay and um I'm going to add a placeholder all right just like so now I'm going to go and create a new component called search icon let me actually go ahead and do that like this okay search icon will be inside of my search component so that makes sense all right now inside of my search icon I'm going to add my SVG uh logo SL path okay so I'm going to give you access to this as well but here it is all right if you guys need it again all of this is going to be linked in the description below so that way you guys have access to it okay so it's an SVG and then all we got to do is uh we just have to close out of this SVG okay just like so so boom now again search is not defined search icon is not defined so we're just going to go ahead and create those okay so let's go ahead and let's do search first and then we're going to do search icon so let's go search and um you guys know the drill I'm going to go ahead and make it empty for now and let's go ahead and create styling for our search icon as well I'll go and um do this okay so empty empty cool so we got our search icon right here we got our search bar right there um it is looking beautiful magnificent and uh we like it all right now all we have to do is start styling our search component all right so let's go ahead and style this thing okay so inside of our search I'm going to give it a opacity of one let's give it a flex grow of one as well okay and um I think I'm going to give it a position relative okay and then let's do the following for this div all right let's go Max with we'll go 280 pixels okay input I'm going to go border none for the input so now notice that there's no border anymore so already looks much cleaner um box Shadow will go none and then background color ef3 f8 okay that gives it a little light gray I'm going to go border radius of two pixels cool okay that's going to be the font color and width will go 218 pixels so now it's a little bit wider padding okay so great I'm going to give it a line height of 1.75 okay so it became a little uh you know wider from the top got a little bit more height a hence height font weight let's give it 400 great font size will give it 14 pixels let's make sure we full screen it nice looks good looks really good height let's give it 34 pixels border color I'm going to give it a this color right here cool and then vertical align text top okay great so this thing is looking good now the search bar okay now let's work on the search icon so we have the style div that we started then let's go ahead and style that search icon component as well so we're going to make the width 40 pixels for it position absolute Z index let's give it a one top 10 pixels so now it's getting inside of that um search bar which is exactly what we want so that's good and we're doing that by using of course position absolute making sure that the zindex is making sure that it's not like hiding behind other things you know I don't know if I give it a z index of -200 it might hide behind other things right so zindex one just make sure hey don't hide don't be shy okay and then the position absolute just allows us to like position it okay now let's go border radius of that cool and then margin of zero great I don't want any box Shadow I mean I don't think I'm going to even add that line okay I mean I could have pointer events none for this let's go and see yeah it's kind of cool okay so there's no um that's a nice little touch right because if I save now if I hover over it my mouse still looks like a pointer right but watch what happens when I go pointer events none when I hover over it the whole thing is a text box it's a nice little finesse that we decide to put in here for you and uh of course let's go display Flex so we have flex functionalities and flex superpowers and uh let's uh horizontally align that great now it's a little bit closer to the search bar okay let's look at it oh man that search bar is looking nice all right and then align items we're going to align it to be Center and then of course let's add a transition background color and then have that transition be 0.15 seconds cool okay okay dokie okay I I mean I don't even think honestly we need that line you can kind of take that out and it still looks fine to me okay I like to just simplify it if we don't need something just take it out okay cool so search icon is looking good search is looking good yeah to me this is looking great okay you're making great progress so far I'm really proud of you now what we're going to do is we're going to actually turn that search icon into a file okay so I think that's going to be a lot better uh for you so let's go ahead and do that so I'll show you how to actually turn this into a file so inside of search icon what I'm going to do is I'm going to take this SV G right I'm going to cut it you need to cut it okay and um inside of my public images I'll create a new file and we're going to call it search- icon.svg just like so now inside of here I'm going to paste that SVG code okay so now notice that my search icon is not there anymore makes sense now what I'm going to do instead in my header I'm just going to replace all that SVG garbage code that I had I'm just going to replace that with this image and I'm just going to go search icon.svg like so and Tada we got that icon right there okay this is also highlights to you how you can actually turn that into a file all right has a nice little touch right there great um now let's start adding things to our Navar okay and we're going to start making progress on that all right so now let's style our Navar okay and let's make it look pretty Pretty Ricky Ricky all right here we go so I'm going to jump inside of my headers and uh we're going to add nav okay and we're going to add nav right underneath this search so give me a nav component just like this please and let's just go ahead and say nav menus now we're going to go ahead in our styling and we're just going to say con nav styled nav like this okay and uh we're going to go inside of here get a little margin left get a little bit of uh uh okay that's looking good display block beautiful got nav menus showing up on the top right hand side side that looks good uh of course let's add in a media query for phones 768 pixels mobile devices in general and let's say hey if you're on mobile give me a fixed position on this nav and give me a left of zero bottom of zero background white and of course give me a width of a 100% okay so there we go beautiful that's what it looks like on a mobile device now okay Pretty Ricky Ricky okay cool full screen this thing so some of the nav menu items seems like they're now coming to the bottom which is fine okay we ain't got a problem with that right do you got a problem with that cuz I don't have a problem with that okay so you should neither all right let's keep rocking and rolling all right so we got the nav done now let's go ahead and add home home to the nav menu so first things first let's grab our image okay let's take that image and I'm going to add the nav home image right there all right so this is our image now let's go inside of our header JS file and inside of our header JS we're going to do a couple of things so first things first let's actually wrap the nav actually not wrap the nav bar but inside of the nav bar I'm going to what I'm going to do is I'm going to delete where it says nav menus so delete that and instead I'm going to make a new component that says nav list wrap just like this I'm going to tab that and I'm going to hit enter and then I'm going to make another component inside of that's called NAB list hit tab then hit enter and inside of that let's make an a tag um and inside of that a tag actually here's what we'll do okay we don't need an ah ref for this okay we don't need that uh but we do need this thing tag wrapped up in an a tag so let's go here and inside of here let's add an image and for that image we're going to go images with the nav home.svg like that okay that's the one that we put in our SVG file so what it should look like is you got your nav bar you got your nav list inside of that and you got your nav uh I'm sorry not nav list excuse me nav have your nav list inside of there okay okay so that's looking good now it's complaining hey it's not defined okay no worries let's go ahead and Define this so let's go ahead and do first of all const nav list WP okay and equal styled UL it's going to be an unordered list and let's leave it like this then let's go here and we're going to have our nav list and this is going to be a styled bullet points uh okay here we go oh my bad let's put the Tilda Tilda at the end of it good good good good good good so now all we see is this bullet point right here that's okay because that's what we expected okay um now we're going to make it mean something in a second by doing our styling so inside of our nav list wrap let's go ahead and do this so display Flex inside of here we're going to flex wrap do no wrap and then let's do list style type none okay let's open this up and now because we did list style none we don't have that little dot there um that we were getting so that's fine now inside of nav list let's start doing let's enable display flex and align items let's make them centered okay and now let's make a a style our link tags and uh let's give it a little bit of styling okay so first of all we're going to say line items in the center background let's make it transparent I'm using Vim so you'll see a lot of jks happening there that's my shortcut for getting out of the mode and uh let's go Direction column and I'll show you why that's important uh later okay so column cool let's go font size 12 pixel font weight 400 okay just hang in with me there it's going to make sense I promise my child I promise my child this is going to make sense all right just hang in there for me pal justify content it's going to be Center and Lon hot we're going to give it a 1.5 cuz why not okay and uh let's give it a Min height of 52 pixel and a Min width of 80 pixels like so and uh position of relative okay and of course you know my style I do not like text decorations and the underlines that I sometimes normally get okay so none is going to be fine by me let's put that there okay and now just a couple of last things we're going to do let me just make sure that our nav list is right so we got our nav list nav home.svg m a nav list WP we got our nav list inside of that we got our a tags great okay let's keep on rocking and rolling whoops okay whoop okay my bad so this na home is going to be inside of images okay unlike me being an idiot that I am I put it not inside of images so of course I didn't have access to this okay here we go it's right there okay cool um so sorry there's tons of mysterious code and you're probably like what the hell's going on we don't need the cursor pointer we can get rid of that okay cool okay so now a lot of this is going to make sense all right so you saw when I took away line item Center watch it became so huge and massive right that's what she said but when I take it away and I hit save it's gone all right also this is what the media query part is doing all right let me remove all these lines of code so you and I can be on the same page cuz I coded just a little bit ahead of you but now we're back so no worries um let me just close this parent here okay and we're just going to code this thing up together okay so hit save um and if I hit this now we can see this icon right there okay beautiful mystery solved now inside of this a tag let's go span and uh let's give it a little color all right and uh we're going to give it this color okay so boom there we go that's good and where is this going to show up you might be asking here's where that's going to show up okay so inside of our let's go go to our navis component now inside of our navis component you see that we have added this a tag well what we want to add inside of that a tag is not just an image but actually a span tag as well that says home okay so like that the a link contains an image and a span tag called home so now this is what it should be looking like we got home right there okay and when we go to phone screen screen right we got home at the bottom which is pretty freaking cool how the media query Works magically and makes that happen Okay uh media query makes that happen at the bottom right like for example if I change that to top is going to make that happen at the top but we don't want that at the top we want it at the bottom okay there we go cool so now let's style that span tag right but the color home now has that little like grayish color that you can see let's go display flex and uh let's align items of course Center okay so that's just going to make sure that the text is vertically aligned how we want it now let's get out of this span tag and we're going to add in a media query and I'm just going to say hey my Max uh width should be that which is meaning a mobile device or a tablet or something of that nature and let's give it a in width of 70 pixels okay and then let's get out of let's get out of all of that and on Hover what I wanted to do is the following and on active here's also what I wanted to do okay the a tag specifically to the a tag on Hover here's what I want to happen and specifically does a span tag on Hover or active inside of the a tag I wanted to get just a slight color change okay all right now you can get lost in how it's nested it can get kind of weird but um it's a nice little touch okay watch this when I hover over this home Watch What Happens boom it's very very subtle just a very subtle shift okay that's all that's happening there so just a side note if you're you're watching this video right now there's a lot of weird things that you can kind of get tripped up on especially how things are nested inside of one another so like be on the lookout for that and just be careful when you're going through this right because for example here right it's the on Hover and on it being active inside of the a tag and inside of the span tag that's inside of the a tag have this color happen Okay so sometimes you can get lost very quickly and easily so just be on the lookout for that all right so now let's add um nav menus like a like the home menu that we added but we're going to add all of the rest of them meaning um I want to now add um all of these ones here my network jobs messaging yada y yada okay and so let's start working on that well for a couple of things we're going to need need all these nav items so we already did nav home so we don't need that anymore but we're going to need nav job messaging Network notifications and work so I'm going to hold shift click here select all of these and drop them inside of my images all right now that it's inside of my images I'm simply going to go to uh the top of my file header JS file let's go to our nav list and um all I'm going to do is I'm just going to keep on adding more nav list so for example example here I'm going to select this nav list component and I'm going to do the following okay so this is just be careful on this as you're following me I'm going to hit like I'm going to copy this entire component okay copy the entire component and then all I'm going to do is just replicate it couple of more times paste paste paste paste okay and how many icons are there let's go check 1 2 three four five okay maybe six but I think it's five if I'm not mistaken okay it worked on message UPS yeah so I think I'm fine pasting it five times um now let's go and start giving them those names so we have nav Dome now this one is going to be nav Dash uh jobs I imagine actually nav Das Network okay let's see what the first one is um in the completed version we have Network jobs okay so the next one is going to be jobs and then after jobs it's going to be nav Das messaging and after nav Das messaging is going to be nav Das notifications like so now you can see on the mobile version oh so nice looks so good on a mobile device let me actually move my face a little bit out of here so you can see that like wow am I pretending to look down right wow that looks amazing okay so there you go that is beautiful and when I go full screen I see them all up there okay and now I want to change what it says so for example where it says um home leave that as is but the span tag inside of the nav Network well we're going to go ahead and change that and we're going to say my network okay we're going to go to the jobs one and we're going to change that and we're going to change that to just jobs okay the one below that we're just going to change that to messaging and the one below that uh we're going to change that to Notifications okay so now in mobile device it is looking great and uh let's go full screen it's looking pretty freaking great that's exactly what we're looking for so our Navar is now starting to look really really good that makes me really happy so let's continue going forward and now add the activation functionality to this entire thing okay so how I'm going to do that is inside of nav list let's go where we have nav list and uh what I'm going to do is I'm going to do something special okay and I'm just going to do this to the home one none of the other ones for now okay I'm just going to kind of hardcode it inside of the home one and the functionality we're now adding is you see how this home one here is active right but these ones look like they're not active let's so we're going to add that styling to our app so let's go ahead and do that okay so navash uh nav list and to this nav list I'm going to add class name and I'm just going to call it active Okay and simply all we're going to do now is we're going to go and inside our nav list wrap okay so let's go inside to our nav list wrap right here okay and uh under our navis WP we're just going to add The Styling so we're going to do active so for our active class do the following for the span tag and right after that we're going to just do content blank whoops that's fun cool transform scale SC of X I don't know why it does that one oky doie and uh simply then border we're going to give it a border bottom of two pixels solid and let's go white- FFF cool okay so we're working on this functionality dope uh bottom I'm going to give it a zero top uh left zero position absolute position misspelled position okay give it a 200 millisecond ease in and out and I'll give it a border color of like this okay so now we have this going on here so now boom there we go I just had to hit refresh okay and there we go we got home it's going active when I hover over it that's exactly what we want and even on Mobile screen I can see home has that like nice little underline and um you know that's kind of what I expect to see on the on the home um you know the mobile app the mobile version of all of this all right so let's keep on going all right so now let's go ahead and add um add user nav menu and add work nav menu okay so we're going to add a couple of more things so for example here we have a user menu and then here we have a work menu okay looking thing so let's go ahead and add those two as well so first things first we're going to need the down icon that little tiny icon right there it's a little bit hard to see but it's that icon right there okay so we're going to need that um the other thing actually you know what let's just throw that into the images first going to need that the other thing we're going to need is the nav work menu so let's go nav dasw work boom going to need that um oh we already have that that's fine and then the other thing we're going to need is a user um SVG okay there we go there it is okay okay so now that you have all the images let's go inside of our header and start adding them okay so let's go ahead and create these components as well by the way so I'm going to go all the way under nav list but a within nav list wrap so right under the nav list ending let's go ahead and add user component okay and then right underneath that we're going to add our work component okay so these are the two components we're going to have now within our user component let's go ahead and add a couple of things so I'm going to add a a tag but I don't need an ah ref for this either I just need to borrow the link tag styling and inside of this a tag I'm going to need an image and I'm going to use the user. SVG okay like so um right underneath this a tag right underneath this image what I'm going to need is a span that's going to just say me okay and right underneath that me I'm going to need another image and I'm going to give it the drop down menu okay so far it makes complete sense because you got the user image right underneath that you got the drop down image okay so that's looking good now we're good with this part let's go inside of the work part work work work work work so now let's go and add a couple of things so let's go to a tag again we're probably not going to need any of the other things let's add an image inside of the work tag and we're going to add in the work image okay nav dork. SVG cool and also we want to add um a span tag inside of here and uh we'll give it we'll say work and within that span tag okay within that span tag I'm going to add another image and uh we're going to give it images down icon.svg like so okay cool now it's complaining hey user is not defined work is not defined hey no problem I like when work is not defined cuz that's how I live my life as a CEO let's go all right so we're going to do create new styling for the component all right so there we go and now I'm basically going to add my styled components okay that's all I'm going to do so I'm going to borrow my styling from our nav list okay that's how you can borrow styling from something else and uh for my work I'm going to borrow my styling from the user okay that's kind of nice let's just hit save for now um oh let's do Style with a small S I believe okay user is not defined okay fair enough fair enough we'll Define it there we go okay so on the mobile screen now you get this funny looking thing at the bottom right okay if you're not seeing it I'm just going to move this here going to get this funny looking image the bottom right and if I go full screen you'll see me and you'll see work so that's cool but that looks ugly so we're going to fix that okay so let's go here to user and do a couple of things and basically we're going to say hey the SVG inside of this a tag look we got to do something with this thing all right it's it's uh just unacceptable so let's start off with width okay let's try to control the width of this link tag okay and then uh let's also try to control the Border uh radius okay 50 5050 can go 50/50 with okay let's see hopefully that does something if it doesn't do something um I got another idea in mind okay so another thing thing we can do is uh let's go let's grab the image tag inside of here and give that a width of 50 24 pixels beautiful so now you see the image is actually quiet quite small all right so that's controlling the image that's good let's give it a height of 24 pixels all right cool cool cool and uh now let's give it a border radius of 50% that's it's going to add that nice little circular effect to it so you can already see it's starting to have that nice little circular effect that's great and let's go span tag and uh we're just going to align items in the center all right cuz that's just that's just how we like to do things around here all right and now inside of my work all I'm going to do because it's already borrowing tons of styling we're just going to give it a certain border okay give it the nice little nice little color so there it is and when I highlight it looks a certain way we got the drop down we got the me with the big fat Arrow this is pretty freaking cool it's looking great okay okay great work young Padawan so far we're looking good we're looking smooth we're looking clean so so let's just keep on rocking and rolling through this thing okay now we're going to add sign out functionality okay so let's go into um let's go inside our user because that's where sign in functionality is going to be added so my user is right here okay let's go right down there right underneath the a tag ending and I'll add the sign out component okay now this component before we rebuild it this is going to be this component right here when I hover over all right it gives me that sign out option that's what this component is going to be all right so that's what that component is going to look like okay so now let's go ahead and just build it out now inside of my sign out um I want to add an a tag again I don't need the ah ref and um all I'm going to have it do is say sign out and again I'm just adding the h tag to borrow the styling that I have added to it okay so hit save let's go down and let's create our styled component for sign out const sign out okay and we're just going to do styled div let's leave it empty for now and let's go inside of here let's uh let's go back let's hit refresh cool okay so we have something showing up that's a good sign now inside of inside of our sign out we're going to Let's uh go ahead and do position absolute let's go top by 45 pixels okay and um I'm going to pass on the drop shadow because again it's one of those like weird looking ones I'm just going to keep it simple here so sign out creates a box around we'll give it a white background and now let's give it a border radius of uh this okay so now sign now it has a little border radius around it right there that you can see that looks cool and under here I'll give it a width of 100 pixels okay and a height of 40 pixels okay okay so now the sign out is starting to get under control and not looking as crazy give it a font size of 16 pixels and transition duration this is going to give it that little effect when it comes up which it's not going to do right now but in a second we will add that so then it'll look much nicer text align and let's align it in the center display none that looks good okay so it won't display anything and then it'll come up on Hover okay so now let's go inside of our user which borrows from our style component uh Navas component so inside of user we're going to create a new thing and they're basically going to say on Hover do the following for the user all right now we're going to select use this fancy selector to select our sign out component okay and style it align item Center okay and I'm going to justify content inside of the center all right now we're having reference error so what's going on here cannot access sign out before initialization interesting so what we need to do is um we need to move this code up I believe let's take this sign out code and um Move It Up Up Above user okay let's move it right there and uh we should be good nice we are good okay because yeah I couldn't reference sign out cuz it wasn't defined yet defined yet so we just make sure we Define it right before Okay so so let's go back now when I hover over me you can actually see this drop down of sign out showing up that's a really good sign that's what you should be seeing right now okay dope so looking good so far now let's keep on going with this thing okay so we're now going to add a container and I'm going to basically add another component using styled components okay so let's go with that and we're going to add the hiring and hurry part which looks like this add right here right there all right that gives it also a LinkedIn esque feeling we're going to go ahead and add that now cool so let's go inside of Home JS all right and we're going to add that here so um going to be doing a lot of stuff so inside of this return okay let's just open this return uh create a container component inside this container component create a section component and then let's create an H5 and again let's create an a tag but uh um without the ah refs okay like so just to borrow the styling and then basically what I'm going to do is um just type in hiring in a hurry question mark all right and uh just like that okay and then underneath this H5 I'm going to make a P tag and um basically I'm just going to say find talented Pros in record time with upwork and keep business moving and put a period there save okay so I have a section inside of which I have an H5 and a paragraph tag cool now let's go ahead and just style this and um a lot of these are very common stylings that we have already kind of done so I'm going to like go through this much faster so our container is going to be I'm going to just keep it empty for now and start off with that I'll have my content is going to be style div we'll keep it empty for now we'll have section and um I think I'm going to make that section okay style section and again we'll keep it empty for now so it doesn't complain and uh there you go okay so now we have that text but you saw it was a little hard to see right it's kind of up here hiding okay and we basically need to push it down that's what we're going to do right now we're going to push it down so inside of my container I will go ahead and do give some padding to the top 52 pixels so now boom it just pushed it down and now I can finally see it let's give it a Max width of 100% like so okay cool and then um what I'm going to do inside of content are let's give it a Max width of 128 this okay let's go down and I'm going to do margin left Auto and also we're going to give it a margin right um and we're going to do auto okay cool and uh inside of section um let's do Min height 50 all right so let's give it that 50 pixels let's give it a padding of 16 pixels uh box sizing let's do content box on this cool okay so that just centered Center aligned it all right now it's perfectly smack in the middle of the center uh let's give it a text decoration and we will actually give it an underline okay kind of like an actual link we'll uh enable Flex on this and justify I content to be in Center okay there we go okay so we'll do media queries here in just a second don't worry for H5 I'm going to give it a special um styling let's go ahead and do this okay give it a little blue for hiring in a hurry that's that right there okay and the a inside of here um let's give it a 700 beautiful okay let's get in outside of the H5 tag now and uh let's go into the P tag and style that and I'm going to say hey give me 14 font size 14 and uh let's also now do some coloring on this okay great G gives me makes it a little bit darker and uh let's uh make the text Bolder right so 600 makes it pretty bold and then let's get outside of the P tag and finally let's give it a media query so I'm going to go Max with 768 again mobile devices where you at mobile devices direction we're going to give it column and then padding of course will be 0 by 5 pixels okay boom there we have it that is looking gorgeous okay beautiful hopefully you got to that with me and let's keep rocking and rolling all right just to blow some of your uh some of yours Minds okay so to flex on what the this uh media query does right so for example imagine if I wanted to make this red every time it was a mobile device but like if I went full screen uh it made it um it made it black okay uh so what I can do is I can actually select cuz this is a P tag right here so I can actually select this by doing that okay and then how would I make it red think about that how would I make it red all right so color red save okay so now notice that it's in red but when I go full screen mode desktop mode now it's black okay so it's basically saying this again is saying mobile devices do the following now I can also you know if I wanted to do something like font size make the font size 100x on mobile the font size would be crazy in red and on full screen it would actually be completely normal that's kind of crazy it's almost like you have two different apps right that's pretty freaking cool so um I'm just going to select this P tag and uh remove move it and we should be back to our normal uh healthy looking app all right now what we're going to do is basically we're going to start to add some of these parts so for example in the finished version you see we have um we have these three things happening over here okay so this is like one this is two and this is three and this is our left side right this is our middle and then this is our right side okay so basically what I'm going to do at this point is I'm going to divide up the page in these three things and I'm going to use actually grid uh layout instead of flexbox layout to do this okay so this going to be really cool let's go ahead and make it happen pal okay so let me go to our our app cool let's go to home JS okay cool we're already here all right so let's go to um let's go right underneath section and right underneath section I'm going to add my component called layout and inside of here I'm going to make a div and call it left side here this is going to I'm going to put Main and another div and we'll just say right side okay and again it's complaining I don't know what layout is but this time you know what we need to do okay what do we need to do we need to go go downtown and style that damn component const layout style div all right save and then let's go here okay so right now you got left side Main and right side not exactly where we want it but it's a good start and uh here's what we're going to do I'm going to start with display grid okay well that didn't do anything it's okay buddy hold on hang in there all right we're going to call them the the areas we're going to call them this left side Main and right side okay boom so it's divided up into three areas all right so now what I want to do is I want to Define how many columns I want right so we're going to go ahead and do that now so let's go here uh and I'm going to give it columns and I'm just going to say min max give me this okay right there let's go okay and always like click and watch what it does right so right now it's doing something really really bizarre but watch what happens once we're done with the whole freaking thing okay I don't know why I'm going autocomplete always act so freaking weird okay let's go here here min max 300 pixels okay so let's go here um min max 05 okay there we go so now they're like overlapping a little bit but we got left side Main and right side kind of like how I want them but uh a couple of things I want to tell them I want to tell them hey I want to have a column gap of 25 pixels okay cool and um another thing I want is I want a row gap of 25 pixels okay let's make sure we keep refreshing cuz sometimes The Styling acts a little weird and uh grid template row let's go Auto on this thing cool okay and U margin I want to go 25 pixels cool so that gave it some margin from the top great and then let's go ahead and again add our media query so what is that mean that means that uh mobile device we want specific things to happen Okay display Flex all right Flex direction we're going to make it go column instead of like row by row right so for example here it's going to go like multiple columns okay uh when I go into this now it's like that each row is a column okay just one column per row and um padding we're going to go zero by five pixels like that cool so we gave it a little push and a shove from touching the screen so much on the left hand side okay and uh with that said we're looking pretty good and that allowed us to divide the page into three and you know honestly I'm just going to comment that line out cuz that line is giving me the creeps with that said this is looking good and let's keep on rocking and rolling okay so so far looking good um now let's actually go ahead and we've divided the page now we're actually going to start making the main and the left and the right components okay so let's go ahead and start doing that uh we're going to try to keep it pretty freaking simple and pretty pretty um empty for now okay so let's go ahead go inside of components and create a new file and we're going to call this file left side. JS um and in left side JS create another component okay called uh inside of components call it main.js and let's also create another component and we'll call it right side. JS okay okay then inside of uh left side just go ahead and do import styled from styled components okay and uh for left side we're going to do the following all right so let's fix this one because we made a little uh typo so just rename and all I'm just make it a small s okay there we go so uh complete constant left side I'm going to have props like this okay and uh return inside of the return we're just going to put a container and in that container just say the word left side like that that's fine okay and we're going to create the style component for this so it doesn't freak out and inside of here we'll do grid area and we'll go left side just like that okay and again export default left side cool so save save save save save now we're going to do this let's go to Main and um in main I'm going to paste that code and everywhere it says left side I'm just going to replace it with main that's it okay whoops so let's replace this with main okay and and let's replace that with main cool and this like that so wherever it says main replace it um and now copy main go to right side paste this code and everywhere it says main you know the drill by this point uh just replace right side replace main with right side okay like that okay and then just go hit save um cool and last thing we want to do is we want to go to home JS okay and under layout we want to replace all of these divs and remove them cuz we don't need that anymore instead we're just going to do left side all right and um make sure you autocomplete it because autocomplete will automatically import it for you as well uh why did it do left side like that oh because um okay well anyways it's it's left side with the small s like that okay we're also going to do main just like that close it and then we're also going to do right side make sure that when you write these three that you import these three as well um and now it's saying styled is not defined in any of them well what does that mean so let's go to left side and let's see what it's saying okay so lowercase the styled from styled components and that should be good to go I believe save go here uh make it styled with a small s save hit refresh and um yep that's looking great let's hit save like that cool so we're good so far and now let's actually add a art card component on the left hand side all right so let's add the art to the cards now so let's go ahead and do this okay so first things first I'm going to go to uh let's go to left side cuz that's where we're going to actually make this happen and I'm going to create um let's create a styled component and I'm going to um called Art card okay and let's actually get it started with something in here so instead of saying left side in there I'm going to do art card just like that all right and um within this I'm just going to say card okay kind of like that so you should have card here okay now inside of this we'll do text align and I'll do Center okay so boom there we go looking good so far um now let's go overflow hidden all right so it won't like bleed off the screen onto the sides okay there we go and um let's go background color Boom Like This give it a border radius of five pixels cool so now we starting to look like a card right um and we have that background right there and now the the the little radius is coming in that's clean and uh let's give it a little transition box Shadow 83 milliseconds okay cool and now let's give it a position relative border I'm going to give it none okay and um I can give it a complicated looking box Shadow but I think I'm just going to pass on that for now so I'm actually going to add the Box uh Shadow because I think it does make it kind of look nice and so let's go ahead and do that okay I'm going to give it a um the only reason sometimes I want to skip it is cuz it looks like this mysterious code but again a lot of it is autogenerated um you know and even when you should I encourage you to use like online tools for things like box Shadow and stuff like that okay all right so now we got the art card let's go ahead and work on the user information so we're going to need a couple of things to make that happen all right so now you're going to need two photos SL SVG files we're going to need photo this one right here with the camera icon and we're also going to need this card uh background card okay so let's go ahead and uh take both of these and I'm going to um put them in my yoink okay just as a place a right a pit stop before I drop them into my images so boom just added them right there all right so now that we added those images uh let's go ahead and do something with them so I'm going to um am I in the left side already okay great I'm in the left side component already perfect now uh inside of my art card just so you have an idea what we're doing we're going to be building this thing out right here on the left hand side okay so let's go inside of our app that we're working on currently inside of our art card uh component remove where it says cart instead we're going to create a new component called user info all right I'm going to hit tab on this and inside of here I'm going to create a new component called background let's hit tab on that that should complete it and inside of this um actually let's uh kill the card background right there okay and so inside of user info I'm going to have card background I'm also going to have a a tag with no hre just so I can borrow the a styling and uh we're going to have photo which is going to be a component and then I'm going to have link just like this it's going to be another component and uh it's going to say welcome there okay and then I'm just going to end it so slash end just like that all right so I got user info and then in their card background and the a tag okay now right underneath this a tag I'm going to have another a tag again with the no hre okay just like this inside of this a tag I'm going to have add photo text component and that's just going to say add a photo just like that okay now there are tons of components that we need to go and make so let's get go ahead and get started it's like three or four maybe more so let's go user info and I'm just going to do style div let's leave it empty then we need card background um and I'm going to do something similar which is going to be Style div let's leave that empty let's go cons photo and let's go here let's leave that empty and then um let's go cons link for the link component and again this is it div we're going to leave it empty for now and add photo text okay let's leave that empty for now as well okay user info is not defined and boom welcome there add a photo that's what you should be seeing right now cool so now we're going to start adding all the styling in here so for user info let's get started with that so couple of things are going to be happening here we're going to give it a border bottom of one pixel solid okay there we go so that gave it a little nice little drop shadow here makes it look beautiful so it's a border bottom it didn't at the border anywhere else 12 pixel 12 pixels by 16 pixels okay so now this is much more centered we have padding going left we get padding going this way and we got padding going that way okay so far so good let's go word wrap and we'll do break word cool and uh let's go ahead and um let go ahead and do this cool so sometimes some of this we might not need honestly but it's okay I'm going to leave it here word break uh break word cool okay so let's go ahead and uh let's keep on going okay inside of my card background we're going to now okay so first first of all we're going to add a background image to this okay so let's go background and give it a URL and that's going to be imagescard background.svg cool close it put a semicolon good hit refresh refresh cool so that image is not showing up but that image is going to start showing up in just a little bit so let's give it a background position Center let's go give it a background size of 462 pixels let's go give it a height of 54 pixels so now you can start to see that image show up and let's give it a margin of uh -12 -12 0 so now that card is starting to look pretty perfect pretty freaking perfect okay pretty and perfect there we go so card background we're good on okay now let's just go ahead and add photo in there so photo is going to require us to do a bit of styling but it's going to look so freaking beautiful when it's done so going to start off with not having any box Shadow uh for background image let's go ahead and choose the photo image so images I'm going to do /o. SVG okay now we're going to make this thing show up in just a second so let's give it a certain width let's also give it a certain height so now the image is showing up cool now we're going to start making it look better cool height I'm going to give it box sizing border box background clip content box background color let's go white okay background position center cool so that changed how the image was looking going to give it a background size of 60% beautiful and then we have um background repeat at no repeat actually cool so because we don't want it repeating over and over again we just want one camera and that's how we get it now let's go and do border and for Border we're going to do two pixels solid white clean okay margin let's give it a margin of 30 negative 38 pixels Auto 12 pixel like that damn look at that one line of code and beautifully smacks that in the middle guys like isn't that beautiful when you have these little touches and they all keep adding on and then your front end just m just beautiful all right and then uh let's give it a border radius of 50% now we got it round nice and round just how we like it okay now let's go inside of our link and make that do good things let's go 16 pixels for the font size line height will go 1.5 okay that added some uh line height to this okay let's go here and go color and we'll change the color just a little bit so we're going to go 0 0 0 0.9 cool and then after that we're just going to choose the font way to be kind of boldish okay let's go 600 so welcome there boom a little bold man looks so nice right on the left hand side is looking beautiful when I go in this mode it looks great in Mobile you know most people get lazy on the mobile but not us we make sure that that mobile version is uh is looking clutch you know is it distracting when I'm in the center probably I'll just keep myself to the side for now okay all right so that that looks great okay and then U add photo to text at photo text let's go give it a color and let's start off with this okay cool we got a little blue action going on let's give uh some margin from the top so give it this little separation from welcome there right it was way too close and feeling a little uncomfortable and we got it out of there give it a little font size of 12 pixels line height uh again line height gives things some nice breathing room so it just does not hurt and then we'll give it a font weight of 400 makes it just a little bit Tad tad bit darker if we go 700 that's a little too much but 400 is just just right and just enough so perfect that's looking great now let's add a widget component inside of our art card okay so let's go ahead and do that now all right now let's work on our widget okay so first things first we're going to go inside of our uh left side component great and then here I want to add my widget okay so right underneath the user info going to add this widget right there just like that okay uh this is going to be a widget component open up the a tag uh okay and then uh we're going to create a div inside of that div I'm going to have uh some span tags so Spandex and this is going to say the first span tag is going to say connections and then the next span tag is going to say grow your network just like that okay now I need to close that a tag that's why it's complaining great and uh I need to actually add an SVG inside of that so what I'm going to do is I'm going to copy this SVG that I'm adding okay and um we're going to call it the Widget icon all right so I'm going to go inside of my so let's take this Widget icon right over here okay and um I'm simply going to add that to my images so drag and drop cool so now once you have that SVG SVG we're also going to add in our item icon okay that's another one we're going to need so this item icon one the little bookmark looking thing okay so let's also get that and add that to our images so drag and drop cool so we got that SVG going now let's go back to our left side and uh here's what we're going to do okay inside of this a tag inside of this um actually where are we planning to add this where am I planning to add this so let's see here we got where's my div action going on grow your network so right underneath grow your network um this actually needs to be wrapped up in a div I believe okay so let's go here yeah so this this needs to get wrapped up in a div okay boom just let's do it like that okay so widget a tag div span cool and um right outside of this div anding is where we're going to make our magic happen Okay so let's go outside of this div and um I'm going to do image and the image source is going to be that SVG file that we talked that we just added okay and uh after where the widget ends we're going to add in another component called item within that we're going to have a span tag within that we're going to have another image or a image and that's going to be/ images item ien icon.svg okay and just so you have some idea what is happening is we're going to be doing a lot of this stuff so we're going to be adding this we're going to be adding this okay so there's a bunch of stuff happening like that so hang in there Buttercup it'll be great and if you're watching this and you're enjoying this so far do your friend of favor and smash smash that like button and keep that energy highing here okay I love your beautiful face and let's keep going okay so widget we're going to need um to create a style component okay and just for you guys I didn't do a ASMR version okay cuz you guys didn't like that very much so let's go ahead and uh let's add in a widget just like this and we're going to do two things we're going to add in widget and we're going to add in item cool so widget component just in the start was going to be styled div I'm going to leave it empty and then also let's add in um for item okay let's go item is going to be a styled a and just start off with empty so let's put slash here by the way that was a little typo so boom slash not Dash cool so now both of the images should be here right there okay if I full screen this thing you should see them connections grow your network and we got both of our images right cool okay so let's go ahead all the way down and start styling this uh widget okay so that's going to take a second actually to style cuz there's a couple of things happening here let's go B border bottom one pixel solid all right beautiful uh let's add some padding to the top of this thing cool and let's add some padding to the bottom of this thing beautiful let's go ahead and uh style the a tags inside of this thing and I'm going to give it a text decoration of uh of none let's go to display Flex cuz we're going to need that justify content and I want to give it space between okay so you saw how this thing got pushed right that's kind of what we want this on the left side this on the right side and there's space in between that's why we write that align items Center and we're going to give it some padding cool okay so on Hover it gets darker and it kind of gets highlighted okay whoops my face is blocking pretty much everything great so when I hover boom boom looking pretty magnificent my friend uh background color on Hover we got some action going on okay now let's go under hover and let's do something okay so let's go display flex and we'll go flex Direction and we'll go column okay so connections and grow your network got written out on separate lines because this is a span tag this is a span tag and because of doing column they both got pushed onto their own columns let's go text align and we'll go left so now connections and grow your network are you know evened out more and within this let's uh style our span tags even further so let's go give it font size of 12 pixels a little bit smaller let's give it a line height of 1.33333 so we got some spacing going on in between some room to breathe it's like when I'm sleeping with my girlfriend and I just want to like not spoon for a second you know I'm basically giving a little line height in between cuz sometimes it just gets way too hot um first child uh AKA Mona first no I'm kidding all right here we go let's give it a color rgba it's a it's one of the members on our team and I don't know if we're supposed to say this on YouTube but she's having a baby so we're excited we're super excited for her we're pumped we're super happy let's go here let's go ahead and um let's go 0.06 beautiful and then um underneath the first child let's go with a anth child whoops whoops whoops whoops oops anth child just like that and let's give it woo what happened here just like that okay there we go so now these styled things have certain ways of how they're colored okay so that's good and uh let's close out of all of this and then the last thing we want to do is we want to give certain styling to SVG hopefully that actually does something cool um so there we go so now this component is looking really beautiful I mean like look at it right on the left hand side connections grow your network that little icon right there I mean just fine little touches and this entire app is coming along so freaking well I mean like just look at this thing right it's beautiful so that's great now we're going to go ahead and style our item component right cuz that's another one that we were going to do so let's go ahead and do that one okay where's item component it item component has the item icon so I imagine it's this one but hopefully we're not wrong let's go let's give it a border color whoops I mean technically that was correct code um okay that text align it to left I mean do we even have text in there oh yeah let's go ahead and add text in there okay so let's go to let's go to our item we have span and we have an image and right underneath this we'll say my items okay just like that so what did left Al line do let's see if I delete that line what happens absolutely nothing perfect great just how I like my styling to do things um padding let's give it 12 pixels font size 12 pixels is great great and then let's go display block okay nice so now it's looking perfect um I want to give it a certain let's let's work on the span a little bit so first things first I'm going to start it off with enabling Flex on it and then let's go and vertically align everything with the line items just play with the color just a little bit okay it just makes it kind of like a dark black okay and then let's get out of here right there and on Hover I want to change the color just like that okay boom boom boom boom he hey nice look at these cars now this thing is coming look at how much we got completed it's looking great you you are great thank you for being here so far and I really I mean in all seriousness I really appreciate your support thank you so much and let's keep going this one is for the boys and the girls okay great progress so far cupcake but uh now is not the time to quit now is the time to go harder so we can finish it and make your portfolio look amazing so you can get that dream job okay right now is not the time to quit so let's keep on rocking and rolling uh let's work on the community card okay so first things first we're going to need this image that plus sign uh finished version of that looks like this this is going to be the community card okay so that's what we're going to be working on so let's go ahead grab that sign and add it to my images folder okay all right so once you got that plus sign let's go to the left side and uh let's add that thing in okay so go to let's go to under our art card where it ends so where does it end right there let's go under there under where and uh let's do community card component hit tab hit a tab okay so we're going to now borrow the link tag styling just like that and inside of our link tag I'm going to hit make a span and the span is going to have the word groups in there okay and uh now I'm going to make another a tag that's going to be empty just like this inside of here we're going to have another span and inside of there I'm going to have the word events and right underneath that I will have my image and um my image is going to be the plus icon SVG that I got okay so again Community card I got my a tag here my a tag here with some span with the span tag in there okay two a tags with span tags in there and um we're going to need just essentially uh few more things okay so let's let have another a tag blank and inside of here let's have a span tag that says follows oops let's say follow hashtags okay and then right underneath that I'm going to have another a tag that says span and it'll say discover more just like this okay so we got one a tag two three and four each a tag has one span tag one 2 3 4 so four a tags four span tags got it everything inside of the community card cool good all right so now let's go ahead and make our styled component called Community card so let's go and let's have it borrow from Style card let's hit save and Community card is not defined cool there we go so now we got this ugly looking thing right here but hey at least it's right here and it's ours so that's good plus sign so now let's go inside of this thing and let's start working on it so let's add some padding cool that gives it some breathing room let's text align everything to be on the left that's better let's make it display flex and you know what uh I'm going to give it a going to make it go in columns cool aha looking way better clean let's go down and uh let's start styling the a tag so let's select the a a tags now color black cool my girlfriend's favorite color uh let's go like this boom that padding gives it nice breathing room room from the left and from the top Let's uh play with the font size and give it 12 pixels and then I'm going to do vertical align on this thing and let's see if it actually does anything I don't even think we need this thing Okay cool so let's just leave that out for now cuz otherwise it just gets confusing cool let's go and go on Hover let's add some functionality to it so let's make the color go and do the that blue thing okay so when I hover over it each one of these highlights yeah boom boom boom great okay cool now under hover what I want to do is let's go to our span and let's go display Flex let's go align items and I'm going to vertically Center great so now events is looking good because before it was looking stupid with the plus sign let's go justify content and I'm going to go space between cool so now that plus sign has a space between and it gives it nice little breathing room there okay let's get out of the span tag and uh we're going to grab the last child okay and we're going to give it a color okay we're going to make that gray text decoration of course is none border top let's go one pixel solid with this color I think cool so this border top has done that thing right there that like line that partition that we got okay so and underneath this I'm going to add some padding great and uh let's add in a little hover and 0.08 cool ooh little too dark let's lighten that up 0.08 baby yeah blue blue blue hover nice man this is looking freaking slick search bar looks great my icon here looks great the front end is it's looking it's looking good looking pretty freaking good okay all right I'm in like 200% zoom on my screen but you know so yours might look slightly different but that's okay all right so really good progress here and uh uh I think let's keep on going all right so next up um let's go and and add the follow card component on the right hand side well what is that what is that Cy it's going to be um some of this all right the follow component so let's start working on this thing now boom so let's go add follow card component so I'm going to go to my right side component now and inside of my right card component I'm going to remove what we have here and instead I'm going to add a new component called follow card okay so inside of my container I'm going to have a follow card component now inside of here I'm just going to write the text right side and of course it's going to complain it doesn't know what it is no worries we're going to create a follow card component now or style component now okay so so far it should just be saying right side and not really doing anything okay no worries now let's go text align let's go text Aline and we'll go Center uh overflow Let's Go hidden okay great um let's go and add margin bottom 8 pixels background color okay so now the right side is having a little like border radius around it okay it's at the bottom we'll fix that but that's what you should be having so I just zoomed out a little bit from my app right side should be there on your mobile type of view and on full screen view um right side should should be kind of at the bottom right right now Okay cool so uh we added a little border radius that gave it the rounded Corners let's go ahead and do position relative and um let's go border none and I'm going to give it a box Shadow and let's go like this with our box Shadow okay mysterious mysterious Shadow and then padding we're going to go 12 pixels cool so now right side should be kind of a lot more visible and uh much bigger okay all right I have to zoom out a little bit and get to 125% and that's that allows me to see it okay now we're going to add a title inside of our card so let's get our feed icon and we're going to put that in images because that's what we're going to need now cool so with that add icon on the way let's go back to right side and um inside here we're going to add that go let's go where we had the word right side written and remove it and instead we'll replace it with a component called title and inside of this component I'm going to add a H2 and this H2 is going to say add to your feed let's hit save so it auto formats it I have preder extension uh you can get the preder extension uh for from here if you want your autoc completion to work and also for autoc completion to work you should go to your um workspace settings okay so just go to your settings how do I even get to my settings go to your settings and um have format and do default formatter prettier and also format on save so once you do that your formatting should start to work okay cool um so add title now inside of our title I have my h2 tag and underneath that I'm going to add my image and my image source is going to be this one right here and all the way at the bottom we're going to now add the styled styling for this component cons title and I'm going to say inline Flex on this thing so right there okay great let's go down align items okay and I'm going to justify content let's go space between that should space things out for us cool let's go ahead hit refresh great and let's go font size and I'm going to go 16 pixels all right and WID 100% beautiful and again color okay so that gives it a little gray add to your feed Okay add to your feed that's what that should look like pretty simple all right so we're good with that and now we're going to add feed follow list okay that's what we're going to do so that's going to add M multiple more things this is going to be the big one it's going to add a lot of things cool so great now add let's add the feed list okay so under the title I'm going to create my feed list cool so let's go ahead and do it like this and as a matter of fact do I even need that other um add to your feed stuff don't really think I need that anymore actually let's add the feed list underneath our title okay so leave the title as is and underneath that let's add our feed list okay just going to do this it's kind of like easier to see all right so let's go feed list component and inside of here I'm going to have um here's how I'm going to do this okay let's go there keep the a tag empty inside of here I'm going to have an avatar component whoops an avatar component like that and um underneath this I'm going to have a div and that div is going to have a span tag it's going to say Linked In Like This okay uh underneath that let's put a button that says follow cool so feed list um list okay the LI inside of that we have a a tag that's that's going to have an avatar component then we have a div that has LinkedIn and then a button that says follow cool all right so underneath this let's Get Out Underneath this and let's create another list okay inside of there we'll have another a tag again let's remove the a hre um cool let's put our Avatar component again and let's go div on this thing span I'm going to go video cool and then I'm going to go button and this button is also going to say follow great all right now it's like hey I don't know feed list I don't know Avatar so no worries we're just going to go ahead and uh create stylings for them and this is going to be a styled uh UL okay unordered list and then we're going to to also create a styling uh for Avatar let's do that so now you should see on on the right hand side we have add to your feed LinkedIn and then video cool now this feed list let's go inside of it and let's go margin top 16 pixels and we'll go display flex and align items Center great it's looking good margin will give it a 12 pixel so that gave it again some Breathing Room between Linked In and the word video I'm going to give it a position that's relative and font size let's go 14 pixels on this thing so it's going to be on the smaller side and then let's select the div just like that and let's go display Flex in there and I'm going to go flex Direction column on it okay to just make sure that the follow button is underneath where it says LinkedIn and video okay and uh let's get out of this and and here I'm going to now style the button so background color let's go transparent color okay A little gray these are some ugly buttons right now but I swear they're going to look good by the time we're done with them button looks goofy okay and they're getting uglier by the second okay padding 16 pixels okay fat buttons now and uh we're going to vertically align them let's give it a little border radius so it has slightly rounded Corners that's better box sizing I'm going to do border box font weight cool I'm going to justify the content to be Center let's give it a Max Max height of 32 pixels A Min height actually I'm going to give it a Max width instead of 480 pixels text align Center and outline none great so looking good so far I'm liking it okay and now we're going to go and do this stuff with the Avatar okay so we let's get out of this uh and we're done with the we're done with the feed list let's go inside of our Avatar one now and inside of our Avatar we're going to add the background image let's give it a URL and um I'll show you guys this image as well but uh this is what it is just type it out with me.com ch1 b4v oh my goodness I'll try to make it easier for you and add it somewhere inside of uh uh GitHub but this is the image okay it's kind of ridiculous I'm sorry but that's that's what it is okay so you can type that out or uh maybe we'll put it in our in my GitHub repo so you can kind of have access to it cool so boom let's go background size and we'll do contain background position Center let's go no repeat and width of 48 pixels and then let's go height of 48 pixels okay great coming along okay coming along so that's good so far by the way if you're wondering what that image is it's that like big plus sign that we have in our final app so let me just show you it's that one right over there act actually I think I got the image wrong myself so this is what it actually is now boom we got that hashtag symbol right over there okay that's what that is so now that's looking better all right now let's add recommendation component and add a banner card cool so let's go ahead and do that baby girl all right we got the right icon and um that's actually do we have the right icon did we add the right icon it's it's this one right here beautiful looks kind of silly did I add it I can't remember let's drop it in right here again boom I mean looks like I never added it before okay now that I added that let's go back to um our right side so let's go right side and then inside here underneath the feed list component once we get out of that one let's go ahead and create a recommendation component and under my recommendation component I'm going to go view all recommendations okay and underneath here I'm going to add image and let's go images slri icon D SVG cool so and now it goes hey recommendation is not defined well not a problem my friend let's go all the way down wait what's Happening Here recommendation wait I meant to do this view all it should be wrapped in recommendations the image there we go that's better okay in recommendation let's create a new style component for it recommendation and we're going to go styled a cool let's just leave that now I'm also going to need a banner card okay so let's go and um add the banner card right underneath the follow card okay so let's go Banner card just like that and um inside of the banner card I'm going to add an image and that image is also going to have a really annoying Source all right I'm going to paste that in right there all right so again I'm going to try to give you access to um the image but for whatever reason if you're unable to get it um I'm just going to paste that image right here um so you can see it okay it's going to be this image and this is the URL um yeah there you go okay but I'm going to try to make it easy for you guys to get it so I'll work on that so Banner card um yep that's it for the banner card and then now we just have to create styling for it okay so let's go all the way down for Banner card and let's go Banner card and for styling let's just um inherit our styling from follow card cool let's go here and refresh great let's go in our recommendation and go color give it a little color for our recommendations our blue color so view all recommendations now has that blue color that you can see and it's looking good okay now let's go underneath here let's go display Flex let's go align item Center and font size 14 pixels cool so just made that a little bit smaller and then for Banner card what we're going to do is we're just going to say hit image make the width of it 100% And then make the height of it 100% and that's it okay that is it oh by the way um I was wondering why my right side was messed up I in my file um which file am I in right now I think right um yep so right side JS inside of this file this was like at the bottom right and I was like why is this the bottom right so um this is a small typo okay so it's right side lowercase okay and that actually brings that to the top right okay so make sure you have that right all right that ad image is acting a little funny so we're just going to keep going and then we're going to have that image show up okay but for now uh the banner card I'm not going to worry about it I'm just going to uh keep rocking and rolling okay so just bear with me and let's go so now we're going to add a common card compon component okay so let's go inside of main um and in here we're going to basically create that component let's go here const common card okay and we're going to do this okay and uh text align it to be Center I'm going to overflow hidden margin bottom all right this is going to be helpful for the share boox in just a second but just um let's keep keep going with this hang in there with me and it'll make sense very very soon okay so we're going to basically add in margin bottom eight8 pixels to this thing background color and we're going to we're going to actually inherent from this okay cuz this is going to be our common styling and then we're going to inherit from this card um let's go border radius and go 5 pixels I'll go position relative border none and then we're going to do the Box Shadow game of that RGB that and cool so now we got our box Shadow our box Shadow is good to go and uh let's go ahead and actually start using this okay so I'm going to go into my container let's remove Main and instead of main we're going to create a new component called sharebox inside of sharebox I'm just going to write in the word share and then uh let's create a style in for sharebox so const sharebox and I'm going to go and uh inherit I want to inherit my styling from common card okay and then let's go and do display Flex Flex Direction I'm going to go column okay and uh now we got the share component showing up right over here okay that's perfect that's what we want the share to be showing up right in the middle color okay so that gives it a very light gray I'm going to margin like this cool and then background white okay so sharebox is looking good we're inheriting the share boox features uh from our other uh component called common card okay so now in our sharebox we're going to be adding a bunch of things okay what is sharebox you might ask well that's a really really good question so let's actually see what sharebox is so sharebox I believe is going to be our um this one right here this is our going to be our share boox okay we got photo video event and article in there okay that's what we're working on right now so um AKA our post box okay so let's add those things in I'm actually excited to build that component out that component is going to be a lot of fun and that component is going to have some really dope models that go along with it okay so get excited so first things first I'm going to need a couple of couple of icons all of those icons actually so I'm going to need my article icon that one right there I'm going to need my event icon so let's go and find it starts with an E Event icon I'm also going to need my photo icon look for a p photo icon and then I'm also going to need my video icon where is that right there cool so let's take these I'll open up my public images and doom drop it in right there pop it like all right let's delete this one cool all right um so this is good now um let refresh so we got all of our images not okay that's good let's go to main JS now and uh in our main file we're going to now start adding all of this okay so under share boox I'm just going to add in div and inside of the div let's add in images and um let's add in our user SVG okay so that big that's a big image right there that we added cool it's taking up the whole screen right now but that's okay we're going to fix that soon and then right underneath that we're going to do button and say start a post cool so underneath that we're going to have another div inside of that div we'll have another button and then inside of that button we'll have another image and then this image is going to have our photo icon.svg okay so like look right underneath that user image we got this thing going on right here okay doesn't look like this right now but we're working on it okay we got the image part down and we got the photo down now we're going to take that image and we're going to control it soon cuz that image is out of control right now we're going to control it don't worry okay and uh and you'll see how that happens okay so I got my button right here with an image inside of it and uh right underneath this uh image actually let's add in a span Tag and Call say photo cool um so now that's looking good underneath this button let's add in another button and and this button right here is going to have another image in here this image going to be SL images event icon.svg just like that cool so that's event um actually we got photo icon.svg and this one let's make it video icon okay and then the span tag right underneath it is going to be video okay then let's have another button hopefully you're getting the rhythm of this okay and then inside of this button we're going to have image and we're going to have slash Images slash Images slash event icon.svg okay and then underneath this image we'll have span event just like that cool and lastly I'm going to have another button which is going to have an image inside of it that image is going to be um I don't know where it starts writing goes crazy slash Images slash article icon.svg okay and span tag here is simply going to say write article just like that now let's go and check it out W all of them are right there that looks great making progress photo video article we got the whole shebang in here okay cool and then what we got to do is we got to start adding styling to it so let's go to our share boox and underneath our share boox where we added background white we're going to add an additional styling okay so let's create a let's create uh select the div not create and uh for div we're going to style the buttons like so and these autocompletes are painful so this button is going to have the styling of outline none cool underneath here we're going to have color Okay font font size let's give it a 14 pixels right all right so underneath this let's do Min height of 48 pixels cool background transparent okay so caught the caught the crazy thing all right so sharebox make sure the whole freaking thing is wrapped in sharebox okay that that's the eror okay this is why it's important to catch these errors boom okay now um if I uncomment this out cuz I commented it right now cuz I was like there's literally no difference that's happening okay so let's just go line by line here and see uh whoops let's just comment oh it comments out the whole um thing at once so let's try like that okay so I'm going to uncomment this color okay that made it a little bit gray I think you can see that right that made a little bit gray okay now that made the font size a little bit bigger right uh line height cool they gave it a little height cool let's go Min height boom We Got A Min height action going on and uh lastly but not leastly let's make the background transparent okay so clear clear that out great now we're going to add a couple of more things to this Okay cool so now under background we're gonna make sure that border is none okay so now the border is gone and it's starting to look a lot better yeah so boom that's that's looking beautiful let's go display Flex nice that looks a lot more beautiful now clean and then let's go align items Center nice font with weight should be 600 yeah that looks great that looks great all right we're doing good now underneath this button let's get into the first child and uh display Flex okay so we're starting to control that image a little bit align items Center okay let's go padding nice some more control on that uh image let's all was a good sign now we're going to get into really controlling that image boom already looking better baby uh border radius of course 50% will give it that nice circular feel and then margin right 8 pixels uhhuh look at that we're getting we're getting somewhere with that now we're getting somewhere with that now so let's get out of that image now and uh now let's dig into the button okay okay so you saw what margin did right it gave it more margin from the top in this case we're going to have Flex gr one and then let's go border radius 35 pixels cool okay and uh let's go on and go padding left my bad left 16 pixels cool okay so far so good let's go border one pixel solid and then we're going to ENT Al give it that color right there okay so now you can see start a post actually has a little border around it right and how did that happen so for example if I remove border radius now look it looks square but if I put that border radius there boom it's looking nice and circular like that okay now let's add background color and we'll add White cool and then text align and I'm going to text align everything to be left great great great great great great okay and now let's get out of here and let's deal with the nth child uh-huh look like that all right and we'll go display Flex yeah so beautiful it's coming together Flex wrap wrap beautiful justify content space around so we'll give space around ooh that looks clean okay and then underneath here we'll go padding bottom okay so you saw how it gave it some breathing room from here right there gave it breathing room right there okay and then the button the buttons here image uh the the image inside of the buttons okay let's go ahead and control that zero cool that controls it that's great great so so take a look at the images right here these images boom and I add that line now those images have some margin from the text cuz they were initially way too close all right now let's get outside of that image and let's deal with span and here boom and now we got the beautiful blue action going on amazing amazing you guys okay that was um absolutely incredible work and um you know I just want to say that I'm proud of you for getting up to here and making such great progress so far you've been absolutely amazing but we're not done yet and we got a lot of way to go for example you know we I mean as amazing as this is looking already right and I bet you even completely forgot we actually have a freaking homepage right which is completely mobile responsive by the way okay and um if I hit slome now we get redirected to home right so this is all the front end functionality and this is great but remember we still need to add more things to it like for example we still need to be able to add Firebase to it so we have login and log out functionality from the homepage we still need to be able to add uh re react router redirecting you on login to this page and then we need to add more functionality around being able to write a post so we're going to need a modal we're going to be able to we're going to need to be able to add text in the model and then add images in there and add videos in there and then we're going to need to be able to store that inside a Firebase and then we're going to need to be able to read that from Firebase and show all of it here and then we're going to write need to right react code that can show those components and everything in a beautiful way okay so we're doing great so far but we got a long way to go so hang tight you're doing fantastic smash the like button if you haven't already and let's keep rocking and rolling now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever program.com pwj okay so then you don't just watch do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript so you can get your skills up so freaking high and really get to that next level so go ahead you know if you want to take it a Next Level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we hav't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing sixf figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need all right now let's actually start adding the article portion okay that means like we'll be able to see some of the Articles so here we go so first things first okay um let's go over to our main JS where we're at right now going to zoom out just a little bit cuz I was a little too close and claustrophobic for comfort and uh let's go right underneath the share box okay so where is it let's go to Main and I'll go right underneath the share boox where share boox is ending and let's open up a div and inside of this div I'm going to add an article okay and inside of this article I'm just going to say article like so okay and let's hit refresh now it says it's not defined because we need to make a styling for that component okay so let's go ahead con article and uh again I can do styled and I'm going to copy from the common card okay so let's go like this beautiful now we have a article right here pretty clean okay pretty nice so let's hit save now let's actually add more things to this okay so first thing I'm going to do I'm just going to add padding zero to it cool um margin of 0 by 0 by 8 pixels okay and then I'm going to do overflow I'm just going to say visible on this thing okay so our article is here it looks great I like how it looks I like how you look and you're important and I love you okay never let anybody tell you otherwise I'm here to support you all right let's keep going so great job on the article all right now let's work on the uh ellipses okay so first what I want you to do is open it up Whoopsie Daisy you're crazy all right this is the Ellipsis SVG it looks like that three collapsible dots okay so what I want you to do is open up your public open up your images and then open up your no that's inappropriate open up your heart that's what I was going to say and drop that image all right great now that you got that image what we're going to do is we're going to go inside of our main and we're going to do a couple of things okay let's go inside of our article component that that we made and we're going to remove what we put inside of there all right simply because we're going to change that bad boy up and add a new component called shared actor okay and inside of this shared actor I'm going to make a link tag now I don't actually need the link I just need to borrow the styling so I'm just going to leave it like this and I'm going to give it an image and we're going to give it a user. where the where does it start typing okay like so okay and uh so that's pretty good as long as our a tag and image is concerned now inside of this a tag I'm going to also add another div okay and uh this div is going to have span and I'm going to have title after title I'll have info okay capitalize the title T and then we're going to have date just like so underneath this a tag I'm going to add a button that button is going to have an image and we're going to give it an ellipsis uh in image SVG okay now it's complaining it's like yeah I don't know what the share actor is no problem const shared actor okay just like that we're going to give it a style div make it empty and save and refresh and it should be defined now okay so now we see title info date right next to each other very uncomfortably close with the three dots okay great so let's start adding some styling to it and make it look good okay make it look good in the hood like you should let's go and do that okay for the shared actor so now this going to require a lot of styling hang in there let's give it padding right of 40 pixels oops cannot see it cool let's go down and I'm going to give it iflex wrap and we'll do no wrap on this thing okay and just make sure the whole thing is wrapped in shared or shared actor just like that okay padding I want to give it 12 pixel by 16 pixels by zero cool okay whoops all right let's see okay this is where we have it it's looking good we got some padding going now let's uh do a couple of more things to it okay I'm going to add margin to bottom let's go like this and add some margin and uh underneath that let's go align items Center cool and let's keep going all right so now let's go ahead and add um under align items I'm going to make sure my display is flex okay cool starting to look pretty okay sometimes certain things don't happen but I promise they take some time and then they come together cool so we got display Flex now underneath here let's style our a tag akr link tag and I'm going to give it a margin right of 12 pixels okay so now that button moved just a little bit to the right that's beautiful now U make sure you keep hitting save for the changes to take place so that gives it margin great now let's go flex grow we'll do one on this all right beautiful damage is taken up a lot of that nice and uh now I'm going to do overflow hidden cool and then let's do display Flex okay whoops did not mean to do that all right so now you should have the image here the three dots to the right just like that and then if I full screen it it should still look very similar to this okay cool let's keep on going now underneath it this again doesn't really matter that much but I just like to do it just to be safe that no links have uh any text decoration just cuz it's annoying let's go inside here and now let's style the image tag that's inside of the link tag and I'll give it a width of 48 pixels nice and I will give it a height of 48 pixels cool so now what you see is that right there okay so you should see title info date and the three dots great now let's get outside of this image and we will uh select our div and let's go display Flex cool Flex direction we go column so now title info date should be each On Their Own Line okay um let's go flex grow one on this awesome so now title info date should be in the middle okay and we'll do Flex base of zero all right so we got the flex bases now let's go margin uh left on this thing and we'll go 8 pixels for margin so that gave it just a tiny little margin you'll see it move a little bit and I'm going to go overflow hidden again cool so we don't want to see any type of weird overflow happening and um span let's control the span now so text align I'm going to say left so now title info date should be right up next to the image let's grab the first child okay and then we'll go font size 14 pixels cool makes it a little bit smaller we'll make it now Bolder with font weight and again first child is that text right here okay and then let's give it a color and we'll go 0 0 0 1 okay so that makes it just a little bit uh darker okay then outside of this span tag what we're going to do actually we're still inside of the span but we're outside of the first child right so inside of this span tag let's also style another element so I'm going to go um um basically this means this thing that you're styling all right so that end is referring to this shared actor style div so I'm saying this divs um anth child and and um I'm going to go n + one all right and let's go font size 12 pixels cool and then we'll go color great so now the whole thing is just a little bit gray okay so that's pretty good now we're going to go outside of pretty much all of that and we're going to style a button component on its own so we're going to go outside of all of these Squigly and we'll now style the button component and we'll say position absolute so now the button should be hovering right over the photo we'll say right by 12 pixels cool top of zero nice background transparent like so border will go none outline will go none so now there's no boxes around it oops now there's no boxes around that ellipses right it's just the ellipses by itself and uh that's it on the when it comes to this component for now this is pretty good and now let's keep on going all right now now let's add description and a uh shared image okay that's what we're calling it so let's go in finder and this is the image that I want you to use okay this is we'll make a random post so that's the image and I'll cool now let's go to our main after we got that image and now let's start actually working on this okay so what we need to do at this point is we need to find where our shared actor component is which is right here underneath our shared actor component we need to now add a new component and we're going to call that component description inside of description I'll just say the text description just like that that's it okay so that's good uh let's see what is happening here cool cool cool now underneath description we're going to add one more thing we're going to add a new component and it's going to be called shared image just like this and inside of here we're going to have an a tag that's going to be empty and inside of this a tag we're going to have an image like so shared image. jpeg okay so again description boom again it's complaining that it doesn't know what those style components are no worries we'll add them in right now so let's go add a description so that boom beautiful here we go that image is just out of control right right now okay that image is overflowing everywhere so all good now we just need to figure out how to control that image okay and uh we'll do that now by styling so inside of my description let's add padding 0 by 16 pixels overflow let's make it hidden for color let's go like that okay let's make it a little bit darker cool all right and then uh we're going to go and text align it to the left now you can't see that much right now but now you'll see it okay there we go so save boom that's where my description is that's what you should be seeing right now but really the thing we need to style is that image so let's control that so first of all let's give it a little bit of margin from the top there so now it has a little separation um between the word text and the image itself let's give it a width of 100% cool so again it's still crazy but we'll control it in a second oops let's go here let's go display block cool let's go position relative all right and then background color okay all right and then let's control the image inside of this tag so let's go image object fit contain so still the image should be pretty much out of control with 100% And finally the image is starting to come into control so let's put a semicolon here semicolon here and beautiful so now it actually looks like a legitimate post right description title info date if I go full screen I have description here so now this is looking like an actual post that is great that's what we want all right so now it's looking like an actual image right it looks good so let's keep on going with this and now add social counts underneath here right so for example how many likes does this image have how many up votes does it have and reactions and things like that kind of like in the finished version I can see that there are 75 uh reactions that I have zero comments how many likes comments share send all of that cool so um let's go ahead and and add all of those things in now so what I'm going to do is I will go in underneath underneath my shared image component so let's go right underneath that and I'm going to add my social counts component okay that's what we're going to call it let's go ahead and create our list and then inside of it we'll make a button and inside of that button I'm going to add my image okay and uh these images are again we're going to give you access to all these images but this is um going to be an image that I kind of just pulled all right it's an online it's a URL all right what I'm going to do is I'm just going to download this image so it's less annoying for you guys let's see um is there a easy way to actually download this image though there's no easy way to download that image so actually let's just use the CDN okay that we have here and let's just stick with that okay so this is the URL for it and again we'll add all of these images inside of the GitHub repo so you can access all of them okay so that's going to give you your like button let's add uh another image right underneath this okay and uh this is going to be the following URL and um we'll add that one oops let's add that one right there this one okay great so now we got these two images okay and this image right here you can go look it up this image is going to be um the Clapping Emoji okay really hard to see I'll have to zoom in quite a bit so you can see it but yeah this is the Clapping one okay so make sure you have that one and underneath this image I want to add in another thing and we'll just add span tag and we'll say 75 as in to say that we have 75 reactions so far okay button cool and right underneath this list ending let's do another one Li and then inside of here we're going to do an a tag again remove the entire ah ref and uh we're going to say one comment okay okay let's just do two comments like this okay and hit save cool so we got Social account inside of here we have a list we have you know one button here and now one button has two images and that's span cool okay great now let's go ahead and add in The Styling for our social accounts component so I'm going to do cons social accounts styled unordered list save the error should go away save again go ahead refresh come back cool all right so now I see this um I see 75 uh reactions thumbs up clapping 75 claps and I see two comments right underneath it okay looks good but let's make it look better okay let me full screen this that's what it looks like right now okay so now we have to do a bunch of styling work to make sure that this looks good so let's add a line height to it about 1.3 okay so that gave it a little breathing room for two comments let's go display Flex all right now they're pushed to the left hand side I'm going to align items to be to start kind of right at the start so that's good I'm going to make overflow Auto for this margin let's give it 0 by 16 pixels okay so now it's pushed a little bit from the left hand side padding going to give it a little bit of padding okay good so padding went ahead and right added more of this so now it's nicely centered and looks like we have again more breathing room there border let's give it a border bottom of one pixel solid and give it it give it this color here cool okay looking nice looking nice okay let's give it a list style and we'll go and give it none okay so those two dots that were showing up now are just completely gone and now let's actually select the list and style it so I'm going to go margin right on this thing and let's go 5 pixels great we'll go font size 12 pixels cool so now the two comments are small button display Flex cool so it looks pretty freaking good now okay so that gives us our social that we were looking to add okay uh now what I want to do is I want to add social button actions inside of the article okay so now we're going to make it look even better we're going to add the comments button the like one and bunch of them cool so first things first let's go ahead and find them so I have comments comments is going to be that one right there at the top and uh we have our like icon so that one we have our send icon ion let's find that boom right there and then of course we have our share icon right there okay let's drag all of them straight into images cool so we got all of those inside of images so now we're good all right so now we got those images and we are going to now start putting those inside okay so let's go ahead and let's go right under where our social accounts component ends so I'm going to go right underneath here and right there I'm going to add a button and inside of this button I'm going to add an image and this image is going to be my like icon.svg cool so now you should see a like button appear on your screen like so great after this let's go actually let's add the button word like next to it too cuz I think that'll look nice so let's go and let's add in the word like great so now we have a blue button and we have the text that says like cool okay let's go um underneath here and let's add in another button now okay and inside of this let's add an image and let's go images comments-icon SVG great so you got the like button and now we got the comment and we'll do a similar thing we'll do span tag and I'm just going to say comment plural great and now we're going to repeat that okay so I'm going to just copi this button I'm going to paste and paste and where it says comments icon I'm going to share that remove uh replace that with share icon and this one I'm going to replace it with send icon so now I have a share icon right here and a send icon right here and I'm going to remove this word with the word share and I'm going to replace this word with the word send great that's what we have here now if I full screen this looks freaking great looks amazing okay but we still need to make it look better so let's go ahead and do that now so I'm going to go and create the new component okay the one that we called social actions all right so let's go all the way up to the top okay so right underneath so right underneath social accounts I'm going to make a new component called social actions so I'm going to wrap all these buttons inside of social actions okay so let's go ahead and do that so I'll go social um let's do it like this social actions let's copy that and let's go right outside of this and paste it so all the stuff that we added let's put it inside of social actions like so okay now it's going to complain hey I don't know what this thing is all good let's go and do and uh and describe the styled component so we'll do cons social actions is equal to and um I want to do styled div boom okay refresh here we go they're right there okay and now let's go ahead and do the f go align items and I'm going to align them centrally cool display Flex cuz I like enabling Flex mode on here great I'm going to give it a margin of zero Min height of 40 pixels there we go let's give it a little padding 4 by 8 pixels like that and then I'm going to uh make a button appear on this or style a button not make a button appear on this what the heck am I talking about and let's do inline Flex on this thing great let's align these items centrally cool padding let's go 8 pixels looking great okay give it a little blue so now they actually look very clickable and then um I want to add a media query but only to the buttons okay nothing else so I'm going to do the following let's add our media query and I'm going to say in with so this is going to be the other way this is going to say only do this on desktop mode so you're not going to see anything change right now okay this is saying only on desktop only on something bigger than a mobile device that's what that means it's the inverse of Max width and I'm going to say give it a margin left of 8 pixels okay you're not going to see a difference but let's go full screen here all right and so you see the like icon and you see see the distance between the like emoji and the and the like text all right now on the actual mobile device they're much closer together okay if I actually comment this line out and we full screen it notice that they're much closer together okay so that difference only takes place on a desktop great so so far so good you should be up to Here and Now our posts are starting to take shape and we are liking it all right you dirty boys and girls let's keep rocking and rolling so we're having fun so far having fun so far you're enjoying yourself but now we're going to do reducts and that's going to slap you in the face fun time is over get ready to get spanked actually you might like Redux okay so hang in there and enjoy with me come on let's go so let's get to the Redux part okay so first things first we got to install Redux how do we do that command J open the command line okay and um what I'm going to do is just for a second I'm going to stop my server by doing contrl C okay um on Windows it might be something else but just control C should work all right and I will simply do yarn ad you can do npm install okay it's the same thing yarn add and I'm going to do react Redux like so and I'm going to hit enter and so now it's going to install react Redux and then I'm going to also install just Redux by itself yarn ad and we're going to do Redux like so so go ahead and install both of those beautiful packages my beautiful person okay great now that that's done we're going to go ahead and wrap the entire app in a Redux store so let's go to index.js okay and um simply go at the top and right underneath here we're going to do the following I'm going to import provider prover Provider from react Redux cool and then the next thing I'm going to do is I'm going to import store from store okay um yeah so we have to still of course create a store which we're going to do soon all right so don't freak out but we're going to be creating a store soon okay but yeah this is what all I want you to add for now and then let's go underneath and what I'm going to do is a few things instead of right underneath so this app here right we want to wrap this app inside of our provider now okay so let's go provider and store and we're going to give it our store that we have okay and uh wrap the app inside of that provider that's all cool that's all cool if you try to run your app right now and you're running into an error don't worry it's because we haven't made the store file yet okay so we're going to go ahead and make that store file so let's go ahead and do that all right so uh let's go to our reducers and let's make the reducers first okay so I'm going to go ahead and uh make a reducer let's do it like this so in my source I'm going to create a new folder and it's going to be called reducers okay and inside of reducers what I'm going to do is I'm going to make index.js okay great and um what all I'm going to do here is I'm going to say import combined reducers okay and we're going to import that from Redux and let's also do import user reducer from whoops user reducer like this and I'm going to say make root reducer equal to combined reducers that's a cool thing about some of the Redux stuff that we're doing okay and we're going to say user reducer like that okay so this is going to allow us to combine the reducers so it's going to be helpful now let's make another file inside of our reducers folder and this is going to be called user reducer like this okay so let's go inside of our user reducer and we're going to do we're going to initialize the initial state in here and uh we'll simply make the initial state to be where user is null he's empty or she okay and then we're going to say user reducer is going to be whatever um in this case the initial state so the by default if you don't pass in anything it's just going to be the initial State and it's also going to take in an action and we're going to do a switch depending on the action type uh default however will be just the thing that Returns the state okay so if I get so here's how this reducer I think about it right user reducer anytime there's a reducer how I think about it really it should be called in my mind a state updater because all a reducer does is it updates a given state so for example if we gave it some type of state it would would update it okay otherwise it would just return the existing state so here's just a dumb example if I gave it an array um with an action of um you know if I gave it something with the action of like it'll send the payload and it will hit like here and it will increment it by one okay that's where the switch case will come in okay is the switch case like all right then the following action where we increment like by one is the switch action type comment uh well then in that case increment the comment section by one if it's none of those well the default should be hey just return the actual State don't really do anything okay so that's kind of what's happening at a high level all right so now we have both of these made now let's go ahead and of course create our store okay and uh we are going to add our store um we're going to add our store let me actually just see this real quick all right so let's go inside of our um source and in our source we're going to create a new folder okay and we're just going to call that folder store okay and inside of store I'm going to create a new file and this will be called index.js within this file we're going to do a couple of things we're going to create store and we're going to apply some middleware uh did I write it correctly and then remove it yes knowing me probably did something silly like that apply middleware and of course let's bring it from Redux okay import root reducer from reducers okay and um now let's just Define our store and once we do this we're not going to have errors anymore in our app and our app should start uh running okay great so now store is defined we are also exporting store now that we're exporting store we will have access to it inside of our project and in our index that JS if I go here we are importing that store and then we're passing it to our provider so technically looking at this we should not have any more errors if you do npm start in my case I'm going to do yarn start you should not have um errors on this thing okay so let me refresh okay so it's saying does not contain a default export and what does not contain a default export it is complaining about what is it complaining about attempted import error dot do/ reducers does not contain a default export cool so let's go to some of our reducer files and let's see if we're exporting what we want to be exporting ah looks like we're not okay so in our user reducer we're going to just simply do export default and I'm going to say user reducer or wait am I in user reducer right now no I'm not I'm an index JS so here we have root reducer so I need to be yeah that would make sense so let's export the root reducer and let's go into our user reducer and let's go and Export default user reducer now we should be uh getting both of those did I misspell in yes I did initial should not be spelled intial should be spelled initial so initial is now defined cool now that was just setup okay of Redux and uh there's a pretty good start to it and we're we're making good progress let's keep going all right guys so just a little note this that you're going to build is going to be an example without using Redux toolkit so we wanted to show you what life looks like without toolkit Redux is much harder without Redux toolkit if you built our Disney plus clone you would have noticed things were much simpler with Redux tool kit it's going to be a little bit harder but I think it's important for you to know this because you might go to a company that's not using the Redux tool kit yet so let's go all right so let's go and now start working on the log in functionality okay so I'm going to go ahead to my login component do we have one yet actually we don't so let's go ahead and uh start working on that component now okay so inside of our components oh we do we do my bad cool so inside of our login component we're going to do a couple of things okay let's go all the way at the end where we're exporting default login um we're not going to need that okay so let's remove that for now actually just leave that for now so we don't have an error but we'll delete that later okay and at the top what I'm going to do is let's go import connect from react Redux like so okay and uh let's keep going down and what we're going to do here is now we're going to create a map state to props okay that's another one of the annoying things that we had to do before we got Redux tool kit okay but I'll show you how this works as well okay boom we'll leave that as empty and then we'll also do map dispatch to props okay and then let's go ahead and um do this cool okay again just hang in with me I promise the more you do repetition of building thingies with Redux the more is going to start to make sense but it's kind of one like one of those things that you kind of get the AHA moments all at once and also pattern recognition is key key key to understanding these things okay so don't get discouraged the first time you see this because it's going to freak you out now let's go export default and I'm going to do export default connect and we're going to do map state to props and I'm going to do map dispatch to props two props like that okay and then I'm also going to do login like this okay so freaking weird right but there we go okay that is going to allow us to export login as well cool okay so we're good so far now what we need need to do is we actually need to start installing a couple of things all right now let's go ahead and start installing a couple of other things we're going to need so we're going to need Redux thunk and we're going to need a Firebase okay so let's go ahead and install these things now so I'm going to hit I'm going to click on my command line I'm going to hit contrl C to stop the server to hit enter just a couple of times and then I'm just going to do yarn ad again you can do npm install but I'm just going to do yarn ad and I'll do Firebase like so so now start installing Firebase and once that's done we're going to install something else okay we're going to install Firebase tools cuz you're going to need those so I'm going to do yarn add Firebase tools that's the second thing you're going to need to install and then after that we're going to need one more thing to install all right now and then last one we're going to need is yarn ad and I'm going to do Redux thk Redux Dash thk Okay so we're going to make sure that we have that so those are the three things we're going to install make sure you don't miss on any of these because these are going to be important okay and then of course we're going to need access to our Firebase config files so let's go ahead and get them now all right now so here's what I want you to do go to Firebase okay firebase.com so let's just go together firebase.com like so hit um here I'm just going to go to the email that I prefer and then hit go to console okay and here you're going to see all these clones uh for I mean you might not see any of them this is my Firebase so for you you might have to do add project okay and you might want to do LinkedIn clone I'm just going to call it dummy clone but you should call it LinkedIn clone like this okay so dummy Linked In clone like so hit continue um you don't need anything else and then it'll say creating your project and that's good okay that's kind of what you want and I'll show you what you need to do after that looks so beautiful right look at that UI beautiful just circling around all right so let's H continue on that thing and then let's keep on rocking and rolling um okay so I already have a project created so I'm going to get out of this one now and I'm going to go to the other project that I have okay so I'm going to switch to my LinkedIn clone you just stay in that exact one okay and uh here I'm going to pull go to Project settings okay and we're going to get the things that we need here so go all the way to fire Firebase SDK snippet click config and then get all of the details for your app that you need okay so I'm just going to copy all of these details copy let's go back to our app okay and let's start working on our app so what I'm going to do now all right and just in case you were not able to find this code right let's kind of walk through it together so I'm going to switch to my clone the the dummy one that I was building alongside with you okay and now it might say there are no apps in your project so what I want you to do is click that code button right here go ahead and do that now and now inside of here just call it the same thing we could call it LinkedIn dclone okay and then just hit Register App for now okay and now it's going to give you all of the code that you need okay so then just simply grab grab uh don't grab the script tags but you can just grab everything that's inside of that like VAR okay and just copy it cool great so that's all you need to do on your end all right I'm going to switch back to my other project that I had made and I'm going to grab everything from there all right now now what I want you to do is go ahead inside um of your source and right click on your Source folder and make a new file and I'm going to call it firebase.com you should have the off domain project ID storage bucket messaging sender ID app ID and measurement ID okay and this should be called const Firebase config like that cool now we're going to just do a couple of things after this so Firebase app and I'm going to initialize this app like this and pass in the Firebase config cool that'll help initialize your app now let's uh connect your Firebase to your uh database so let's do Firebase app. firestore okay and let's do const o actually you know what I'll build mine from scratch with you guys okay so let's let's go to my dummy version here okay and I'll just build this out with you guys because I think that's going to be the best way for you guys to pick this up so let's hit save cool now you and I are going to be on the same page okay don't have any unfair Advantage okay so fire store cons off um this is we're going to need this for authentication later so's add that provider new Firebase doo. gooogle o provider okay and then let's do storage Firebase do storage okay because we need to store our images somewhere all right so that's what we're going to be using storage for and now let's export some of these things so we have access to them outside of here okay and then export default database cuz we're going to need access to the database as well so this is what your overall Firebase file should be looking like this is going to be very important for all your Firebase uh stuff so make sure that you don't have some funny weird stuff going on here okay all right now let's go inside of our index.js which is inside of our store okay so we have a bunch of index.js is now but go inside of your store click on that index.js okay and uh here's the here is what we're going to do okay now we're going to add a couple of things to our store okay so let's Hey where's my okay that line was just too far away for me to see let's do import thunk middleware okay from Redux stunk and um also what we're going to do is now we're going to start applying the middleware so I'm going to remove this and I'm going to say apply middleware and I'm going to pass in thunk middleware like so and we're just going to close that per Ren and that's it okay that's the change that we're making here so we should be we should be good for now and now what we want to do is like continue adding in the login functionality okay so we're going to now add a couple of more things to our login okay beautiful you're freaking crushing it let's keep on going so we got this now let's make the login functionality work okay and what do I mean by that here's what I mean by that let's if we go to our finalized LinkedIn clone app if I sign out here look what happens if I hit sign in with Google boom right so this popup how is it happening how's that information being stored we're going to do that and resolve that with Redux okay and Firebase so let's go ahead and work on that functionality now so first things first which one should I work on first let me think okay let's go to Let's actually do this okay so in our source let's make a new folder and we're going to call it actions okay for Redux you have your actions you have your uh reducers you need all these things okay and uh it's good to put them in different folders so inside of this actions we're going to create a index.js cool and uh in here we're going to import a couple of things I'm going to import o and I'm going to import provider and um we're going to get this from Firebase okay and then let's do export function cuz we're going to need to export this anyway so let's go sign in API that's what it's going to be called and what it's going to do is going to dispatch um off okay and we're going to do sign in with popup so this is a nice function that comes with Firebase okay so this Au right here is coming from Firebase so sign in with popup like that okay so sign in with popup once Firebase responds with a prompt promise we're going to do do then okay so we're going to chain it and we're going to pass it a payload payload like so oops boom and then inside here I'm just going to console log the payload okay so we're going to be able to see that great now let's go here and I'm going to do catch and let's catch any errors that we're getting and then I'm just simply going to alert us of the error message okay so this is what your um index JS file should look like right about now okay and now let's go ahead and put it to use all right so now let's go to our login component where we're actually going to use this signin thing okay so login.js and so let's start with importing that little method that we made signin API okay from that okay so that'll imported and now what we're going to do is inside a form where we had Google form now all we're going to do to this component we're going to say hey on click we want you to do something here's what we want you to do we want you to run that function so we're just going to do props do sign in okay that's it okay so let's go ahead and do this okay and we're going to go down and this is where Redux gets funky but just hang in there with me okay and I'll show you how we do this so all the way at the end right here for the Redux portion we're going to add this kind of right below our export default and let's let's go ahead and do map dispatch to props actually we're doing that already so let's just stay in here boom right there okay dis patch and this is the code so let's hit enter and get inside of here and we're going to say sign in okay and what that's going to do is that's going to dispatch our method sign in API okay so this sign in here right corresponds to where we're doing props do signin okay so now those things are connected and again think of Redux Like This Global store okay where when the user logs in it passes the user login information and stores it there on the front end it's kind of like having a database on the front end that you can access really really fast that's how I think about Redux and State Management tools all right awesome so now we got all of this that's looking good now let's actually start dispatching these actions um to the stores after integrating it with Google Au so we're going to start adding the Google um Google Au in uh integration very very soon okay so first of all here's what I want to do let me go to my Firebase okay and uh what I'm going to do to my Firebase is let's go to authentication inside of my Firebase and under my authentication so let's go to our Firebase app and then inside of our app what we're going to do is uh let's go ahead to our authentication and then just go and click get started cool now inside of get started what we're going to do is hit where it says Google for provider and just hit enable um and that's essentially it okay just give it your email whatever your email wait gave me a weird email but whatever that should be good okay so now your Google should be enabled another weird uh thing uh by the way is if you are on some type of different Firebase uh website there you might have uh you might not see what I see here you might see something completely different so what you want to do in that case is actually you want to hit where it says build okay for some of you it might say build click that and then click authentication underneath that that'll bring you to your authentication okay okay so now let's go ahead and start trying things and trying to break things and let's see what happens okay so I'm going to go to my actual app and on my app instead of home let's delete that and let's just go to the you know Local Host 3000 now it's might say the site can't be reached well no problem I'm just going to hit yarn start you can in your terminal hit npm start and you should be good to go okay so now uh we're going to click uh o my middleware is not defined oh okay interesting so let's go to my store my index.js inside of my store okay and in here I'm probably probably capitalizing it somewhere Middle where and let's make it lowercase okay all right there we go all right I'm sorry Frankie Frankie is building it out with me to help test it by the way shout out to Frankie guys Frankie's been here Frankie pop in Frankie has been here and test running and doing the entire build actually with us so he can make sure that this is actually running perfectly for you guys okay so drop some love for Frankie in the comments below cool let's keep going now let's hit sign in with Google and Frankie says it's working for him it's working that's cool right so easy that's so freaking cool let's hit Kia clever program.com nice okay great so let's open up inspect and let's see if the payload is inside of our console and it looks like it is okay so hit inspect go to console and do you see where it says object now click the drop down on the object so you guys should see user right here Okay now click under user did you uh did you click the drop down I now keep scrolling down and you'll actually see display name you'll see email and you'll see email verified yeah okay great and if you keep scrolling down you you'll actually even see things like Photo URL do you see that now if you doubleclick into the photo URL um actually can I select that copy so right click and copy string okay and now open a new tab and paste that string you should see your photo like this okay and that should tell tell you that your um your app is like actually pulling the payload from the sign in right so like where is that payload statement let's just go ahead and search let's go console there's like only one place we're actually doing console log um and it's inside of our uh oops not mean to do that we're doing this inside of our user reducer it seems like no no no I'm sorry why am I I'm being freaking crazy we're it's it's right here not inside of our usereducer we're using it inside of our actions index.js and we're console logging so the payload is actually what Firebase gives us back it's this object that's the payload that gets dropped uh every time we log in so we'll be able to use that payad to pull the photo and pull the name and email and all of that good stuff okay so granted we're able to get everything that we need right granted we're able to get everything that we're looking for we still need a way to actually store that information right we still need a way to store that information so that's what we're going to do and we the website and things still need to change uh based on the user logging in okay because it shouldn't keep saying sign in with Google the whole time that would not make sense all right so let's go ahead and start setting things up up so first thing I'm going to do is inside of actions I'm going to make a new file and this file is going to be called action type. JS okay and I'm going to do something very simple I'm just going to say export const set user equals set user okay that's all set user equals string set user that's it all right now let's go inside of let's see which file should I work on first let's go ahead inside of our user reducer now okay that's inside of our reducer so for example just click reducer then go to user reducer you should be there now we're going to do a couple of things here inside of our switch case so depending on what type of action we get so if we get a case where we're setting a user what we're going to do is we're going to return whatever the state was previously and then add in our new user okay so the state is going to be updated just by one thing now it's complaining here you uh set user is not defined well no worries let's go all the way at the top and let's import it so import set user okay from actions action type like that cool so now it won't be giving us an error anymore our app should actually be working so we're good with the user reducer for now now let's go inside of our index.js all right and now let's go to our index JS okay and in our index Js all I'm going to do I'm sorry wrong index JS my bad let's go inside of our actions index JS right here and now all I want to do inside of my payload instead of using console log we're going to dispatch the user dispatch means send that information out shoot it okay whenever I think dispatch I think of like the Olympics um um what is it called referee shooting gun right so it's like whenever the starting pistol no not that that's like two of crazy starting pistol okay holy crap this just got crazy uh Sprint Jesus that's what I think of whenever I think of dispatching actions so like whenever we dispatch actions from the store it's like like tell the entire store where where um the user has logged in okay man got crazy so this is who you are when you're dispatching actions is this an actual gun I don't know if they have they don't have real guns right the Olympics okay so let's go inside so in our index JS here now let's just make a couple of changes okay first of all we're going to import from the top import set user like so and I'm going to do fr action type okay that's good now let's also export cons set user this is going to help us set the user and it's going to take in a payload whoops it's going to take in a payload and that's going to be type set user and then the user is going to be the payload okay whatever the payload is going to be cool all right so that's good import is looking fresh and now we're just going to dispatch the action here instead of console logging it so dispatch set user and uh payload user just like so okay save okay so now with all three of those things done hopefully that information is actually being stored inside of Redux let's H sign in with Google and I'm going to go ahead and sign in cool so we'll be able to see later if this information is actually being stored or not all right so now let's redirect the user to homepage on login so I'm going to go to login and inside of my container right at the beginning here's what I'm going to do I'm going to say the following I'm going to say hey if we got a user going on okay then what I want you to do is I want you to redirect to okay and what we'll do is uh let me write redirect and hit enter so import it from react router okay importing that from react router just like that cool and what I will say is redirect me to the home page cool now let's end that bad boy like that beautiful beautiful beautiful beautiful beautiful very very clean line and it says hey if the user is there redirect me now all we need to do to make this magic work is just go all the way to the bottom and um what I'm going to do is right above map dispatch to props let's just add it here uh actually inside of map state to props we can do this okay we can do this right here so where it says return which is empty we're going to say user state to state. user state. user so that's who the user is going to be and look at that it is already redirecting us how freaking cool is that you fools if I go to homepage okay let's H sign in with Google hopefully it works let's see hopefully it breaks and breaks my heart whoa smash the like button if you enjoyed that one that was really clean okay I'm loving this man are you guys loving this I hope you're loving this okay this is awesome all right now Redux is kind of crazy so before we move on I just want to explain some of this stuff here okay so let's go go back to our homepage or not our homepage but our login page right this sign in popup this just this one line of code makes that popup happen that is insane okay so that's just that one line of code that's making that popup happen then this line of code is telling the app hey this is the user information so I'm dispatching this action when I dispatch this action I sended this function called set user okay and I give it the payload of the user so remember what is payload do user do you guys remember that when I did um let's actually do this right now so I'm going to console log console log and I'm just going to do payload here okay and what I'm going to do here is comment this line out and let's hit refresh now I'm going to hit sign in with Google and let's hit inspect okay on the right hand side and I'm going to go to whoops not sources console okay and I'm going to click sign in right there now an object just appeared okay and it's giving me this information about the user okay now the user information is the one I want right so now watch this now I'm going to do payload do what user right so now watch what happens if I hit save and I hit uh refresh okay and let's go sign in with Google and I'm going to hit kazia clever program.com I'm just going to get the information pertaining to the the user that's it so I'm not getting my display name and I'm getting my email and I'm getting all of that right so that's what payload do user actually is so that object we're sending over to this method over here that's a set user so set user takes a payload the payload was all of the user details now this is types set user and user we set it to whatever the payload was was okay that's kind of what's Happening um that's kind of what's Happening Here okay and let's go to set user boom okay this is it's all freaking connected okay now if I go inside of my reducers and I go inside of my user reducers when it sees the case that I'm trying to set the user it takes my existing state and it just adds the new user to it and if the state doesn't change it just Returns the default state of whatever it was before that user was there that's it okay and remember Redux is immutable so I'm not mutating this okay I'm creating a brand new state with whatever the previous state was along with the new one user that I've added okay so a little bit of just explaining behind the scenes of what's happening with Redux so now what we're going to do is we're going to take the user authentication info when the authentication is changed okay and store it okay so for example when I log in I want to like store that information and have access to it okay anytime I'm like refreshing or getting that information so let's go ahead and work on that now so inside of my actions and index JS what I will do underneath here is uh let's make another function okay and let's call it user o like so get user off okay this is what's going to get the authentication info and uh let's start it off with dispatch cool and I'm going to do this is something that comes from Firebase so on off stay changed do me a favor and run this asynchronously okay you're going to take a user as an input and if user meaning if the user exists or is logged in or whatever dispatch set the user set the user to user okay so that looks good now let's go inside of our app uh JS file and we're going to add all of this here so um let's go ahead and do that okay so first of all I'm going to need to I'm going to need to do a couple of things and for those things we're going to I'm going to I'm going to kind of walk you through all of this okay so first of all right at the start here okay function app um let me think let's have it a take props like that okay and then inside of here I'm actually going to throw in my use effect uh hook so let's go use effect and uh let's hit enter whoops use effect okay there's tons of boiler plate that comes uh with a a lot of this stuff but okay so use effect this is how we write it in here okay so I'm going to say props do get user off cool and then here it's not going to really have any dependencies for now cool okay so now it's going to start telling us hey we're erroring out so let's go ahead and import react hooks so import use effect like so all right so that's now going to import this use effect good use effect is not defined interesting should be defined okay so now it's saying get user off is not a function so we're going to go ahead and import that as well import get user off okay from actions okay so now we got that as well it's good cool so now of course it's saying it's not a function but we're going to go ahead and take care of that okay so let's go ahead inside um you know just get inside of appjs hopefully you're there and now let's go all the way to the bottom and we're going to need to do those map props type of things okay this is very common thing we have to do with the Redux if you're using it without toolkit it's annoying but has to be done okay so we're going to do that now right after take out this fat F wallet from my pocket so let's go ahead and do this so map state to props like so and we're going to do state and let's go like this and we're going to return squigglies like that okay then let's do const map dispatch to props okay we're going to do this it's going to take in something to dispatch and uh get user off and this is actually what's going to start defining your function okay and we're going to say dispatch get user off function okay and then what we're going to do is I'm going to remove this export default line we're going to export default I'm going to say connect okay we're also going to need access to this connect we're going to import it later and I'm going to do map state to props and then I'm going to do map dispatch to props and then let's just do app okay now we're going to need to import connect so let's go ahead and import connect um from Redux okay import connect my bad from from react Redux cool so that's imported now what's the error let's see identifier connect has already been declared oh my bad I'm declar uh getting it too many times it's already right here cool we got Connect Now what's here expected an assignment or function call and instead saw an expression line 37 and 16 cool so let's see okay let's wrap that in parentheses so it's an expression okay don't need that there okay so now that should be good should be good should be good that allows us to get the user info hopefully you're not getting any errors and now we are on the same page beautiful okay so the other annoying thing that I realized guys is um remember my image was not showing up the jobs ad one or whatever this one just kept not showing up I looked at my console and uh it was getting blocked by client for whatever reason so what I decided to go ahead do is like copy that image and open like copy link address open that right here right and then I what what what you can do if you're having the same problems hit save image as okay and um go to that same folder you have everything right so for example for me GitHub Banger projects LinkedIn clone uh public images inside of that images folder I just decided to call it jobs add. jpeg okay um and then I hit save so then it showed up as an image right there okay and then I went to my um right side component cuz that's where it was supposed to show up and it just was like never showing up okay so in the right side component in order for it to show what I did is I went to my banner card and um uh instead of having that static link I just changed it with the actual image okay so how you can do that is simply go and select this/ images jobs. jpeg hit save and then uh this is what you should see okay so go ahead and do that that'll take care of that other problem that we were having earlier okay and if somebody wants to be helpful please drop the timestamp to when this problem was first introduced okay and then um you know and just say this is the bug fix for that so if somebody's looking for it that'll be really really helpful thank you now let's go ahead and display the user photo once the user is logged in so I'm going to go inside of header JS and let's go to where we have user which is user component okay so this user component right here okay so where that says me we're going to replace that with an image of Me Okay the image that I get from Google authentication all right so here's how that's going to go I'm going to go right underneath this a tag cool and uh right underneath this a tag what I'm going to do is open up your squiggly okay and um let's be careful where we put everything okay so squiggly let's do it this way I'm in the wrong place okay remove that squiggly and remove that a needs to be inside of user okay what did I do what did I do I'm sorry I'm confusing you okay leave work alone leave work alone so it should have that a tag in there you're good you don't need to touch work we're trying to touch user I don't know why I decided to go under work probably I've just been coding for so long I'm losing my eyesight a little bit so bear with me here okay I'm just a human being relax so right over here what I'm going to do is uh let's add a squiggly here okay like that okay so the the squiggly opens up here but here's where we're going to close it so remove the closing one and I'm going to close it right above this span just like that okay that is um that is Perfecto okay that's the right spot for me to close it cool so now let's go ahead and make this work so inside of this squiggly we're going to do a couple of things okay I'm going to say props user so if the user is logged in and exists I want the following to happen props user. photo URL okay so if that URL exists then I want um the following to happen Okay so I'm going to make an image tag here and in this image tag for source what I'm going to say is this okay and you can remove the quotes because this is going to evaluate to string anyway once it's done so I'm going to say props do user. photo URL okay and let's end that cool and then I'm going to say colon so like this okay now this looks really intimidating and confusing but let me explain first hey is the user logged in yes they are they exist great then look for their uh photo URL does that exist question mark If it exists then show their photo then I have this Turner operator right there if it doesn't exist show a generic user photo Kish that's what's happening there another thing why my thing looks funny why my this me part with the drop- down sign looks funny is because the drop down is not inside of the span so let's go ahead and uh close that and sandwich that in the span okay so again span should have the word me in it and the drop- down image in it okay so make sure to go ahead and uh do that and once you do that what's going to happen is now your photo and your me with the drop down looks freaking great okay that's what should happen all right so that's looking good now what we need to do is make sure our dispatch is happening because right now um our app does not know about the image so it needs access to the store and we need to dispatch that action okay so then it's going to have access to the photo so anyways long story short let's go all the way to the bottom and let's go ahead and do map state to props like so and state whoops okay State and then inside of here we're going to return user state. user state. user annoying boilerplate code okay that's map state to props now we also need map dis patch uh to props and let's go dispatch all right like this let's leave it empty for now we don't really have anything going on in here just yet and then this last line where it says export default header remove that line so we're going to delete that line and we're just going to do export default connect and you guys know the drill we're going to connect map state to props like so then we're going to do map dispatch to props and then we're going to do header like this oky dokie Mr Pokey okay so that is pretty good for now let me actually just see if we need to change any additional things at the top did we import connect yes we did import connect so that's looking good so far okay great so it is working uh in order to be able to see it first of all it's at the bottom right you should be seeing your logged in photo because I'm logged in and you should be seeing your logged in photo at the bottom right if you're logged in and at the top right you should actually be seeing it if uh in desktop mode okay so you should be seeing your photo cool amazing okay now what we want to do is uh add the ability to sign out so when I hover over sign um me right if I hit sign out I cannot sign out so let's add that ability so um let's go and start off by first of all inside of actions we're now going to create a new file actually no let's not create a new file let's just go inside of our index.js so in here remember we added the signin functionality and the get user off functionality so let's go underneath that and let's add the sign out functionality now so let's do export function sign out API okay and then let's do return dispatch just like this all right inside of this dispatch all we're going to do is um we're going to dos. sign out and again this comes built in with um fire fire basee okay that's why Firebase is so nice and then we're going to do then okay leave that empty and we're going to do dispatch set user to null okay so we're going to run that function we're going to set the user to null okay that's going to remove any user that's existing and then I'm going to do do catch any errors um and if there any errors just simply console log them in this case great so this is what your sign out API should be looking like right now okay so continuing on with our functionality now we're going to do just a few things okay so let's go to our um when we sign out so let's think about this right when we sign out we need to be redirected back to the homepage right just like when we sign in we need to be redirected back let me fix that when we sign out we need to be redirected to the login page just like when we sign in we're redirected to the homepage okay so we're going to work on that um that was Nas say hi to NAS everybody behind me beautiful so we're going to add that redirect in just a second but first let's start off with the functionality so I'm going to go to my header okay and let's first of all import the sign out functionality that we made okay so let's import sign out API okay and where are we going to import that from well you know where we're going to import that from from our actions where we just finished making it okay in the index.js so now this will actually import it okay why is it saying modules not found/ actions oh my bad dot dot SL actions there we go okay because I'm inside of of headers which is inside of components so I need to back out first and then I have access to this actions folder okay got to back out then boom hence the two dots right there cool okay so now inside of my sign out let's find that so sign out is right there and uh to this sign out all I'm going to say is a on click I want you to do something for me okay and sign out is going to be like hey what do you want me to do well on click um I want to actually sign out okay I want to call the sign out method now remember because we're using Redux you can't just normally make this work because that would make too much sense unfortunately so in Redux you do things always in a really obnoxious boilerplate method thank you Dan abov the founder of Redux so I'm going to go to my dispatch to props and in here all I'm going to do is we're going to add in sign out and what sign out is going to do is dispatch and we're going to use our uh method that we created earlier dispatch sign out API okay so that should already be pretty good okay so let's go ahead and see if that does anything or not so sign out whoa it actually worked did you guys see the photo change that's freaking amazing so let's actually go back to our homepage and let's test this out let's hit sign in and it should redirect us to the homepage when I sign in so boom let me choose my email okay redirected me and look my photo is of the logged in user that photo is being pulled straight from Firebase now if I hover over and click sign out it signed me out and the photo is gone but what should happen when I sign out I need to be redirected back to the login page so let's just go ahead and add that last bit of functionality and how we're going to do that is let's start off by going to our homepage and inside of our homepage I need to make sure that I import my redirect okay from react router Dom because that's what allows me to manipulate the Dom and manipulate which Pages I'm at I also need to import connect cuz I'm going to need that for this from react Redux and again this is Redux without toolkit okay so this is why you still have to do mappings and connects okay now inside of my container right over here here's what I'm going to do all right we're just going to add that right there and I'm going to say hey if the user is not logged in or there is no user then what I want you to do in that case is redirect me to the homepage or I'm sorry I keep saying the homepage but the login page in this case Okay um and of course we want to close this so let's go ahead and do that okay cool so now when I sign out it actually brings me back to the homepage okay and last things I want to do in order to make sure that that happens and my store knows about it here's what I need to do because that functionality is still not necessarily working we're going to do map state to props and I'm going to let the state know about hey user update the user State like so and I'm going to delete this line and we're going to do export default and this is what we've been doing with Redux every single time so connect map state to props and we're just going to leave it to that because we don't need to dispatch any actions in this case and uh of course add home just like this okay so now refresh so now watch what happens okay I'm going to sign in with Google now it should update my photo at the bottom right now let me full screen it real quick full screen hover over let's click sign out and boom that works that is nice right when I sign out it actually brings me back straight to the homepage okay so hopefully you're enjoying this so far and now we're going to start displaying the username right next to um right next to our user profile okay user image all right so here we go so now we're going to actually add the user display username on the left hand side okay so um and we're going to do that right there okay where it says welcome rafic Kazi that's kind of what we're going to do in our own app okay so first of all just let's just log in so it redirects to the homepage beautiful that looks good okay but now it says welcome there well it should know who we are so it shouldn't say there it should actually say our name now so let's go ahead and do that so I'm going to go to my left side component that I have and then where we have this link this is where we need to change it okay and here's how we're going to do that so I'm going to say props that user this going to get me access to the user and remember this display name this is what should get me access to the name um so what I'm going to do is I'm going to basically be like uh hey if the user exists okay so Props do user if the user exists this is a nice fancy Turner operator that says then show me the username otherwise show me blank okay or I can just say show me well um there okay so that way it says there for now and then if the user will be there it'll say their name instead cool well why is it not getting the name you might ask well what we're going to have to do is tell Redux about it so this is where we need to map state to props so let's do cons map state to props like this open this bad boy up and again we're going to return user state. user state. user like this okay let's refresh okay and we're going to go ahead and connect it now to our component all right so let's go here boom import connect like this from react Redux so now we have this imported that's great let's go all the way down it's a lot of lines of code in there remove this and we're going to do export default connect map state to props and we'll just do left side like this okay again we're not doing any dispatching here we're only doing reading and retrieving all right so now rafii is being read hey that's amazing right let me go home rafik Kazi if I log out it should basically be uh nobody okay cool slome doesn't even let me go to home Okay when I log in it lets me go to home so that's really good my authentication it seems like it's working really well and things are good now we're going to start working on the modal okay so let's go ahead to main JS file and instead of post Malone we're going to be working on post modal so congratulations all right post modal there we go you like that one no yeah all right and U pretty much what I'm going to do is right underneath where article is ending and there's a div ending right underneath the article let's go underneath that div and I'm going to add the post modal okay and you'll be like hey kazzy hey kazzy where are you importing the pulse model from that's a really good question it doesn't exist yet so we need to go ahead and make it so inside of components I'm going to create a new file it's going to be called postm model. JS okay and now we're going to start working on this model and it's going to be nice so let's start off with styled from styled components because we're going to need to style this thing and of course let's go ahead and go it's going to get some props okay there as arguments and um I'm going to create a new component inside of here it's going to be a container and I'm just going to say post modal for now let's hit refresh it's still complaining well that's because I have to export default post modal and now it should stop complaining soon okay it goes hey I don't know what container is no worries I'm going to cons container and let's actually go styled d and leave it as an empty cool so now all the errors are gone and we're back to an operational app which is exactly what we want now inside of our container we're going to style it so I'm going to say position position fixed okay where is our uh model I'll show you our model will be available for us shortly okay let's go top zero for the model yeah let's go left zero okay and um we're going to start seeing it soon hopefully I'm as surprised as you when we see it just kidding all right bottom zero okay so that allows us to put it at the top we're going to give it a really high Z index okay so you just kind you can kind of do that that will make sure that it's always on top of things so now you're starting to see it post modal okay and now 0 0 0 0 it means zero on the left axis x axis y AIS and uh that's what you end up getting when you go 0 so what this does here by the way right is this 00 you're wondering what it does so hit come here and inspect the element now when I inspect it look the modal is actually over the entire screen okay and um if I actually change this to 10 pixels or let's go 50 pixels so something visible from the top it's pushing it down but notice now it's not the entire screen so why we do that sometimes 000000 like that is to kind of in an easy way say hey take over the entire browser okay so this right now is taking over the entire browser and it has a massive Z index so it'll also take over more priority cool so now inside of color I'm going to give it color black and just to kind of show you this right if I actually gave it a background color of let's say black Watch What Happens boom my entire screen is now gone black okay and if I gave it a uh zindex of -20 now it's hiding behind but you can still see the little black bars on the side okay so that Z index is just to make sure that always stays on top of everything else and instead of black of course it's a crazy color to give it right now um we're going to just give it um 0.8 just like this okay that's what's going to happen when the modal opens that's what's going to happen to the entire screen that's what we want okay so then we can see the modal easily so that's how we make that happen cool now last thing we want to do is I mean we're already exporting it and we're using it in main JS right so let's go to our main and we have post modal that's how we're getting this cool beautiful and make sure we're imported okay perfect good job so far let's keep rocking and rolling and now we're going to start adding main content component inside of post model so let's go to post model and inside of here I'm going to remove where it says post modal okay and I'm going to say content cool inside of content let's just write content for now and uh leave it pretty blank and we're going to add in a new styled component I'm I'm going to say content with style div of course empty to just start it off with and we'll give it a width of 100% okay cool all right Max width will give it of 552 pixels so it will never be bigger than that we're going to give it a background color of white so now we can actually start to see this Okay cool so we can see that the model is starting to become visible and now what we're going to do is let's give it a let's remove that uh let's actually keep that my bad and let's go and give it a Max height of 90% cool overflow will go initial okay and then let's go border radius of five pixels okay so now we're starting to have slightly rounded Corners right there we'll go position relative display Flex okay and now let's do Flex Direction column in this case cool we'll top 32 pixels that pushes it down and we're going to go margin zero Auto okay so now we have this thing smack in the middle showing up exactly where we want it beautiful so that's all we wanted to do for this and now we're going to add header in post modal component okay so let's go and do that so inside of content I'm going to remove content and I'm just going to go header like this okay cool and inside of here what I want to say is let's go in h add an H2 and we'll do create a post like that right underneath this I'll add a button and inside of this button I'm going to add an image and this image is going to be a close icon. SVG okay and now the header is going to say hey I'm not defined well no problem okay and I'll show you how to add a close Icon by the way so the close icon actually is right here it looks like that little X at the top so let's go grab that close icon and drop it inside of our images now you should have access to it okay let's go back to the code that we were on inside of components post model. JS so we added that image and now we're going to actually create styling for that component so con header let's start it off with blank and then let's go ahead and start now styling it okay so we now see create a post so that looks pretty good display block I'm going to add padding to it boom now the padding starting to look good I'm going to add a border bottom so I'm going to add a something on the bottom okay and then lastly we're going to do this clean let's give it a font size of 16 pixels I'm going to give it a line height of 1.5 beautiful I'm going to go rgba on this thing and let's do this cool so it's like a little gray out now we'll do font weight 400 and then justify actually before we do that let's enable display Flex let's go justify content on this thing and we'll go space between so now that X should springboard over all the way to the right hand side I'm going to go align items Center dope and then of course let's styled the button and I'm going to go height 40 pixels width 40 pixels great Min with Auto uh color let's do the same thing a little bit of that gray never hurt nobody cool and then SVG hey pointer events make sure that there are none pointer events are none okay cool X cool all right so now we got that big boxy looking um X in the modal it's pretty good it's a good start okay let's create shared content and add user info part inside of it okay so let's go to you know we're inside of here now let's make shared content so where am I going to do that I'm going to let's do it right underneath this header right here shared content let's go user info let's make another component and inside of here going to go image slash images SL user VG okay this is just going to be that dummy user image and for span let's go name okay all right shared content is not defined user info is not defined you guys know the drill right you guys know what we do let's go ahead and start working on this right style div let's leave it empty for now user info style div like that oh refresh okay so now that image is showing up but it obviously looks crazy so we're going to Now work on it let's enable display Flex to start off things are already starting to look in control display Flex is such magic Flex Direction column Flex grow one overflow y I'm going to go Auto on this thing vertical align Baseline cool background I'm going to do transparent okay and then of course padding 8 pixels by 12 pixels beautiful great now let's inside of our user info let's go ahead and do a couple of things enable display Flex here I'm going to align my items to the center so I can see that n is in the middle but it's still behind the photo add padding 12 pixels by 24 pixels like so cool and now let's control our VG and our images and we're going to give them the same type of styling boom boom cool background clip going to go content box okay border two pixels solid transparent border radius this is going to give it the nice little circle that we always love looking clean and then of course let's go inside of our span and now we're going to go font weight 600 font size 16 pixels line height 1.5 cool so now the text is looking Bolder and then of course let's give it a little bit of margin cuz it's getting a little too close to that logo so let's push it a little bit okay beautiful so that looks great to me for shared content right this model is looking good I mean of course we still need to add functionality so when I hit X it actually goes away right and uh things like that so we're going to now start adding those things in okay we also need to make sure the text editor is editable so that's going to need um you know quite a bit of work so let's work on that now all right so cool let's start working on the text editor and add in bunch of functionality so I am going to go um in I mean I'm I'm going to just stay in my post model okay and then um let's add another component and I'm going to add it right underneath shared content so we're going to call it share creation like this and let's just type in some word in there like actions let's go all the way down and um I'm going to add a component styling for this style div hit save just so that error stops display Flex so you guys you should be able to see actions in there now okay it should be it's right there boom cool now I'm going to do justify content space between cool and then of course padding 12 pixels 24 by 16 cool now we just added some padding kind of everywhere from every direction so that looks that looks good now we're going to add creation buttons okay so you might be wondering hey are you getting the creation buttons from here so we're going to have the share image okay that image right there at the top and we're also going to have that image the video image as well so share image share video I'm going to drag this into my images and drop cool so that's going to be there now let's go inside of my um right underneath share creation inside of share creation I'm going to remove the word actions and instead I'm going to write attach assets okay and let's create a new component called attach assets okay and inside of attach assets let's create a new component called asset button like that and inside of asset button I'm going to add an image and that image is going to be images share. image.svg cool and then I'm going to have another asset button asset button and inside of that I'm going to have another image that's going to be images SL share video. SVG like so cool now let's go ahead and add this so all the way at the bottom let's do const asset button is equal to styled button okay and I'm going to do let's do display Flex on this thing um of course it's saying that error so let's actually start that um styling too so we we don't have that error anymore styled div okay boom so we got the image here and then we got the video button right there okay that's what we were trying to add so now let's go here and do align items Center Height we'll make it 40 pixels let's give it a Min width of auto color I'm going to go rgba 0000 0.5 okay and then under attach assets let's do align items Center do display flex and let's go padding padding right and I'll go 8 pixels on it boom okay beautiful so we got this we got the buttons and we got some styling for for this uh AET button at least okay so let's finish up the styling for attach Assets Now Okay so I'm going to go right here and uh we're going to use the select this selector here to get our styled component called acid button and we're going to style that to be with 40 pixels like this cool so now that should be good okay okay if I made that 100 pixels it'll be really obvious what happens so if I go 100 pixels like that you can obviously see that just buttons got really long but let's go 40 pixels and they're right there cool so that looks good and now let's add share uh comment component mouthful a little bit of a mouthful all right so let's go find this so share comment it's going to be this one all right let's drag that into our images folder okay and then let's go to our post modal and inside of our post modal let's make that work so where am I doing share comments so let's let's go underneath attach assets okay so let's go outside of attach assets all right let's go now share comment like that and and then inside of share comment I will add um let me do it like this so you could see the entire time let's just do asset button asset button like that and inside of this asset button I'm going to add an image and this image is going to be the following SL images SL share comment.svg cool and then we'll just write anyone here okay so now you see this button appear here but now let's wrap that new button that we made inside of share comment component okay so I'll go here go here and paste it okay so this is what it should look like share common component I was going to complain about share common component but you and I we don't worry about that cuz we know this we go ahead and create this style component like this keep it blank and then let's add some padding left okay let's go ahead and let's go and add margin right Auto cool let's go border left one pixel solid rgba this cool so now you're seeing this border right this thin little border that's being there let's go ahead make a dollar sign I'm going to say asset button select asset button and inside of that button any svgs we have let's give it a margin right of five pixels cool so that looks good the share comment component is kind of done now let's add the post button and how I'm going to do it is like this so let's go right underneath the share comment and let's add in the button right here okay so I'm going to go post button and let's just say post now let's go ahead and add that to our styling so I'm going to do cons post button is equal to styled button cool so again start off with empty and now that button is there I can see it Min with 60 pixels cool border radius 20 pixels o I like how it's looking padding left 16 pixels cool let's add some padding right by 16 pixels okay so now it's made it a little bit bigger background like this okay give it a little blue we'll color it white okay and then on Hover so I'll do this on Hover we're going to give it a background of that right there cool so when I hover boom just a little bit extra blue click it and I can press it okay beautiful all right so now that we added that post button let's remove the remove close button image okay and we're going to do some stuff with being able to hide it and show it so when we hit X we want things to be able to happen Okay so let's go and work on that now okay and um I was going to work on the text editor earlier but let's go and work on it now okay so let's go ahead and work on the text editor cool so no worries in post model what I'm going to do is all the way at the top okay let's go import use State like this okay use react States because we're going to need to work with State now and uh let's just let's start so here I'm going to say editor text and then we're going to do set editor text so this is going to be a function that allows us to change the text all right it's kind of how you also set variables in react the react way of setting variables and we're going to start off with it being blank okay so the functionality we're working on now is this one so when I hit start a post this m pops up the text in the start is blank and then as I start typing it it updates the text so we're going to do that in our app that's not built yet cool so let's go underneath user info okay so underneath user info I'm going to make my editor component and uh editor component is going to take in the text area actually let's before I make my editor component let's leave it blank let's start off with uh just doing text area like this um cool I'm going to remove just go ahead and remove all of this for now all right and what I will say is inside of text area let's add something for Value so we're going to make value B the editor text so whatever the state um of the text is okay so right now it's not really going to be doing much so when I type it doesn't do anything it just kind of freezes that's what should be happening with yours okay then after text I want to do on change I want something to happen okay and what do I want to happen on change I want to take let's go like this I'm going to take whatever the value you're giving me and I want to set it to the editor text so I'm going to do e . target. Val so whatever you're typing okay it's complaining e is not defined okay not to worry we're going to take care of that shortly okay so we have onchange and we have the onchange ending right there cool let's go ahead and add the placeholder as well in just a second all right just make sure you refresh as soon as you refresh you should be good to go and all that's happening is as soon as I do I type in F in the text area now it calls this on change okay it goes on change what should I do on change says hey grab the event okay what was the event I wrote this thing so now what we do is we change the editor text variables value which was blank in the start with whatever the target value is in this case that's F so now this Ed text here becomes F and then it shows F now when I write Fe it becomes Fe it passes that here that passes that here and then that shows that there super confusing but that's what's happening okay and then if I hit post I have access to all of that information so now let's do placeholder whoops let's not do that placeholder okay and then my placeold is going be what do you want to talk about cool so if you remove everything that's the that's what the placeholder will be and of course let's also do auto focus to be true okay so as far as my text area is concerned that's looking good now what I'm going to do is I'm actually actually going to create my styled component I'm going to do this one the other way so let's go ahead and create a styled component called editor and do style div okay and I'm going to and I'm going to style it in just a second let's go and add let's go and take what we created this text area and we're going to wrap this entire text area inside of our a new component called editor so make sure you cut that and you wrap the text area inside of editor just like this okay now we need to style our editor component okay great let's add some padding and I'll go 12 pixels by 24 pixels like so let's now style the text area inside of this editor let's go with 100% goul just big let's give it a Min height of 100 pixels great did that do anything yes I made it fat which is exactly what we want and then uh resize none okay so now so notice this little touch right if I have resize enabled at the bottom right you see this resize and I can resize it to whatever I want right boom it's kind of weird by doing resize none it now there's nothing there's no way to resize this that's what we want let's go here and let's go input with 100 beautiful okay so whatever we're writing here input cool height of 35 pixels cool font size of 16 pixels okay all right and then right underneath it we're going to go margin bottom 20 pixels okay great our text box looks text box looks absolutely great we're using uh state to do a bunch of stuff and that's good now again let's focus back on being able to open the model and close the model this is something very common that you have to do in react and we're going to start working on that now so let's go ahead and get started so where should we get started well the first thing I want to do is um inside of main I'm going to add the ability to hide and show the modal cool so let's go all the way at the top we're going to import State because we're going to need access to it so use state and I'm going to say from react okay now underneath main we going to do show model set show model like this my bad use State and um default is going to be a closed State okay so by default it's going to be just always closed all right now right underneath here let's add the code to make it um hide and show the model so let's get started on that so I'm going to do handle click and here's what we're going to do okay so we're going to start it off by preventing the default Behavior which is important for react so you don't have these weird refreshing things going on when you don't want them okay all right let's go let's stay here outside of our if statement and now I'm going to just add a little switch statement and I'm just going to say show modal all right and in the case that I get an open what I want you to do is the following I want you to set it to close and then break okay in the other case where it's closed then what I want you to do is I want you to say show model to be open okay and break in the case oh actually otherwise let's just do default set show model to be just closed by default okay and then we'll break right there beautiful so that seems simple enough now let's actually go to the button and add that functionality where is my button user SVG yep so start a post that's where we're going to add it so let's go onclick equals and I'm going to say handle handle click okay great and and uh where I have post modal let's scroll down scroll down where I have post modal I'm going to give it show model pass at the current state of the model okay so it's going to take a prop that's show modal prop and we'll add in the functionality for that prop in just a second okay and then the handle click prop it's going to just do handle click actually we're probably just taking in props so we'll probably have to do props do show model and props do handle click so let's go ahead and check that out let's go to post model um dope and inside of my post model I want to do just a few things so right underneath that text that we're editing let's go ahead and do the following I'm going to do going to create a reset all right and this reset is going to take in an event and it's going to set the editor text to be blank and it's also going to handle click and handle the event okay so I'm going to wrap the whole thing in a jsx fragment all the way down to this container here okay so let's just start off with that and then what I'm going to do is I'm also going to wrap the entire thing in these squiggly brackets like this cool now within here what I'm going to say is I'm going to say props do show model equals open if that's true then what I want you to do is show me all of this stuff here okay and uh what I'm going to do to my button let's go to my where is my create a post create a post right so right underneath that I have a button okay and what to that button I'm going to do onclick on click taking an event okay and call my reset function and give it my give it my event okay that's what I want to happen when I click X so now um oh also let's go all the way down and where do I have my SVG inside of my header const header where's my header styling right there let's also do comma IMG to it okay let's add an image to it as well cool let's refresh let's full screen this thing let's hit start a post ooh hit X nice look at that that worked I can't believe that worked I really thought it was going to break boom boom look at that model and look the whole screen goes dark because that we have that you know that postm modal div that takes over the entire screen when I click it when I hit X it goes and it's done okay that model is a very beautiful functionality so great work on adding that I'm proud of you okay and if you're proud of you then smash that like button okay just for yourself if not for me I'm proud of you let's keep going now we're going to add a smooth fade that's going to fade these things out so here's how we're going to do that let's go to post modal and and inside of our post model let's go all the way down to container and right underneath here I'm just going to say animation fade in and let's do something like 0.3 seconds that's 300 milliseconds okay did that do something I don't know if that didn't do anything then we're going to have to make it do something start a post cool let's go to our index.css and we're going to make it do something all right so I'm now in my index. CSS file which is of course um inside of source so let me close out of my images and close out of my public let's close actions okay so inside of source I have index.css let's go there let's go all the way down and let's make let's make that fade in mean something and do something so I'm going to say webkit key frames let's go fade in and what fade in's job is going to be is this from opacity of zero what we want you to do is go to an opacity of one and now we're going to also Define standard key frames let's remove all of this um Let's do an at sign right there okay save is it still complaining failing to compile that should be good start ooh look at that fading start a post ooh click yo that looks beautiful that is freaking beautiful that's all I got to say that's all I got to say all right all right that modal work was just beautiful okay now let's keep going beautiful so now we got that working now we're going to disable the post button when the editor text is um empty okay cuz right now even when the editor text is not empty I can hit post so we don't want that we don't want that okay cool so let's go ahead to post model and let's start adding that functionality so so let's go to our post button and um inside of our post button all I'm going to say is this I'm going to say disabled okay when the editor text state is empty when it just doesn't exist okay if it's so give me true so give me disabled true if the text is empty otherwise give me false cool that's essentially it cool dis a old old D just like that okay so now because of the styling and stuff like that you can't really see it but it's actually disabled right now because there's no borders around it but I type the borders appear okay but it's just like a little hard to see so we're going to go ahead and add some styling to it so let's go to our post button so I'm going to command f post button component and let's add some styling to this so inside of background here's what we're going to do we're going to do some cool ways of styling now props dot this I'm going to do it this way okay let's go get access to the props and if the props is disabled question mark then I want you to style it in this way 000000 .8 okay and if you're not disabled then I want you to style it in a different way so like what we had earlier so now this is going to be really freaking cool whoa what the hell happened it looks ugly as hell what the heck happened we lost all of our styling oh man the app is going all over the place all right let's take that out of parentheses is here um I mean it doesn't really matter but prer wants me to do it the other way oh and why am I going blind let's um close this freaking parenthesis right there right cuz that would only make sense and then that closes that cool ah yeah look at that okay my post is dark I write and now it's blue blue this is why I love styled components you guys because I'm just I'm saying if it's disabled give it this color if it's enabled give it this color and it's just so freaking nice it's just so freaking nice okay um and now I I also want to change the text color Okay so let's go ahead and change the text color cuz right now just white that's not what we want so let's go props and I'm going to go props disabled okay if it's disabled AED then do the following of course open close this okay and then outside of this just give me white okay so when it's disabled it's hard to see it when it's enabled boom okay so that's what it I want that to happen with the colors it's good it's good okay cool and then on Hover I also want to give it a dynamic functionality okay so I'm going to say props and if it's disabled again let's go ahead and do 0000 0.8 like that actually let's do 0.0 0 Yeah 0.08 okay or in the other case give me this okay am I closing my parenthesis right yes I am on Hover beautiful okay that's all that's happening cool so when I hover over it gives me a like a lighter gray uh in the disabled mode okay and then when I write then it gives me this one when I hover over on this thing right boom boom boom beautiful that's exactly what I want and that's really really good now we're going to start adding um file input for uploading images and that allows us to upload a file from our computer and add it to this and that's really nice functionality and if you're going to a recruiter you can show them that functionality okay they're going to be blown away so let's go ahead and start adding that now so file input where do we start well we start in post model let's go all the way to the top and right underneath this let's go ahead and add share image set set share image all right and I'm going to go use State leave it blank cool um and then what I want to do is I want to handle the change as it happens okay we're going to get the first element from the files and uh if the image is blank or image is undefined okay and those two cases um I want to basically say hey uh not an image the image file is a and then we're going to be able to access and say type of image cool so that's going to be great this is going to help me figure out like what the actual error is is and what's the type of the image and then otherwise I'm just going to return and I'm going to return right here return cool and now right underneath that let's go set share image image okay so meaning if we don't get an error then do this thing and when I do this thing it's going to update that variable right there share image cool cool cool cool cool beans now let's go ahead and actually add the upload image component so I'll add the upload image component uh kind of right underneath uh the text area all right so text area what I'm going to do is I'm going to remove this and I'm just going to end it right there so just a little bit tad bit clean and right underneath the text area I'm going to add the upload image component okay and let's just go ahead and give it a empty styling for now before we start uh doing other things to it upload image is equal to styled div and just leave it empty for now that way we don't get into errors as I'm writing it so you can see it build out upload image right there and um let's go input type type is going to be file so already just by doing type file for input I can now choose file and it brings up all of this stuff which is super cool all right so that's good and I can even click choose file and click an image and it automatically knows Disney plus ASMR right it it says it right there that's that's a really good sign so like things are already kind of working uh I'm going to say accept um and let's say accept what accept uh image slash GIF so accept images and gifs and also um accept jpegs and also I'll have it accept pngs Okay like this so that's good go name is equal to image the ID of this will be file cool of this input and then let's give it a style and I'll give it a jsx inline styling okay and I'm going to say display um none Okay so if I remove that style you see choose file if I REM if I add display none now that choose file is just not showing cuz I I said don't display it right if I change it with something else it's going to have different Behavior cool all right so that's good now on change we need to add something that actually handles on change okay so let's go on change we're going to handle on change okay so it's going to run our handle change function which is going to do all of this which is going to set the image for us cool cool let's so now we're closing out of that input that's good all right so that input should end right there right underneath that we'll add a paragraph tag and in here let's add a label okay and HTML 4 will just be file and now let's give it a style okay and again we'll also do this one in line as well for styling just please bear with me this is going to be a little hard to follow but bear with me here and I'm just going to say cursor pointer but actually you know what I don't even think we need that to be honest I'm just going to leave that that will make it simp simpler for you and then let's just say inside of the label let's just say select a image Let's do an image to share like that okay so now there is our styling very very simple okay and when I click it okay already um it actually opens this up okay so but what we have to do is probably make it look like something that you want to click on so we're going to do that in just a second all right let's end our label we're ending our label that's good and right underneath ending our label we're ending our P tag that's good now let's right underneath our P tag but in still inside our upload image component let's add in these squigglies and we're going to do share image so if the image actually exists then do the following okay and I'm going to say image source is equal to and I'm going to say url. create object URL and I'm going to pass this the share image path okay like that let's close our image tag beew beautiful okay boom boom wo a our imag is showing that was nice and a lot easier to do than expected beautiful beautiful beautiful beautiful that's good let's go down upload image now let's add this component styling all the way at the bottom for upload image because right now the image is ridiculous right so we're just going to need to control that so let's go text line Center and then after this so now select an image to share is looking good okay and of course now what we want to do is we want to say hey the image let's give it a width of a 100% so now the image is looking great wow how nice huh we got click okay let's refresh right boom let's click select an image to share pick that hit enter man that looks beautiful that looks beautiful I love it okay very very simple and very effective very very effective um now we're also going to add a react player so then that way we're able to actually show like any video URLs that we put okay that's going to like kind of Auto expand them and make them look great so let's go ahead and do that cool so let's start working on it now first things we need is we actually I'm going to hit control C and stop my server and what we actually need is you can do npm install like this but I'm actually going to do yarn ad which is the same thing uh and I'm going to do yarn add react Das player okay and hit enter so install um what I want you to do is install this component right now not component but um man I'm my brain is getting fried but yeah install this so now you should have react player okay the react player library and uh let's go inside of our post modal and go all the way at the top and I'm going to do import react player from react player like this cool and right underneath here we're going to say const video link and then we're going to say set video link like this equal use State and leave that blank okay cool now inside of our handle change actually are we going to work on inside of our handle change let me see okay so right here where I'm doing this share image thing right above upload image um where should we add this actually let me think so let's keep this inside of our up upload image but right underneath where we're doing the share image line okay so right here we're going to do a couple of things I'm going to add a empty react J jss jsx fragment okay and inside of this let's add an input uh we're going to keep it text and placeholder will be please input a video link like that and then the value will be whatever is the video link that we give it and of course on change we're going to say take the event and set the video URL set the video link based on whatever the user gives you okay the value of the event great so input ends here and right underneath input what we're going to do is open close squiggly and I'm going to say if video link exists then what I want you to do okay and let's close this bracket and go react player all right and I just imported it so I imported import react player from react Das player so make sure you go ahead and do that let's say react player width is equal to 10 uh let's go 100% okay and then we're going to go URL and is whichever video link that's actually set in our state at the moment okay save beautiful so that should be pretty good all right now we're going to test it out and see if it if it does anything whoops let's do yarn start again so it starts up our app okay wake up app cool all right so we got please input a video link let's see if I have a YouTube video link boom right when I embedd it it's right there that is awesome and this also happens to be my video if you want to go check out my chess Channel welcome back to another video that's awesome yeah beautiful let's go 20% on the width so that made it really really tiny just like this so make sure choose 100% on your react player width so react player plays really nicely with videos okay so we're good now we're going to make it so you can switch between share image or share video all right here we go welcome back to the same thing that you were on so let's just continue going all right I just want to take a a little break but it's all good we're back now and we're ready to go okay can I hear myself beautiful awesome so let's just go ahead and get started with this right so so far we're doing a great job we got the video player showing we got me looking beautiful here right there okay maybe for you it's your video that you're putting okay you you can use your own YouTube video link and then it'll be you with that said let's go ahead and make it so we can switch between whichever one we want right because right now we're seeing both image and the YouTube url I don't want to see both of them I just want to see one of them okay cool so let's go ahead and add that functionality okay now the functionality is going to take a little bit so first things first we're going to start off by going inside of our post model so make sure you're there and uh right here we're going to add that component okay so not component we're going to add um a state variable here okay because this is going to change at some point so asset area and then of course the um the way that we are using it is going to be set asset area cool just like this this a convention we use and default is going to be empty cool now let's go under where we have set share image okay underneath that we're going to make a new function here that we're going to use switch asset area cool it'll take take in the area as an argument and then it's going to do a couple of things so it's going to make the um image just empty we'll also do set video link and we'll make that empty cool and then we're going to do set asset area to the area that we received okay and uh that's all good okay awesome now let's go to our reset in in our reset we're just going to add a few more things okay but we're going to add that above our handle Click Change okay so I'm going to do set share image let's go blank here set video link will go blank because again this is reset so this should reset essentially all of those States so that's all we're doing there now let's go down under where we have the area focus in our text area Okay so right below this I'm going to do a couple of things okay uh what I'm going to do is let's open up our squiggly bracket here okay and um let's go ahead let's go ahead and U what I'm going to do is I'm going to close the squiggly bracket kind of in this weird area right underneath this jsx the jsx fragment that's ending right underneath this um player that's where I'm going to add the ending of that okay and essentially we're going to have a Turner operator in between there so let's do this okay so if asset area is equal to image then I want the following to happen all right oops image then I want this all of this to happen Okay uh the upload image thing to show up okay um all right guys so I'm going to take this where this upload imag is ending I'm going to take it okay I'm going to take this thing here and let's move it up okay so boom boom boom let's go up top and uh let's end this component right here okay the upload image component and here's where I'm going to add my erary so I'm going to do colon here this is a little hard to read and um and I apologize about that but bear with me here and then I'm going to say if the asset area is Media then I want you to do the following okay in that case do all of this so again a little hard to read but I'm basically saying if it's image then do all of this okay the upload image component okay if the asset area is Media then do all of this okay great and then let's go ahead and just switch a couple of things so I'm going to find my asset button and all I'm going to do for my asset button is very simple I will simply add an onclick on this thing like this let's open this up go like that beautiful and I'm going to do switch asset area like so and uh pass in image okay give it pass in the image for that and then where's my other asset button right here this is the one for the video and I'm just going to say on click and uh we're going to do switch asset area and I'm just going to say media like so okay and then that should be pretty freaking good great pretty freaking cool wow look at that it's working and it looks nice right when I click the image I see this when I click this one I see this video right there okay and how is that working well uh this is this is uh one AET button which is right here and this is asset button number two this video one okay so we got one and two I'll write one and two just like so okay this image one is this one the one and this media one is this video one now what happens when I click this video one or sorry this picture one is this onclick thing runs and it changes my state variable this asset area one and it changes it to image okay so well let's go into that function and see what that's doing okay it changes it to an image okay so I go switch asset area and I pass it the image and then it just changes it to an image all right and that makes the code appear and work and do do essentially what I want it to do okay if I go and do switch asset area to Media it goes ahead and changes it to a media okay and then boom you get your uh switching statements here boom and here I can put my video link to a YouTube video like so and it will actually even put the video here okay and let's test put put an image and let's see if our image Works beautiful our image is working and that's exactly what we want so we're done with that functionality now we're going to connect with our store and uh get user info okay so let's go down first of all let's actually just import so I'm going to do import connect because we're going to need to connect to our Redux store in a second so let's do this okay all right so now we're going to map states to props the boring usual Redux stuff which you know Redux toolkit you don't need to know how to do going do map state to props State and um actually this is going to be an expression like that okay let's leave it empty for now and um I'm just going to do export default connect map state to props we'll do map dispatch uh dispatch to props okay and then we'll do Post modal like that actually my bad okay uh this is this one is going to be map dispatch map dispatch to props okay and uh that's going to be good for the dispatch to props and above this I'm going to add map state to props okay and we'll make this state now this one is going to be dispatch okay so this one that says State cool let's go like this all right I like putting parentheses here hopefully prettier likes it too great and what I'm going to do is say return user State user state. State like that okay so now that should be good to go that's that all right now we're going to display the user info so let's go to user info component which is up here and we're going to add our little Turner action and let's go ahead and do that now okay so I'm going to say props do user. photo URL so hey if the photo URL is there then I want you to do the following then I want you to show the image and the source for this is going to be the actual URL for the photo props do user. photo URL like so all right and um I don't need to do anything else I think that should be good cool let's end this photo one okay and then we need an or statement so an or statement I'm going to basically give it this as my or statement and then we need to end this squiggly okay so what is my error here let's see I think I'm ending it too early so let's remove that there so basically I'm saying hey does the photo exist if it exists of the user then show the photo of the actual user that we pulled from Firebase otherwise show this Anonymous user photo so let's click the post the modal okay now it's having an error cannot read property photo URL of undefined okay no problem um so what basically needs to happen is I need to right now actually I'm logged in logged in okay weird error we'll figure it out together not to worry okay let's H save on this thing and then let's go ahead underneath here we got our span tag and then our ban what I'm going to say is props user. display name okay just like that great and of course we got to close our squiggly otherwise we're going to be in some troubles cool so let's try signing out let's try signing in with Google okay cannot read property photo URL of undefined interesting cuz pretty sure we're freaking logged in oh duh this is why I don't have access to the user I got to access the freaking user okay that's what user is okay state. user state. user okay so now up here here where I'm asking for the user command fuser okay where I want to get the user's photo now I have access to the user's photo so let's hit save let's hit refresh and now I'm going to have access to the user's photo okay so for example let's Click Boom there we go okay so now let's go full screen here okay click Start a post and if you're logged in we'll have a photo here if you're not logged in you shouldn't even be able to get to this page but if you did get to this page you'll have this Anonymous photo as a fallback okay so great now we got that photo now let's add functionality with the image okay we want to be able to actually upload the image to Firebase storage so let's go ahead and do that now so first things first well what are the first things first so let's go to actions cuz we're going to add an action and uh we're going to add a new action okay it's going to be called Post article API and it will take in a payload okay and I'm just going to return a dispatch event that's going to look like the following okay um if what I want to do is payload is uh payload do image is not blank so we have an image then I'm I'm going to set my upload to be storage. ref whoops storage. ref okay Images slash payload image. name okay and then let's get out of here and we're going to use theut method and we'll do payload do image cool so this is going to help us upload our image all right and uh let's go ahead and make sure that we do that all right now let's do upload okay and I'll do upload. on cool on state changed okay then we're going to do snap shot all right let's go and not that one let's go like that snapshot I'm going to say cons progress is the following going to have snapshot bytes transferred boom and we'll do snapshot. total bytes byes just like that all right and let's multiply that by 100 and close it off cool all right now this is going to be helpful for making that loading bar soon and I you guys will see how this is actually going to help you okay so now boom we have this one right here let's just wrap this thing in inside of paren right here um it doesn't need it okay it's redundant cool let's get out of here and now let's basically go console log uh progress okay and I'll do this progress okay and we'll put a percent sign so that'll show us how's our progress doing so far I don't want my function to be ending here so this upload on needed to be ending a little bit later all right so we're going to need quite a lot of uh little weird changes here so just follow along um gets messy okay so uh open a par pareses here and we're going to close this okay cuz this whole thing is an expression then I'm going to console log the progress and then what I'm want to do is I want to essentially close out everything right so for example this squiggly here let's close that out that parenthesis right there I'm going to close that out I also want to close this squiggly right there okay and then I also want to close that squiggly out right there and I also want toose CL that squiggly out right there and uh that should effectively take care of everything and once I hit save it should kind of format it like this okay but there's a couple of things that we got to do here all right now underneath this what I want to basically say is if the snapshot state is running on the other hand okay then what I want to do is I want to console log the progress okay progress like this and boom cool so in both cases kind of show me show me what's going on okay and then let's go underneath here okay right there and what I will say is if there's an error then console.log error code okay so again I know there's a lot going on in this upload so there there's a lot right so for example this upload function it took in this state change then it took in this function right here on the Fly and then it's also taking in uh what needs to happen when there's an error okay cool and then let's also do async okay we're going to have download URL and what that's going to do is we're going to wait upload cool and we're going to do get download URL like so okay all right so storage is not defined we will Define storage by importing it okay so let's go ahead up at the top and in here right after provider I'm going to upload storage from Firebase that'll take care of that we also want to add our database let's do import DB from Firebase we're going to need that later okay cool let's come on down now and we got our download URL so that's good now we need to do a couple of things so right underneath this download URL we're going to do our DB collection okay so DB collection articles to the Articles collection we're going to add the following the actor it's going to have the following things in here description will be payload of the user email title will be display name like so date will be whatever is the timestamp of the payload and then image will be the photo URL of course okay great and then underneath Here video will be payload video shared image will be the download URL that we made comments will be zero we'll kind of just hard code that for now and description will be the payload description okay so that should be good I know that that was like a pretty hefty piece of code but let's go to our post modal and now actually add that functionality in we're pretty close so hang in there with me guys let's import Firebase from Firebase okay and then we're going to import our Post article API like so and let's do from dot dot actions okay so that gets us that now let's go where our switch asset area shows up cool and um let's add in our new method okay or function here Post article okay it's going to take an event and again I want to Def kind of prevent um any of the weird stuff happening in react where things need to refresh and so on so let's take care of that and I'm basically going to say if the target does not equal to the current Target then just return cool and then I'm going to Define our payload and image will be the share image video will be the video link our user will be our actual user description description will be whatever the text is that the user adds and of course timestamp will be Firebase timestamp okay so that's why we imported Firebase and then here we're going to have props dot Post article and that's going to take the payload okay and then simply let's go ahead and reset e and then we'll call this function and we'll reset everything okay once it's added and now let's basically go ahead and add these buttons so going to go down to my post button and inside of my post button when I click that button I want a couple of things to happen okay so let's go here and we'll Define an onclick just leave it blank for a second and in our on click what I want to happen is I'm going to give it an event and then I want the following things to occur run our Post article function and give it the event details okay that means the description the text any information that we have already about the user and now just let's go to our dispatch and add all of that in cool so let's go here and let's add in that so Post article and we will do it'll take in a payload okay and then we'll dispatch Post article API pay load like that okay beautiful now let's see if it actually does anything for now so I will take an image select an image click an image do that test let's hit post post so maybe it's doing something maybe it isn't but the only way to go and check is to go inside of our fire store database and let's see if anything is actually happening okay so let's go ahead and create a database I'll put it in test mode let's hit next and enable all right that's going to be important because that allows our database to actually be created in the first place otherwise we will not have a database and Fir store is actually very very powerful so I like using this as our database base okay all right now we don't have any collections or anything like that so let's try hitting post again does that do anything nope not doing anything right now which is totally fine and by the way fire store also has storage okay so I'm going to click on that I'm going to go in there so on the left hand side I have storage and I can even up a file right so let's just click here upload a file see what happens I'm just kind of like hardcoding it and uploading it there okay so boom it uploaded it and now we'll be able to retrieve file from here okay so that's the file data it's kind of nice uh goey that they have actually for uploading uh things so pretty uh simple but that's just kind of like I'm me hardcoding it okay but that's not the way we're going to do what we're going to do in our app oh and going back to index file by the way our actions index.js um this is squiggly okay not parentheses that's why it's not changing uh that's why it's actually not using that variable okay this is like template literals so that's how they work boom let's refresh cool okay let's try uploading the image now hopefully that works Let's test test test test test okay if it works it'll probably upload it to our um storage folder inside of our Firebase okay so let's keep on trying this thing all right so let's actually debug this real quick together because I think that's going to be helpful so let's go inside of Post article and I'm going to type in console log uh post Malone all right let's uh add a rocket here okay it's not going to add a rocket so let's just add a person here that's fine all right so I have my image I'm going to hit post and it says post Malone so I want to see where it's getting to so it's getting to this line let's now add a console log here and I'm just going to say can I add add a cake here let's add that cake I don't know why it's being funny but I'm just going to say hello here okay and uh let's see if it gets in here uhoh ah okay so it seems like it's getting to this if statement and then it's just returning so it's actually not doing any of this and it's not running this Post article payload function cuz that Post article payload actually does everything that we need to do it actually does this Post article right we give it the payload it dispatches it and then it gives it to this function this function knows how to up load so it's never even getting to that it's just dying right here and that's because e. Target is not equal correct Target this should be current Target okay so I'm going to hit delete here um and now it should not be getting to that hello so let's try again and look progress zero progress 28 progress 85 progress 100% wow so that actually looks good looks like something happened so I'm going to go to my Firebase refresh is it in my storage or is it in my database oh it's in my storage I oh that's cool I have an images folder and here's my image Gatsby versus nextjs okay beautiful it is is it also in my database yes it is I have a collections here so I'm going to delete this other uh record I had um actually let me just leave that I just had like some dummy freaking record okay so delete um I don't know if it deletes the whole thing or not it's not deleting it that's fine so just forget about that one but it just added this new record here in my collection articles okay how do I know that well if I go to my code inside of my index.js I have this line here that says hey um DB collection articles inside of Firebase add and then add this whole thing okay so we got actor and actor has all these things inside of it right right and then I also got just video shared image and comments so video shared image description and comments cool which is corresponds to these four things and then actor and all of that corresponds to all of this okay so that looks good to me so far now finally it's working and this progress bar is working so that's really good progress on our end now let's add the same post functionality but with video as well okay and how we're going to do that is it's going to be very simple so remember how we have this if statement right here that says payload image well what we're going to do is say let's find where that ends right there okay and um I'm just going to do else if be careful with the indentation otherwise you're going to get caught okay and I'm going to say if payload is video then I'm going to do DB collection and essentially I'm going to do the same thing which is going to be articles. add okay and we're going to do actor description pay. user. email title I'm just going to copy some of these okay title is going to be that uh date is going to be whoops didn't mean to delete it it okay so paste and then I'm going to copy copy image and also paste it right here okay so those are going to be the same and um also this whole thing pretty much is also going to be the same video payload video shared image so the there's going to be only one difference though okay so I'll show you that in just a second let's hit save now instead of shared image being the download URL it's just going to be empty because it's not an image cool capiche makes sense okay great so that's it that's all that happens if we choose to add a video instead of an image okay so let's try adding let's go here and refresh and let's go here try adding a video We'll add a YouTube video test hit post and uh hopefully something happens let's go to our app did it add a video yes it added a video right there okay it's inside of our database we'll be able to get access to it whenever we want so on and so forth okay cool now we're going to add in an article reducer and this is going to be helpful for when we actually want to start pulling the Articles and actually showing the Articles okay so let's go ahead and start working on that so I'm going to go inside of my reducers so Source reducers going into my reducers folder and we are going to create a new file and it's going to be called article reducer DJs AKA article updator okay much better name for a reducer and I'm just going to say export const innit State like this loading is false okay so the initial state is going to be loading is false so we won't we shouldn't see that loading Circle in the start okay my article reducer what that's going to be is hey my initial State let's make it the NIT State and then it's going to take in an action whoops my bad there we go and then we're going to take a switch based on the action type that's just how Redux works okay and again default is going to be just returning the existing state and I'm going to export default article reducer like so now let's go inside of our index JS which is inside of reducer so the index JS inside of reducer so go to that and uh right underneath this user reducer I'm going to add in an article reducer like that and underneath my root reducer I'm going to add um so user state is good just going to add article State and we will do article reducer like so all right so that's good now we're going to start working on the loading bar okay so we can see the loading bar uh showing up as we um you know upload a video or an image we want to see like a little spinning circular loading bar so let's start with going into our action type.jpg so this is going to be export cons set loading undor status equals set loading status like that okay beautiful and let's go inside of our article reducer okay and I'm going to do one thing inside of my article reducers which is I'm going to add an import statement at the top and I'm going to say import set set loading status from actions action type okay so let's import that one and then we're going to do underneath our action type let's go ahead and do that so I'm going to say case set loading status okay and I'm going to say a return whatever the state previously was and then add this new loading State on top of that okay keep in mind because this say Redux nothing is being mutated now let's go to our index not that index let's go to our actions index.js there's just so many indexes okay so this import right here we're going to do set user and also set loading status and let's go underneath our um we can kind of add this wherever we want but I'll just add it here okay let's let's just add it right there okay and um I'm going to just do export constant set loading is equal to it take in status as an input and we'll do type set loading oops set loading status status is going to be whatever the status we pass it okay and now let's go inside of our function uh Post article API and right underneath this return dispatch I'm going to say dispatch set loading to be true great let's give a little Gap here just so it looks cleaner great now let's go to our image and our image if statement right go all the way down to where we have the payload do description okay and right underneath that I'm going to say dispatch set loading false okay so once all of that happens we're going to say finish the loading meaning we'll keep spinning keep spinning keep spinning until the whole thing is uploaded and added to our articles as soon as it's added to our articles in our Firebase database then stop the spinning okay dispatch an action to our Redux store change the state of the set loading got it and then we're going to do the same thing for the when the video uh is done being uploaded so these are the two parts where we're going to switch the loading to essentially false and for it to stop spinning okay beautiful now next up we're going to like add our spinning logos and things like that okay so here's the spinning logo it's going to be called spin loader this is what it is okay spin loader. SVG the it already comes in with the graphic of the spinning so we won't need to do any like fancy CSS so that's a good thing all right take it and add it to your images and then we're going to x out of it okay and now we're going to go to main.js so we can add that there okay so let's go to where our share boox is because it's going to be inside of sharebox so inside of sharebox we have uh we don't need this text here by the way anymore share let's hit refresh cool so that share word is gone great okay now I'm going to add in a squiggly here okay and I'm going to close this squiggly uh where should I close this squiggly I'll close it let me think about where to close it actually so let's just close this squiggly right underneath here okay and what I'm basically going to say is hey if the user exists then show the user photo like that okay and then here's what I want you to do if the user photo URL exists then again this is a Turner operator we're going to do this show me the actual user photo end okay um otherwise show me just their Anonymous photo okay beautiful I'm going to T take that div and uh let's put it right underneath the share box okay just like that so now what it should look like is we have one div inside of here what happens is we either see the user's image or we see the anonymous image and then we have a button okay so if I hit start a post I see this cool start a post okay and then it uh when I click that start a post button this thing is treated like a button and uh when I click it the handle click uh function runs okay so that little thing we added there is helpful and awesome and now on this button what we're going to do is we're just going to add in what happens when it is uh disabled okay so we're going to do props out loading okay and if so loading is either true otherwise it's false okay so if it's loading set the disabled to True otherwise set it to false so like we shouldn't be able to click that thing or do anything to it if it's a loading cool let's go to where our cont content component is so let's find content um actually we don't have content component yet so let's go ahead and add it and where I want to add it is let's go to our share boox right there okay and right underneath my share boox I'm going to add this cool so let's do this and I'm going to do props loading so if my loading is going on then show my loading spinner imagespin loader. SVG okay and I think we should be good even with that and let's end that image that should be good okay so our content um our content component is actually going to be just a tad bit longer so let's go ahead and remove this div that we're wrapping article in and instead we're going to wrap article inside of content okay so I'm going to remove the um let's go ahead and remove that div and let's grab the ending of the content and let's go all the way down to where article ends and let's remove this div as well and paste content okay so instead of wrapp wrapping our article in a div we're going to wrap article in our content component now again it's going to complain it's going to be like hey you haven't defined content okay no problem we're Pros now so we're going to go ahead and Define content going to do style div okay let's go up boom in there and I'm going to do text align Center just like this okay and um let me go ahead cool okay let's do again this is for the loading part okay I'm going to do image with 30 pixels all right and then let's go to the end here all right and um we're now going to Define what happens to our map State props so map state to props and we'll do return loading State article state. loading and uh we'll also do what's going on with the user so we'll get access to the user State and then let's do map dispatch to props okay and we'll just leave that blank for now like this leave it blank cool and let's do export default and we'll do connect map dispatch to props as well and of course main that's this file that we're in now it's like hey I don't know what connect is okay don't worry it's not Connect 4 but it's importing connect from react read du like so and that should know what we're trying to do so let's try to add an image and see what happens now we did not get a spinner okay that was not fun we definitely expected a spinner and then we got like Rick Rolled oh actually first of all let's go to this part here we I don't need these uh squigglies here first of all for the loading so let's remove that and uh let's try refreshing now and giving it a good old College try seeing if the spinner shows up nope okay and let's actually try putting a period here real quick and do period SL imagespin loader. SVG let's see if that helps us out here nope okay I'm officially an idiot so I was like wait what the freak is going on with the loading bar so loading bar is completely working I just forgot that it Works um not to show the image because the image pretty much just loads instantaneously but this bar is actually useful for when I hit post now the loading bar shows so perfect okay everything is working as expected and uh we're making great progress this was really awesome and fun so far so it wasn't because I put a little period in front of my um uh whatever that thing was uh the spinner the spinner logo okay so anyways good progress let's keep going now what we're going to do is when the page is loading we're going to call the API using use effect and we're going to use that to get actually the Articles from Firebase okay so we're going to use react hooks to get um articles from Firebase so let's go ahead and do that so I'm going to go into my index which is index.js inside of my actions okay okay and uh let's go ahead and add a completely new function in here so I'm going to do export function and do get articles articles API okay and then we're going to say return dispatch like so and we're going to say let payload okay so let's just leave payload as is and I'm going to say db. collection I'll do articles and now we're going to get data from the Articles okay so we're going to do order by we're going to do actor. dat cool and we're going to do descending like so and uh then I'm going to do on Snapshot okay this allows me to read data from from my Firebase I'm going to say payload is equal to snapshot. docs. map and um all the documents that I pretty much get back I'm essentially going to just kind of put them in an array okay map them that's what map will output that's what payload will become and I'll console the log payload as well so you can kind of see it okay cool now I have to refer to this and use this inside of my main JS okay so let's go to main let's go import I'm going to import use effect so I can use it and I'm going to bring uh use State because I will also need State need to also manage State cool let's do import the get articles function as well that we made inside of our actions okay we're going to do actions dot dot SL actions just like that great and uh let's go ahead and just add that uh right here say use effect cool and props doget articles okay so this will just pretty much run it once articles like this so essentially when I go to main page uh we're going to try to run this once let's go down all the way and now we're going to do our Redux stuff so let's go to dispatch state to props I'm going to go inside of here let's do get articles and um ENT going to say dispat get articles API like so and run it run it run it run it okay okay let's see do I have an error here use effect and use State what is it complaining about um oh I have uh I have it twice so that can just be on one line that's fine refresh cannot read property collection of undefined okay great so let's hit inspect and see if uh we're console logging anything we got an array of four and uh this is perfect because as you can see this array of four is telling me what do I have okay so I have four items okay one is um this image right here the user image one is this image right here okay let me copy that string and paste it that image right there cool here's another one it has a link to that video and then here's another one okay so shared image let's see where that takes me permission denied okay all good but it's looking like I have access to all of this and I can actually read it okay now what we're going to do is we're going to dispatch an action to the store um and uh for for setting articles okay this will allow us to set articles and then later we'll be able to do a lot more things with them all right cool so let's go ahead head and do that so I'm going to go inside of my action type and let's have another action type export const get articles and uh surprise surprise is going to be called get articles cool now let's go inside of my main and inside of my main where I'm defining my mapping state to props let's add articles in here as well and I'm going to say state. article state. articles like this cool and uh let's go inside of my article reducer okay if we don't have one do we need to create one no we have article reducer great okay let's go to our initial State and um we're going to do a few things actually all the way at the top so we're going to import set loading status we're also going to import get articles okay underneath here I'm going to say articles and uh whoops like this let's make articles an empty array in the start all right initial and now in our switch cases we're going to say hey if there's a case of get articles then what we need to do is return the existing state along with whatever the article's payload is just like so cool and now let's go to index inside of our actions all right and in our index we are going to import we have set user we have set loading status now let's go ahead and add get articles and I import this and let's go here and I'm going to do export cons get articles payload type get articles like that payload will be payload okay and let's go all the way down where I'm like sorting it by actor date and descending order all I'm going to do instead of this console log we're going to dispatch this I'm going to say get articles payload okay and I don't need this line anymore so let's hit save save on this thing so we're done okay this is allowing us to set the Articles okay cool test I'm going to just add a dummy image not too much be happening right now cool okay so everything is working now what I want to do is I want to hide the main content until there are artic so we don't want to show any of the content unless we have like articles in there okay so like for example I don't have any articles then like kind of don't show any of this the content cool so let's we're um inside of our main JS let's go all the way up let's go up right above the container okay and right above the container I'm going to open up a jsx fragment and uh right underneath where does the container end so let's see where our container ends under what where our container ends I'm going to close off my jsx fragment okay and here's another thing I'm going to do I'm going to open up a squiggly all the way at the top right here okay and uh we're going to close it all the way at the bottom right before the jsx fragment ending and hit save okay now why we're doing this is so we can add our Turner operator so I'm going to say if article's length is zero meaning there's no articles then what I want you to do is basically say there what the hell just happened there we go there are no articles like that okay that's all I want you to say or give me all of the things okay give me the share boox give me everything cool so this is a pretty simple turny operator but it's also pretty badass cuz it's like wait where did my endings squiggly go it's also pretty badass it basically says if there's zero then just show this there are no articles and if there are articles then do all of this okay kind of crazy cool okay beautiful now we're going to add the loader uh component all right so a few things need to happen so let's go and make the loader component all right actually you know what let's actually skip the loader component because I think it's going to add a ton of additional code and not that much functionality so let's pass on that honestly and instead what I want to do is uh let's display the articles that we actually get back from Firebase okay I think that's going to be a lot more uh interesting to add cool so to get started on this we're just going to do a few things inside of our main JS so let's go main Js yes cool I'm there um let's go down to where I'm loading my spinner down down down down okay so here's where my spinner is happening okay now right underneath this I'm going to do a couple of things here okay so buckle up cuz a lot is going to be happening here so hang in there with me let's go props do articles. length all right if it's greater than zero then I want the following to happen I want to map those articles okay and I'm going to need the key uh for performance sake so I'm going to say hey article key is equal to key like so okay and there's a a lot of stuff that we're going to be deleting soon as well um and it's going to make a ton of sense shortly okay so let's go articles. map key okay let's put a bracket there okay and uh we're going to need to end that article at some point but not to worry let's actually do this okay so I'm going to remove all of this here so we're just opening this okay and I'm just going to use this article right here and let's give it a key cool cuz like initially I was just like showing one post but we're going to need to show multiple posts okay so this whole thing is going to end up getting wrapped up okay so we're going to have to go all the way down and wrap up this whole thing so let's go all the way outside of article let's go ahead and close it okay so hopefully the error should stop just for a little bit okay now we're going to make our changes that we wanted to make okay so inside of our a um we're not just going to have this hardcoded image of the user we're going to have the image of the actual uh user okay so let's do article. actor. image okay so see now it's cool because it has my image right there that's what we wanted it's pulling that straight from Firebase that's a really really good sign so that's done the next thing is where it says title we're going to dynamically get this as well so I'm going to say article. actor. tile like so okay so now notice that my name is coming through that's also really good let's do the same thing here article. actor. description okay and now my email is showing up and then I'm going to do article. actor dat and we're going to make it uh if I leave it here let's see what it does oh ho ho very interesting let's see if it bugs out it freaks out okay and that's because we're getting a weird date from Firebase so we're going to do2 date like that and let's see if that fixes it it refresh okay and if that doesn't fix it then we're going to do that to loal date string okay hopefully that should fix it and it does okay all we have to do was change it and indeed it is April 24th here Saturday 1:17 a.m. so I'm grinding out here 1:17 a.m. for your beautiful face so if you're happy about that and you want to show your appreciation smash that like button subscribe to the Channel all right that's what I got for you so that to me looks good outside of this let's see what do we need to change where it says description let's change you know the description is hard coded so let's change that with article. description like so okay so test that's actually what I wrote test test test test test okay let's see what happens if I write hello and hit post okay so right now those things are not actually being added uh to the databases and coming back we're not able to read back from it so no worries okay because it's still also sometimes waiting for an image so a couple of things are happening and while it's loading did you notice I couldn't make a new post so that was cool because it disables uh the start a post button so that's really cool functionality underneath shared image we're going to do we're going to do a couple of things okay inside of shared image should we leave this hardcoded image probably probably not probably not so we're going to get rid of it okay why well because it's hardcoded we don't want it to be hardcoded we want to work on it and change things dynamically okay so here we go so I'm going to say if article shared image is not there and article. video is there then what I want you to do is uh use the react player all right so we're going to do react player and I'm going to give it a width of 100% like that okay and URL is going to be article. video like this and let's close it cool all right so let's also import the react player okay so let's go all the way to the top I'm going to do import react player from react player okay dope cool and uh now we'll add our or statement and we're going to say or do the following okay article. shared image if that's there then do this image article. shared image and then just C close it off okay so open close um what's the problem here did I add a question mark question mark oh my my bad this should not be here yeah yeah yeah yeah yeah yeah yeah because that's going to end that whole thing okay wow that looks great look at that wow yeah buddy okay so I like it I like it a lot okay hover over this beautiful beautiful that's absolutely absolutely great all right now let's do articles comments okay so let's go down downtown right underneath so let's find our social so we have our social accounts ending uh here and let's go a little bit above that I have comments and my comments are hardcoded in here I don't want it to be hardcoded so we're going to make them Dynamic and I'm going to do article. comments all right zero it's almost kind of like hardcoded but you know not really so that's good okay great so this is looking good now this is a lot of code a lot a lot just this line is almost 400 lines of code or this file I mean so great we have all of this showing up exactly like how we want it that makes me really happy and then of course let's do should we add more text no I I don't think I'm going to add this more text functionality okay uh let's try now adding another post and let's see if it actually reads hey there um we just got done building LinkedIn clone with fire uh with reactjs Firebase and Redux for image I don't know let me go and pick a cool image so I'm going to go inside of thumbnails and uh sure let's just pick uh just pick one of these let's just pick this why not why not let's hit post look at that we just got done building our LinkedIn clone with react GS Firebase and Redux so now our post functionality is completely working exactly the way we want it to that is absolutely gorgeous all right and before we deploy this thing cuz we're so freaking close and I'm so proud of you that you've done such a good job we just need to fix one thing this over here looks funny and these like buttons and these things look funny so this is going to be uh pretty simple so let's go inside of our main JS and first let's fix social count so social count component is that one right there this one right here okay so inside of our button let's try going border none so let's take away the border and uh let's also do background color white okay so it just just matches the the rest of the background okay great so that looks good to me let's also go inside of social actions and we're going to do something similar inside of our button let's go um let's go border none okay great and let's go background color white okay beautiful so now there you go that is our LinkedIn clone it is looking absolutely gorgeous you can log in you can log out I mean every single functionality is there we're using Redux we have our drop- down menus working I mean this is beautiful like think about it right like if I go mobile mode right look at how good the mobile version looks just absolutely freaking beautiful okay so this is an amazing clone you've done a great job so far and now for the last piece of the puzzle all we're going to do is we're going to deploy it together okay so sometimes um I forget my deploying commands but let's just go ahead and figure it out um you know in this video so first things first what one thing I know that I need to do is I'm going to need to run npm run build and I'm also going to need to set up Firebase hosting okay so we're going to go ahead through that process now now um let's try let's try um npm run build okay and let's see it go through the build okay and then we're going to do Firebase deploy and let's see what happens and when we run into errors we'll try to solve them together okay not to worry just make sure you're inside of um the main folder like LinkedIn clone okay main directory now we should have a build folder and this is going to be all our optimized images and files that are going to be ready are are going to be essentially production ready okay so there we go that's good our build is good to go and now I'm going to try doing Firebase deploy so I'm imagining I'm going to get some kind of error or some kind of process okay cool no worries let's see do I have any Firebase commands that I've written uhhuh so I remember the command is actually Firebase in nit that's what I was looking for okay so we're just going to initialize it let's go here and select hosting because we're going to need to host it um so that's good let's go use an existing project and let's go to is LinkedIn clone is it actually logged into the right one because I'm not seeing my project okay I'm going to end out of it let's do Firebase in it one more time and let's go hosting okay and uh let's create a new project because that that pro project just might not have been there okay let's call it LinkedIn clone what would you like to call your project LinkedIn clone I did not mean to specify an ID there's already a project with LinkedIn clone okay all good so let's actually go to Firebase from here okay let's go to project overview project settings okay link to a Firebase hosting site let's see if we can do that boom okay and let's go through the init project uh init process one more time let's do hosting hit enter um I don't think it's going to let me select an existing project why is it not seeing any of the LinkedIn though that's what I'm curious about because it sees all this other stuff but it not does not see any of the LinkedIn which which is very interesting to me so one thing you can do is make sure so it's because I'm logged into the wrong Firebase so I'm going to see if I can log out and I'm going to log into the right Firebase okay that's really where my problems were coming from cool so you can do this too if you're not logged into Firebase make sure you log into Firebase if you haven't installed Firebase make sure you install Firebase now would be a good time now I'm logged in to Firebase okay so good now let's do Firebase inet now I should see my dummy LinkedIn clone use an existing project the dummy LinkedIn clone that we worked on our directory is going to be build I'm going to hit enter configure as a single page app I'm going to say yes setup automatic bills file build already exists you want to overwrite just hit enter okay so now we' have gone through the initialization process I've also done npm run build so I have my build folder let's try Firebase build is it going to work is it going to work I don't know yo let's go guys amazing congratulations the LinkedIn clone that you worked and we worked so hard for is deployed so now let's go ahead and check it out hopefully it actually works and it doesn't embarrass us let's go full screen this is the deployed version you should be able to go and play around with this let's hit sign in with Google and let's see if it allows us to log in log in boom I'm inside and look at that it has access to my entire database it's fully up and running okay it has a bunch of my files everything I need okay and uh maybe by the time you're watching this I'm probably going to disabled uh for you to write to the database because people add all kinds of funny stuff when they're allowed to let's try um taking an image like this trash devs need to become prodev all right and I'm going to hit post all right let's see if that posts o that came through clutch and uh let's do um let's post a YouTube video of mine and let's go kazy playing chess let's hit post ooh that's posted let's hit play guys welcome back yo I can even watch that video I can even watch all my another chest tastic video so there you have it folks amazing great job the entire app is deployed it is completely working you've crushed it now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever program.com pwj okay so then you don't just watch me do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript so you can get your skills up so freaking high and really get to that next level so go ahead you know if you want to take it to the next level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we have't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing six figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need man with that said this was so much fun for me I hope this was also fun for you once again this is your boy kazzy AKA react daddy smash that like button subscribe to the freaking Channel and uh that's it okay comment below if you enjoyed this if you love this it's almost 2: a.m. and I'm out here grinding for you I love your beautiful face and as always I'll see you in the next videowhat's up guys welcome back to another Banger LinkedIn clone with reactjs I hope you're excited let's get your mind blown so I'm just going to show you on the screen and let's go to the LinkedIn clone as you can see from the URL that is not the real LinkedIn right this is the one that we've actually built so check it out this one has really sweet functionality and if I actually switch to a mobile version Look you can see that it actually looks absolutely beautiful even on mobile okay now what we're going to do all right so now check it out right most bills that you'll see anywhere they're not mobile responsive but this one is that's exciting now let's go ahead sign in with Google this is powered by Firebase and we have Google authentication coming in let me click sign in awesome put this in we should be good to go in just a second Beautiful look at that okay we're in side of the LinkedIn clone okay going all the way up top I can see my card here on the left hand side my right hand side feed and all the posts down the middle I have my search bar on the top left all of my little things and I can sign out if I wanted to and another cool thing is that actually I can even make a post so I'll click here we got our nice little model and let's just go this is my LinkedIn clone hopefully you're excited to build it boom all right and guess what we can actually even add images to this so let me actually add this image right here you can even add video links to it I'll hit post and waiting waiting waiting look at that that is a thing of Marvel that is absolute Beauty so I hope that you're en en joying this so far with that said guys let's just get straight into the actual build I'm so excited for you now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever.com pwj okay so then you don't just watch me do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript you can get your your skills up so freaking high and really get to that next level so go ahead you know if you want to take it to the next level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we have't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing six-figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out your yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need and we're going to start from absolute scratch and what that means is we're going to start from our command line okay so let's go ahead and clear out everything on my command line I'll make my screen just a little bit bigger here and um let's just go here and do a couple of things okay so I'm just going to go into my GitHub folder you can go wherever you want okay and um I'm going to do npx create this is the important command for you to follow uh LinkedIn clone oh it's complaining what is it complaining about okay so let's go ahead in the start and let's try doing pseudo npx let's see if it's a complaint about this no it's not okay so the complaint is that we need a new new version that right new minor version available okay so they want us to install the new version so let's just take that command you might actually need to do this as well and now it's complaining so let's do pseudo okay actually let's do this okay I'm just going to do create react app okay for you npx probably works for me sometimes on this computer I have to do create react app for whatever reason and I'm just going to do Linked In clone like so and let's hit enter and let's see what happens beautiful let's installing hopefully it's installing for you as well beautiful okay let's wait for it to finish all right great we have the entire app pretty much installed uh ready to get started the create react app adds in a lot of useful things that we need that's why this is important and once this is done we are actually ready to go ahead and get started now what I recommend we do is let's open up visual studio code okay and I'll bring that over here and inside of our Visual Studio code okay we're going to do this okay I'm going to open let's go I'm going to go to my GitHub I'm going to go to my Banger projects here's my LinkedIn clone I'm just going to open that uh bad boy up and we're pretty much right at the start okay so let me open up my command line and let's go into our appjs this is what you should have okay now I'm going to do yarn start and that will actually in uh start my development server and let's go here and start it boom this is what we should be seeing right about now okay awesome one note for you by the way if you're watching this um if when I do yarn start you can do npm start okay so for example if you don't have yarn just do npm start okay otherwise you'll have to install yarn and I'm pretty sure it's something like this and you could actually install yarn uh but you know if you don't want to get fancy just do npm start and you should be good I just um I just like to do yarn I'm just used to it now okay so your Local Host 3000 is open uh you should be good to go now we're going to do a couple of things we're going to delete unnecessary files okay so for example setup test I don't really need it report this one logo SVG uh not going to need that um not going to need ab. test.js so I'm holding command and I'm just clicking each one of these okay and now I'm just going to delete them so they're all gone okay uh next up what I'm going to do is actually pretty much every line inside of my index I'm going to just remove don't need it okay so let's just go like that and get rid of that okay cool that's good good let's go to app CSS and uh inside of app CSS I also don't really want anything so I'm just going to hit command a to select everything and I'm going to hit delete okay and I'm going to hit save so now all of that should be gone as well and now in appjs now here's what's going to happen Okay so on the right hand side when I hit refresh you should see this error your error will be like something something something logo SVG complaining about it well it makes sense why it's complaining about it because you just removed the logo silly all right so now in our appjs we're going to go and that import line at the top where we're look we're not importing the logo anymore so now we're just is going to go ahead and remove that line okay so I'm going to delete that line right there and um also there's a bunch of stuff in this file that we don't need anymore so for example everything inside of this uh div right here I can just get rid of and instead I'll just say let's build the Linked In clone like that okay and on the right hand side now it's complaining about report web vitals okay that's simple just go to index.js and remove this line there remove this line there where we're importing hit save wait for it to stop complaining and hey making some progress that's what you should be seeing right now okay so great job so far by the way okay beautiful so we got rid of all of the fancy styling or anything like that we want to pretty much start this app as barebone as humanly possible okay and kind of go from there so now what I'm going to do is we're just going to kind of set like LinkedIn type of styling okay so first things first I'm actually going to take the LinkedIn image all right and again I'm going to drop these images for you guys in the link okay so you can grab the LinkedIn uh image from from this file here okay or you can just go online and find a LinkedIn image so I'm going to go and um you know I'm going to grab this LinkedIn image okay and what I'm going to do is I'm going to put it in my images uh public folder and I'm going to create a new folder in here and I'm I'm going to call this images so inside of your public create a new folder called images cool and inside of there I'm going to put my linkedin.png and again if you want to find the LinkedIn PNG very simple just go online type in LinkedIn PNG and you know again you can use the one I gave you or just find one from online okay all right so now what we're going to do is now that we have the image okay I'm going to go inside of my um let's go inside of my index.html okay um and that's also inside of public you have index.html and we're just going to make a couple of changes to that all right so where it says public URL it says favicon uh blah blah blah we're going to replace all of that and remove that and replace it with Images slash the image that we just added LinkedIn linkedin.png okay and hit save now at the top of your app you should actually see the LinkedIn logo as your favicon okay do you see it beautiful okay nice and uh so that's good to go okay now we're going to go down and uh let's go where do I want to um add the rest of this okay so let's go ahead and see where it says Apple touch icon and here instead of this logo we're going to replace this logo here with the same logo so let's do images SL link and PNG just like that okay great so we're making good progress so far now let's go inside of our index uh index. CSS okay so that file is going to be inside of your Source directory so go inside of that okay index. CSS now we're going to add in a su styling okay and this is going to be the common styling that we're going to be using for LinkedIn so I just decided to Splat all of that kind of in the start all right we're going to start with making sure the Overflow Y is scroll okay so basically if we're scrolling up and down I want to see the scroll bar on the right hand side so that's what that's going to do and now I'm going to do overflow X and we're going to do hidden okay and what this is going to ensure also remember to put semicolons and also remember to keep HD command s or contrs and saving okay and overflow x hidden is what it's going to do is if we're scrolling horizontally we're not going to see any bars on the bottom okay that's what this is going to do cool and now let's just do a couple of things um to root to our body to our HTML we're going to add in a background color of the following F5 F5 F5 okay this is a white color the kind of color that kind of LinkedIn uses okay okay that's uh that's what this is going to do okay let's also add box sizing and I will just do border box here border box all right so that's good that's that makes it easier for us to like design our app okay and make sure that things fit kind of like how we want them to and it doesn't do anything weird Okay um next up we're going to do a couple of things all right so now I'm going to basically add some styling to things like H1 H2 blah blah blah I'm going to just reset their styling so they behave in the way that I want them to okay so um let's grab our div let's grab H1 H2 H3 H4 H5 H6 so all basically H Tags I'm going to also throw in header in there I'm going to throw in HTML um this tag here I'll throw in an image tag let's throw in label these are all things that we're going to need later okay my bullet points Li nav P tag let's throw in small tag as well span and unorder list okay that's it I promise okay I know it's looks freaking crazy looks stupid but I promise that's it okay now we're going to do a couple of things to it so margin we're going to make it zero okay that's uh first things first so already you you saw your headline go above okay cuz I removed the margin so I'm resetting the settings on here uh padding I'm going to set to zero as well okay we're going to go and set border to zero of all of theirs cool outline we'll just set it to none okay and then um font size I'll do 100% on these nice okay let's throw in a vertical align on this bad boy and we'll do Baseline okay and background let's do transparent cool so you shouldn't see too many changes happening right now but what this is doing is setting us up for Success kind of like if your parents were investing into like a 401k or your college uh funds that were setting you up for Success even though when you were born you had no idea what they were doing okay you're like that just buy me candy with that money okay what are you doing all right I hope you're making good progress so far okay now uh we're going to do a couple of things guys so what I want to do now is first of all I want to focus myself okay good now what I'm going to do on top of that is uh let's start working on some of our components like our login component okay so login component is going to be our component after I sign out at the app so if I sign out it's going to be our log login page okay so let's work on that so first things first I'm going to install a couple of things that I'm going to need okay so I'm going to need let me just open up another terminal thing here by hitting that button over there okay and um actually actually you know what I won't do that let me close that terminal just so you can see things clearly and um we exit out of this and what I'm going to do is I'm going to do uh yarn ad but you can also do npm install okay either one is fine I just like yarn better so whenever I do yarn ad you do npm install yarn ad npm install okay so I'm going to do yarn ad uh react router Dom cuz I want to use react routers okay so that's the first thing that I need to install the second thing I'm going to actually need to install is um styled components because guess what we're going to be using styled components in this beautiful beautiful beautiful beautiful okay so we pretty much got what we're looking for all right we we got what we're looking for those are the two things we're looking to install and now we're going to go inside of our appjs okay um actually you know what let's build out our component first so let's go inside of our source let's add a new folder and it'll be called components like that inside of our components folder I'm going to create a new file and it'll be called login.js okay and uh in our log injs file we'll just start off with import styled from styled components like so and then let's um add in the actual component okay so let's capitalize the name and uh we'll pass in any props that it needs and open that bad boy up okay and we'll just have it return a div that says login inside of it so pretty much not that much right now and of course let's export this so we have access to this component outside of this file into our other files capish good so I'm going to hit save now let's go into our appjs file because what I want to happen is I want to take this component use it inside of my appjs file and then have that be displayed on my screen so now let's go to our appjs file well in order to use that file what do we need to do the first thing we need to do is starts with an i then it has an M import okay so let's go ahead and import uh login okay from um and we're going to do components SL login all right and uh another thing we need for this is we also want to start using our react router okay so let's go ahead and import all of the things we need for that so we're going to do browser router okay like so and uh we're going to do as router okay comma switch um and let's do route okay so I'm I'm I'm basically getting browser router switch and Route those are the three things I'm getting okay and where am I getting them from great question from react router Dom like that okay and uh that's it cool well now we actually got to do our routing so I'm going to remove this H2 and I'm just going to start it off with router and I'm going to hit tab to auto complete that okay inside of that I got my switch okay and inside of my switch I'm going to have my route all right and this route is going to be an exact path all right and this exact path is just going to be the homepage okay so let's hit refresh it's complaining about something what is it complaining about well let's see what is the error about let's hit save okay did we do yarn start we did not do yarn start so of course it's complaining Mak total sense boom now let's hit restart beautiful okay and now you're like hey I don't see anything on the screen there's nothing here well yes because inside of Route you still didn't add in the login component so let's add in the login component Let's uh do that okay this is a component we imported we added it there and now you see login taada okay that's it so we're pretty much now set to go and start working more on like styling our login component and adding more things to it so let's just go ahead and start doing that now okay great job so far so now let's keep rocking and rolling okay we got basic login component functionality working okay now we're going to add a container and we're going to start adding some nav components and we're going to add some styling to this okay so let's go ahead and do that so I'm going to do a few things so first of all um I'm going to find this SV G right here okay uh I'm going to put that inside of my images folder so I want you to actually find uh an SVG again it's going to be in the comments below or in the description below for you so don't worry about that to put it right here in my images okay awesome so hopefully now you got it in your folder let's keep on rocking and rolling and guys you know if you want to know how to stop and start your server is contrl c contrl c stops it okay then you can install whatever modules you need to install and then you can do npm start so um just make sure your server is running otherwise your app is not going to show up here okay just a little note Okay cool so now let's keep going through this so I'm going to go inside of my login component and uh we're going to now start adding some uh styling and stuff here okay so uh just bear with me so first things first okay I'm going to just remove this entire line right now don't need that and we're going to start with a return statement okay and let's create a container component okay and inside of our container component let's create our nav component and again hit tab okay and then inside of our nav I'm going to add a link tag okay and then this link tag is pretty much going to uh do nothing as of now and it's just going to be the LinkedIn SVG logo okay that's it so effectively what is this going to be it's going to be this thing right over here okay just so you know where headed and what we're doing that's what we're building okay so it's going to be a link and inside of this link all right we're going to add our image tag okay so notice the hierarchy container nav inside of there we have a link and inside of there we have our image tag okay IMG hit tab to autocomplete um from my images folder I'm going to get my login logo. SVG that gets me my um SVG that I'm looking for and now look it's complaining it's like hey I don't know what container is or nav is make sure to keep hitting command s or control s to keep saving okay so now what this is complaining about is all that means is we actually need our container and nav style styling okay so let's go ahead and just style them not a big deal at all so first things first I'm going to hit cons container okay and I'm going to create a style div and I'm going to put Tilda Tilda okay Tilda is the key that's right above tab okay and just hit save so I'm going to leave this style component empty for now okay and then I'm going to create a style component for my nav bar so I'm going to do const nav and I'm going to do styled. naav and I'm going to do Tilda Tilda and save and stop right there okay so what am I doing here I'm giving it empty styling okay if I do that well you should now have a LinkedIn clone okay awesome okay so now I'm going to start adding some styling okay and what that's going to allow me to do is it's going to allow me to control that image cuz that image right now is just straight up out of control right cuz you don't want your LinkedIn to look that freaking massive so inside of here I'm just going to hit enter enter okay and then uh padding going to give it zero pixel padding okay so on the container side I'm done for now and inside of my Nav Now I want to style this okay and this is where it gets like interesting what I need to do all right so let's go ahead and give it a Max width of uh 1128 pixels hit refresh okay cool and then uh let's go ahead and give it margin Auto okay and um going to give it a padding of 12 pixels by 0 x 16 pixels okay so now we saw a little bit of like padding kind of kick in so it's not completely touching the the top part right of our um of our browser cuz that didn't look great and now we're going to actually use flex so to enable Flex you got to do display Flex okay now you might be wondering hey where did it go bring it back don't worry we're going to bring it back really soon okay just hang in there for me align items this is going to allow us to align it centrally okay this is vertical alignment and then let's go ahead and do position relative okay and um I'm going to do another thing I'm going to do justify content and I'm going to do space between and I'll explain why I'm going to do space between in just a second all right and uh let's give it a flex wrap of no wrap I don't want these to wrap and go to new lines because for my browser right if I have this Navar right here I don't want it to wrap and then go essentially to new lines that's not something that I want okay so this is looking good so far and um then I think I just want to do a few more things to make sure that we're good to go okay I'm just going to say hey anything that's you know inside of the a tag do a few things with it give it a width of 135 pixels so now this image has a specific width we controlled it right this is what we essentially want wanted to do now let's go ahead down and I'm going to give it a height of 34 pixels cool okay and now what I want to do is Media query okay so this is something cool that I want you guys to learn and what I'm saying here okay is on a phone this line here all that means is on a phone do the following okay so I'm going to open squiggly brackets just going to say give it a padding of 0x 5 pixels like that okay so if we're on a responsive mobile device it's just going to look slightly different all right this is going to make a big impact later on so with that said with the currently with the Navar and where we're trying to place our LinkedIn clone we are good now let me explain why we did space between remember how the final version should look well guess what guess how this is separated because of space between okay and guess why it doesn't run on new lines Why join now is not here and why sign in is not here CU of flex no WP okay all these little things make a huge freaking difference okay and you can play around with it you can delete lines and like go back and forth and see if that actually does anything okay and that's another way to like like pick up and get better at these skills okay so let's keep going and by the way if you're wondering why your code especially inside of the style components doesn't look like mine and it's looking like it's just one giant long string and it freaks you out um what I recommend is go to extensions and you can get vs code um just type in styled components okay and you can get like one of the styled components extensions that might actually help you I think it's called vs code styled components that one so you can get that one and I think that'll like give you the highlighting you're looking for and make your things look normal okay I have tons of extensions but that's um one of the ones that's really helpful all right cool so now let's go ahead and add the join now button in our app okay and that's going to be that beautiful button right there and it has couple of features I want to show you when I hover over it it has that little gray color that happens also notice that it has a nice little border radius so we're going to go ahead and build that now so let's go ahead and do that so first things first I'm going to go inside of my login.js I'm already here so that's good and then underneath this image right here uh the the login logo so go underneath that okay that link tag as well and I'm just going to open up a div and inside of it I'm going to create a new component called join inside of that I'll just say join now okay now again you should be at this point where it's complaining join is not defined blah blah blah blah blah okay cool well not a big problem now all we have to do is actually just go ahead and create our join component so I'm just going to do const join and let's just get started okay and um styled a and leave it empty for now save okay so now at least you have join now up here on the top right okay so now let's start with the styling so go inside of it hit enter twice and let's go so let's choose font size and I I think I'm going to go with font size 16 pixels on that one all right so now underneath the font size I'm going to add a padding of 10 pixels by 12 pixels on this thing okay so you can see it got pushed just a little bit from The Edge that's exactly what we're looking for uh text decoration um none because for my link tags I don't want want them to have an underline so that is to just make sure that that happens and for color I'm going to go with something like this okay just a not completely black it's a little bit grayish okay so that's what I want to do here um as a matter of fact actually what I can do is 0.08 okay so I think yeah let's leave it at this actually I'll 0.08 after hover okay so let's go here let's give it a margin right of 12 pixels great get giving it some more distance from the right hand side because we're going to put something else there and then let's go ahead and say that on Hover we want certain things to happen because right now it still doesn't have any hover functionality right so let's go ahead and do that so on Hover we're actually going to change the background color and um I'm going to do this to the background color okay so what does that mean when I hover over it has a lighter gray right so it's kind of a dark gray joint now when I hover over it there's a lighter gray behind it okay cool now I'm also going to change the font color on Hover okay and I'm probably going to what I'm going to do is I'm probably going to make it just a little bit darker so let's go here boom so the font color turns a little bit darker as you can see and then let's add text decoration of uh none okay and all of that is looking good so when I hover over okay no underlines no weird stuff happening and you know one last thing is that it's still looking pretty Square to me what I want to happen is I want to give it the little little rounded Corners so let's add some border radius to this thing so I'm going to go border radius and uh for Border radius I'm just going to say hey give me four pixel border radius on this thing okay so when I hover over I got a nice little rounded corners and uh the join now button is looking absolutely great okay amazing we're doing great so far guys if you guys are enjoying this video by the way so far smash that like button break that thing and of course subscribe to the channel if you haven't already and uh let's just keep on going so and the one thing I still want to do is to index I want to actually add to our index as CSS I just want to add some fonts okay so going to um our body right what I want to do is actually just want to add a font family here okay so let's go ahead and add uh to our body okay and we're going to add uh certain uh fonts okay and the only fonts I really want to add here is font family I just want to add aial aiel like this and then I just want to add Sans serif okay fall back and so yeah now the fonts are looking good kind of what we're looking for and with that said let's just jump in to start working on our sign in component okay that's that thing right there so let's go ahead and do that so signin component we're going to need a couple of things so let's go to our login um component inside of our login component I'm going to make a our sign in component right underneath the join uh the join button okay but it's going to be in the same div okay so this is important to understand same div the join now component and right underneath it we're going to have sign in component okay hit tab to autocomplete that and then I'm just going to do sign in okay now again it's complaining his sign n is not defined so same thing here you guys know the rules let's create a St in for our signin component okay and uh this is going to be a a tag AKA link tag and then let's just hit save cool so what you should see now is you should have sign in on your screen if you full screen it you should have sign in right there okay and now we're going to go inside of this and start actually adding this thing so I'm going to add a little box Shadow to this and um you know I use the Box Shadow generator that's what you can do as well but here you're just going to get the final version so we got a little box Shadow around this thing so you see now a blue outline outside of your sign in all right we're going to give it a color of um a little bluish color for the sign in as well okay and for Border radius let's give it 24 pixels cool so now it's looking nice and round that's good okay I'm going to give it a transition duration of 167 milliseconds okay so you're going to see that's going to come into play later on like for example when I hover over this it has a little nice transition that's happening there that takes 167 milliseconds it seems like just give it a font size of 16 pixels okay and I'm going to give it a font weight of 600 okay so now it's a little bit Bolder line height give it 40 pixel line height okay so now boom all of this stuff got pushed down just a little bit and um on top of this I'm going to do a couple of more things to this let's give it a little padding I think okay so padding I I'm thinking 10 pixels by 24 pixels like that okay so now sign in component is looking a little bit funny it looks good here but on mobile mobile device it's freaking cut in half so it looks stupid so we're going to fix that don't worry okay so that's our padding Now text align it um in Center okay and then we're going to go background color for it and background color is going to be a just that okay so so far so good and then on Hover we're going to give it some functionality okay on Hover I'm going to say that the background color is going to be let's go like that okay actually let's make it this to 49 by okay it refresh cool okay so now when I hover over it you see that there's a blue color that's happening okay and when I remove the transition look it just happens instantly so we don't want that effect I want that transition there because it allows me to make it blue but with a nice little transition on Hover and then on top of that I want the font color to change when I hover on it and I want it to be this blue uh right here on Hover okay so that's good and then of course text decoration even though right now it's good but let's just add this for safety and just good um you know default behaviors and patterns Okay cool so our sign in on your computer should be looking good okay it's just cuz I was zoomed in like too much at 175% so when I'm in here it looks good okay cuz I'm on a giant TV so I'm trying to zoom in but now you should be good okay so with that said our login component is looking pretty good now we're going to start adding in our sections and putting in main content in there right now okay so now let's actually work on our section so in section basically it's going to be this big section over here okay so now we need to make that work at the image so it's also mobile responsive right cuz for example it's here like this but when I full screen it ta completely different right boom and now it's here but when I go mobile the image is in the middle the text at the top how is that happening so we'll show you the magic behind the scenes let's uh go to our log .js over here now right underneath the nav bar we're going to add our section that's going to be our new component all right all right so now of course it's going to complain and do our favorite complain which is section is not defined okay so now it just means that we haven't had it added the styling part of this okay so let's go ahead and do that I'm going to uh create a section styling like this and it's going to be section okay save um cool so that's good now of course you know the drill enter enter inside of here and let's start adding what we want okay so first things first let's go align content and start oops start okay now make sure let's also do display Flex because we're going to need that okay uh Min height I'm going to keep that at a 700 100 pixels for this thing okay and uh let's give it padding Bottom now some of the stuff you guys are not going to see okay like for example padding bottom you're not going to see it but what it's actually doing is if you added more content underneath this so like for example say section is like this right if I added something else underneath section it would start adding it from here but that's not what we want we want to give it a little padding so that padding that's what we're giving it right now okay so that's why some of the stuff is going to be invisible and you're be like what the hell are you writing KY and why isn't it it's not doing anything but trust me it's actually adding padding that is good convention to do that okay uh conversely this is going to add padding to the top so just like this right now you saw it gave some breathing space between the Navar and this section starting over here okay so cool we added padding to the top padding to the bottom and now we'll do this all right cool so just giving it some additional padding now I'm going to make the position relative okay and um Flex wrap I'm going to actually do Wrap okay and the reason why I'm doing that is this is the wrapping is what's align allowing this image to get wrapped around which means when I do this it wraps it okay so that's what we want that means if the screen goes too small those things wrap and actually form new rows this is why Flex is so freaking helpful uh width we're going to give a width of 100% on this bad boy Max width is going to be 128 pixels okay align items because I want things to be in the center let's give it an align item of Center um margin Auto okay and then of course last and pretty important thing is on media how do I want it to behave so meaning like on my phone on my iPhone how do I want it to behave this is how I want it to behave okay and let's give it a Min height Min height of0 pixels like this okay let's open full screen okay so now the section is in the middle you guys are going start to see a lot of this Behavior once I start adding content to it okay it's going to start becoming a lot and a lot more clearer so now let's go ahead and start adding content to this thing and start adding stuff in our hero okay so let's go ahead and get our hero image so this is going to be our hero image that we're going to use right over here okay so we're are going to put that inside of our images folder oh and just one fix right here guys um this is PX right there okay so just make sure you have that 768 uh pixels cool okay now let's go to our um I mean we're already here in our login component okay hopefully you're here now underneath our section we're going to add hero under um actually it's going to be within our section okay so the hero is going to be within here okay so let's do this let's remove where we say section because that's not what we want anymore let's do hero as a component and hit Tab and uh just hit save so what it should look like is you should have section and hero should be inside of your section component okay now inside of your hero we're going to add an H1 and that's going to say welcome to your professional Community kind of like how it is on LinkedIn right it's save now again it's complaining hey here is not defined well again that makes sense my friend because you know the deal we need to actually go ahead and uh make the style component for it so we're going to do const hero style div okay do that and hit save so now we should have welcome to your poor professional community so let's um fix that welcome to your professional Community great and let's just go here and start start adding our width at 100% why does it always autocomplete to that it's so silly okay and uh we're going to style the H1 inside of here like the following okay so we're going to give it a padding bottom of zero okay we'll give it a width of 55 Jesus so welcome to your professional Community that's what it should be looking like okay and that just happened because of the width that I gave it cool all right now we'll give it a font size of 56 pixels like so big font that's kind of cool like it actually looks powerful as soon as I did that and let's give it a color of 2977 C9 okay so this is going to be a light blue font weight let's give it a 200 font weight okay so not super thick and bold not Thicker Than a Snicker okay this is very linked iny linked iny vibe that we have here let's give it a line height of about 70 pixels okay great so that gives it some Breathing Room in between each line like so and um after line height let's add in a media query so we tell it how to behave on a mobile device okay so let's go Max withth okay and this is a mobile device 768 pixels text align on a mobile device should be Center so it should be vertically aligned okay let's go font size to be 20 pixels all right great and then let's go width to be a 100% great and then let's go line height to be about two great okay so this is what it looks like on a normal screen and then this is what it should look like on a mobile screen right in the center fits nicely looks great just like you thanks for watching so far let's keep going all right so this is good now I want to get outside of this H1 okay and now let's style the image inside of here because we we want to add the image and we want to tell it how to um how to behave okay so let's go uh above all the way here where inside of our hero we added the H1 let's also go ahead inside of this H1 and inside we're going to add our image okay so let's go outside of this you know correction hit image and autocomplete that and um I want to pull the image that we added okay and it's basically login Das hero . SVG okay so now you should have the image showing up man it's already looking pretty freaking nice okay just make sure you didn't do any misspelling so like look welcome to your professional Community is looking good but this image is looking way too big so we need to control it that's what we're going to do let's go to the bottom and let's go inside of our image and we're going to just control this freaking thing okay right now so first of all let's give it a zindex of minus one and why we're doing that is so if a text is overlapping it it's always on top okay image should have this image should not have the most priority the text should have a higher priority than this okay now wi let's go 700 pixels on the width cool uh it just exploded but don't worry we're going to control that so now on full screen notice we have made it already smaller okay before it was like even bigger than this okay for position we're going to do absolute okay and then bottom let's go -2 pixels okay look at that it's like in a weird position look at that boom right there right there okay don't worry we're going to take care of that right now let's go Nega 150 pixels uh right there cool and um it's kind of kind of like watching a painter paint you know where it's like not making sense and then all of a sudden it kind of comes together and your brain is blown uh apart on a phone how I want it to behave is top give me uh 230 pixels okay and then with so like from the top right from the top make it drop that's a wet you know what I'm talking about so like for example if I change this to like 50 pixels right it goes higher up but to 2 30 pixels is gives me that nice little touch that I'm looking for on a mobile device but don't worry right now it's like kind of invisible on the full screen so we'll we'll um fix that as well okay but let's just make sure it's good on the mobile device so with we're going to go with initial and then position we're going to go with um going to go with initial as well and um I'm going to do the same thing for height and I'm going to go with initial okay so now on mobile device it is looking beautiful okay absolutely gorgeous so so far so good all right folks so one of the problems I'm running into right now is my image on full screen is going invisible but on Mobile screen it's there if that's happening with you um actually comment out the zindex minus one line and now your image should be showing up okay okay and you should be good to go so let's keep on going ahead here and adding more functionality to our app so I want to add in the Google form component okay so I want to add in like the Google login um so let's go ahead and get that Google logo okay so take that add it to your images okay awesome so now after adding that Google SVG let's go ahead and start adding that to our login okay so here's how we're going to do it uh let's go right underneath um actually we can keep this inside of the hero section right because that's where we want it so inside of our hero I'm going to add a form okay so let's go ahead and add that form um actually this form I'll probably add it right outside of the hero okay I apologize for the confusion and throwing you all over the place let's add form here okay and we're going to work on the styling of this form and then inside of here I'm going to have another component called Google just like that okay and I'm going to throw in an image inside of the Google component and it's going to be my uh Google SVG component okay or not component I'm sorry the SVG file okay the image and um right underneath this let's go ahead and just say sign in with Google like so okay now again it's complaining hey form is on different Google is not defined you guys know the drill let's create stylings for them that's what it's complaining about so I'm going to create a form and this is going to be a styled div all right we're going to leave it like this and then I'm going to create Google and this is going to be a style button and I'm going to leave it like that refresh boom we got the sign in with Google form all the way at the bottom you should be seeing that right there there let me make myself just a little bit smaller okay so you can see it okay now let's go full screen like so beautiful looking good so far I can be here and be good all right full screen and uh looks great now inside of our form let's start adding styling in here so let's start off by giving it a margin top of 100 pixels start there so that gave it a bunch of margin and that's really good okay because we definitely want to add some margin in there so that way nothing weird happens okay and also it gives it plenty plenty of spacing that we want all right cool so that's good the other thing I'm going to add to my form is I'm going to give it a width of 400 pixels 408 pixels okay and then let's go ahead and give it a media query whoops media query I'm going to say Max width of 768 pixels which means hey I'm on a mobile device buddy on a mobile device I want you to give it a smaller margin top so it's not a huge margin top okay so you see it now it's a little bit closer to our image which makes sense which makes sense okay now inside of our let me actually all right so in our styled button let's go ahead and now add um let's basically add styling to this okay so let's just start with display Flex so we have Flex box enabled on here and then inside of here we're going to justify content and this is going to allow us to horizontally Center things so let's Center that I'm going to add a background color to this and uh let's just do FFF okay which is going to be this bright white that you just saw happen right there okay and um align items so I want to I want to Center align this thing okay so that's now looking a lot better let's go ahead and give it a height of 56 pixels so 100% width let's give it a border radius to give it nice little rounded Corners beautiful and now I'm going to give it a box Shadow that's going to be a little bit complicated here but again you can Auto generate these uh from box Shadow generators okay but just bear with me here because it is going to be worth it cuz it will make it look great okay ins set pixels RGB okay and uh let's give it a 0% here here okay I'm going to just save this and then let's do another inset there okay and um I think I'm going to just make it let's go RGB here and 0000 / 0% okay so that's a mysterious looking thing but it gave it the Box shadow that we were looking for okay without it we just don't have that box Shadow so not the end of the world honestly whether you have that or not but you can add that in okay if you don't want to write all that out I won't blame you if you um if you avoid that cool so let's do vertical align and let's go middle okay and then um I'm going to give it a z index of zero let's also start adding in a transition duration for this because I want it to have a nice little effect as I hover over it okay and a font size of 20 pixels so now sign in with Google is looking much bigger so great and then uh I think color let's color it like so so that makes it just that little bit grayish color that is looking great and then now let's add in Hover functionality on this thing guys because once we have that hover then it's going to do things when we hover on it does that make sense okay let's go ahead and do that guys and let's keep the freaking energy alive and up in here so I'm glad that you guys are with me and rocking and rolling okay if you have been if you made it with us so far smash the like button like look at how good this freaking thing looks right on your portfolio it's going to look so great and it's just going to make you stand out from so many of the other people out there so let's keep going so on Hover let's basically add a background color changing all right so let's do this uh let's give it it 207 207 another 207 and we're going to give it a 0.25 okay so now when I hover it has that little gray color showing up in the background okay all right so we gave it a little background color now let's go ahead and also add a f color for this okay and I'm going to get give it um this color right here 0.05 so when I hover over it makes the text a little bit darker okay that's a nice little touch and now again we're going to add a little Annoying box Shadow thing with honestly I'm just going to skip because I hate for you guys to have to type it all out just looks annoying it's just annoying so this is uh great so far I think this is good and I think that um this looks great so far so let's keep going okay so next up um we're going to um add a couple of more things to this okay so that should complete your basic form and the sign in with Google and let's basically add now some header functionality okay so I'm going to go inside of my header and this header is going to be on the homepage so what does that mean if I go to slome okay we I want to be able to get routed there so this is the completely built app okay this is the built version the final deployed version and when I sign in with Google right when I do slome it should take me to this page so now we're going to actually start working on this page and working on this header here as well so let's go ahead and get started with that so first things first inside of my um let's make our header component and then we're going to make our home component or let's do it the other way let's make the home component first so in inside of components I'm going to make a new not folder new file and this is going to be home JS and I'm going to do import styled from styled components here all right and then I'm going to create a component called home okay and then I'm going to return div and let's just do home like this okay perfect that's all good and let's just go ahead and Export default home so now this is a component we have access to in other areas now let's go ahead and create our header component okay so let's go inside of components new file header. JS just like so and inside of our header JS we're going to do this pretty much the similar thing import style from style components and let's create our header component like that give it the argument of props and we'll return a div that just has the text header inside of it that's it for now and now inside of our app.js we're just going to import these okay so here's what that's going to look like so under login we have uh under login we have this route ending we'll create another route okay create another route and this is going to match the path of home like this and then inside of here we'll have header okay let's go header let's make sure that in our header component we export default header because that's why it couldn't autocomplete it it seems like let's go back and now I'll go header and boom it will autocomplete it and uh it we just imported header up there and uh let's also import uh home okay so I'm going to do home home like that and so I imported header from components header I imported home from components home we got header and home under the route called path slome so that means now I should be able to go slome and it should take me to it so both of those components are showing and that's exactly what we wanted perfect so now you should be able to go to slome see all of this stuff and uh let's keep rocking and rolling here okay so next up let's add in our containers you know how I like to do these things guys so let's go to our header file okay and inside of our header we're going to do a couple of things so you guys are going to need to keep up with me okay so let's go ahead and um add a container inside of the container let's add our content okay it's added there let's add just text that says header for now okay so this is what it should look like for now and now we're going to add these style components right underneath here okay so I'm going to do container style div and let's leave it empty for now and let's do the same thing for content and we're going to do style div and we're going to leave it empty for now okay let's hit refresh boom so so far this is what you should be seeing okay if I change this with boogie boogie hit save you should now see boogie boogie here okay cool now we're going to start styling this stuff in here so let's add a background color and let's go white dope so it looks a little funny right now cuz it's just this bright white and so almost like somebody was cleaning a really dusty board right that's what it looks like now let's add a border bottom one pixel let's make it solid and okay uh weird did not need that many parentheses so bugger off might cool okay and uh now let's go ahead and add left zero okay and underneath this let's add some padding so we'll go uh 0 by 24 pixels just like that position I'm I'm going to go ahead and go fixed top give it zero and I'm just going to give it a crazy Z index cuz I want to make sure that that always stays on top okay and that's like never going away anywhere again a lot of this stuff is going to be invisible until you click into it like this and now you'll see this header okay I'm I'm in inspect mode so just bear with me promise it's going to get better let's give it a background color or actually no I'm sorry let's not do that let's give it let's do display Flex so now we have the flex mode enabled now let's go align items Center on this thing okay that'll Center align items let's go margin zero Auto and let's go main height 100% okay hit save and let's go Max width of 128 pixels okay awesome now with this guys you're not going to see much again this is to set us up for our next step where we're going to now start adding the logo in the header okay and then you're can actually start to see what this code was doing so let's go ahead and now add the logo so I'm going to grab the home logo and um I'm going to add it in our images okay boom right there now let's go back to our header file and in our header file I'm going to now start by adding this image so let's go to the top and inside of content let's remove the word header we don't need that anymore let's add a component called logo inside of that let's add a link tag okay and um we're going to say that this image should take us to the homepage meaning that if I'm logged in if I hit that image right right there you know it should take me essentially to the homepage okay which is this page right here okay so now we're just going to add the actual logo and the image so inside of this link tag let's add an image tag like so and this image tag is going to be/ images slh home- logo.svg okay that's what we just added right here here home logo.svg now style components is going to complain it's going to say hey I don't see this component or The Styling for it no worries let's go ahead and add it my friend so I'm going to add a logo like this styled and I'm going to make it a span tag let's make it empty for now and let's do margin right 8 pixels and then let's go ahead and do font size about 0 pixels just like so let's hit refresh and TDA all of that work that we had done earlier is now showing us what's going on okay so let's try removing these things and let's see if it makes a difference right so I removed container and look you cannot see anything right but now let me bring everything inside of container and now you can see it and now you can see why we gave it a color of white cuz now it's visually there okay so great work all right so now let's go ahead and add search and input and search icon so for example this search bar right here let's go ahead and add it and let's go ahead and uh get started on it right now boom so first things first we're going to go ahead into our header file okay and uh in our header file we're going to do a bunch of stuff okay along with like some stuff with SVG okay so what I'll try to do is I'll try to kind of um give you this SVG so you can have access to it as well okay so let's keep going I'm going to give you access to the SVG file too in a second but let's go ahead under our logo and under our logo what I'm going to do is I'm going to create a search component okay and uh let's hit search and I'm going to hit tab all right inside of my search component I'm going to create a new div inside of that div I'm going to create an input okay and um I'm going to add a placeholder all right just like so now I'm going to go and create a new component called search icon let me actually go ahead and do that like this okay search icon will be inside of my search component so that makes sense all right now inside of my search icon I'm going to add my SVG uh logo SL path okay so I'm going to give you access to this as well but here it is all right if you guys need it again all of this is going to be linked in the description below so that way you guys have access to it okay so it's an SVG and then all we got to do is uh we just have to close out of this SVG okay just like so so boom now again search is not defined search icon is not defined so we're just going to go ahead and create those okay so let's go ahead and let's do search first and then we're going to do search icon so let's go search and um you guys know the drill I'm going to go ahead and make it empty for now and let's go ahead and create styling for our search icon as well I'll go and um do this okay so empty empty cool so we got our search icon right here we got our search bar right there um it is looking beautiful magnificent and uh we like it all right now all we have to do is start styling our search component all right so let's go ahead and style this thing okay so inside of our search I'm going to give it a opacity of one let's give it a flex grow of one as well okay and um I think I'm going to give it a position relative okay and then let's do the following for this div all right let's go Max with we'll go 280 pixels okay input I'm going to go border none for the input so now notice that there's no border anymore so already looks much cleaner um box Shadow will go none and then background color ef3 f8 okay that gives it a little light gray I'm going to go border radius of two pixels cool okay that's going to be the font color and width will go 218 pixels so now it's a little bit wider padding okay so great I'm going to give it a line height of 1.75 okay so it became a little uh you know wider from the top got a little bit more height a hence height font weight let's give it 400 great font size will give it 14 pixels let's make sure we full screen it nice looks good looks really good height let's give it 34 pixels border color I'm going to give it a this color right here cool and then vertical align text top okay great so this thing is looking good now the search bar okay now let's work on the search icon so we have the style div that we started then let's go ahead and style that search icon component as well so we're going to make the width 40 pixels for it position absolute Z index let's give it a one top 10 pixels so now it's getting inside of that um search bar which is exactly what we want so that's good and we're doing that by using of course position absolute making sure that the zindex is making sure that it's not like hiding behind other things you know I don't know if I give it a z index of -200 it might hide behind other things right so zindex one just make sure hey don't hide don't be shy okay and then the position absolute just allows us to like position it okay now let's go border radius of that cool and then margin of zero great I don't want any box Shadow I mean I don't think I'm going to even add that line okay I mean I could have pointer events none for this let's go and see yeah it's kind of cool okay so there's no um that's a nice little touch right because if I save now if I hover over it my mouse still looks like a pointer right but watch what happens when I go pointer events none when I hover over it the whole thing is a text box it's a nice little finesse that we decide to put in here for you and uh of course let's go display Flex so we have flex functionalities and flex superpowers and uh let's uh horizontally align that great now it's a little bit closer to the search bar okay let's look at it oh man that search bar is looking nice all right and then align items we're going to align it to be Center and then of course let's add a transition background color and then have that transition be 0.15 seconds cool okay okay dokie okay I I mean I don't even think honestly we need that line you can kind of take that out and it still looks fine to me okay I like to just simplify it if we don't need something just take it out okay cool so search icon is looking good search is looking good yeah to me this is looking great okay you're making great progress so far I'm really proud of you now what we're going to do is we're going to actually turn that search icon into a file okay so I think that's going to be a lot better uh for you so let's go ahead and do that so I'll show you how to actually turn this into a file so inside of search icon what I'm going to do is I'm going to take this SV G right I'm going to cut it you need to cut it okay and um inside of my public images I'll create a new file and we're going to call it search- icon.svg just like so now inside of here I'm going to paste that SVG code okay so now notice that my search icon is not there anymore makes sense now what I'm going to do instead in my header I'm just going to replace all that SVG garbage code that I had I'm just going to replace that with this image and I'm just going to go search icon.svg like so and Tada we got that icon right there okay this is also highlights to you how you can actually turn that into a file all right has a nice little touch right there great um now let's start adding things to our Navar okay and we're going to start making progress on that all right so now let's style our Navar okay and let's make it look pretty Pretty Ricky Ricky all right here we go so I'm going to jump inside of my headers and uh we're going to add nav okay and we're going to add nav right underneath this search so give me a nav component just like this please and let's just go ahead and say nav menus now we're going to go ahead in our styling and we're just going to say con nav styled nav like this okay and uh we're going to go inside of here get a little margin left get a little bit of uh uh okay that's looking good display block beautiful got nav menus showing up on the top right hand side side that looks good uh of course let's add in a media query for phones 768 pixels mobile devices in general and let's say hey if you're on mobile give me a fixed position on this nav and give me a left of zero bottom of zero background white and of course give me a width of a 100% okay so there we go beautiful that's what it looks like on a mobile device now okay Pretty Ricky Ricky okay cool full screen this thing so some of the nav menu items seems like they're now coming to the bottom which is fine okay we ain't got a problem with that right do you got a problem with that cuz I don't have a problem with that okay so you should neither all right let's keep rocking and rolling all right so we got the nav done now let's go ahead and add home home to the nav menu so first things first let's grab our image okay let's take that image and I'm going to add the nav home image right there all right so this is our image now let's go inside of our header JS file and inside of our header JS we're going to do a couple of things so first things first let's actually wrap the nav actually not wrap the nav bar but inside of the nav bar I'm going to what I'm going to do is I'm going to delete where it says nav menus so delete that and instead I'm going to make a new component that says nav list wrap just like this I'm going to tab that and I'm going to hit enter and then I'm going to make another component inside of that's called NAB list hit tab then hit enter and inside of that let's make an a tag um and inside of that a tag actually here's what we'll do okay we don't need an ah ref for this okay we don't need that uh but we do need this thing tag wrapped up in an a tag so let's go here and inside of here let's add an image and for that image we're going to go images with the nav home.svg like that okay that's the one that we put in our SVG file so what it should look like is you got your nav bar you got your nav list inside of that and you got your nav uh I'm sorry not nav list excuse me nav have your nav list inside of there okay okay so that's looking good now it's complaining hey it's not defined okay no worries let's go ahead and Define this so let's go ahead and do first of all const nav list WP okay and equal styled UL it's going to be an unordered list and let's leave it like this then let's go here and we're going to have our nav list and this is going to be a styled bullet points uh okay here we go oh my bad let's put the Tilda Tilda at the end of it good good good good good good so now all we see is this bullet point right here that's okay because that's what we expected okay um now we're going to make it mean something in a second by doing our styling so inside of our nav list wrap let's go ahead and do this so display Flex inside of here we're going to flex wrap do no wrap and then let's do list style type none okay let's open this up and now because we did list style none we don't have that little dot there um that we were getting so that's fine now inside of nav list let's start doing let's enable display flex and align items let's make them centered okay and now let's make a a style our link tags and uh let's give it a little bit of styling okay so first of all we're going to say line items in the center background let's make it transparent I'm using Vim so you'll see a lot of jks happening there that's my shortcut for getting out of the mode and uh let's go Direction column and I'll show you why that's important uh later okay so column cool let's go font size 12 pixel font weight 400 okay just hang in with me there it's going to make sense I promise my child I promise my child this is going to make sense all right just hang in there for me pal justify content it's going to be Center and Lon hot we're going to give it a 1.5 cuz why not okay and uh let's give it a Min height of 52 pixel and a Min width of 80 pixels like so and uh position of relative okay and of course you know my style I do not like text decorations and the underlines that I sometimes normally get okay so none is going to be fine by me let's put that there okay and now just a couple of last things we're going to do let me just make sure that our nav list is right so we got our nav list nav home.svg m a nav list WP we got our nav list inside of that we got our a tags great okay let's keep on rocking and rolling whoops okay whoop okay my bad so this na home is going to be inside of images okay unlike me being an idiot that I am I put it not inside of images so of course I didn't have access to this okay here we go it's right there okay cool um so sorry there's tons of mysterious code and you're probably like what the hell's going on we don't need the cursor pointer we can get rid of that okay cool okay so now a lot of this is going to make sense all right so you saw when I took away line item Center watch it became so huge and massive right that's what she said but when I take it away and I hit save it's gone all right also this is what the media query part is doing all right let me remove all these lines of code so you and I can be on the same page cuz I coded just a little bit ahead of you but now we're back so no worries um let me just close this parent here okay and we're just going to code this thing up together okay so hit save um and if I hit this now we can see this icon right there okay beautiful mystery solved now inside of this a tag let's go span and uh let's give it a little color all right and uh we're going to give it this color okay so boom there we go that's good and where is this going to show up you might be asking here's where that's going to show up okay so inside of our let's go go to our navis component now inside of our navis component you see that we have added this a tag well what we want to add inside of that a tag is not just an image but actually a span tag as well that says home okay so like that the a link contains an image and a span tag called home so now this is what it should be looking like we got home right there okay and when we go to phone screen screen right we got home at the bottom which is pretty freaking cool how the media query Works magically and makes that happen Okay uh media query makes that happen at the bottom right like for example if I change that to top is going to make that happen at the top but we don't want that at the top we want it at the bottom okay there we go cool so now let's style that span tag right but the color home now has that little like grayish color that you can see let's go display flex and uh let's align items of course Center okay so that's just going to make sure that the text is vertically aligned how we want it now let's get out of this span tag and we're going to add in a media query and I'm just going to say hey my Max uh width should be that which is meaning a mobile device or a tablet or something of that nature and let's give it a in width of 70 pixels okay and then let's get out of let's get out of all of that and on Hover what I wanted to do is the following and on active here's also what I wanted to do okay the a tag specifically to the a tag on Hover here's what I want to happen and specifically does a span tag on Hover or active inside of the a tag I wanted to get just a slight color change okay all right now you can get lost in how it's nested it can get kind of weird but um it's a nice little touch okay watch this when I hover over this home Watch What Happens boom it's very very subtle just a very subtle shift okay that's all that's happening there so just a side note if you're you're watching this video right now there's a lot of weird things that you can kind of get tripped up on especially how things are nested inside of one another so like be on the lookout for that and just be careful when you're going through this right because for example here right it's the on Hover and on it being active inside of the a tag and inside of the span tag that's inside of the a tag have this color happen Okay so sometimes you can get lost very quickly and easily so just be on the lookout for that all right so now let's add um nav menus like a like the home menu that we added but we're going to add all of the rest of them meaning um I want to now add um all of these ones here my network jobs messaging yada y yada okay and so let's start working on that well for a couple of things we're going to need need all these nav items so we already did nav home so we don't need that anymore but we're going to need nav job messaging Network notifications and work so I'm going to hold shift click here select all of these and drop them inside of my images all right now that it's inside of my images I'm simply going to go to uh the top of my file header JS file let's go to our nav list and um all I'm going to do is I'm just going to keep on adding more nav list so for example example here I'm going to select this nav list component and I'm going to do the following okay so this is just be careful on this as you're following me I'm going to hit like I'm going to copy this entire component okay copy the entire component and then all I'm going to do is just replicate it couple of more times paste paste paste paste okay and how many icons are there let's go check 1 2 three four five okay maybe six but I think it's five if I'm not mistaken okay it worked on message UPS yeah so I think I'm fine pasting it five times um now let's go and start giving them those names so we have nav Dome now this one is going to be nav Dash uh jobs I imagine actually nav Das Network okay let's see what the first one is um in the completed version we have Network jobs okay so the next one is going to be jobs and then after jobs it's going to be nav Das messaging and after nav Das messaging is going to be nav Das notifications like so now you can see on the mobile version oh so nice looks so good on a mobile device let me actually move my face a little bit out of here so you can see that like wow am I pretending to look down right wow that looks amazing okay so there you go that is beautiful and when I go full screen I see them all up there okay and now I want to change what it says so for example where it says um home leave that as is but the span tag inside of the nav Network well we're going to go ahead and change that and we're going to say my network okay we're going to go to the jobs one and we're going to change that and we're going to change that to just jobs okay the one below that we're just going to change that to messaging and the one below that uh we're going to change that to Notifications okay so now in mobile device it is looking great and uh let's go full screen it's looking pretty freaking great that's exactly what we're looking for so our Navar is now starting to look really really good that makes me really happy so let's continue going forward and now add the activation functionality to this entire thing okay so how I'm going to do that is inside of nav list let's go where we have nav list and uh what I'm going to do is I'm going to do something special okay and I'm just going to do this to the home one none of the other ones for now okay I'm just going to kind of hardcode it inside of the home one and the functionality we're now adding is you see how this home one here is active right but these ones look like they're not active let's so we're going to add that styling to our app so let's go ahead and do that okay so navash uh nav list and to this nav list I'm going to add class name and I'm just going to call it active Okay and simply all we're going to do now is we're going to go and inside our nav list wrap okay so let's go inside to our nav list wrap right here okay and uh under our navis WP we're just going to add The Styling so we're going to do active so for our active class do the following for the span tag and right after that we're going to just do content blank whoops that's fun cool transform scale SC of X I don't know why it does that one oky doie and uh simply then border we're going to give it a border bottom of two pixels solid and let's go white- FFF cool okay so we're working on this functionality dope uh bottom I'm going to give it a zero top uh left zero position absolute position misspelled position okay give it a 200 millisecond ease in and out and I'll give it a border color of like this okay so now we have this going on here so now boom there we go I just had to hit refresh okay and there we go we got home it's going active when I hover over it that's exactly what we want and even on Mobile screen I can see home has that like nice little underline and um you know that's kind of what I expect to see on the on the home um you know the mobile app the mobile version of all of this all right so let's keep on going all right so now let's go ahead and add um add user nav menu and add work nav menu okay so we're going to add a couple of more things so for example here we have a user menu and then here we have a work menu okay looking thing so let's go ahead and add those two as well so first things first we're going to need the down icon that little tiny icon right there it's a little bit hard to see but it's that icon right there okay so we're going to need that um the other thing actually you know what let's just throw that into the images first going to need that the other thing we're going to need is the nav work menu so let's go nav dasw work boom going to need that um oh we already have that that's fine and then the other thing we're going to need is a user um SVG okay there we go there it is okay okay so now that you have all the images let's go inside of our header and start adding them okay so let's go ahead and create these components as well by the way so I'm going to go all the way under nav list but a within nav list wrap so right under the nav list ending let's go ahead and add user component okay and then right underneath that we're going to add our work component okay so these are the two components we're going to have now within our user component let's go ahead and add a couple of things so I'm going to add a a tag but I don't need an ah ref for this either I just need to borrow the link tag styling and inside of this a tag I'm going to need an image and I'm going to use the user. SVG okay like so um right underneath this a tag right underneath this image what I'm going to need is a span that's going to just say me okay and right underneath that me I'm going to need another image and I'm going to give it the drop down menu okay so far it makes complete sense because you got the user image right underneath that you got the drop down image okay so that's looking good now we're good with this part let's go inside of the work part work work work work work so now let's go and add a couple of things so let's go to a tag again we're probably not going to need any of the other things let's add an image inside of the work tag and we're going to add in the work image okay nav dork. SVG cool and also we want to add um a span tag inside of here and uh we'll give it we'll say work and within that span tag okay within that span tag I'm going to add another image and uh we're going to give it images down icon.svg like so okay cool now it's complaining hey user is not defined work is not defined hey no problem I like when work is not defined cuz that's how I live my life as a CEO let's go all right so we're going to do create new styling for the component all right so there we go and now I'm basically going to add my styled components okay that's all I'm going to do so I'm going to borrow my styling from our nav list okay that's how you can borrow styling from something else and uh for my work I'm going to borrow my styling from the user okay that's kind of nice let's just hit save for now um oh let's do Style with a small S I believe okay user is not defined okay fair enough fair enough we'll Define it there we go okay so on the mobile screen now you get this funny looking thing at the bottom right okay if you're not seeing it I'm just going to move this here going to get this funny looking image the bottom right and if I go full screen you'll see me and you'll see work so that's cool but that looks ugly so we're going to fix that okay so let's go here to user and do a couple of things and basically we're going to say hey the SVG inside of this a tag look we got to do something with this thing all right it's it's uh just unacceptable so let's start off with width okay let's try to control the width of this link tag okay and then uh let's also try to control the Border uh radius okay 50 5050 can go 50/50 with okay let's see hopefully that does something if it doesn't do something um I got another idea in mind okay so another thing thing we can do is uh let's go let's grab the image tag inside of here and give that a width of 50 24 pixels beautiful so now you see the image is actually quiet quite small all right so that's controlling the image that's good let's give it a height of 24 pixels all right cool cool cool and uh now let's give it a border radius of 50% that's it's going to add that nice little circular effect to it so you can already see it's starting to have that nice little circular effect that's great and let's go span tag and uh we're just going to align items in the center all right cuz that's just that's just how we like to do things around here all right and now inside of my work all I'm going to do because it's already borrowing tons of styling we're just going to give it a certain border okay give it the nice little nice little color so there it is and when I highlight it looks a certain way we got the drop down we got the me with the big fat Arrow this is pretty freaking cool it's looking great okay okay great work young Padawan so far we're looking good we're looking smooth we're looking clean so so let's just keep on rocking and rolling through this thing okay now we're going to add sign out functionality okay so let's go into um let's go inside our user because that's where sign in functionality is going to be added so my user is right here okay let's go right down there right underneath the a tag ending and I'll add the sign out component okay now this component before we rebuild it this is going to be this component right here when I hover over all right it gives me that sign out option that's what this component is going to be all right so that's what that component is going to look like okay so now let's go ahead and just build it out now inside of my sign out um I want to add an a tag again I don't need the ah ref and um all I'm going to have it do is say sign out and again I'm just adding the h tag to borrow the styling that I have added to it okay so hit save let's go down and let's create our styled component for sign out const sign out okay and we're just going to do styled div let's leave it empty for now and let's go inside of here let's uh let's go back let's hit refresh cool okay so we have something showing up that's a good sign now inside of inside of our sign out we're going to Let's uh go ahead and do position absolute let's go top by 45 pixels okay and um I'm going to pass on the drop shadow because again it's one of those like weird looking ones I'm just going to keep it simple here so sign out creates a box around we'll give it a white background and now let's give it a border radius of uh this okay so now sign now it has a little border radius around it right there that you can see that looks cool and under here I'll give it a width of 100 pixels okay and a height of 40 pixels okay okay so now the sign out is starting to get under control and not looking as crazy give it a font size of 16 pixels and transition duration this is going to give it that little effect when it comes up which it's not going to do right now but in a second we will add that so then it'll look much nicer text align and let's align it in the center display none that looks good okay so it won't display anything and then it'll come up on Hover okay so now let's go inside of our user which borrows from our style component uh Navas component so inside of user we're going to create a new thing and they're basically going to say on Hover do the following for the user all right now we're going to select use this fancy selector to select our sign out component okay and style it align item Center okay and I'm going to justify content inside of the center all right now we're having reference error so what's going on here cannot access sign out before initialization interesting so what we need to do is um we need to move this code up I believe let's take this sign out code and um Move It Up Up Above user okay let's move it right there and uh we should be good nice we are good okay because yeah I couldn't reference sign out cuz it wasn't defined yet defined yet so we just make sure we Define it right before Okay so so let's go back now when I hover over me you can actually see this drop down of sign out showing up that's a really good sign that's what you should be seeing right now okay dope so looking good so far now let's keep on going with this thing okay so we're now going to add a container and I'm going to basically add another component using styled components okay so let's go with that and we're going to add the hiring and hurry part which looks like this add right here right there all right that gives it also a LinkedIn esque feeling we're going to go ahead and add that now cool so let's go inside of Home JS all right and we're going to add that here so um going to be doing a lot of stuff so inside of this return okay let's just open this return uh create a container component inside this container component create a section component and then let's create an H5 and again let's create an a tag but uh um without the ah refs okay like so just to borrow the styling and then basically what I'm going to do is um just type in hiring in a hurry question mark all right and uh just like that okay and then underneath this H5 I'm going to make a P tag and um basically I'm just going to say find talented Pros in record time with upwork and keep business moving and put a period there save okay so I have a section inside of which I have an H5 and a paragraph tag cool now let's go ahead and just style this and um a lot of these are very common stylings that we have already kind of done so I'm going to like go through this much faster so our container is going to be I'm going to just keep it empty for now and start off with that I'll have my content is going to be style div we'll keep it empty for now we'll have section and um I think I'm going to make that section okay style section and again we'll keep it empty for now so it doesn't complain and uh there you go okay so now we have that text but you saw it was a little hard to see right it's kind of up here hiding okay and we basically need to push it down that's what we're going to do right now we're going to push it down so inside of my container I will go ahead and do give some padding to the top 52 pixels so now boom it just pushed it down and now I can finally see it let's give it a Max width of 100% like so okay cool and then um what I'm going to do inside of content are let's give it a Max width of 128 this okay let's go down and I'm going to do margin left Auto and also we're going to give it a margin right um and we're going to do auto okay cool and uh inside of section um let's do Min height 50 all right so let's give it that 50 pixels let's give it a padding of 16 pixels uh box sizing let's do content box on this cool okay so that just centered Center aligned it all right now it's perfectly smack in the middle of the center uh let's give it a text decoration and we will actually give it an underline okay kind of like an actual link we'll uh enable Flex on this and justify I content to be in Center okay there we go okay so we'll do media queries here in just a second don't worry for H5 I'm going to give it a special um styling let's go ahead and do this okay give it a little blue for hiring in a hurry that's that right there okay and the a inside of here um let's give it a 700 beautiful okay let's get in outside of the H5 tag now and uh let's go into the P tag and style that and I'm going to say hey give me 14 font size 14 and uh let's also now do some coloring on this okay great G gives me makes it a little bit darker and uh let's uh make the text Bolder right so 600 makes it pretty bold and then let's get outside of the P tag and finally let's give it a media query so I'm going to go Max with 768 again mobile devices where you at mobile devices direction we're going to give it column and then padding of course will be 0 by 5 pixels okay boom there we have it that is looking gorgeous okay beautiful hopefully you got to that with me and let's keep rocking and rolling all right just to blow some of your uh some of yours Minds okay so to flex on what the this uh media query does right so for example imagine if I wanted to make this red every time it was a mobile device but like if I went full screen uh it made it um it made it black okay uh so what I can do is I can actually select cuz this is a P tag right here so I can actually select this by doing that okay and then how would I make it red think about that how would I make it red all right so color red save okay so now notice that it's in red but when I go full screen mode desktop mode now it's black okay so it's basically saying this again is saying mobile devices do the following now I can also you know if I wanted to do something like font size make the font size 100x on mobile the font size would be crazy in red and on full screen it would actually be completely normal that's kind of crazy it's almost like you have two different apps right that's pretty freaking cool so um I'm just going to select this P tag and uh remove move it and we should be back to our normal uh healthy looking app all right now what we're going to do is basically we're going to start to add some of these parts so for example in the finished version you see we have um we have these three things happening over here okay so this is like one this is two and this is three and this is our left side right this is our middle and then this is our right side okay so basically what I'm going to do at this point is I'm going to divide up the page in these three things and I'm going to use actually grid uh layout instead of flexbox layout to do this okay so this going to be really cool let's go ahead and make it happen pal okay so let me go to our our app cool let's go to home JS okay cool we're already here all right so let's go to um let's go right underneath section and right underneath section I'm going to add my component called layout and inside of here I'm going to make a div and call it left side here this is going to I'm going to put Main and another div and we'll just say right side okay and again it's complaining I don't know what layout is but this time you know what we need to do okay what do we need to do we need to go go downtown and style that damn component const layout style div all right save and then let's go here okay so right now you got left side Main and right side not exactly where we want it but it's a good start and uh here's what we're going to do I'm going to start with display grid okay well that didn't do anything it's okay buddy hold on hang in there all right we're going to call them the the areas we're going to call them this left side Main and right side okay boom so it's divided up into three areas all right so now what I want to do is I want to Define how many columns I want right so we're going to go ahead and do that now so let's go here uh and I'm going to give it columns and I'm just going to say min max give me this okay right there let's go okay and always like click and watch what it does right so right now it's doing something really really bizarre but watch what happens once we're done with the whole freaking thing okay I don't know why I'm going autocomplete always act so freaking weird okay let's go here here min max 300 pixels okay so let's go here um min max 05 okay there we go so now they're like overlapping a little bit but we got left side Main and right side kind of like how I want them but uh a couple of things I want to tell them I want to tell them hey I want to have a column gap of 25 pixels okay cool and um another thing I want is I want a row gap of 25 pixels okay let's make sure we keep refreshing cuz sometimes The Styling acts a little weird and uh grid template row let's go Auto on this thing cool okay and U margin I want to go 25 pixels cool so that gave it some margin from the top great and then let's go ahead and again add our media query so what is that mean that means that uh mobile device we want specific things to happen Okay display Flex all right Flex direction we're going to make it go column instead of like row by row right so for example here it's going to go like multiple columns okay uh when I go into this now it's like that each row is a column okay just one column per row and um padding we're going to go zero by five pixels like that cool so we gave it a little push and a shove from touching the screen so much on the left hand side okay and uh with that said we're looking pretty good and that allowed us to divide the page into three and you know honestly I'm just going to comment that line out cuz that line is giving me the creeps with that said this is looking good and let's keep on rocking and rolling okay so so far looking good um now let's actually go ahead and we've divided the page now we're actually going to start making the main and the left and the right components okay so let's go ahead and start doing that uh we're going to try to keep it pretty freaking simple and pretty pretty um empty for now okay so let's go ahead go inside of components and create a new file and we're going to call this file left side. JS um and in left side JS create another component okay called uh inside of components call it main.js and let's also create another component and we'll call it right side. JS okay okay then inside of uh left side just go ahead and do import styled from styled components okay and uh for left side we're going to do the following all right so let's fix this one because we made a little uh typo so just rename and all I'm just make it a small s okay there we go so uh complete constant left side I'm going to have props like this okay and uh return inside of the return we're just going to put a container and in that container just say the word left side like that that's fine okay and we're going to create the style component for this so it doesn't freak out and inside of here we'll do grid area and we'll go left side just like that okay and again export default left side cool so save save save save save now we're going to do this let's go to Main and um in main I'm going to paste that code and everywhere it says left side I'm just going to replace it with main that's it okay whoops so let's replace this with main okay and and let's replace that with main cool and this like that so wherever it says main replace it um and now copy main go to right side paste this code and everywhere it says main you know the drill by this point uh just replace right side replace main with right side okay like that okay and then just go hit save um cool and last thing we want to do is we want to go to home JS okay and under layout we want to replace all of these divs and remove them cuz we don't need that anymore instead we're just going to do left side all right and um make sure you autocomplete it because autocomplete will automatically import it for you as well uh why did it do left side like that oh because um okay well anyways it's it's left side with the small s like that okay we're also going to do main just like that close it and then we're also going to do right side make sure that when you write these three that you import these three as well um and now it's saying styled is not defined in any of them well what does that mean so let's go to left side and let's see what it's saying okay so lowercase the styled from styled components and that should be good to go I believe save go here uh make it styled with a small s save hit refresh and um yep that's looking great let's hit save like that cool so we're good so far and now let's actually add a art card component on the left hand side all right so let's add the art to the cards now so let's go ahead and do this okay so first things first I'm going to go to uh let's go to left side cuz that's where we're going to actually make this happen and I'm going to create um let's create a styled component and I'm going to um called Art card okay and let's actually get it started with something in here so instead of saying left side in there I'm going to do art card just like that all right and um within this I'm just going to say card okay kind of like that so you should have card here okay now inside of this we'll do text align and I'll do Center okay so boom there we go looking good so far um now let's go overflow hidden all right so it won't like bleed off the screen onto the sides okay there we go and um let's go background color Boom Like This give it a border radius of five pixels cool so now we starting to look like a card right um and we have that background right there and now the the the little radius is coming in that's clean and uh let's give it a little transition box Shadow 83 milliseconds okay cool and now let's give it a position relative border I'm going to give it none okay and um I can give it a complicated looking box Shadow but I think I'm just going to pass on that for now so I'm actually going to add the Box uh Shadow because I think it does make it kind of look nice and so let's go ahead and do that okay I'm going to give it a um the only reason sometimes I want to skip it is cuz it looks like this mysterious code but again a lot of it is autogenerated um you know and even when you should I encourage you to use like online tools for things like box Shadow and stuff like that okay all right so now we got the art card let's go ahead and work on the user information so we're going to need a couple of things to make that happen all right so now you're going to need two photos SL SVG files we're going to need photo this one right here with the camera icon and we're also going to need this card uh background card okay so let's go ahead and uh take both of these and I'm going to um put them in my yoink okay just as a place a right a pit stop before I drop them into my images so boom just added them right there all right so now that we added those images uh let's go ahead and do something with them so I'm going to um am I in the left side already okay great I'm in the left side component already perfect now uh inside of my art card just so you have an idea what we're doing we're going to be building this thing out right here on the left hand side okay so let's go inside of our app that we're working on currently inside of our art card uh component remove where it says cart instead we're going to create a new component called user info all right I'm going to hit tab on this and inside of here I'm going to create a new component called background let's hit tab on that that should complete it and inside of this um actually let's uh kill the card background right there okay and so inside of user info I'm going to have card background I'm also going to have a a tag with no hre just so I can borrow the a styling and uh we're going to have photo which is going to be a component and then I'm going to have link just like this it's going to be another component and uh it's going to say welcome there okay and then I'm just going to end it so slash end just like that all right so I got user info and then in their card background and the a tag okay now right underneath this a tag I'm going to have another a tag again with the no hre okay just like this inside of this a tag I'm going to have add photo text component and that's just going to say add a photo just like that okay now there are tons of components that we need to go and make so let's get go ahead and get started it's like three or four maybe more so let's go user info and I'm just going to do style div let's leave it empty then we need card background um and I'm going to do something similar which is going to be Style div let's leave that empty let's go cons photo and let's go here let's leave that empty and then um let's go cons link for the link component and again this is it div we're going to leave it empty for now and add photo text okay let's leave that empty for now as well okay user info is not defined and boom welcome there add a photo that's what you should be seeing right now cool so now we're going to start adding all the styling in here so for user info let's get started with that so couple of things are going to be happening here we're going to give it a border bottom of one pixel solid okay there we go so that gave it a little nice little drop shadow here makes it look beautiful so it's a border bottom it didn't at the border anywhere else 12 pixel 12 pixels by 16 pixels okay so now this is much more centered we have padding going left we get padding going this way and we got padding going that way okay so far so good let's go word wrap and we'll do break word cool and uh let's go ahead and um let go ahead and do this cool so sometimes some of this we might not need honestly but it's okay I'm going to leave it here word break uh break word cool okay so let's go ahead and uh let's keep on going okay inside of my card background we're going to now okay so first first of all we're going to add a background image to this okay so let's go background and give it a URL and that's going to be imagescard background.svg cool close it put a semicolon good hit refresh refresh cool so that image is not showing up but that image is going to start showing up in just a little bit so let's give it a background position Center let's go give it a background size of 462 pixels let's go give it a height of 54 pixels so now you can start to see that image show up and let's give it a margin of uh -12 -12 0 so now that card is starting to look pretty perfect pretty freaking perfect okay pretty and perfect there we go so card background we're good on okay now let's just go ahead and add photo in there so photo is going to require us to do a bit of styling but it's going to look so freaking beautiful when it's done so going to start off with not having any box Shadow uh for background image let's go ahead and choose the photo image so images I'm going to do /o. SVG okay now we're going to make this thing show up in just a second so let's give it a certain width let's also give it a certain height so now the image is showing up cool now we're going to start making it look better cool height I'm going to give it box sizing border box background clip content box background color let's go white okay background position center cool so that changed how the image was looking going to give it a background size of 60% beautiful and then we have um background repeat at no repeat actually cool so because we don't want it repeating over and over again we just want one camera and that's how we get it now let's go and do border and for Border we're going to do two pixels solid white clean okay margin let's give it a margin of 30 negative 38 pixels Auto 12 pixel like that damn look at that one line of code and beautifully smacks that in the middle guys like isn't that beautiful when you have these little touches and they all keep adding on and then your front end just m just beautiful all right and then uh let's give it a border radius of 50% now we got it round nice and round just how we like it okay now let's go inside of our link and make that do good things let's go 16 pixels for the font size line height will go 1.5 okay that added some uh line height to this okay let's go here and go color and we'll change the color just a little bit so we're going to go 0 0 0 0.9 cool and then after that we're just going to choose the font way to be kind of boldish okay let's go 600 so welcome there boom a little bold man looks so nice right on the left hand side is looking beautiful when I go in this mode it looks great in Mobile you know most people get lazy on the mobile but not us we make sure that that mobile version is uh is looking clutch you know is it distracting when I'm in the center probably I'll just keep myself to the side for now okay all right so that that looks great okay and then U add photo to text at photo text let's go give it a color and let's start off with this okay cool we got a little blue action going on let's give uh some margin from the top so give it this little separation from welcome there right it was way too close and feeling a little uncomfortable and we got it out of there give it a little font size of 12 pixels line height uh again line height gives things some nice breathing room so it just does not hurt and then we'll give it a font weight of 400 makes it just a little bit Tad tad bit darker if we go 700 that's a little too much but 400 is just just right and just enough so perfect that's looking great now let's add a widget component inside of our art card okay so let's go ahead and do that now all right now let's work on our widget okay so first things first we're going to go inside of our uh left side component great and then here I want to add my widget okay so right underneath the user info going to add this widget right there just like that okay uh this is going to be a widget component open up the a tag uh okay and then uh we're going to create a div inside of that div I'm going to have uh some span tags so Spandex and this is going to say the first span tag is going to say connections and then the next span tag is going to say grow your network just like that okay now I need to close that a tag that's why it's complaining great and uh I need to actually add an SVG inside of that so what I'm going to do is I'm going to copy this SVG that I'm adding okay and um we're going to call it the Widget icon all right so I'm going to go inside of my so let's take this Widget icon right over here okay and um I'm simply going to add that to my images so drag and drop cool so now once you have that SVG SVG we're also going to add in our item icon okay that's another one we're going to need so this item icon one the little bookmark looking thing okay so let's also get that and add that to our images so drag and drop cool so we got that SVG going now let's go back to our left side and uh here's what we're going to do okay inside of this a tag inside of this um actually where are we planning to add this where am I planning to add this so let's see here we got where's my div action going on grow your network so right underneath grow your network um this actually needs to be wrapped up in a div I believe okay so let's go here yeah so this this needs to get wrapped up in a div okay boom just let's do it like that okay so widget a tag div span cool and um right outside of this div anding is where we're going to make our magic happen Okay so let's go outside of this div and um I'm going to do image and the image source is going to be that SVG file that we talked that we just added okay and uh after where the widget ends we're going to add in another component called item within that we're going to have a span tag within that we're going to have another image or a image and that's going to be/ images item ien icon.svg okay and just so you have some idea what is happening is we're going to be doing a lot of this stuff so we're going to be adding this we're going to be adding this okay so there's a bunch of stuff happening like that so hang in there Buttercup it'll be great and if you're watching this and you're enjoying this so far do your friend of favor and smash smash that like button and keep that energy highing here okay I love your beautiful face and let's keep going okay so widget we're going to need um to create a style component okay and just for you guys I didn't do a ASMR version okay cuz you guys didn't like that very much so let's go ahead and uh let's add in a widget just like this and we're going to do two things we're going to add in widget and we're going to add in item cool so widget component just in the start was going to be styled div I'm going to leave it empty and then also let's add in um for item okay let's go item is going to be a styled a and just start off with empty so let's put slash here by the way that was a little typo so boom slash not Dash cool so now both of the images should be here right there okay if I full screen this thing you should see them connections grow your network and we got both of our images right cool okay so let's go ahead all the way down and start styling this uh widget okay so that's going to take a second actually to style cuz there's a couple of things happening here let's go B border bottom one pixel solid all right beautiful uh let's add some padding to the top of this thing cool and let's add some padding to the bottom of this thing beautiful let's go ahead and uh style the a tags inside of this thing and I'm going to give it a text decoration of uh of none let's go to display Flex cuz we're going to need that justify content and I want to give it space between okay so you saw how this thing got pushed right that's kind of what we want this on the left side this on the right side and there's space in between that's why we write that align items Center and we're going to give it some padding cool okay so on Hover it gets darker and it kind of gets highlighted okay whoops my face is blocking pretty much everything great so when I hover boom boom looking pretty magnificent my friend uh background color on Hover we got some action going on okay now let's go under hover and let's do something okay so let's go display flex and we'll go flex Direction and we'll go column okay so connections and grow your network got written out on separate lines because this is a span tag this is a span tag and because of doing column they both got pushed onto their own columns let's go text align and we'll go left so now connections and grow your network are you know evened out more and within this let's uh style our span tags even further so let's go give it font size of 12 pixels a little bit smaller let's give it a line height of 1.33333 so we got some spacing going on in between some room to breathe it's like when I'm sleeping with my girlfriend and I just want to like not spoon for a second you know I'm basically giving a little line height in between cuz sometimes it just gets way too hot um first child uh AKA Mona first no I'm kidding all right here we go let's give it a color rgba it's a it's one of the members on our team and I don't know if we're supposed to say this on YouTube but she's having a baby so we're excited we're super excited for her we're pumped we're super happy let's go here let's go ahead and um let's go 0.06 beautiful and then um underneath the first child let's go with a anth child whoops whoops whoops whoops oops anth child just like that and let's give it woo what happened here just like that okay there we go so now these styled things have certain ways of how they're colored okay so that's good and uh let's close out of all of this and then the last thing we want to do is we want to give certain styling to SVG hopefully that actually does something cool um so there we go so now this component is looking really beautiful I mean like look at it right on the left hand side connections grow your network that little icon right there I mean just fine little touches and this entire app is coming along so freaking well I mean like just look at this thing right it's beautiful so that's great now we're going to go ahead and style our item component right cuz that's another one that we were going to do so let's go ahead and do that one okay where's item component it item component has the item icon so I imagine it's this one but hopefully we're not wrong let's go let's give it a border color whoops I mean technically that was correct code um okay that text align it to left I mean do we even have text in there oh yeah let's go ahead and add text in there okay so let's go to let's go to our item we have span and we have an image and right underneath this we'll say my items okay just like that so what did left Al line do let's see if I delete that line what happens absolutely nothing perfect great just how I like my styling to do things um padding let's give it 12 pixels font size 12 pixels is great great and then let's go display block okay nice so now it's looking perfect um I want to give it a certain let's let's work on the span a little bit so first things first I'm going to start it off with enabling Flex on it and then let's go and vertically align everything with the line items just play with the color just a little bit okay it just makes it kind of like a dark black okay and then let's get out of here right there and on Hover I want to change the color just like that okay boom boom boom boom he hey nice look at these cars now this thing is coming look at how much we got completed it's looking great you you are great thank you for being here so far and I really I mean in all seriousness I really appreciate your support thank you so much and let's keep going this one is for the boys and the girls okay great progress so far cupcake but uh now is not the time to quit now is the time to go harder so we can finish it and make your portfolio look amazing so you can get that dream job okay right now is not the time to quit so let's keep on rocking and rolling uh let's work on the community card okay so first things first we're going to need this image that plus sign uh finished version of that looks like this this is going to be the community card okay so that's what we're going to be working on so let's go ahead grab that sign and add it to my images folder okay all right so once you got that plus sign let's go to the left side and uh let's add that thing in okay so go to let's go to under our art card where it ends so where does it end right there let's go under there under where and uh let's do community card component hit tab hit a tab okay so we're going to now borrow the link tag styling just like that and inside of our link tag I'm going to hit make a span and the span is going to have the word groups in there okay and uh now I'm going to make another a tag that's going to be empty just like this inside of here we're going to have another span and inside of there I'm going to have the word events and right underneath that I will have my image and um my image is going to be the plus icon SVG that I got okay so again Community card I got my a tag here my a tag here with some span with the span tag in there okay two a tags with span tags in there and um we're going to need just essentially uh few more things okay so let's let have another a tag blank and inside of here let's have a span tag that says follows oops let's say follow hashtags okay and then right underneath that I'm going to have another a tag that says span and it'll say discover more just like this okay so we got one a tag two three and four each a tag has one span tag one 2 3 4 so four a tags four span tags got it everything inside of the community card cool good all right so now let's go ahead and make our styled component called Community card so let's go and let's have it borrow from Style card let's hit save and Community card is not defined cool there we go so now we got this ugly looking thing right here but hey at least it's right here and it's ours so that's good plus sign so now let's go inside of this thing and let's start working on it so let's add some padding cool that gives it some breathing room let's text align everything to be on the left that's better let's make it display flex and you know what uh I'm going to give it a going to make it go in columns cool aha looking way better clean let's go down and uh let's start styling the a tag so let's select the a a tags now color black cool my girlfriend's favorite color uh let's go like this boom that padding gives it nice breathing room room from the left and from the top Let's uh play with the font size and give it 12 pixels and then I'm going to do vertical align on this thing and let's see if it actually does anything I don't even think we need this thing Okay cool so let's just leave that out for now cuz otherwise it just gets confusing cool let's go and go on Hover let's add some functionality to it so let's make the color go and do the that blue thing okay so when I hover over it each one of these highlights yeah boom boom boom great okay cool now under hover what I want to do is let's go to our span and let's go display Flex let's go align items and I'm going to vertically Center great so now events is looking good because before it was looking stupid with the plus sign let's go justify content and I'm going to go space between cool so now that plus sign has a space between and it gives it nice little breathing room there okay let's get out of the span tag and uh we're going to grab the last child okay and we're going to give it a color okay we're going to make that gray text decoration of course is none border top let's go one pixel solid with this color I think cool so this border top has done that thing right there that like line that partition that we got okay so and underneath this I'm going to add some padding great and uh let's add in a little hover and 0.08 cool ooh little too dark let's lighten that up 0.08 baby yeah blue blue blue hover nice man this is looking freaking slick search bar looks great my icon here looks great the front end is it's looking it's looking good looking pretty freaking good okay all right I'm in like 200% zoom on my screen but you know so yours might look slightly different but that's okay all right so really good progress here and uh uh I think let's keep on going all right so next up um let's go and and add the follow card component on the right hand side well what is that what is that Cy it's going to be um some of this all right the follow component so let's start working on this thing now boom so let's go add follow card component so I'm going to go to my right side component now and inside of my right card component I'm going to remove what we have here and instead I'm going to add a new component called follow card okay so inside of my container I'm going to have a follow card component now inside of here I'm just going to write the text right side and of course it's going to complain it doesn't know what it is no worries we're going to create a follow card component now or style component now okay so so far it should just be saying right side and not really doing anything okay no worries now let's go text align let's go text Aline and we'll go Center uh overflow Let's Go hidden okay great um let's go and add margin bottom 8 pixels background color okay so now the right side is having a little like border radius around it okay it's at the bottom we'll fix that but that's what you should be having so I just zoomed out a little bit from my app right side should be there on your mobile type of view and on full screen view um right side should should be kind of at the bottom right right now Okay cool so uh we added a little border radius that gave it the rounded Corners let's go ahead and do position relative and um let's go border none and I'm going to give it a box Shadow and let's go like this with our box Shadow okay mysterious mysterious Shadow and then padding we're going to go 12 pixels cool so now right side should be kind of a lot more visible and uh much bigger okay all right I have to zoom out a little bit and get to 125% and that's that allows me to see it okay now we're going to add a title inside of our card so let's get our feed icon and we're going to put that in images because that's what we're going to need now cool so with that add icon on the way let's go back to right side and um inside here we're going to add that go let's go where we had the word right side written and remove it and instead we'll replace it with a component called title and inside of this component I'm going to add a H2 and this H2 is going to say add to your feed let's hit save so it auto formats it I have preder extension uh you can get the preder extension uh for from here if you want your autoc completion to work and also for autoc completion to work you should go to your um workspace settings okay so just go to your settings how do I even get to my settings go to your settings and um have format and do default formatter prettier and also format on save so once you do that your formatting should start to work okay cool um so add title now inside of our title I have my h2 tag and underneath that I'm going to add my image and my image source is going to be this one right here and all the way at the bottom we're going to now add the styled styling for this component cons title and I'm going to say inline Flex on this thing so right there okay great let's go down align items okay and I'm going to justify content let's go space between that should space things out for us cool let's go ahead hit refresh great and let's go font size and I'm going to go 16 pixels all right and WID 100% beautiful and again color okay so that gives it a little gray add to your feed Okay add to your feed that's what that should look like pretty simple all right so we're good with that and now we're going to add feed follow list okay that's what we're going to do so that's going to add M multiple more things this is going to be the big one it's going to add a lot of things cool so great now add let's add the feed list okay so under the title I'm going to create my feed list cool so let's go ahead and do it like this and as a matter of fact do I even need that other um add to your feed stuff don't really think I need that anymore actually let's add the feed list underneath our title okay so leave the title as is and underneath that let's add our feed list okay just going to do this it's kind of like easier to see all right so let's go feed list component and inside of here I'm going to have um here's how I'm going to do this okay let's go there keep the a tag empty inside of here I'm going to have an avatar component whoops an avatar component like that and um underneath this I'm going to have a div and that div is going to have a span tag it's going to say Linked In Like This okay uh underneath that let's put a button that says follow cool so feed list um list okay the LI inside of that we have a a tag that's that's going to have an avatar component then we have a div that has LinkedIn and then a button that says follow cool all right so underneath this let's Get Out Underneath this and let's create another list okay inside of there we'll have another a tag again let's remove the a hre um cool let's put our Avatar component again and let's go div on this thing span I'm going to go video cool and then I'm going to go button and this button is also going to say follow great all right now it's like hey I don't know feed list I don't know Avatar so no worries we're just going to go ahead and uh create stylings for them and this is going to be a styled uh UL okay unordered list and then we're going to to also create a styling uh for Avatar let's do that so now you should see on on the right hand side we have add to your feed LinkedIn and then video cool now this feed list let's go inside of it and let's go margin top 16 pixels and we'll go display flex and align items Center great it's looking good margin will give it a 12 pixel so that gave it again some Breathing Room between Linked In and the word video I'm going to give it a position that's relative and font size let's go 14 pixels on this thing so it's going to be on the smaller side and then let's select the div just like that and let's go display Flex in there and I'm going to go flex Direction column on it okay to just make sure that the follow button is underneath where it says LinkedIn and video okay and uh let's get out of this and and here I'm going to now style the button so background color let's go transparent color okay A little gray these are some ugly buttons right now but I swear they're going to look good by the time we're done with them button looks goofy okay and they're getting uglier by the second okay padding 16 pixels okay fat buttons now and uh we're going to vertically align them let's give it a little border radius so it has slightly rounded Corners that's better box sizing I'm going to do border box font weight cool I'm going to justify the content to be Center let's give it a Max Max height of 32 pixels A Min height actually I'm going to give it a Max width instead of 480 pixels text align Center and outline none great so looking good so far I'm liking it okay and now we're going to go and do this stuff with the Avatar okay so we let's get out of this uh and we're done with the we're done with the feed list let's go inside of our Avatar one now and inside of our Avatar we're going to add the background image let's give it a URL and um I'll show you guys this image as well but uh this is what it is just type it out with me.com ch1 b4v oh my goodness I'll try to make it easier for you and add it somewhere inside of uh uh GitHub but this is the image okay it's kind of ridiculous I'm sorry but that's that's what it is okay so you can type that out or uh maybe we'll put it in our in my GitHub repo so you can kind of have access to it cool so boom let's go background size and we'll do contain background position Center let's go no repeat and width of 48 pixels and then let's go height of 48 pixels okay great coming along okay coming along so that's good so far by the way if you're wondering what that image is it's that like big plus sign that we have in our final app so let me just show you it's that one right over there act actually I think I got the image wrong myself so this is what it actually is now boom we got that hashtag symbol right over there okay that's what that is so now that's looking better all right now let's add recommendation component and add a banner card cool so let's go ahead and do that baby girl all right we got the right icon and um that's actually do we have the right icon did we add the right icon it's it's this one right here beautiful looks kind of silly did I add it I can't remember let's drop it in right here again boom I mean looks like I never added it before okay now that I added that let's go back to um our right side so let's go right side and then inside here underneath the feed list component once we get out of that one let's go ahead and create a recommendation component and under my recommendation component I'm going to go view all recommendations okay and underneath here I'm going to add image and let's go images slri icon D SVG cool so and now it goes hey recommendation is not defined well not a problem my friend let's go all the way down wait what's Happening Here recommendation wait I meant to do this view all it should be wrapped in recommendations the image there we go that's better okay in recommendation let's create a new style component for it recommendation and we're going to go styled a cool let's just leave that now I'm also going to need a banner card okay so let's go and um add the banner card right underneath the follow card okay so let's go Banner card just like that and um inside of the banner card I'm going to add an image and that image is also going to have a really annoying Source all right I'm going to paste that in right there all right so again I'm going to try to give you access to um the image but for whatever reason if you're unable to get it um I'm just going to paste that image right here um so you can see it okay it's going to be this image and this is the URL um yeah there you go okay but I'm going to try to make it easy for you guys to get it so I'll work on that so Banner card um yep that's it for the banner card and then now we just have to create styling for it okay so let's go all the way down for Banner card and let's go Banner card and for styling let's just um inherit our styling from follow card cool let's go here and refresh great let's go in our recommendation and go color give it a little color for our recommendations our blue color so view all recommendations now has that blue color that you can see and it's looking good okay now let's go underneath here let's go display Flex let's go align item Center and font size 14 pixels cool so just made that a little bit smaller and then for Banner card what we're going to do is we're just going to say hit image make the width of it 100% And then make the height of it 100% and that's it okay that is it oh by the way um I was wondering why my right side was messed up I in my file um which file am I in right now I think right um yep so right side JS inside of this file this was like at the bottom right and I was like why is this the bottom right so um this is a small typo okay so it's right side lowercase okay and that actually brings that to the top right okay so make sure you have that right all right that ad image is acting a little funny so we're just going to keep going and then we're going to have that image show up okay but for now uh the banner card I'm not going to worry about it I'm just going to uh keep rocking and rolling okay so just bear with me and let's go so now we're going to add a common card compon component okay so let's go inside of main um and in here we're going to basically create that component let's go here const common card okay and we're going to do this okay and uh text align it to be Center I'm going to overflow hidden margin bottom all right this is going to be helpful for the share boox in just a second but just um let's keep keep going with this hang in there with me and it'll make sense very very soon okay so we're going to basically add in margin bottom eight8 pixels to this thing background color and we're going to we're going to actually inherent from this okay cuz this is going to be our common styling and then we're going to inherit from this card um let's go border radius and go 5 pixels I'll go position relative border none and then we're going to do the Box Shadow game of that RGB that and cool so now we got our box Shadow our box Shadow is good to go and uh let's go ahead and actually start using this okay so I'm going to go into my container let's remove Main and instead of main we're going to create a new component called sharebox inside of sharebox I'm just going to write in the word share and then uh let's create a style in for sharebox so const sharebox and I'm going to go and uh inherit I want to inherit my styling from common card okay and then let's go and do display Flex Flex Direction I'm going to go column okay and uh now we got the share component showing up right over here okay that's perfect that's what we want the share to be showing up right in the middle color okay so that gives it a very light gray I'm going to margin like this cool and then background white okay so sharebox is looking good we're inheriting the share boox features uh from our other uh component called common card okay so now in our sharebox we're going to be adding a bunch of things okay what is sharebox you might ask well that's a really really good question so let's actually see what sharebox is so sharebox I believe is going to be our um this one right here this is our going to be our share boox okay we got photo video event and article in there okay that's what we're working on right now so um AKA our post box okay so let's add those things in I'm actually excited to build that component out that component is going to be a lot of fun and that component is going to have some really dope models that go along with it okay so get excited so first things first I'm going to need a couple of couple of icons all of those icons actually so I'm going to need my article icon that one right there I'm going to need my event icon so let's go and find it starts with an E Event icon I'm also going to need my photo icon look for a p photo icon and then I'm also going to need my video icon where is that right there cool so let's take these I'll open up my public images and doom drop it in right there pop it like all right let's delete this one cool all right um so this is good now um let refresh so we got all of our images not okay that's good let's go to main JS now and uh in our main file we're going to now start adding all of this okay so under share boox I'm just going to add in div and inside of the div let's add in images and um let's add in our user SVG okay so that big that's a big image right there that we added cool it's taking up the whole screen right now but that's okay we're going to fix that soon and then right underneath that we're going to do button and say start a post cool so underneath that we're going to have another div inside of that div we'll have another button and then inside of that button we'll have another image and then this image is going to have our photo icon.svg okay so like look right underneath that user image we got this thing going on right here okay doesn't look like this right now but we're working on it okay we got the image part down and we got the photo down now we're going to take that image and we're going to control it soon cuz that image is out of control right now we're going to control it don't worry okay and uh and you'll see how that happens okay so I got my button right here with an image inside of it and uh right underneath this uh image actually let's add in a span Tag and Call say photo cool um so now that's looking good underneath this button let's add in another button and and this button right here is going to have another image in here this image going to be SL images event icon.svg just like that cool so that's event um actually we got photo icon.svg and this one let's make it video icon okay and then the span tag right underneath it is going to be video okay then let's have another button hopefully you're getting the rhythm of this okay and then inside of this button we're going to have image and we're going to have slash Images slash Images slash event icon.svg okay and then underneath this image we'll have span event just like that cool and lastly I'm going to have another button which is going to have an image inside of it that image is going to be um I don't know where it starts writing goes crazy slash Images slash article icon.svg okay and span tag here is simply going to say write article just like that now let's go and check it out W all of them are right there that looks great making progress photo video article we got the whole shebang in here okay cool and then what we got to do is we got to start adding styling to it so let's go to our share boox and underneath our share boox where we added background white we're going to add an additional styling okay so let's create a let's create uh select the div not create and uh for div we're going to style the buttons like so and these autocompletes are painful so this button is going to have the styling of outline none cool underneath here we're going to have color Okay font font size let's give it a 14 pixels right all right so underneath this let's do Min height of 48 pixels cool background transparent okay so caught the caught the crazy thing all right so sharebox make sure the whole freaking thing is wrapped in sharebox okay that that's the eror okay this is why it's important to catch these errors boom okay now um if I uncomment this out cuz I commented it right now cuz I was like there's literally no difference that's happening okay so let's just go line by line here and see uh whoops let's just comment oh it comments out the whole um thing at once so let's try like that okay so I'm going to uncomment this color okay that made it a little bit gray I think you can see that right that made a little bit gray okay now that made the font size a little bit bigger right uh line height cool they gave it a little height cool let's go Min height boom We Got A Min height action going on and uh lastly but not leastly let's make the background transparent okay so clear clear that out great now we're going to add a couple of more things to this Okay cool so now under background we're gonna make sure that border is none okay so now the border is gone and it's starting to look a lot better yeah so boom that's that's looking beautiful let's go display Flex nice that looks a lot more beautiful now clean and then let's go align items Center nice font with weight should be 600 yeah that looks great that looks great all right we're doing good now underneath this button let's get into the first child and uh display Flex okay so we're starting to control that image a little bit align items Center okay let's go padding nice some more control on that uh image let's all was a good sign now we're going to get into really controlling that image boom already looking better baby uh border radius of course 50% will give it that nice circular feel and then margin right 8 pixels uhhuh look at that we're getting we're getting somewhere with that now we're getting somewhere with that now so let's get out of that image now and uh now let's dig into the button okay okay so you saw what margin did right it gave it more margin from the top in this case we're going to have Flex gr one and then let's go border radius 35 pixels cool okay and uh let's go on and go padding left my bad left 16 pixels cool okay so far so good let's go border one pixel solid and then we're going to ENT Al give it that color right there okay so now you can see start a post actually has a little border around it right and how did that happen so for example if I remove border radius now look it looks square but if I put that border radius there boom it's looking nice and circular like that okay now let's add background color and we'll add White cool and then text align and I'm going to text align everything to be left great great great great great great okay and now let's get out of here and let's deal with the nth child uh-huh look like that all right and we'll go display Flex yeah so beautiful it's coming together Flex wrap wrap beautiful justify content space around so we'll give space around ooh that looks clean okay and then underneath here we'll go padding bottom okay so you saw how it gave it some breathing room from here right there gave it breathing room right there okay and then the button the buttons here image uh the the image inside of the buttons okay let's go ahead and control that zero cool that controls it that's great great so so take a look at the images right here these images boom and I add that line now those images have some margin from the text cuz they were initially way too close all right now let's get outside of that image and let's deal with span and here boom and now we got the beautiful blue action going on amazing amazing you guys okay that was um absolutely incredible work and um you know I just want to say that I'm proud of you for getting up to here and making such great progress so far you've been absolutely amazing but we're not done yet and we got a lot of way to go for example you know we I mean as amazing as this is looking already right and I bet you even completely forgot we actually have a freaking homepage right which is completely mobile responsive by the way okay and um if I hit slome now we get redirected to home right so this is all the front end functionality and this is great but remember we still need to add more things to it like for example we still need to be able to add Firebase to it so we have login and log out functionality from the homepage we still need to be able to add uh re react router redirecting you on login to this page and then we need to add more functionality around being able to write a post so we're going to need a modal we're going to be able to we're going to need to be able to add text in the model and then add images in there and add videos in there and then we're going to need to be able to store that inside a Firebase and then we're going to need to be able to read that from Firebase and show all of it here and then we're going to write need to right react code that can show those components and everything in a beautiful way okay so we're doing great so far but we got a long way to go so hang tight you're doing fantastic smash the like button if you haven't already and let's keep rocking and rolling now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever program.com pwj okay so then you don't just watch do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript so you can get your skills up so freaking high and really get to that next level so go ahead you know if you want to take it a Next Level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we hav't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing sixf figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need all right now let's actually start adding the article portion okay that means like we'll be able to see some of the Articles so here we go so first things first okay um let's go over to our main JS where we're at right now going to zoom out just a little bit cuz I was a little too close and claustrophobic for comfort and uh let's go right underneath the share box okay so where is it let's go to Main and I'll go right underneath the share boox where share boox is ending and let's open up a div and inside of this div I'm going to add an article okay and inside of this article I'm just going to say article like so okay and let's hit refresh now it says it's not defined because we need to make a styling for that component okay so let's go ahead con article and uh again I can do styled and I'm going to copy from the common card okay so let's go like this beautiful now we have a article right here pretty clean okay pretty nice so let's hit save now let's actually add more things to this okay so first thing I'm going to do I'm just going to add padding zero to it cool um margin of 0 by 0 by 8 pixels okay and then I'm going to do overflow I'm just going to say visible on this thing okay so our article is here it looks great I like how it looks I like how you look and you're important and I love you okay never let anybody tell you otherwise I'm here to support you all right let's keep going so great job on the article all right now let's work on the uh ellipses okay so first what I want you to do is open it up Whoopsie Daisy you're crazy all right this is the Ellipsis SVG it looks like that three collapsible dots okay so what I want you to do is open up your public open up your images and then open up your no that's inappropriate open up your heart that's what I was going to say and drop that image all right great now that you got that image what we're going to do is we're going to go inside of our main and we're going to do a couple of things okay let's go inside of our article component that that we made and we're going to remove what we put inside of there all right simply because we're going to change that bad boy up and add a new component called shared actor okay and inside of this shared actor I'm going to make a link tag now I don't actually need the link I just need to borrow the styling so I'm just going to leave it like this and I'm going to give it an image and we're going to give it a user. where the where does it start typing okay like so okay and uh so that's pretty good as long as our a tag and image is concerned now inside of this a tag I'm going to also add another div okay and uh this div is going to have span and I'm going to have title after title I'll have info okay capitalize the title T and then we're going to have date just like so underneath this a tag I'm going to add a button that button is going to have an image and we're going to give it an ellipsis uh in image SVG okay now it's complaining it's like yeah I don't know what the share actor is no problem const shared actor okay just like that we're going to give it a style div make it empty and save and refresh and it should be defined now okay so now we see title info date right next to each other very uncomfortably close with the three dots okay great so let's start adding some styling to it and make it look good okay make it look good in the hood like you should let's go and do that okay for the shared actor so now this going to require a lot of styling hang in there let's give it padding right of 40 pixels oops cannot see it cool let's go down and I'm going to give it iflex wrap and we'll do no wrap on this thing okay and just make sure the whole thing is wrapped in shared or shared actor just like that okay padding I want to give it 12 pixel by 16 pixels by zero cool okay whoops all right let's see okay this is where we have it it's looking good we got some padding going now let's uh do a couple of more things to it okay I'm going to add margin to bottom let's go like this and add some margin and uh underneath that let's go align items Center cool and let's keep going all right so now let's go ahead and add um under align items I'm going to make sure my display is flex okay cool starting to look pretty okay sometimes certain things don't happen but I promise they take some time and then they come together cool so we got display Flex now underneath here let's style our a tag akr link tag and I'm going to give it a margin right of 12 pixels okay so now that button moved just a little bit to the right that's beautiful now U make sure you keep hitting save for the changes to take place so that gives it margin great now let's go flex grow we'll do one on this all right beautiful damage is taken up a lot of that nice and uh now I'm going to do overflow hidden cool and then let's do display Flex okay whoops did not mean to do that all right so now you should have the image here the three dots to the right just like that and then if I full screen it it should still look very similar to this okay cool let's keep on going now underneath it this again doesn't really matter that much but I just like to do it just to be safe that no links have uh any text decoration just cuz it's annoying let's go inside here and now let's style the image tag that's inside of the link tag and I'll give it a width of 48 pixels nice and I will give it a height of 48 pixels cool so now what you see is that right there okay so you should see title info date and the three dots great now let's get outside of this image and we will uh select our div and let's go display Flex cool Flex direction we go column so now title info date should be each On Their Own Line okay um let's go flex grow one on this awesome so now title info date should be in the middle okay and we'll do Flex base of zero all right so we got the flex bases now let's go margin uh left on this thing and we'll go 8 pixels for margin so that gave it just a tiny little margin you'll see it move a little bit and I'm going to go overflow hidden again cool so we don't want to see any type of weird overflow happening and um span let's control the span now so text align I'm going to say left so now title info date should be right up next to the image let's grab the first child okay and then we'll go font size 14 pixels cool makes it a little bit smaller we'll make it now Bolder with font weight and again first child is that text right here okay and then let's give it a color and we'll go 0 0 0 1 okay so that makes it just a little bit uh darker okay then outside of this span tag what we're going to do actually we're still inside of the span but we're outside of the first child right so inside of this span tag let's also style another element so I'm going to go um um basically this means this thing that you're styling all right so that end is referring to this shared actor style div so I'm saying this divs um anth child and and um I'm going to go n + one all right and let's go font size 12 pixels cool and then we'll go color great so now the whole thing is just a little bit gray okay so that's pretty good now we're going to go outside of pretty much all of that and we're going to style a button component on its own so we're going to go outside of all of these Squigly and we'll now style the button component and we'll say position absolute so now the button should be hovering right over the photo we'll say right by 12 pixels cool top of zero nice background transparent like so border will go none outline will go none so now there's no boxes around it oops now there's no boxes around that ellipses right it's just the ellipses by itself and uh that's it on the when it comes to this component for now this is pretty good and now let's keep on going all right now now let's add description and a uh shared image okay that's what we're calling it so let's go in finder and this is the image that I want you to use okay this is we'll make a random post so that's the image and I'll cool now let's go to our main after we got that image and now let's start actually working on this okay so what we need to do at this point is we need to find where our shared actor component is which is right here underneath our shared actor component we need to now add a new component and we're going to call that component description inside of description I'll just say the text description just like that that's it okay so that's good uh let's see what is happening here cool cool cool now underneath description we're going to add one more thing we're going to add a new component and it's going to be called shared image just like this and inside of here we're going to have an a tag that's going to be empty and inside of this a tag we're going to have an image like so shared image. jpeg okay so again description boom again it's complaining that it doesn't know what those style components are no worries we'll add them in right now so let's go add a description so that boom beautiful here we go that image is just out of control right right now okay that image is overflowing everywhere so all good now we just need to figure out how to control that image okay and uh we'll do that now by styling so inside of my description let's add padding 0 by 16 pixels overflow let's make it hidden for color let's go like that okay let's make it a little bit darker cool all right and then uh we're going to go and text align it to the left now you can't see that much right now but now you'll see it okay there we go so save boom that's where my description is that's what you should be seeing right now but really the thing we need to style is that image so let's control that so first of all let's give it a little bit of margin from the top there so now it has a little separation um between the word text and the image itself let's give it a width of 100% cool so again it's still crazy but we'll control it in a second oops let's go here let's go display block cool let's go position relative all right and then background color okay all right and then let's control the image inside of this tag so let's go image object fit contain so still the image should be pretty much out of control with 100% And finally the image is starting to come into control so let's put a semicolon here semicolon here and beautiful so now it actually looks like a legitimate post right description title info date if I go full screen I have description here so now this is looking like an actual post that is great that's what we want all right so now it's looking like an actual image right it looks good so let's keep on going with this and now add social counts underneath here right so for example how many likes does this image have how many up votes does it have and reactions and things like that kind of like in the finished version I can see that there are 75 uh reactions that I have zero comments how many likes comments share send all of that cool so um let's go ahead and and add all of those things in now so what I'm going to do is I will go in underneath underneath my shared image component so let's go right underneath that and I'm going to add my social counts component okay that's what we're going to call it let's go ahead and create our list and then inside of it we'll make a button and inside of that button I'm going to add my image okay and uh these images are again we're going to give you access to all these images but this is um going to be an image that I kind of just pulled all right it's an online it's a URL all right what I'm going to do is I'm just going to download this image so it's less annoying for you guys let's see um is there a easy way to actually download this image though there's no easy way to download that image so actually let's just use the CDN okay that we have here and let's just stick with that okay so this is the URL for it and again we'll add all of these images inside of the GitHub repo so you can access all of them okay so that's going to give you your like button let's add uh another image right underneath this okay and uh this is going to be the following URL and um we'll add that one oops let's add that one right there this one okay great so now we got these two images okay and this image right here you can go look it up this image is going to be um the Clapping Emoji okay really hard to see I'll have to zoom in quite a bit so you can see it but yeah this is the Clapping one okay so make sure you have that one and underneath this image I want to add in another thing and we'll just add span tag and we'll say 75 as in to say that we have 75 reactions so far okay button cool and right underneath this list ending let's do another one Li and then inside of here we're going to do an a tag again remove the entire ah ref and uh we're going to say one comment okay okay let's just do two comments like this okay and hit save cool so we got Social account inside of here we have a list we have you know one button here and now one button has two images and that's span cool okay great now let's go ahead and add in The Styling for our social accounts component so I'm going to do cons social accounts styled unordered list save the error should go away save again go ahead refresh come back cool all right so now I see this um I see 75 uh reactions thumbs up clapping 75 claps and I see two comments right underneath it okay looks good but let's make it look better okay let me full screen this that's what it looks like right now okay so now we have to do a bunch of styling work to make sure that this looks good so let's add a line height to it about 1.3 okay so that gave it a little breathing room for two comments let's go display Flex all right now they're pushed to the left hand side I'm going to align items to be to start kind of right at the start so that's good I'm going to make overflow Auto for this margin let's give it 0 by 16 pixels okay so now it's pushed a little bit from the left hand side padding going to give it a little bit of padding okay good so padding went ahead and right added more of this so now it's nicely centered and looks like we have again more breathing room there border let's give it a border bottom of one pixel solid and give it it give it this color here cool okay looking nice looking nice okay let's give it a list style and we'll go and give it none okay so those two dots that were showing up now are just completely gone and now let's actually select the list and style it so I'm going to go margin right on this thing and let's go 5 pixels great we'll go font size 12 pixels cool so now the two comments are small button display Flex cool so it looks pretty freaking good now okay so that gives us our social that we were looking to add okay uh now what I want to do is I want to add social button actions inside of the article okay so now we're going to make it look even better we're going to add the comments button the like one and bunch of them cool so first things first let's go ahead and find them so I have comments comments is going to be that one right there at the top and uh we have our like icon so that one we have our send icon ion let's find that boom right there and then of course we have our share icon right there okay let's drag all of them straight into images cool so we got all of those inside of images so now we're good all right so now we got those images and we are going to now start putting those inside okay so let's go ahead and let's go right under where our social accounts component ends so I'm going to go right underneath here and right there I'm going to add a button and inside of this button I'm going to add an image and this image is going to be my like icon.svg cool so now you should see a like button appear on your screen like so great after this let's go actually let's add the button word like next to it too cuz I think that'll look nice so let's go and let's add in the word like great so now we have a blue button and we have the text that says like cool okay let's go um underneath here and let's add in another button now okay and inside of this let's add an image and let's go images comments-icon SVG great so you got the like button and now we got the comment and we'll do a similar thing we'll do span tag and I'm just going to say comment plural great and now we're going to repeat that okay so I'm going to just copi this button I'm going to paste and paste and where it says comments icon I'm going to share that remove uh replace that with share icon and this one I'm going to replace it with send icon so now I have a share icon right here and a send icon right here and I'm going to remove this word with the word share and I'm going to replace this word with the word send great that's what we have here now if I full screen this looks freaking great looks amazing okay but we still need to make it look better so let's go ahead and do that now so I'm going to go and create the new component okay the one that we called social actions all right so let's go all the way up to the top okay so right underneath so right underneath social accounts I'm going to make a new component called social actions so I'm going to wrap all these buttons inside of social actions okay so let's go ahead and do that so I'll go social um let's do it like this social actions let's copy that and let's go right outside of this and paste it so all the stuff that we added let's put it inside of social actions like so okay now it's going to complain hey I don't know what this thing is all good let's go and do and uh and describe the styled component so we'll do cons social actions is equal to and um I want to do styled div boom okay refresh here we go they're right there okay and now let's go ahead and do the f go align items and I'm going to align them centrally cool display Flex cuz I like enabling Flex mode on here great I'm going to give it a margin of zero Min height of 40 pixels there we go let's give it a little padding 4 by 8 pixels like that and then I'm going to uh make a button appear on this or style a button not make a button appear on this what the heck am I talking about and let's do inline Flex on this thing great let's align these items centrally cool padding let's go 8 pixels looking great okay give it a little blue so now they actually look very clickable and then um I want to add a media query but only to the buttons okay nothing else so I'm going to do the following let's add our media query and I'm going to say in with so this is going to be the other way this is going to say only do this on desktop mode so you're not going to see anything change right now okay this is saying only on desktop only on something bigger than a mobile device that's what that means it's the inverse of Max width and I'm going to say give it a margin left of 8 pixels okay you're not going to see a difference but let's go full screen here all right and so you see the like icon and you see see the distance between the like emoji and the and the like text all right now on the actual mobile device they're much closer together okay if I actually comment this line out and we full screen it notice that they're much closer together okay so that difference only takes place on a desktop great so so far so good you should be up to Here and Now our posts are starting to take shape and we are liking it all right you dirty boys and girls let's keep rocking and rolling so we're having fun so far having fun so far you're enjoying yourself but now we're going to do reducts and that's going to slap you in the face fun time is over get ready to get spanked actually you might like Redux okay so hang in there and enjoy with me come on let's go so let's get to the Redux part okay so first things first we got to install Redux how do we do that command J open the command line okay and um what I'm going to do is just for a second I'm going to stop my server by doing contrl C okay um on Windows it might be something else but just control C should work all right and I will simply do yarn ad you can do npm install okay it's the same thing yarn add and I'm going to do react Redux like so and I'm going to hit enter and so now it's going to install react Redux and then I'm going to also install just Redux by itself yarn ad and we're going to do Redux like so so go ahead and install both of those beautiful packages my beautiful person okay great now that that's done we're going to go ahead and wrap the entire app in a Redux store so let's go to index.js okay and um simply go at the top and right underneath here we're going to do the following I'm going to import provider prover Provider from react Redux cool and then the next thing I'm going to do is I'm going to import store from store okay um yeah so we have to still of course create a store which we're going to do soon all right so don't freak out but we're going to be creating a store soon okay but yeah this is what all I want you to add for now and then let's go underneath and what I'm going to do is a few things instead of right underneath so this app here right we want to wrap this app inside of our provider now okay so let's go provider and store and we're going to give it our store that we have okay and uh wrap the app inside of that provider that's all cool that's all cool if you try to run your app right now and you're running into an error don't worry it's because we haven't made the store file yet okay so we're going to go ahead and make that store file so let's go ahead and do that all right so uh let's go to our reducers and let's make the reducers first okay so I'm going to go ahead and uh make a reducer let's do it like this so in my source I'm going to create a new folder and it's going to be called reducers okay and inside of reducers what I'm going to do is I'm going to make index.js okay great and um what all I'm going to do here is I'm going to say import combined reducers okay and we're going to import that from Redux and let's also do import user reducer from whoops user reducer like this and I'm going to say make root reducer equal to combined reducers that's a cool thing about some of the Redux stuff that we're doing okay and we're going to say user reducer like that okay so this is going to allow us to combine the reducers so it's going to be helpful now let's make another file inside of our reducers folder and this is going to be called user reducer like this okay so let's go inside of our user reducer and we're going to do we're going to initialize the initial state in here and uh we'll simply make the initial state to be where user is null he's empty or she okay and then we're going to say user reducer is going to be whatever um in this case the initial state so the by default if you don't pass in anything it's just going to be the initial State and it's also going to take in an action and we're going to do a switch depending on the action type uh default however will be just the thing that Returns the state okay so if I get so here's how this reducer I think about it right user reducer anytime there's a reducer how I think about it really it should be called in my mind a state updater because all a reducer does is it updates a given state so for example if we gave it some type of state it would would update it okay otherwise it would just return the existing state so here's just a dumb example if I gave it an array um with an action of um you know if I gave it something with the action of like it'll send the payload and it will hit like here and it will increment it by one okay that's where the switch case will come in okay is the switch case like all right then the following action where we increment like by one is the switch action type comment uh well then in that case increment the comment section by one if it's none of those well the default should be hey just return the actual State don't really do anything okay so that's kind of what's happening at a high level all right so now we have both of these made now let's go ahead and of course create our store okay and uh we are going to add our store um we're going to add our store let me actually just see this real quick all right so let's go inside of our um source and in our source we're going to create a new folder okay and we're just going to call that folder store okay and inside of store I'm going to create a new file and this will be called index.js within this file we're going to do a couple of things we're going to create store and we're going to apply some middleware uh did I write it correctly and then remove it yes knowing me probably did something silly like that apply middleware and of course let's bring it from Redux okay import root reducer from reducers okay and um now let's just Define our store and once we do this we're not going to have errors anymore in our app and our app should start uh running okay great so now store is defined we are also exporting store now that we're exporting store we will have access to it inside of our project and in our index that JS if I go here we are importing that store and then we're passing it to our provider so technically looking at this we should not have any more errors if you do npm start in my case I'm going to do yarn start you should not have um errors on this thing okay so let me refresh okay so it's saying does not contain a default export and what does not contain a default export it is complaining about what is it complaining about attempted import error dot do/ reducers does not contain a default export cool so let's go to some of our reducer files and let's see if we're exporting what we want to be exporting ah looks like we're not okay so in our user reducer we're going to just simply do export default and I'm going to say user reducer or wait am I in user reducer right now no I'm not I'm an index JS so here we have root reducer so I need to be yeah that would make sense so let's export the root reducer and let's go into our user reducer and let's go and Export default user reducer now we should be uh getting both of those did I misspell in yes I did initial should not be spelled intial should be spelled initial so initial is now defined cool now that was just setup okay of Redux and uh there's a pretty good start to it and we're we're making good progress let's keep going all right guys so just a little note this that you're going to build is going to be an example without using Redux toolkit so we wanted to show you what life looks like without toolkit Redux is much harder without Redux toolkit if you built our Disney plus clone you would have noticed things were much simpler with Redux tool kit it's going to be a little bit harder but I think it's important for you to know this because you might go to a company that's not using the Redux tool kit yet so let's go all right so let's go and now start working on the log in functionality okay so I'm going to go ahead to my login component do we have one yet actually we don't so let's go ahead and uh start working on that component now okay so inside of our components oh we do we do my bad cool so inside of our login component we're going to do a couple of things okay let's go all the way at the end where we're exporting default login um we're not going to need that okay so let's remove that for now actually just leave that for now so we don't have an error but we'll delete that later okay and at the top what I'm going to do is let's go import connect from react Redux like so okay and uh let's keep going down and what we're going to do here is now we're going to create a map state to props okay that's another one of the annoying things that we had to do before we got Redux tool kit okay but I'll show you how this works as well okay boom we'll leave that as empty and then we'll also do map dispatch to props okay and then let's go ahead and um do this cool okay again just hang in with me I promise the more you do repetition of building thingies with Redux the more is going to start to make sense but it's kind of one like one of those things that you kind of get the AHA moments all at once and also pattern recognition is key key key to understanding these things okay so don't get discouraged the first time you see this because it's going to freak you out now let's go export default and I'm going to do export default connect and we're going to do map state to props and I'm going to do map dispatch to props two props like that okay and then I'm also going to do login like this okay so freaking weird right but there we go okay that is going to allow us to export login as well cool okay so we're good so far now what we need need to do is we actually need to start installing a couple of things all right now let's go ahead and start installing a couple of other things we're going to need so we're going to need Redux thunk and we're going to need a Firebase okay so let's go ahead and install these things now so I'm going to hit I'm going to click on my command line I'm going to hit contrl C to stop the server to hit enter just a couple of times and then I'm just going to do yarn ad again you can do npm install but I'm just going to do yarn ad and I'll do Firebase like so so now start installing Firebase and once that's done we're going to install something else okay we're going to install Firebase tools cuz you're going to need those so I'm going to do yarn add Firebase tools that's the second thing you're going to need to install and then after that we're going to need one more thing to install all right now and then last one we're going to need is yarn ad and I'm going to do Redux thk Redux Dash thk Okay so we're going to make sure that we have that so those are the three things we're going to install make sure you don't miss on any of these because these are going to be important okay and then of course we're going to need access to our Firebase config files so let's go ahead and get them now all right now so here's what I want you to do go to Firebase okay firebase.com so let's just go together firebase.com like so hit um here I'm just going to go to the email that I prefer and then hit go to console okay and here you're going to see all these clones uh for I mean you might not see any of them this is my Firebase so for you you might have to do add project okay and you might want to do LinkedIn clone I'm just going to call it dummy clone but you should call it LinkedIn clone like this okay so dummy Linked In clone like so hit continue um you don't need anything else and then it'll say creating your project and that's good okay that's kind of what you want and I'll show you what you need to do after that looks so beautiful right look at that UI beautiful just circling around all right so let's H continue on that thing and then let's keep on rocking and rolling um okay so I already have a project created so I'm going to get out of this one now and I'm going to go to the other project that I have okay so I'm going to switch to my LinkedIn clone you just stay in that exact one okay and uh here I'm going to pull go to Project settings okay and we're going to get the things that we need here so go all the way to fire Firebase SDK snippet click config and then get all of the details for your app that you need okay so I'm just going to copy all of these details copy let's go back to our app okay and let's start working on our app so what I'm going to do now all right and just in case you were not able to find this code right let's kind of walk through it together so I'm going to switch to my clone the the dummy one that I was building alongside with you okay and now it might say there are no apps in your project so what I want you to do is click that code button right here go ahead and do that now and now inside of here just call it the same thing we could call it LinkedIn dclone okay and then just hit Register App for now okay and now it's going to give you all of the code that you need okay so then just simply grab grab uh don't grab the script tags but you can just grab everything that's inside of that like VAR okay and just copy it cool great so that's all you need to do on your end all right I'm going to switch back to my other project that I had made and I'm going to grab everything from there all right now now what I want you to do is go ahead inside um of your source and right click on your Source folder and make a new file and I'm going to call it firebase.com you should have the off domain project ID storage bucket messaging sender ID app ID and measurement ID okay and this should be called const Firebase config like that cool now we're going to just do a couple of things after this so Firebase app and I'm going to initialize this app like this and pass in the Firebase config cool that'll help initialize your app now let's uh connect your Firebase to your uh database so let's do Firebase app. firestore okay and let's do const o actually you know what I'll build mine from scratch with you guys okay so let's let's go to my dummy version here okay and I'll just build this out with you guys because I think that's going to be the best way for you guys to pick this up so let's hit save cool now you and I are going to be on the same page okay don't have any unfair Advantage okay so fire store cons off um this is we're going to need this for authentication later so's add that provider new Firebase doo. gooogle o provider okay and then let's do storage Firebase do storage okay because we need to store our images somewhere all right so that's what we're going to be using storage for and now let's export some of these things so we have access to them outside of here okay and then export default database cuz we're going to need access to the database as well so this is what your overall Firebase file should be looking like this is going to be very important for all your Firebase uh stuff so make sure that you don't have some funny weird stuff going on here okay all right now let's go inside of our index.js which is inside of our store okay so we have a bunch of index.js is now but go inside of your store click on that index.js okay and uh here's the here is what we're going to do okay now we're going to add a couple of things to our store okay so let's Hey where's my okay that line was just too far away for me to see let's do import thunk middleware okay from Redux stunk and um also what we're going to do is now we're going to start applying the middleware so I'm going to remove this and I'm going to say apply middleware and I'm going to pass in thunk middleware like so and we're just going to close that per Ren and that's it okay that's the change that we're making here so we should be we should be good for now and now what we want to do is like continue adding in the login functionality okay so we're going to now add a couple of more things to our login okay beautiful you're freaking crushing it let's keep on going so we got this now let's make the login functionality work okay and what do I mean by that here's what I mean by that let's if we go to our finalized LinkedIn clone app if I sign out here look what happens if I hit sign in with Google boom right so this popup how is it happening how's that information being stored we're going to do that and resolve that with Redux okay and Firebase so let's go ahead and work on that functionality now so first things first which one should I work on first let me think okay let's go to Let's actually do this okay so in our source let's make a new folder and we're going to call it actions okay for Redux you have your actions you have your uh reducers you need all these things okay and uh it's good to put them in different folders so inside of this actions we're going to create a index.js cool and uh in here we're going to import a couple of things I'm going to import o and I'm going to import provider and um we're going to get this from Firebase okay and then let's do export function cuz we're going to need to export this anyway so let's go sign in API that's what it's going to be called and what it's going to do is going to dispatch um off okay and we're going to do sign in with popup so this is a nice function that comes with Firebase okay so this Au right here is coming from Firebase so sign in with popup like that okay so sign in with popup once Firebase responds with a prompt promise we're going to do do then okay so we're going to chain it and we're going to pass it a payload payload like so oops boom and then inside here I'm just going to console log the payload okay so we're going to be able to see that great now let's go here and I'm going to do catch and let's catch any errors that we're getting and then I'm just simply going to alert us of the error message okay so this is what your um index JS file should look like right about now okay and now let's go ahead and put it to use all right so now let's go to our login component where we're actually going to use this signin thing okay so login.js and so let's start with importing that little method that we made signin API okay from that okay so that'll imported and now what we're going to do is inside a form where we had Google form now all we're going to do to this component we're going to say hey on click we want you to do something here's what we want you to do we want you to run that function so we're just going to do props do sign in okay that's it okay so let's go ahead and do this okay and we're going to go down and this is where Redux gets funky but just hang in there with me okay and I'll show you how we do this so all the way at the end right here for the Redux portion we're going to add this kind of right below our export default and let's let's go ahead and do map dispatch to props actually we're doing that already so let's just stay in here boom right there okay dis patch and this is the code so let's hit enter and get inside of here and we're going to say sign in okay and what that's going to do is that's going to dispatch our method sign in API okay so this sign in here right corresponds to where we're doing props do signin okay so now those things are connected and again think of Redux Like This Global store okay where when the user logs in it passes the user login information and stores it there on the front end it's kind of like having a database on the front end that you can access really really fast that's how I think about Redux and State Management tools all right awesome so now we got all of this that's looking good now let's actually start dispatching these actions um to the stores after integrating it with Google Au so we're going to start adding the Google um Google Au in uh integration very very soon okay so first of all here's what I want to do let me go to my Firebase okay and uh what I'm going to do to my Firebase is let's go to authentication inside of my Firebase and under my authentication so let's go to our Firebase app and then inside of our app what we're going to do is uh let's go ahead to our authentication and then just go and click get started cool now inside of get started what we're going to do is hit where it says Google for provider and just hit enable um and that's essentially it okay just give it your email whatever your email wait gave me a weird email but whatever that should be good okay so now your Google should be enabled another weird uh thing uh by the way is if you are on some type of different Firebase uh website there you might have uh you might not see what I see here you might see something completely different so what you want to do in that case is actually you want to hit where it says build okay for some of you it might say build click that and then click authentication underneath that that'll bring you to your authentication okay okay so now let's go ahead and start trying things and trying to break things and let's see what happens okay so I'm going to go to my actual app and on my app instead of home let's delete that and let's just go to the you know Local Host 3000 now it's might say the site can't be reached well no problem I'm just going to hit yarn start you can in your terminal hit npm start and you should be good to go okay so now uh we're going to click uh o my middleware is not defined oh okay interesting so let's go to my store my index.js inside of my store okay and in here I'm probably probably capitalizing it somewhere Middle where and let's make it lowercase okay all right there we go all right I'm sorry Frankie Frankie is building it out with me to help test it by the way shout out to Frankie guys Frankie's been here Frankie pop in Frankie has been here and test running and doing the entire build actually with us so he can make sure that this is actually running perfectly for you guys okay so drop some love for Frankie in the comments below cool let's keep going now let's hit sign in with Google and Frankie says it's working for him it's working that's cool right so easy that's so freaking cool let's hit Kia clever program.com nice okay great so let's open up inspect and let's see if the payload is inside of our console and it looks like it is okay so hit inspect go to console and do you see where it says object now click the drop down on the object so you guys should see user right here Okay now click under user did you uh did you click the drop down I now keep scrolling down and you'll actually see display name you'll see email and you'll see email verified yeah okay great and if you keep scrolling down you you'll actually even see things like Photo URL do you see that now if you doubleclick into the photo URL um actually can I select that copy so right click and copy string okay and now open a new tab and paste that string you should see your photo like this okay and that should tell tell you that your um your app is like actually pulling the payload from the sign in right so like where is that payload statement let's just go ahead and search let's go console there's like only one place we're actually doing console log um and it's inside of our uh oops not mean to do that we're doing this inside of our user reducer it seems like no no no I'm sorry why am I I'm being freaking crazy we're it's it's right here not inside of our usereducer we're using it inside of our actions index.js and we're console logging so the payload is actually what Firebase gives us back it's this object that's the payload that gets dropped uh every time we log in so we'll be able to use that payad to pull the photo and pull the name and email and all of that good stuff okay so granted we're able to get everything that we need right granted we're able to get everything that we're looking for we still need a way to actually store that information right we still need a way to store that information so that's what we're going to do and we the website and things still need to change uh based on the user logging in okay because it shouldn't keep saying sign in with Google the whole time that would not make sense all right so let's go ahead and start setting things up up so first thing I'm going to do is inside of actions I'm going to make a new file and this file is going to be called action type. JS okay and I'm going to do something very simple I'm just going to say export const set user equals set user okay that's all set user equals string set user that's it all right now let's go inside of let's see which file should I work on first let's go ahead inside of our user reducer now okay that's inside of our reducer so for example just click reducer then go to user reducer you should be there now we're going to do a couple of things here inside of our switch case so depending on what type of action we get so if we get a case where we're setting a user what we're going to do is we're going to return whatever the state was previously and then add in our new user okay so the state is going to be updated just by one thing now it's complaining here you uh set user is not defined well no worries let's go all the way at the top and let's import it so import set user okay from actions action type like that cool so now it won't be giving us an error anymore our app should actually be working so we're good with the user reducer for now now let's go inside of our index.js all right and now let's go to our index JS okay and in our index Js all I'm going to do I'm sorry wrong index JS my bad let's go inside of our actions index JS right here and now all I want to do inside of my payload instead of using console log we're going to dispatch the user dispatch means send that information out shoot it okay whenever I think dispatch I think of like the Olympics um um what is it called referee shooting gun right so it's like whenever the starting pistol no not that that's like two of crazy starting pistol okay holy crap this just got crazy uh Sprint Jesus that's what I think of whenever I think of dispatching actions so like whenever we dispatch actions from the store it's like like tell the entire store where where um the user has logged in okay man got crazy so this is who you are when you're dispatching actions is this an actual gun I don't know if they have they don't have real guns right the Olympics okay so let's go inside so in our index JS here now let's just make a couple of changes okay first of all we're going to import from the top import set user like so and I'm going to do fr action type okay that's good now let's also export cons set user this is going to help us set the user and it's going to take in a payload whoops it's going to take in a payload and that's going to be type set user and then the user is going to be the payload okay whatever the payload is going to be cool all right so that's good import is looking fresh and now we're just going to dispatch the action here instead of console logging it so dispatch set user and uh payload user just like so okay save okay so now with all three of those things done hopefully that information is actually being stored inside of Redux let's H sign in with Google and I'm going to go ahead and sign in cool so we'll be able to see later if this information is actually being stored or not all right so now let's redirect the user to homepage on login so I'm going to go to login and inside of my container right at the beginning here's what I'm going to do I'm going to say the following I'm going to say hey if we got a user going on okay then what I want you to do is I want you to redirect to okay and what we'll do is uh let me write redirect and hit enter so import it from react router okay importing that from react router just like that cool and what I will say is redirect me to the home page cool now let's end that bad boy like that beautiful beautiful beautiful beautiful beautiful very very clean line and it says hey if the user is there redirect me now all we need to do to make this magic work is just go all the way to the bottom and um what I'm going to do is right above map dispatch to props let's just add it here uh actually inside of map state to props we can do this okay we can do this right here so where it says return which is empty we're going to say user state to state. user state. user so that's who the user is going to be and look at that it is already redirecting us how freaking cool is that you fools if I go to homepage okay let's H sign in with Google hopefully it works let's see hopefully it breaks and breaks my heart whoa smash the like button if you enjoyed that one that was really clean okay I'm loving this man are you guys loving this I hope you're loving this okay this is awesome all right now Redux is kind of crazy so before we move on I just want to explain some of this stuff here okay so let's go go back to our homepage or not our homepage but our login page right this sign in popup this just this one line of code makes that popup happen that is insane okay so that's just that one line of code that's making that popup happen then this line of code is telling the app hey this is the user information so I'm dispatching this action when I dispatch this action I sended this function called set user okay and I give it the payload of the user so remember what is payload do user do you guys remember that when I did um let's actually do this right now so I'm going to console log console log and I'm just going to do payload here okay and what I'm going to do here is comment this line out and let's hit refresh now I'm going to hit sign in with Google and let's hit inspect okay on the right hand side and I'm going to go to whoops not sources console okay and I'm going to click sign in right there now an object just appeared okay and it's giving me this information about the user okay now the user information is the one I want right so now watch this now I'm going to do payload do what user right so now watch what happens if I hit save and I hit uh refresh okay and let's go sign in with Google and I'm going to hit kazia clever program.com I'm just going to get the information pertaining to the the user that's it so I'm not getting my display name and I'm getting my email and I'm getting all of that right so that's what payload do user actually is so that object we're sending over to this method over here that's a set user so set user takes a payload the payload was all of the user details now this is types set user and user we set it to whatever the payload was was okay that's kind of what's Happening um that's kind of what's Happening Here okay and let's go to set user boom okay this is it's all freaking connected okay now if I go inside of my reducers and I go inside of my user reducers when it sees the case that I'm trying to set the user it takes my existing state and it just adds the new user to it and if the state doesn't change it just Returns the default state of whatever it was before that user was there that's it okay and remember Redux is immutable so I'm not mutating this okay I'm creating a brand new state with whatever the previous state was along with the new one user that I've added okay so a little bit of just explaining behind the scenes of what's happening with Redux so now what we're going to do is we're going to take the user authentication info when the authentication is changed okay and store it okay so for example when I log in I want to like store that information and have access to it okay anytime I'm like refreshing or getting that information so let's go ahead and work on that now so inside of my actions and index JS what I will do underneath here is uh let's make another function okay and let's call it user o like so get user off okay this is what's going to get the authentication info and uh let's start it off with dispatch cool and I'm going to do this is something that comes from Firebase so on off stay changed do me a favor and run this asynchronously okay you're going to take a user as an input and if user meaning if the user exists or is logged in or whatever dispatch set the user set the user to user okay so that looks good now let's go inside of our app uh JS file and we're going to add all of this here so um let's go ahead and do that okay so first of all I'm going to need to I'm going to need to do a couple of things and for those things we're going to I'm going to I'm going to kind of walk you through all of this okay so first of all right at the start here okay function app um let me think let's have it a take props like that okay and then inside of here I'm actually going to throw in my use effect uh hook so let's go use effect and uh let's hit enter whoops use effect okay there's tons of boiler plate that comes uh with a a lot of this stuff but okay so use effect this is how we write it in here okay so I'm going to say props do get user off cool and then here it's not going to really have any dependencies for now cool okay so now it's going to start telling us hey we're erroring out so let's go ahead and import react hooks so import use effect like so all right so that's now going to import this use effect good use effect is not defined interesting should be defined okay so now it's saying get user off is not a function so we're going to go ahead and import that as well import get user off okay from actions okay so now we got that as well it's good cool so now of course it's saying it's not a function but we're going to go ahead and take care of that okay so let's go ahead inside um you know just get inside of appjs hopefully you're there and now let's go all the way to the bottom and we're going to need to do those map props type of things okay this is very common thing we have to do with the Redux if you're using it without toolkit it's annoying but has to be done okay so we're going to do that now right after take out this fat F wallet from my pocket so let's go ahead and do this so map state to props like so and we're going to do state and let's go like this and we're going to return squigglies like that okay then let's do const map dispatch to props okay we're going to do this it's going to take in something to dispatch and uh get user off and this is actually what's going to start defining your function okay and we're going to say dispatch get user off function okay and then what we're going to do is I'm going to remove this export default line we're going to export default I'm going to say connect okay we're also going to need access to this connect we're going to import it later and I'm going to do map state to props and then I'm going to do map dispatch to props and then let's just do app okay now we're going to need to import connect so let's go ahead and import connect um from Redux okay import connect my bad from from react Redux cool so that's imported now what's the error let's see identifier connect has already been declared oh my bad I'm declar uh getting it too many times it's already right here cool we got Connect Now what's here expected an assignment or function call and instead saw an expression line 37 and 16 cool so let's see okay let's wrap that in parentheses so it's an expression okay don't need that there okay so now that should be good should be good should be good that allows us to get the user info hopefully you're not getting any errors and now we are on the same page beautiful okay so the other annoying thing that I realized guys is um remember my image was not showing up the jobs ad one or whatever this one just kept not showing up I looked at my console and uh it was getting blocked by client for whatever reason so what I decided to go ahead do is like copy that image and open like copy link address open that right here right and then I what what what you can do if you're having the same problems hit save image as okay and um go to that same folder you have everything right so for example for me GitHub Banger projects LinkedIn clone uh public images inside of that images folder I just decided to call it jobs add. jpeg okay um and then I hit save so then it showed up as an image right there okay and then I went to my um right side component cuz that's where it was supposed to show up and it just was like never showing up okay so in the right side component in order for it to show what I did is I went to my banner card and um uh instead of having that static link I just changed it with the actual image okay so how you can do that is simply go and select this/ images jobs. jpeg hit save and then uh this is what you should see okay so go ahead and do that that'll take care of that other problem that we were having earlier okay and if somebody wants to be helpful please drop the timestamp to when this problem was first introduced okay and then um you know and just say this is the bug fix for that so if somebody's looking for it that'll be really really helpful thank you now let's go ahead and display the user photo once the user is logged in so I'm going to go inside of header JS and let's go to where we have user which is user component okay so this user component right here okay so where that says me we're going to replace that with an image of Me Okay the image that I get from Google authentication all right so here's how that's going to go I'm going to go right underneath this a tag cool and uh right underneath this a tag what I'm going to do is open up your squiggly okay and um let's be careful where we put everything okay so squiggly let's do it this way I'm in the wrong place okay remove that squiggly and remove that a needs to be inside of user okay what did I do what did I do I'm sorry I'm confusing you okay leave work alone leave work alone so it should have that a tag in there you're good you don't need to touch work we're trying to touch user I don't know why I decided to go under work probably I've just been coding for so long I'm losing my eyesight a little bit so bear with me here okay I'm just a human being relax so right over here what I'm going to do is uh let's add a squiggly here okay like that okay so the the squiggly opens up here but here's where we're going to close it so remove the closing one and I'm going to close it right above this span just like that okay that is um that is Perfecto okay that's the right spot for me to close it cool so now let's go ahead and make this work so inside of this squiggly we're going to do a couple of things okay I'm going to say props user so if the user is logged in and exists I want the following to happen props user. photo URL okay so if that URL exists then I want um the following to happen Okay so I'm going to make an image tag here and in this image tag for source what I'm going to say is this okay and you can remove the quotes because this is going to evaluate to string anyway once it's done so I'm going to say props do user. photo URL okay and let's end that cool and then I'm going to say colon so like this okay now this looks really intimidating and confusing but let me explain first hey is the user logged in yes they are they exist great then look for their uh photo URL does that exist question mark If it exists then show their photo then I have this Turner operator right there if it doesn't exist show a generic user photo Kish that's what's happening there another thing why my thing looks funny why my this me part with the drop- down sign looks funny is because the drop down is not inside of the span so let's go ahead and uh close that and sandwich that in the span okay so again span should have the word me in it and the drop- down image in it okay so make sure to go ahead and uh do that and once you do that what's going to happen is now your photo and your me with the drop down looks freaking great okay that's what should happen all right so that's looking good now what we need to do is make sure our dispatch is happening because right now um our app does not know about the image so it needs access to the store and we need to dispatch that action okay so then it's going to have access to the photo so anyways long story short let's go all the way to the bottom and let's go ahead and do map state to props like so and state whoops okay State and then inside of here we're going to return user state. user state. user annoying boilerplate code okay that's map state to props now we also need map dis patch uh to props and let's go dispatch all right like this let's leave it empty for now we don't really have anything going on in here just yet and then this last line where it says export default header remove that line so we're going to delete that line and we're just going to do export default connect and you guys know the drill we're going to connect map state to props like so then we're going to do map dispatch to props and then we're going to do header like this oky dokie Mr Pokey okay so that is pretty good for now let me actually just see if we need to change any additional things at the top did we import connect yes we did import connect so that's looking good so far okay great so it is working uh in order to be able to see it first of all it's at the bottom right you should be seeing your logged in photo because I'm logged in and you should be seeing your logged in photo at the bottom right if you're logged in and at the top right you should actually be seeing it if uh in desktop mode okay so you should be seeing your photo cool amazing okay now what we want to do is uh add the ability to sign out so when I hover over sign um me right if I hit sign out I cannot sign out so let's add that ability so um let's go and start off by first of all inside of actions we're now going to create a new file actually no let's not create a new file let's just go inside of our index.js so in here remember we added the signin functionality and the get user off functionality so let's go underneath that and let's add the sign out functionality now so let's do export function sign out API okay and then let's do return dispatch just like this all right inside of this dispatch all we're going to do is um we're going to dos. sign out and again this comes built in with um fire fire basee okay that's why Firebase is so nice and then we're going to do then okay leave that empty and we're going to do dispatch set user to null okay so we're going to run that function we're going to set the user to null okay that's going to remove any user that's existing and then I'm going to do do catch any errors um and if there any errors just simply console log them in this case great so this is what your sign out API should be looking like right now okay so continuing on with our functionality now we're going to do just a few things okay so let's go to our um when we sign out so let's think about this right when we sign out we need to be redirected back to the homepage right just like when we sign in we need to be redirected back let me fix that when we sign out we need to be redirected to the login page just like when we sign in we're redirected to the homepage okay so we're going to work on that um that was Nas say hi to NAS everybody behind me beautiful so we're going to add that redirect in just a second but first let's start off with the functionality so I'm going to go to my header okay and let's first of all import the sign out functionality that we made okay so let's import sign out API okay and where are we going to import that from well you know where we're going to import that from from our actions where we just finished making it okay in the index.js so now this will actually import it okay why is it saying modules not found/ actions oh my bad dot dot SL actions there we go okay because I'm inside of of headers which is inside of components so I need to back out first and then I have access to this actions folder okay got to back out then boom hence the two dots right there cool okay so now inside of my sign out let's find that so sign out is right there and uh to this sign out all I'm going to say is a on click I want you to do something for me okay and sign out is going to be like hey what do you want me to do well on click um I want to actually sign out okay I want to call the sign out method now remember because we're using Redux you can't just normally make this work because that would make too much sense unfortunately so in Redux you do things always in a really obnoxious boilerplate method thank you Dan abov the founder of Redux so I'm going to go to my dispatch to props and in here all I'm going to do is we're going to add in sign out and what sign out is going to do is dispatch and we're going to use our uh method that we created earlier dispatch sign out API okay so that should already be pretty good okay so let's go ahead and see if that does anything or not so sign out whoa it actually worked did you guys see the photo change that's freaking amazing so let's actually go back to our homepage and let's test this out let's hit sign in and it should redirect us to the homepage when I sign in so boom let me choose my email okay redirected me and look my photo is of the logged in user that photo is being pulled straight from Firebase now if I hover over and click sign out it signed me out and the photo is gone but what should happen when I sign out I need to be redirected back to the login page so let's just go ahead and add that last bit of functionality and how we're going to do that is let's start off by going to our homepage and inside of our homepage I need to make sure that I import my redirect okay from react router Dom because that's what allows me to manipulate the Dom and manipulate which Pages I'm at I also need to import connect cuz I'm going to need that for this from react Redux and again this is Redux without toolkit okay so this is why you still have to do mappings and connects okay now inside of my container right over here here's what I'm going to do all right we're just going to add that right there and I'm going to say hey if the user is not logged in or there is no user then what I want you to do in that case is redirect me to the homepage or I'm sorry I keep saying the homepage but the login page in this case Okay um and of course we want to close this so let's go ahead and do that okay cool so now when I sign out it actually brings me back to the homepage okay and last things I want to do in order to make sure that that happens and my store knows about it here's what I need to do because that functionality is still not necessarily working we're going to do map state to props and I'm going to let the state know about hey user update the user State like so and I'm going to delete this line and we're going to do export default and this is what we've been doing with Redux every single time so connect map state to props and we're just going to leave it to that because we don't need to dispatch any actions in this case and uh of course add home just like this okay so now refresh so now watch what happens okay I'm going to sign in with Google now it should update my photo at the bottom right now let me full screen it real quick full screen hover over let's click sign out and boom that works that is nice right when I sign out it actually brings me back straight to the homepage okay so hopefully you're enjoying this so far and now we're going to start displaying the username right next to um right next to our user profile okay user image all right so here we go so now we're going to actually add the user display username on the left hand side okay so um and we're going to do that right there okay where it says welcome rafic Kazi that's kind of what we're going to do in our own app okay so first of all just let's just log in so it redirects to the homepage beautiful that looks good okay but now it says welcome there well it should know who we are so it shouldn't say there it should actually say our name now so let's go ahead and do that so I'm going to go to my left side component that I have and then where we have this link this is where we need to change it okay and here's how we're going to do that so I'm going to say props that user this going to get me access to the user and remember this display name this is what should get me access to the name um so what I'm going to do is I'm going to basically be like uh hey if the user exists okay so Props do user if the user exists this is a nice fancy Turner operator that says then show me the username otherwise show me blank okay or I can just say show me well um there okay so that way it says there for now and then if the user will be there it'll say their name instead cool well why is it not getting the name you might ask well what we're going to have to do is tell Redux about it so this is where we need to map state to props so let's do cons map state to props like this open this bad boy up and again we're going to return user state. user state. user like this okay let's refresh okay and we're going to go ahead and connect it now to our component all right so let's go here boom import connect like this from react Redux so now we have this imported that's great let's go all the way down it's a lot of lines of code in there remove this and we're going to do export default connect map state to props and we'll just do left side like this okay again we're not doing any dispatching here we're only doing reading and retrieving all right so now rafii is being read hey that's amazing right let me go home rafik Kazi if I log out it should basically be uh nobody okay cool slome doesn't even let me go to home Okay when I log in it lets me go to home so that's really good my authentication it seems like it's working really well and things are good now we're going to start working on the modal okay so let's go ahead to main JS file and instead of post Malone we're going to be working on post modal so congratulations all right post modal there we go you like that one no yeah all right and U pretty much what I'm going to do is right underneath where article is ending and there's a div ending right underneath the article let's go underneath that div and I'm going to add the post modal okay and you'll be like hey kazzy hey kazzy where are you importing the pulse model from that's a really good question it doesn't exist yet so we need to go ahead and make it so inside of components I'm going to create a new file it's going to be called postm model. JS okay and now we're going to start working on this model and it's going to be nice so let's start off with styled from styled components because we're going to need to style this thing and of course let's go ahead and go it's going to get some props okay there as arguments and um I'm going to create a new component inside of here it's going to be a container and I'm just going to say post modal for now let's hit refresh it's still complaining well that's because I have to export default post modal and now it should stop complaining soon okay it goes hey I don't know what container is no worries I'm going to cons container and let's actually go styled d and leave it as an empty cool so now all the errors are gone and we're back to an operational app which is exactly what we want now inside of our container we're going to style it so I'm going to say position position fixed okay where is our uh model I'll show you our model will be available for us shortly okay let's go top zero for the model yeah let's go left zero okay and um we're going to start seeing it soon hopefully I'm as surprised as you when we see it just kidding all right bottom zero okay so that allows us to put it at the top we're going to give it a really high Z index okay so you just kind you can kind of do that that will make sure that it's always on top of things so now you're starting to see it post modal okay and now 0 0 0 0 it means zero on the left axis x axis y AIS and uh that's what you end up getting when you go 0 so what this does here by the way right is this 00 you're wondering what it does so hit come here and inspect the element now when I inspect it look the modal is actually over the entire screen okay and um if I actually change this to 10 pixels or let's go 50 pixels so something visible from the top it's pushing it down but notice now it's not the entire screen so why we do that sometimes 000000 like that is to kind of in an easy way say hey take over the entire browser okay so this right now is taking over the entire browser and it has a massive Z index so it'll also take over more priority cool so now inside of color I'm going to give it color black and just to kind of show you this right if I actually gave it a background color of let's say black Watch What Happens boom my entire screen is now gone black okay and if I gave it a uh zindex of -20 now it's hiding behind but you can still see the little black bars on the side okay so that Z index is just to make sure that always stays on top of everything else and instead of black of course it's a crazy color to give it right now um we're going to just give it um 0.8 just like this okay that's what's going to happen when the modal opens that's what's going to happen to the entire screen that's what we want okay so then we can see the modal easily so that's how we make that happen cool now last thing we want to do is I mean we're already exporting it and we're using it in main JS right so let's go to our main and we have post modal that's how we're getting this cool beautiful and make sure we're imported okay perfect good job so far let's keep rocking and rolling and now we're going to start adding main content component inside of post model so let's go to post model and inside of here I'm going to remove where it says post modal okay and I'm going to say content cool inside of content let's just write content for now and uh leave it pretty blank and we're going to add in a new styled component I'm I'm going to say content with style div of course empty to just start it off with and we'll give it a width of 100% okay cool all right Max width will give it of 552 pixels so it will never be bigger than that we're going to give it a background color of white so now we can actually start to see this Okay cool so we can see that the model is starting to become visible and now what we're going to do is let's give it a let's remove that uh let's actually keep that my bad and let's go and give it a Max height of 90% cool overflow will go initial okay and then let's go border radius of five pixels okay so now we're starting to have slightly rounded Corners right there we'll go position relative display Flex okay and now let's do Flex Direction column in this case cool we'll top 32 pixels that pushes it down and we're going to go margin zero Auto okay so now we have this thing smack in the middle showing up exactly where we want it beautiful so that's all we wanted to do for this and now we're going to add header in post modal component okay so let's go and do that so inside of content I'm going to remove content and I'm just going to go header like this okay cool and inside of here what I want to say is let's go in h add an H2 and we'll do create a post like that right underneath this I'll add a button and inside of this button I'm going to add an image and this image is going to be a close icon. SVG okay and now the header is going to say hey I'm not defined well no problem okay and I'll show you how to add a close Icon by the way so the close icon actually is right here it looks like that little X at the top so let's go grab that close icon and drop it inside of our images now you should have access to it okay let's go back to the code that we were on inside of components post model. JS so we added that image and now we're going to actually create styling for that component so con header let's start it off with blank and then let's go ahead and start now styling it okay so we now see create a post so that looks pretty good display block I'm going to add padding to it boom now the padding starting to look good I'm going to add a border bottom so I'm going to add a something on the bottom okay and then lastly we're going to do this clean let's give it a font size of 16 pixels I'm going to give it a line height of 1.5 beautiful I'm going to go rgba on this thing and let's do this cool so it's like a little gray out now we'll do font weight 400 and then justify actually before we do that let's enable display Flex let's go justify content on this thing and we'll go space between so now that X should springboard over all the way to the right hand side I'm going to go align items Center dope and then of course let's styled the button and I'm going to go height 40 pixels width 40 pixels great Min with Auto uh color let's do the same thing a little bit of that gray never hurt nobody cool and then SVG hey pointer events make sure that there are none pointer events are none okay cool X cool all right so now we got that big boxy looking um X in the modal it's pretty good it's a good start okay let's create shared content and add user info part inside of it okay so let's go to you know we're inside of here now let's make shared content so where am I going to do that I'm going to let's do it right underneath this header right here shared content let's go user info let's make another component and inside of here going to go image slash images SL user VG okay this is just going to be that dummy user image and for span let's go name okay all right shared content is not defined user info is not defined you guys know the drill right you guys know what we do let's go ahead and start working on this right style div let's leave it empty for now user info style div like that oh refresh okay so now that image is showing up but it obviously looks crazy so we're going to Now work on it let's enable display Flex to start off things are already starting to look in control display Flex is such magic Flex Direction column Flex grow one overflow y I'm going to go Auto on this thing vertical align Baseline cool background I'm going to do transparent okay and then of course padding 8 pixels by 12 pixels beautiful great now let's inside of our user info let's go ahead and do a couple of things enable display Flex here I'm going to align my items to the center so I can see that n is in the middle but it's still behind the photo add padding 12 pixels by 24 pixels like so cool and now let's control our VG and our images and we're going to give them the same type of styling boom boom cool background clip going to go content box okay border two pixels solid transparent border radius this is going to give it the nice little circle that we always love looking clean and then of course let's go inside of our span and now we're going to go font weight 600 font size 16 pixels line height 1.5 cool so now the text is looking Bolder and then of course let's give it a little bit of margin cuz it's getting a little too close to that logo so let's push it a little bit okay beautiful so that looks great to me for shared content right this model is looking good I mean of course we still need to add functionality so when I hit X it actually goes away right and uh things like that so we're going to now start adding those things in okay we also need to make sure the text editor is editable so that's going to need um you know quite a bit of work so let's work on that now all right so cool let's start working on the text editor and add in bunch of functionality so I am going to go um in I mean I'm I'm going to just stay in my post model okay and then um let's add another component and I'm going to add it right underneath shared content so we're going to call it share creation like this and let's just type in some word in there like actions let's go all the way down and um I'm going to add a component styling for this style div hit save just so that error stops display Flex so you guys you should be able to see actions in there now okay it should be it's right there boom cool now I'm going to do justify content space between cool and then of course padding 12 pixels 24 by 16 cool now we just added some padding kind of everywhere from every direction so that looks that looks good now we're going to add creation buttons okay so you might be wondering hey are you getting the creation buttons from here so we're going to have the share image okay that image right there at the top and we're also going to have that image the video image as well so share image share video I'm going to drag this into my images and drop cool so that's going to be there now let's go inside of my um right underneath share creation inside of share creation I'm going to remove the word actions and instead I'm going to write attach assets okay and let's create a new component called attach assets okay and inside of attach assets let's create a new component called asset button like that and inside of asset button I'm going to add an image and that image is going to be images share. image.svg cool and then I'm going to have another asset button asset button and inside of that I'm going to have another image that's going to be images SL share video. SVG like so cool now let's go ahead and add this so all the way at the bottom let's do const asset button is equal to styled button okay and I'm going to do let's do display Flex on this thing um of course it's saying that error so let's actually start that um styling too so we we don't have that error anymore styled div okay boom so we got the image here and then we got the video button right there okay that's what we were trying to add so now let's go here and do align items Center Height we'll make it 40 pixels let's give it a Min width of auto color I'm going to go rgba 0000 0.5 okay and then under attach assets let's do align items Center do display flex and let's go padding padding right and I'll go 8 pixels on it boom okay beautiful so we got this we got the buttons and we got some styling for for this uh AET button at least okay so let's finish up the styling for attach Assets Now Okay so I'm going to go right here and uh we're going to use the select this selector here to get our styled component called acid button and we're going to style that to be with 40 pixels like this cool so now that should be good okay okay if I made that 100 pixels it'll be really obvious what happens so if I go 100 pixels like that you can obviously see that just buttons got really long but let's go 40 pixels and they're right there cool so that looks good and now let's add share uh comment component mouthful a little bit of a mouthful all right so let's go find this so share comment it's going to be this one all right let's drag that into our images folder okay and then let's go to our post modal and inside of our post modal let's make that work so where am I doing share comments so let's let's go underneath attach assets okay so let's go outside of attach assets all right let's go now share comment like that and and then inside of share comment I will add um let me do it like this so you could see the entire time let's just do asset button asset button like that and inside of this asset button I'm going to add an image and this image is going to be the following SL images SL share comment.svg cool and then we'll just write anyone here okay so now you see this button appear here but now let's wrap that new button that we made inside of share comment component okay so I'll go here go here and paste it okay so this is what it should look like share common component I was going to complain about share common component but you and I we don't worry about that cuz we know this we go ahead and create this style component like this keep it blank and then let's add some padding left okay let's go ahead and let's go and add margin right Auto cool let's go border left one pixel solid rgba this cool so now you're seeing this border right this thin little border that's being there let's go ahead make a dollar sign I'm going to say asset button select asset button and inside of that button any svgs we have let's give it a margin right of five pixels cool so that looks good the share comment component is kind of done now let's add the post button and how I'm going to do it is like this so let's go right underneath the share comment and let's add in the button right here okay so I'm going to go post button and let's just say post now let's go ahead and add that to our styling so I'm going to do cons post button is equal to styled button cool so again start off with empty and now that button is there I can see it Min with 60 pixels cool border radius 20 pixels o I like how it's looking padding left 16 pixels cool let's add some padding right by 16 pixels okay so now it's made it a little bit bigger background like this okay give it a little blue we'll color it white okay and then on Hover so I'll do this on Hover we're going to give it a background of that right there cool so when I hover boom just a little bit extra blue click it and I can press it okay beautiful all right so now that we added that post button let's remove the remove close button image okay and we're going to do some stuff with being able to hide it and show it so when we hit X we want things to be able to happen Okay so let's go and work on that now okay and um I was going to work on the text editor earlier but let's go and work on it now okay so let's go ahead and work on the text editor cool so no worries in post model what I'm going to do is all the way at the top okay let's go import use State like this okay use react States because we're going to need to work with State now and uh let's just let's start so here I'm going to say editor text and then we're going to do set editor text so this is going to be a function that allows us to change the text all right it's kind of how you also set variables in react the react way of setting variables and we're going to start off with it being blank okay so the functionality we're working on now is this one so when I hit start a post this m pops up the text in the start is blank and then as I start typing it it updates the text so we're going to do that in our app that's not built yet cool so let's go underneath user info okay so underneath user info I'm going to make my editor component and uh editor component is going to take in the text area actually let's before I make my editor component let's leave it blank let's start off with uh just doing text area like this um cool I'm going to remove just go ahead and remove all of this for now all right and what I will say is inside of text area let's add something for Value so we're going to make value B the editor text so whatever the state um of the text is okay so right now it's not really going to be doing much so when I type it doesn't do anything it just kind of freezes that's what should be happening with yours okay then after text I want to do on change I want something to happen okay and what do I want to happen on change I want to take let's go like this I'm going to take whatever the value you're giving me and I want to set it to the editor text so I'm going to do e . target. Val so whatever you're typing okay it's complaining e is not defined okay not to worry we're going to take care of that shortly okay so we have onchange and we have the onchange ending right there cool let's go ahead and add the placeholder as well in just a second all right just make sure you refresh as soon as you refresh you should be good to go and all that's happening is as soon as I do I type in F in the text area now it calls this on change okay it goes on change what should I do on change says hey grab the event okay what was the event I wrote this thing so now what we do is we change the editor text variables value which was blank in the start with whatever the target value is in this case that's F so now this Ed text here becomes F and then it shows F now when I write Fe it becomes Fe it passes that here that passes that here and then that shows that there super confusing but that's what's happening okay and then if I hit post I have access to all of that information so now let's do placeholder whoops let's not do that placeholder okay and then my placeold is going be what do you want to talk about cool so if you remove everything that's the that's what the placeholder will be and of course let's also do auto focus to be true okay so as far as my text area is concerned that's looking good now what I'm going to do is I'm actually actually going to create my styled component I'm going to do this one the other way so let's go ahead and create a styled component called editor and do style div okay and I'm going to and I'm going to style it in just a second let's go and add let's go and take what we created this text area and we're going to wrap this entire text area inside of our a new component called editor so make sure you cut that and you wrap the text area inside of editor just like this okay now we need to style our editor component okay great let's add some padding and I'll go 12 pixels by 24 pixels like so let's now style the text area inside of this editor let's go with 100% goul just big let's give it a Min height of 100 pixels great did that do anything yes I made it fat which is exactly what we want and then uh resize none okay so now so notice this little touch right if I have resize enabled at the bottom right you see this resize and I can resize it to whatever I want right boom it's kind of weird by doing resize none it now there's nothing there's no way to resize this that's what we want let's go here and let's go input with 100 beautiful okay so whatever we're writing here input cool height of 35 pixels cool font size of 16 pixels okay all right and then right underneath it we're going to go margin bottom 20 pixels okay great our text box looks text box looks absolutely great we're using uh state to do a bunch of stuff and that's good now again let's focus back on being able to open the model and close the model this is something very common that you have to do in react and we're going to start working on that now so let's go ahead and get started so where should we get started well the first thing I want to do is um inside of main I'm going to add the ability to hide and show the modal cool so let's go all the way at the top we're going to import State because we're going to need access to it so use state and I'm going to say from react okay now underneath main we going to do show model set show model like this my bad use State and um default is going to be a closed State okay so by default it's going to be just always closed all right now right underneath here let's add the code to make it um hide and show the model so let's get started on that so I'm going to do handle click and here's what we're going to do okay so we're going to start it off by preventing the default Behavior which is important for react so you don't have these weird refreshing things going on when you don't want them okay all right let's go let's stay here outside of our if statement and now I'm going to just add a little switch statement and I'm just going to say show modal all right and in the case that I get an open what I want you to do is the following I want you to set it to close and then break okay in the other case where it's closed then what I want you to do is I want you to say show model to be open okay and break in the case oh actually otherwise let's just do default set show model to be just closed by default okay and then we'll break right there beautiful so that seems simple enough now let's actually go to the button and add that functionality where is my button user SVG yep so start a post that's where we're going to add it so let's go onclick equals and I'm going to say handle handle click okay great and and uh where I have post modal let's scroll down scroll down where I have post modal I'm going to give it show model pass at the current state of the model okay so it's going to take a prop that's show modal prop and we'll add in the functionality for that prop in just a second okay and then the handle click prop it's going to just do handle click actually we're probably just taking in props so we'll probably have to do props do show model and props do handle click so let's go ahead and check that out let's go to post model um dope and inside of my post model I want to do just a few things so right underneath that text that we're editing let's go ahead and do the following I'm going to do going to create a reset all right and this reset is going to take in an event and it's going to set the editor text to be blank and it's also going to handle click and handle the event okay so I'm going to wrap the whole thing in a jsx fragment all the way down to this container here okay so let's just start off with that and then what I'm going to do is I'm also going to wrap the entire thing in these squiggly brackets like this cool now within here what I'm going to say is I'm going to say props do show model equals open if that's true then what I want you to do is show me all of this stuff here okay and uh what I'm going to do to my button let's go to my where is my create a post create a post right so right underneath that I have a button okay and what to that button I'm going to do onclick on click taking an event okay and call my reset function and give it my give it my event okay that's what I want to happen when I click X so now um oh also let's go all the way down and where do I have my SVG inside of my header const header where's my header styling right there let's also do comma IMG to it okay let's add an image to it as well cool let's refresh let's full screen this thing let's hit start a post ooh hit X nice look at that that worked I can't believe that worked I really thought it was going to break boom boom look at that model and look the whole screen goes dark because that we have that you know that postm modal div that takes over the entire screen when I click it when I hit X it goes and it's done okay that model is a very beautiful functionality so great work on adding that I'm proud of you okay and if you're proud of you then smash that like button okay just for yourself if not for me I'm proud of you let's keep going now we're going to add a smooth fade that's going to fade these things out so here's how we're going to do that let's go to post modal and and inside of our post model let's go all the way down to container and right underneath here I'm just going to say animation fade in and let's do something like 0.3 seconds that's 300 milliseconds okay did that do something I don't know if that didn't do anything then we're going to have to make it do something start a post cool let's go to our index.css and we're going to make it do something all right so I'm now in my index. CSS file which is of course um inside of source so let me close out of my images and close out of my public let's close actions okay so inside of source I have index.css let's go there let's go all the way down and let's make let's make that fade in mean something and do something so I'm going to say webkit key frames let's go fade in and what fade in's job is going to be is this from opacity of zero what we want you to do is go to an opacity of one and now we're going to also Define standard key frames let's remove all of this um Let's do an at sign right there okay save is it still complaining failing to compile that should be good start ooh look at that fading start a post ooh click yo that looks beautiful that is freaking beautiful that's all I got to say that's all I got to say all right all right that modal work was just beautiful okay now let's keep going beautiful so now we got that working now we're going to disable the post button when the editor text is um empty okay cuz right now even when the editor text is not empty I can hit post so we don't want that we don't want that okay cool so let's go ahead to post model and let's start adding that functionality so so let's go to our post button and um inside of our post button all I'm going to say is this I'm going to say disabled okay when the editor text state is empty when it just doesn't exist okay if it's so give me true so give me disabled true if the text is empty otherwise give me false cool that's essentially it cool dis a old old D just like that okay so now because of the styling and stuff like that you can't really see it but it's actually disabled right now because there's no borders around it but I type the borders appear okay but it's just like a little hard to see so we're going to go ahead and add some styling to it so let's go to our post button so I'm going to command f post button component and let's add some styling to this so inside of background here's what we're going to do we're going to do some cool ways of styling now props dot this I'm going to do it this way okay let's go get access to the props and if the props is disabled question mark then I want you to style it in this way 000000 .8 okay and if you're not disabled then I want you to style it in a different way so like what we had earlier so now this is going to be really freaking cool whoa what the hell happened it looks ugly as hell what the heck happened we lost all of our styling oh man the app is going all over the place all right let's take that out of parentheses is here um I mean it doesn't really matter but prer wants me to do it the other way oh and why am I going blind let's um close this freaking parenthesis right there right cuz that would only make sense and then that closes that cool ah yeah look at that okay my post is dark I write and now it's blue blue this is why I love styled components you guys because I'm just I'm saying if it's disabled give it this color if it's enabled give it this color and it's just so freaking nice it's just so freaking nice okay um and now I I also want to change the text color Okay so let's go ahead and change the text color cuz right now just white that's not what we want so let's go props and I'm going to go props disabled okay if it's disabled AED then do the following of course open close this okay and then outside of this just give me white okay so when it's disabled it's hard to see it when it's enabled boom okay so that's what it I want that to happen with the colors it's good it's good okay cool and then on Hover I also want to give it a dynamic functionality okay so I'm going to say props and if it's disabled again let's go ahead and do 0000 0.8 like that actually let's do 0.0 0 Yeah 0.08 okay or in the other case give me this okay am I closing my parenthesis right yes I am on Hover beautiful okay that's all that's happening cool so when I hover over it gives me a like a lighter gray uh in the disabled mode okay and then when I write then it gives me this one when I hover over on this thing right boom boom boom beautiful that's exactly what I want and that's really really good now we're going to start adding um file input for uploading images and that allows us to upload a file from our computer and add it to this and that's really nice functionality and if you're going to a recruiter you can show them that functionality okay they're going to be blown away so let's go ahead and start adding that now so file input where do we start well we start in post model let's go all the way to the top and right underneath this let's go ahead and add share image set set share image all right and I'm going to go use State leave it blank cool um and then what I want to do is I want to handle the change as it happens okay we're going to get the first element from the files and uh if the image is blank or image is undefined okay and those two cases um I want to basically say hey uh not an image the image file is a and then we're going to be able to access and say type of image cool so that's going to be great this is going to help me figure out like what the actual error is is and what's the type of the image and then otherwise I'm just going to return and I'm going to return right here return cool and now right underneath that let's go set share image image okay so meaning if we don't get an error then do this thing and when I do this thing it's going to update that variable right there share image cool cool cool cool cool beans now let's go ahead and actually add the upload image component so I'll add the upload image component uh kind of right underneath uh the text area all right so text area what I'm going to do is I'm going to remove this and I'm just going to end it right there so just a little bit tad bit clean and right underneath the text area I'm going to add the upload image component okay and let's just go ahead and give it a empty styling for now before we start uh doing other things to it upload image is equal to styled div and just leave it empty for now that way we don't get into errors as I'm writing it so you can see it build out upload image right there and um let's go input type type is going to be file so already just by doing type file for input I can now choose file and it brings up all of this stuff which is super cool all right so that's good and I can even click choose file and click an image and it automatically knows Disney plus ASMR right it it says it right there that's that's a really good sign so like things are already kind of working uh I'm going to say accept um and let's say accept what accept uh image slash GIF so accept images and gifs and also um accept jpegs and also I'll have it accept pngs Okay like this so that's good go name is equal to image the ID of this will be file cool of this input and then let's give it a style and I'll give it a jsx inline styling okay and I'm going to say display um none Okay so if I remove that style you see choose file if I REM if I add display none now that choose file is just not showing cuz I I said don't display it right if I change it with something else it's going to have different Behavior cool all right so that's good now on change we need to add something that actually handles on change okay so let's go on change we're going to handle on change okay so it's going to run our handle change function which is going to do all of this which is going to set the image for us cool cool let's so now we're closing out of that input that's good all right so that input should end right there right underneath that we'll add a paragraph tag and in here let's add a label okay and HTML 4 will just be file and now let's give it a style okay and again we'll also do this one in line as well for styling just please bear with me this is going to be a little hard to follow but bear with me here and I'm just going to say cursor pointer but actually you know what I don't even think we need that to be honest I'm just going to leave that that will make it simp simpler for you and then let's just say inside of the label let's just say select a image Let's do an image to share like that okay so now there is our styling very very simple okay and when I click it okay already um it actually opens this up okay so but what we have to do is probably make it look like something that you want to click on so we're going to do that in just a second all right let's end our label we're ending our label that's good and right underneath ending our label we're ending our P tag that's good now let's right underneath our P tag but in still inside our upload image component let's add in these squigglies and we're going to do share image so if the image actually exists then do the following okay and I'm going to say image source is equal to and I'm going to say url. create object URL and I'm going to pass this the share image path okay like that let's close our image tag beew beautiful okay boom boom wo a our imag is showing that was nice and a lot easier to do than expected beautiful beautiful beautiful beautiful that's good let's go down upload image now let's add this component styling all the way at the bottom for upload image because right now the image is ridiculous right so we're just going to need to control that so let's go text line Center and then after this so now select an image to share is looking good okay and of course now what we want to do is we want to say hey the image let's give it a width of a 100% so now the image is looking great wow how nice huh we got click okay let's refresh right boom let's click select an image to share pick that hit enter man that looks beautiful that looks beautiful I love it okay very very simple and very effective very very effective um now we're also going to add a react player so then that way we're able to actually show like any video URLs that we put okay that's going to like kind of Auto expand them and make them look great so let's go ahead and do that cool so let's start working on it now first things we need is we actually I'm going to hit control C and stop my server and what we actually need is you can do npm install like this but I'm actually going to do yarn ad which is the same thing uh and I'm going to do yarn add react Das player okay and hit enter so install um what I want you to do is install this component right now not component but um man I'm my brain is getting fried but yeah install this so now you should have react player okay the react player library and uh let's go inside of our post modal and go all the way at the top and I'm going to do import react player from react player like this cool and right underneath here we're going to say const video link and then we're going to say set video link like this equal use State and leave that blank okay cool now inside of our handle change actually are we going to work on inside of our handle change let me see okay so right here where I'm doing this share image thing right above upload image um where should we add this actually let me think so let's keep this inside of our up upload image but right underneath where we're doing the share image line okay so right here we're going to do a couple of things I'm going to add a empty react J jss jsx fragment okay and inside of this let's add an input uh we're going to keep it text and placeholder will be please input a video link like that and then the value will be whatever is the video link that we give it and of course on change we're going to say take the event and set the video URL set the video link based on whatever the user gives you okay the value of the event great so input ends here and right underneath input what we're going to do is open close squiggly and I'm going to say if video link exists then what I want you to do okay and let's close this bracket and go react player all right and I just imported it so I imported import react player from react Das player so make sure you go ahead and do that let's say react player width is equal to 10 uh let's go 100% okay and then we're going to go URL and is whichever video link that's actually set in our state at the moment okay save beautiful so that should be pretty good all right now we're going to test it out and see if it if it does anything whoops let's do yarn start again so it starts up our app okay wake up app cool all right so we got please input a video link let's see if I have a YouTube video link boom right when I embedd it it's right there that is awesome and this also happens to be my video if you want to go check out my chess Channel welcome back to another video that's awesome yeah beautiful let's go 20% on the width so that made it really really tiny just like this so make sure choose 100% on your react player width so react player plays really nicely with videos okay so we're good now we're going to make it so you can switch between share image or share video all right here we go welcome back to the same thing that you were on so let's just continue going all right I just want to take a a little break but it's all good we're back now and we're ready to go okay can I hear myself beautiful awesome so let's just go ahead and get started with this right so so far we're doing a great job we got the video player showing we got me looking beautiful here right there okay maybe for you it's your video that you're putting okay you you can use your own YouTube video link and then it'll be you with that said let's go ahead and make it so we can switch between whichever one we want right because right now we're seeing both image and the YouTube url I don't want to see both of them I just want to see one of them okay cool so let's go ahead and add that functionality okay now the functionality is going to take a little bit so first things first we're going to start off by going inside of our post model so make sure you're there and uh right here we're going to add that component okay so not component we're going to add um a state variable here okay because this is going to change at some point so asset area and then of course the um the way that we are using it is going to be set asset area cool just like this this a convention we use and default is going to be empty cool now let's go under where we have set share image okay underneath that we're going to make a new function here that we're going to use switch asset area cool it'll take take in the area as an argument and then it's going to do a couple of things so it's going to make the um image just empty we'll also do set video link and we'll make that empty cool and then we're going to do set asset area to the area that we received okay and uh that's all good okay awesome now let's go to our reset in in our reset we're just going to add a few more things okay but we're going to add that above our handle Click Change okay so I'm going to do set share image let's go blank here set video link will go blank because again this is reset so this should reset essentially all of those States so that's all we're doing there now let's go down under where we have the area focus in our text area Okay so right below this I'm going to do a couple of things okay uh what I'm going to do is let's open up our squiggly bracket here okay and um let's go ahead let's go ahead and U what I'm going to do is I'm going to close the squiggly bracket kind of in this weird area right underneath this jsx the jsx fragment that's ending right underneath this um player that's where I'm going to add the ending of that okay and essentially we're going to have a Turner operator in between there so let's do this okay so if asset area is equal to image then I want the following to happen all right oops image then I want this all of this to happen Okay uh the upload image thing to show up okay um all right guys so I'm going to take this where this upload imag is ending I'm going to take it okay I'm going to take this thing here and let's move it up okay so boom boom boom let's go up top and uh let's end this component right here okay the upload image component and here's where I'm going to add my erary so I'm going to do colon here this is a little hard to read and um and I apologize about that but bear with me here and then I'm going to say if the asset area is Media then I want you to do the following okay in that case do all of this so again a little hard to read but I'm basically saying if it's image then do all of this okay the upload image component okay if the asset area is Media then do all of this okay great and then let's go ahead and just switch a couple of things so I'm going to find my asset button and all I'm going to do for my asset button is very simple I will simply add an onclick on this thing like this let's open this up go like that beautiful and I'm going to do switch asset area like so and uh pass in image okay give it pass in the image for that and then where's my other asset button right here this is the one for the video and I'm just going to say on click and uh we're going to do switch asset area and I'm just going to say media like so okay and then that should be pretty freaking good great pretty freaking cool wow look at that it's working and it looks nice right when I click the image I see this when I click this one I see this video right there okay and how is that working well uh this is this is uh one AET button which is right here and this is asset button number two this video one okay so we got one and two I'll write one and two just like so okay this image one is this one the one and this media one is this video one now what happens when I click this video one or sorry this picture one is this onclick thing runs and it changes my state variable this asset area one and it changes it to image okay so well let's go into that function and see what that's doing okay it changes it to an image okay so I go switch asset area and I pass it the image and then it just changes it to an image all right and that makes the code appear and work and do do essentially what I want it to do okay if I go and do switch asset area to Media it goes ahead and changes it to a media okay and then boom you get your uh switching statements here boom and here I can put my video link to a YouTube video like so and it will actually even put the video here okay and let's test put put an image and let's see if our image Works beautiful our image is working and that's exactly what we want so we're done with that functionality now we're going to connect with our store and uh get user info okay so let's go down first of all let's actually just import so I'm going to do import connect because we're going to need to connect to our Redux store in a second so let's do this okay all right so now we're going to map states to props the boring usual Redux stuff which you know Redux toolkit you don't need to know how to do going do map state to props State and um actually this is going to be an expression like that okay let's leave it empty for now and um I'm just going to do export default connect map state to props we'll do map dispatch uh dispatch to props okay and then we'll do Post modal like that actually my bad okay uh this is this one is going to be map dispatch map dispatch to props okay and uh that's going to be good for the dispatch to props and above this I'm going to add map state to props okay and we'll make this state now this one is going to be dispatch okay so this one that says State cool let's go like this all right I like putting parentheses here hopefully prettier likes it too great and what I'm going to do is say return user State user state. State like that okay so now that should be good to go that's that all right now we're going to display the user info so let's go to user info component which is up here and we're going to add our little Turner action and let's go ahead and do that now okay so I'm going to say props do user. photo URL so hey if the photo URL is there then I want you to do the following then I want you to show the image and the source for this is going to be the actual URL for the photo props do user. photo URL like so all right and um I don't need to do anything else I think that should be good cool let's end this photo one okay and then we need an or statement so an or statement I'm going to basically give it this as my or statement and then we need to end this squiggly okay so what is my error here let's see I think I'm ending it too early so let's remove that there so basically I'm saying hey does the photo exist if it exists of the user then show the photo of the actual user that we pulled from Firebase otherwise show this Anonymous user photo so let's click the post the modal okay now it's having an error cannot read property photo URL of undefined okay no problem um so what basically needs to happen is I need to right now actually I'm logged in logged in okay weird error we'll figure it out together not to worry okay let's H save on this thing and then let's go ahead underneath here we got our span tag and then our ban what I'm going to say is props user. display name okay just like that great and of course we got to close our squiggly otherwise we're going to be in some troubles cool so let's try signing out let's try signing in with Google okay cannot read property photo URL of undefined interesting cuz pretty sure we're freaking logged in oh duh this is why I don't have access to the user I got to access the freaking user okay that's what user is okay state. user state. user okay so now up here here where I'm asking for the user command fuser okay where I want to get the user's photo now I have access to the user's photo so let's hit save let's hit refresh and now I'm going to have access to the user's photo okay so for example let's Click Boom there we go okay so now let's go full screen here okay click Start a post and if you're logged in we'll have a photo here if you're not logged in you shouldn't even be able to get to this page but if you did get to this page you'll have this Anonymous photo as a fallback okay so great now we got that photo now let's add functionality with the image okay we want to be able to actually upload the image to Firebase storage so let's go ahead and do that now so first things first well what are the first things first so let's go to actions cuz we're going to add an action and uh we're going to add a new action okay it's going to be called Post article API and it will take in a payload okay and I'm just going to return a dispatch event that's going to look like the following okay um if what I want to do is payload is uh payload do image is not blank so we have an image then I'm I'm going to set my upload to be storage. ref whoops storage. ref okay Images slash payload image. name okay and then let's get out of here and we're going to use theut method and we'll do payload do image cool so this is going to help us upload our image all right and uh let's go ahead and make sure that we do that all right now let's do upload okay and I'll do upload. on cool on state changed okay then we're going to do snap shot all right let's go and not that one let's go like that snapshot I'm going to say cons progress is the following going to have snapshot bytes transferred boom and we'll do snapshot. total bytes byes just like that all right and let's multiply that by 100 and close it off cool all right now this is going to be helpful for making that loading bar soon and I you guys will see how this is actually going to help you okay so now boom we have this one right here let's just wrap this thing in inside of paren right here um it doesn't need it okay it's redundant cool let's get out of here and now let's basically go console log uh progress okay and I'll do this progress okay and we'll put a percent sign so that'll show us how's our progress doing so far I don't want my function to be ending here so this upload on needed to be ending a little bit later all right so we're going to need quite a lot of uh little weird changes here so just follow along um gets messy okay so uh open a par pareses here and we're going to close this okay cuz this whole thing is an expression then I'm going to console log the progress and then what I'm want to do is I want to essentially close out everything right so for example this squiggly here let's close that out that parenthesis right there I'm going to close that out I also want to close this squiggly right there okay and then I also want to close that squiggly out right there and I also want toose CL that squiggly out right there and uh that should effectively take care of everything and once I hit save it should kind of format it like this okay but there's a couple of things that we got to do here all right now underneath this what I want to basically say is if the snapshot state is running on the other hand okay then what I want to do is I want to console log the progress okay progress like this and boom cool so in both cases kind of show me show me what's going on okay and then let's go underneath here okay right there and what I will say is if there's an error then console.log error code okay so again I know there's a lot going on in this upload so there there's a lot right so for example this upload function it took in this state change then it took in this function right here on the Fly and then it's also taking in uh what needs to happen when there's an error okay cool and then let's also do async okay we're going to have download URL and what that's going to do is we're going to wait upload cool and we're going to do get download URL like so okay all right so storage is not defined we will Define storage by importing it okay so let's go ahead up at the top and in here right after provider I'm going to upload storage from Firebase that'll take care of that we also want to add our database let's do import DB from Firebase we're going to need that later okay cool let's come on down now and we got our download URL so that's good now we need to do a couple of things so right underneath this download URL we're going to do our DB collection okay so DB collection articles to the Articles collection we're going to add the following the actor it's going to have the following things in here description will be payload of the user email title will be display name like so date will be whatever is the timestamp of the payload and then image will be the photo URL of course okay great and then underneath Here video will be payload video shared image will be the download URL that we made comments will be zero we'll kind of just hard code that for now and description will be the payload description okay so that should be good I know that that was like a pretty hefty piece of code but let's go to our post modal and now actually add that functionality in we're pretty close so hang in there with me guys let's import Firebase from Firebase okay and then we're going to import our Post article API like so and let's do from dot dot actions okay so that gets us that now let's go where our switch asset area shows up cool and um let's add in our new method okay or function here Post article okay it's going to take an event and again I want to Def kind of prevent um any of the weird stuff happening in react where things need to refresh and so on so let's take care of that and I'm basically going to say if the target does not equal to the current Target then just return cool and then I'm going to Define our payload and image will be the share image video will be the video link our user will be our actual user description description will be whatever the text is that the user adds and of course timestamp will be Firebase timestamp okay so that's why we imported Firebase and then here we're going to have props dot Post article and that's going to take the payload okay and then simply let's go ahead and reset e and then we'll call this function and we'll reset everything okay once it's added and now let's basically go ahead and add these buttons so going to go down to my post button and inside of my post button when I click that button I want a couple of things to happen okay so let's go here and we'll Define an onclick just leave it blank for a second and in our on click what I want to happen is I'm going to give it an event and then I want the following things to occur run our Post article function and give it the event details okay that means the description the text any information that we have already about the user and now just let's go to our dispatch and add all of that in cool so let's go here and let's add in that so Post article and we will do it'll take in a payload okay and then we'll dispatch Post article API pay load like that okay beautiful now let's see if it actually does anything for now so I will take an image select an image click an image do that test let's hit post post so maybe it's doing something maybe it isn't but the only way to go and check is to go inside of our fire store database and let's see if anything is actually happening okay so let's go ahead and create a database I'll put it in test mode let's hit next and enable all right that's going to be important because that allows our database to actually be created in the first place otherwise we will not have a database and Fir store is actually very very powerful so I like using this as our database base okay all right now we don't have any collections or anything like that so let's try hitting post again does that do anything nope not doing anything right now which is totally fine and by the way fire store also has storage okay so I'm going to click on that I'm going to go in there so on the left hand side I have storage and I can even up a file right so let's just click here upload a file see what happens I'm just kind of like hardcoding it and uploading it there okay so boom it uploaded it and now we'll be able to retrieve file from here okay so that's the file data it's kind of nice uh goey that they have actually for uploading uh things so pretty uh simple but that's just kind of like I'm me hardcoding it okay but that's not the way we're going to do what we're going to do in our app oh and going back to index file by the way our actions index.js um this is squiggly okay not parentheses that's why it's not changing uh that's why it's actually not using that variable okay this is like template literals so that's how they work boom let's refresh cool okay let's try uploading the image now hopefully that works Let's test test test test test okay if it works it'll probably upload it to our um storage folder inside of our Firebase okay so let's keep on trying this thing all right so let's actually debug this real quick together because I think that's going to be helpful so let's go inside of Post article and I'm going to type in console log uh post Malone all right let's uh add a rocket here okay it's not going to add a rocket so let's just add a person here that's fine all right so I have my image I'm going to hit post and it says post Malone so I want to see where it's getting to so it's getting to this line let's now add a console log here and I'm just going to say can I add add a cake here let's add that cake I don't know why it's being funny but I'm just going to say hello here okay and uh let's see if it gets in here uhoh ah okay so it seems like it's getting to this if statement and then it's just returning so it's actually not doing any of this and it's not running this Post article payload function cuz that Post article payload actually does everything that we need to do it actually does this Post article right we give it the payload it dispatches it and then it gives it to this function this function knows how to up load so it's never even getting to that it's just dying right here and that's because e. Target is not equal correct Target this should be current Target okay so I'm going to hit delete here um and now it should not be getting to that hello so let's try again and look progress zero progress 28 progress 85 progress 100% wow so that actually looks good looks like something happened so I'm going to go to my Firebase refresh is it in my storage or is it in my database oh it's in my storage I oh that's cool I have an images folder and here's my image Gatsby versus nextjs okay beautiful it is is it also in my database yes it is I have a collections here so I'm going to delete this other uh record I had um actually let me just leave that I just had like some dummy freaking record okay so delete um I don't know if it deletes the whole thing or not it's not deleting it that's fine so just forget about that one but it just added this new record here in my collection articles okay how do I know that well if I go to my code inside of my index.js I have this line here that says hey um DB collection articles inside of Firebase add and then add this whole thing okay so we got actor and actor has all these things inside of it right right and then I also got just video shared image and comments so video shared image description and comments cool which is corresponds to these four things and then actor and all of that corresponds to all of this okay so that looks good to me so far now finally it's working and this progress bar is working so that's really good progress on our end now let's add the same post functionality but with video as well okay and how we're going to do that is it's going to be very simple so remember how we have this if statement right here that says payload image well what we're going to do is say let's find where that ends right there okay and um I'm just going to do else if be careful with the indentation otherwise you're going to get caught okay and I'm going to say if payload is video then I'm going to do DB collection and essentially I'm going to do the same thing which is going to be articles. add okay and we're going to do actor description pay. user. email title I'm just going to copy some of these okay title is going to be that uh date is going to be whoops didn't mean to delete it it okay so paste and then I'm going to copy copy image and also paste it right here okay so those are going to be the same and um also this whole thing pretty much is also going to be the same video payload video shared image so the there's going to be only one difference though okay so I'll show you that in just a second let's hit save now instead of shared image being the download URL it's just going to be empty because it's not an image cool capiche makes sense okay great so that's it that's all that happens if we choose to add a video instead of an image okay so let's try adding let's go here and refresh and let's go here try adding a video We'll add a YouTube video test hit post and uh hopefully something happens let's go to our app did it add a video yes it added a video right there okay it's inside of our database we'll be able to get access to it whenever we want so on and so forth okay cool now we're going to add in an article reducer and this is going to be helpful for when we actually want to start pulling the Articles and actually showing the Articles okay so let's go ahead and start working on that so I'm going to go inside of my reducers so Source reducers going into my reducers folder and we are going to create a new file and it's going to be called article reducer DJs AKA article updator okay much better name for a reducer and I'm just going to say export const innit State like this loading is false okay so the initial state is going to be loading is false so we won't we shouldn't see that loading Circle in the start okay my article reducer what that's going to be is hey my initial State let's make it the NIT State and then it's going to take in an action whoops my bad there we go and then we're going to take a switch based on the action type that's just how Redux works okay and again default is going to be just returning the existing state and I'm going to export default article reducer like so now let's go inside of our index JS which is inside of reducer so the index JS inside of reducer so go to that and uh right underneath this user reducer I'm going to add in an article reducer like that and underneath my root reducer I'm going to add um so user state is good just going to add article State and we will do article reducer like so all right so that's good now we're going to start working on the loading bar okay so we can see the loading bar uh showing up as we um you know upload a video or an image we want to see like a little spinning circular loading bar so let's start with going into our action type.jpg so this is going to be export cons set loading undor status equals set loading status like that okay beautiful and let's go inside of our article reducer okay and I'm going to do one thing inside of my article reducers which is I'm going to add an import statement at the top and I'm going to say import set set loading status from actions action type okay so let's import that one and then we're going to do underneath our action type let's go ahead and do that so I'm going to say case set loading status okay and I'm going to say a return whatever the state previously was and then add this new loading State on top of that okay keep in mind because this say Redux nothing is being mutated now let's go to our index not that index let's go to our actions index.js there's just so many indexes okay so this import right here we're going to do set user and also set loading status and let's go underneath our um we can kind of add this wherever we want but I'll just add it here okay let's let's just add it right there okay and um I'm going to just do export constant set loading is equal to it take in status as an input and we'll do type set loading oops set loading status status is going to be whatever the status we pass it okay and now let's go inside of our function uh Post article API and right underneath this return dispatch I'm going to say dispatch set loading to be true great let's give a little Gap here just so it looks cleaner great now let's go to our image and our image if statement right go all the way down to where we have the payload do description okay and right underneath that I'm going to say dispatch set loading false okay so once all of that happens we're going to say finish the loading meaning we'll keep spinning keep spinning keep spinning until the whole thing is uploaded and added to our articles as soon as it's added to our articles in our Firebase database then stop the spinning okay dispatch an action to our Redux store change the state of the set loading got it and then we're going to do the same thing for the when the video uh is done being uploaded so these are the two parts where we're going to switch the loading to essentially false and for it to stop spinning okay beautiful now next up we're going to like add our spinning logos and things like that okay so here's the spinning logo it's going to be called spin loader this is what it is okay spin loader. SVG the it already comes in with the graphic of the spinning so we won't need to do any like fancy CSS so that's a good thing all right take it and add it to your images and then we're going to x out of it okay and now we're going to go to main.js so we can add that there okay so let's go to where our share boox is because it's going to be inside of sharebox so inside of sharebox we have uh we don't need this text here by the way anymore share let's hit refresh cool so that share word is gone great okay now I'm going to add in a squiggly here okay and I'm going to close this squiggly uh where should I close this squiggly I'll close it let me think about where to close it actually so let's just close this squiggly right underneath here okay and what I'm basically going to say is hey if the user exists then show the user photo like that okay and then here's what I want you to do if the user photo URL exists then again this is a Turner operator we're going to do this show me the actual user photo end okay um otherwise show me just their Anonymous photo okay beautiful I'm going to T take that div and uh let's put it right underneath the share box okay just like that so now what it should look like is we have one div inside of here what happens is we either see the user's image or we see the anonymous image and then we have a button okay so if I hit start a post I see this cool start a post okay and then it uh when I click that start a post button this thing is treated like a button and uh when I click it the handle click uh function runs okay so that little thing we added there is helpful and awesome and now on this button what we're going to do is we're just going to add in what happens when it is uh disabled okay so we're going to do props out loading okay and if so loading is either true otherwise it's false okay so if it's loading set the disabled to True otherwise set it to false so like we shouldn't be able to click that thing or do anything to it if it's a loading cool let's go to where our cont content component is so let's find content um actually we don't have content component yet so let's go ahead and add it and where I want to add it is let's go to our share boox right there okay and right underneath my share boox I'm going to add this cool so let's do this and I'm going to do props loading so if my loading is going on then show my loading spinner imagespin loader. SVG okay and I think we should be good even with that and let's end that image that should be good okay so our content um our content component is actually going to be just a tad bit longer so let's go ahead and remove this div that we're wrapping article in and instead we're going to wrap article inside of content okay so I'm going to remove the um let's go ahead and remove that div and let's grab the ending of the content and let's go all the way down to where article ends and let's remove this div as well and paste content okay so instead of wrapp wrapping our article in a div we're going to wrap article in our content component now again it's going to complain it's going to be like hey you haven't defined content okay no problem we're Pros now so we're going to go ahead and Define content going to do style div okay let's go up boom in there and I'm going to do text align Center just like this okay and um let me go ahead cool okay let's do again this is for the loading part okay I'm going to do image with 30 pixels all right and then let's go to the end here all right and um we're now going to Define what happens to our map State props so map state to props and we'll do return loading State article state. loading and uh we'll also do what's going on with the user so we'll get access to the user State and then let's do map dispatch to props okay and we'll just leave that blank for now like this leave it blank cool and let's do export default and we'll do connect map dispatch to props as well and of course main that's this file that we're in now it's like hey I don't know what connect is okay don't worry it's not Connect 4 but it's importing connect from react read du like so and that should know what we're trying to do so let's try to add an image and see what happens now we did not get a spinner okay that was not fun we definitely expected a spinner and then we got like Rick Rolled oh actually first of all let's go to this part here we I don't need these uh squigglies here first of all for the loading so let's remove that and uh let's try refreshing now and giving it a good old College try seeing if the spinner shows up nope okay and let's actually try putting a period here real quick and do period SL imagespin loader. SVG let's see if that helps us out here nope okay I'm officially an idiot so I was like wait what the freak is going on with the loading bar so loading bar is completely working I just forgot that it Works um not to show the image because the image pretty much just loads instantaneously but this bar is actually useful for when I hit post now the loading bar shows so perfect okay everything is working as expected and uh we're making great progress this was really awesome and fun so far so it wasn't because I put a little period in front of my um uh whatever that thing was uh the spinner the spinner logo okay so anyways good progress let's keep going now what we're going to do is when the page is loading we're going to call the API using use effect and we're going to use that to get actually the Articles from Firebase okay so we're going to use react hooks to get um articles from Firebase so let's go ahead and do that so I'm going to go into my index which is index.js inside of my actions okay okay and uh let's go ahead and add a completely new function in here so I'm going to do export function and do get articles articles API okay and then we're going to say return dispatch like so and we're going to say let payload okay so let's just leave payload as is and I'm going to say db. collection I'll do articles and now we're going to get data from the Articles okay so we're going to do order by we're going to do actor. dat cool and we're going to do descending like so and uh then I'm going to do on Snapshot okay this allows me to read data from from my Firebase I'm going to say payload is equal to snapshot. docs. map and um all the documents that I pretty much get back I'm essentially going to just kind of put them in an array okay map them that's what map will output that's what payload will become and I'll console the log payload as well so you can kind of see it okay cool now I have to refer to this and use this inside of my main JS okay so let's go to main let's go import I'm going to import use effect so I can use it and I'm going to bring uh use State because I will also need State need to also manage State cool let's do import the get articles function as well that we made inside of our actions okay we're going to do actions dot dot SL actions just like that great and uh let's go ahead and just add that uh right here say use effect cool and props doget articles okay so this will just pretty much run it once articles like this so essentially when I go to main page uh we're going to try to run this once let's go down all the way and now we're going to do our Redux stuff so let's go to dispatch state to props I'm going to go inside of here let's do get articles and um ENT going to say dispat get articles API like so and run it run it run it run it okay okay let's see do I have an error here use effect and use State what is it complaining about um oh I have uh I have it twice so that can just be on one line that's fine refresh cannot read property collection of undefined okay great so let's hit inspect and see if uh we're console logging anything we got an array of four and uh this is perfect because as you can see this array of four is telling me what do I have okay so I have four items okay one is um this image right here the user image one is this image right here okay let me copy that string and paste it that image right there cool here's another one it has a link to that video and then here's another one okay so shared image let's see where that takes me permission denied okay all good but it's looking like I have access to all of this and I can actually read it okay now what we're going to do is we're going to dispatch an action to the store um and uh for for setting articles okay this will allow us to set articles and then later we'll be able to do a lot more things with them all right cool so let's go ahead head and do that so I'm going to go inside of my action type and let's have another action type export const get articles and uh surprise surprise is going to be called get articles cool now let's go inside of my main and inside of my main where I'm defining my mapping state to props let's add articles in here as well and I'm going to say state. article state. articles like this cool and uh let's go inside of my article reducer okay if we don't have one do we need to create one no we have article reducer great okay let's go to our initial State and um we're going to do a few things actually all the way at the top so we're going to import set loading status we're also going to import get articles okay underneath here I'm going to say articles and uh whoops like this let's make articles an empty array in the start all right initial and now in our switch cases we're going to say hey if there's a case of get articles then what we need to do is return the existing state along with whatever the article's payload is just like so cool and now let's go to index inside of our actions all right and in our index we are going to import we have set user we have set loading status now let's go ahead and add get articles and I import this and let's go here and I'm going to do export cons get articles payload type get articles like that payload will be payload okay and let's go all the way down where I'm like sorting it by actor date and descending order all I'm going to do instead of this console log we're going to dispatch this I'm going to say get articles payload okay and I don't need this line anymore so let's hit save save on this thing so we're done okay this is allowing us to set the Articles okay cool test I'm going to just add a dummy image not too much be happening right now cool okay so everything is working now what I want to do is I want to hide the main content until there are artic so we don't want to show any of the content unless we have like articles in there okay so like for example I don't have any articles then like kind of don't show any of this the content cool so let's we're um inside of our main JS let's go all the way up let's go up right above the container okay and right above the container I'm going to open up a jsx fragment and uh right underneath where does the container end so let's see where our container ends under what where our container ends I'm going to close off my jsx fragment okay and here's another thing I'm going to do I'm going to open up a squiggly all the way at the top right here okay and uh we're going to close it all the way at the bottom right before the jsx fragment ending and hit save okay now why we're doing this is so we can add our Turner operator so I'm going to say if article's length is zero meaning there's no articles then what I want you to do is basically say there what the hell just happened there we go there are no articles like that okay that's all I want you to say or give me all of the things okay give me the share boox give me everything cool so this is a pretty simple turny operator but it's also pretty badass cuz it's like wait where did my endings squiggly go it's also pretty badass it basically says if there's zero then just show this there are no articles and if there are articles then do all of this okay kind of crazy cool okay beautiful now we're going to add the loader uh component all right so a few things need to happen so let's go and make the loader component all right actually you know what let's actually skip the loader component because I think it's going to add a ton of additional code and not that much functionality so let's pass on that honestly and instead what I want to do is uh let's display the articles that we actually get back from Firebase okay I think that's going to be a lot more uh interesting to add cool so to get started on this we're just going to do a few things inside of our main JS so let's go main Js yes cool I'm there um let's go down to where I'm loading my spinner down down down down okay so here's where my spinner is happening okay now right underneath this I'm going to do a couple of things here okay so buckle up cuz a lot is going to be happening here so hang in there with me let's go props do articles. length all right if it's greater than zero then I want the following to happen I want to map those articles okay and I'm going to need the key uh for performance sake so I'm going to say hey article key is equal to key like so okay and there's a a lot of stuff that we're going to be deleting soon as well um and it's going to make a ton of sense shortly okay so let's go articles. map key okay let's put a bracket there okay and uh we're going to need to end that article at some point but not to worry let's actually do this okay so I'm going to remove all of this here so we're just opening this okay and I'm just going to use this article right here and let's give it a key cool cuz like initially I was just like showing one post but we're going to need to show multiple posts okay so this whole thing is going to end up getting wrapped up okay so we're going to have to go all the way down and wrap up this whole thing so let's go all the way outside of article let's go ahead and close it okay so hopefully the error should stop just for a little bit okay now we're going to make our changes that we wanted to make okay so inside of our a um we're not just going to have this hardcoded image of the user we're going to have the image of the actual uh user okay so let's do article. actor. image okay so see now it's cool because it has my image right there that's what we wanted it's pulling that straight from Firebase that's a really really good sign so that's done the next thing is where it says title we're going to dynamically get this as well so I'm going to say article. actor. tile like so okay so now notice that my name is coming through that's also really good let's do the same thing here article. actor. description okay and now my email is showing up and then I'm going to do article. actor dat and we're going to make it uh if I leave it here let's see what it does oh ho ho very interesting let's see if it bugs out it freaks out okay and that's because we're getting a weird date from Firebase so we're going to do2 date like that and let's see if that fixes it it refresh okay and if that doesn't fix it then we're going to do that to loal date string okay hopefully that should fix it and it does okay all we have to do was change it and indeed it is April 24th here Saturday 1:17 a.m. so I'm grinding out here 1:17 a.m. for your beautiful face so if you're happy about that and you want to show your appreciation smash that like button subscribe to the Channel all right that's what I got for you so that to me looks good outside of this let's see what do we need to change where it says description let's change you know the description is hard coded so let's change that with article. description like so okay so test that's actually what I wrote test test test test test okay let's see what happens if I write hello and hit post okay so right now those things are not actually being added uh to the databases and coming back we're not able to read back from it so no worries okay because it's still also sometimes waiting for an image so a couple of things are happening and while it's loading did you notice I couldn't make a new post so that was cool because it disables uh the start a post button so that's really cool functionality underneath shared image we're going to do we're going to do a couple of things okay inside of shared image should we leave this hardcoded image probably probably not probably not so we're going to get rid of it okay why well because it's hardcoded we don't want it to be hardcoded we want to work on it and change things dynamically okay so here we go so I'm going to say if article shared image is not there and article. video is there then what I want you to do is uh use the react player all right so we're going to do react player and I'm going to give it a width of 100% like that okay and URL is going to be article. video like this and let's close it cool all right so let's also import the react player okay so let's go all the way to the top I'm going to do import react player from react player okay dope cool and uh now we'll add our or statement and we're going to say or do the following okay article. shared image if that's there then do this image article. shared image and then just C close it off okay so open close um what's the problem here did I add a question mark question mark oh my my bad this should not be here yeah yeah yeah yeah yeah yeah yeah because that's going to end that whole thing okay wow that looks great look at that wow yeah buddy okay so I like it I like it a lot okay hover over this beautiful beautiful that's absolutely absolutely great all right now let's do articles comments okay so let's go down downtown right underneath so let's find our social so we have our social accounts ending uh here and let's go a little bit above that I have comments and my comments are hardcoded in here I don't want it to be hardcoded so we're going to make them Dynamic and I'm going to do article. comments all right zero it's almost kind of like hardcoded but you know not really so that's good okay great so this is looking good now this is a lot of code a lot a lot just this line is almost 400 lines of code or this file I mean so great we have all of this showing up exactly like how we want it that makes me really happy and then of course let's do should we add more text no I I don't think I'm going to add this more text functionality okay uh let's try now adding another post and let's see if it actually reads hey there um we just got done building LinkedIn clone with fire uh with reactjs Firebase and Redux for image I don't know let me go and pick a cool image so I'm going to go inside of thumbnails and uh sure let's just pick uh just pick one of these let's just pick this why not why not let's hit post look at that we just got done building our LinkedIn clone with react GS Firebase and Redux so now our post functionality is completely working exactly the way we want it to that is absolutely gorgeous all right and before we deploy this thing cuz we're so freaking close and I'm so proud of you that you've done such a good job we just need to fix one thing this over here looks funny and these like buttons and these things look funny so this is going to be uh pretty simple so let's go inside of our main JS and first let's fix social count so social count component is that one right there this one right here okay so inside of our button let's try going border none so let's take away the border and uh let's also do background color white okay so it just just matches the the rest of the background okay great so that looks good to me let's also go inside of social actions and we're going to do something similar inside of our button let's go um let's go border none okay great and let's go background color white okay beautiful so now there you go that is our LinkedIn clone it is looking absolutely gorgeous you can log in you can log out I mean every single functionality is there we're using Redux we have our drop- down menus working I mean this is beautiful like think about it right like if I go mobile mode right look at how good the mobile version looks just absolutely freaking beautiful okay so this is an amazing clone you've done a great job so far and now for the last piece of the puzzle all we're going to do is we're going to deploy it together okay so sometimes um I forget my deploying commands but let's just go ahead and figure it out um you know in this video so first things first what one thing I know that I need to do is I'm going to need to run npm run build and I'm also going to need to set up Firebase hosting okay so we're going to go ahead through that process now now um let's try let's try um npm run build okay and let's see it go through the build okay and then we're going to do Firebase deploy and let's see what happens and when we run into errors we'll try to solve them together okay not to worry just make sure you're inside of um the main folder like LinkedIn clone okay main directory now we should have a build folder and this is going to be all our optimized images and files that are going to be ready are are going to be essentially production ready okay so there we go that's good our build is good to go and now I'm going to try doing Firebase deploy so I'm imagining I'm going to get some kind of error or some kind of process okay cool no worries let's see do I have any Firebase commands that I've written uhhuh so I remember the command is actually Firebase in nit that's what I was looking for okay so we're just going to initialize it let's go here and select hosting because we're going to need to host it um so that's good let's go use an existing project and let's go to is LinkedIn clone is it actually logged into the right one because I'm not seeing my project okay I'm going to end out of it let's do Firebase in it one more time and let's go hosting okay and uh let's create a new project because that that pro project just might not have been there okay let's call it LinkedIn clone what would you like to call your project LinkedIn clone I did not mean to specify an ID there's already a project with LinkedIn clone okay all good so let's actually go to Firebase from here okay let's go to project overview project settings okay link to a Firebase hosting site let's see if we can do that boom okay and let's go through the init project uh init process one more time let's do hosting hit enter um I don't think it's going to let me select an existing project why is it not seeing any of the LinkedIn though that's what I'm curious about because it sees all this other stuff but it not does not see any of the LinkedIn which which is very interesting to me so one thing you can do is make sure so it's because I'm logged into the wrong Firebase so I'm going to see if I can log out and I'm going to log into the right Firebase okay that's really where my problems were coming from cool so you can do this too if you're not logged into Firebase make sure you log into Firebase if you haven't installed Firebase make sure you install Firebase now would be a good time now I'm logged in to Firebase okay so good now let's do Firebase inet now I should see my dummy LinkedIn clone use an existing project the dummy LinkedIn clone that we worked on our directory is going to be build I'm going to hit enter configure as a single page app I'm going to say yes setup automatic bills file build already exists you want to overwrite just hit enter okay so now we' have gone through the initialization process I've also done npm run build so I have my build folder let's try Firebase build is it going to work is it going to work I don't know yo let's go guys amazing congratulations the LinkedIn clone that you worked and we worked so hard for is deployed so now let's go ahead and check it out hopefully it actually works and it doesn't embarrass us let's go full screen this is the deployed version you should be able to go and play around with this let's hit sign in with Google and let's see if it allows us to log in log in boom I'm inside and look at that it has access to my entire database it's fully up and running okay it has a bunch of my files everything I need okay and uh maybe by the time you're watching this I'm probably going to disabled uh for you to write to the database because people add all kinds of funny stuff when they're allowed to let's try um taking an image like this trash devs need to become prodev all right and I'm going to hit post all right let's see if that posts o that came through clutch and uh let's do um let's post a YouTube video of mine and let's go kazy playing chess let's hit post ooh that's posted let's hit play guys welcome back yo I can even watch that video I can even watch all my another chest tastic video so there you have it folks amazing great job the entire app is deployed it is completely working you've crushed it now look if you want to take your skills to the next level and you want to become the badass developer that you've always dreamed of go to clever program.com pwj okay so then you don't just watch me do this so that you can actually build apps like this okay this is why we made this course profit with JavaScript so you can get your skills up so freaking high and really get to that next level so go ahead you know if you want to take it to the next level watch this video go to this page clever program.com pwj we'll put a link in the description as well but guys you know this is what we do we have't the best community on the planet okay we have success coaches for you we show you how to make money with JavaScript and coding we have an amazing Community it's like a family okay you're going to build some incredible projects inside of that um inside of that uh inside of this course you have some of the best instructors in the world okay and you have people Landing six figure Developer jobs all right I got a job offer for $90,000 Frank got a job offer for six figures um this guy got a job offer for $110,000 I mean the results are crazy okay you can go ahead and check it out yourself and honestly join this course worst case scenario you have a money back guarantee okay so there's nothing for you to uh worry about so go ahead sign up for this course so you can actually build these clones yourself you can actually build these projects yourself and you're going to learn the fundamentals that you actually need man with that said this was so much fun for me I hope this was also fun for you once again this is your boy kazzy AKA react daddy smash that like button subscribe to the freaking Channel and uh that's it okay comment below if you enjoyed this if you love this it's almost 2: a.m. and I'm out here grinding for you I love your beautiful face and as always I'll see you in the next video\n"