React Node.js Full Stack Blog App Tutorial | MERN Stack APP Full Course

hello my friends today we are gonna complete our blog application this is our home page it's fetching data from mongodb and displaying here and when i click them it's fetching a single post according to this post id in the url and also i can fetch all posts by username or category name it has a register and login system after the login process i can see this logout and write links and also my profile picture here let's create a post by clicking this link i can choose picture title description and after creation i can see edit and delete button but if i go to some other user's post i'm not allowed to edit or delete it so in my post let's edit and delete and here if i click my profile i can change the profile picture or user information here [Music] and finally i can log out i think it's one of the most important projects to put your portfolio as a full stack web developer because it contains everything you need to know about mind stack and if you didn't watch the previous videos in the first part we designed our react application and in the second part we created our rest api using node.js and mongodb and finally in this part we are gonna use those api and design and create a complete blog application so i hope you will enjoy it i am so excited to start if you are ready let's get started [Music] so i'm gonna open my client site so let's start our react application also i will go to client and i will say yarn starts okay this is our block design as you remember we have done all of these components and right now in the home page i'm gonna try to fetch our data from this database let's close them actually so this is our home page i will go to source folder and inside pages and home okay so how i'm gonna fetch data to do that i'm gonna install axios library here inside client and i'll say yarn add axios you can use javascript fetch also but i highly recommend you to use axios it's really useful so here i'm gonna use use statehook and i'm gonna define my posts i will say const pause and set posts let's create use state and for initial state is going to be an empty array because we haven't fetched any data yet so let's fetch it i will say use effect and here i'm going to indicate my empty array that means fire this use effect just at the beginning so i can't fetch data directly here saying axios because we are gonna be using async function so i'm gonna create here a function i'll say const fetch posts it's gonna be async function and here what i will say i will say axios and it's gonna be get method i should import this okay manually import axios from axios okay right now i'm gonna use my api but how i'm going to use this so i will go to pack.json and here before ending i will write here proxy and i'm going to indicate my api url which is http and localhost and what was our port number 5000 and additionally i'm gonna use here api and that's all right now our proxy is this url and i can use this inside axios so i'm gonna use posts url and it's gonna return as a response const response and of course it's a wait it's async so let's see what we have here i will say console.log and response okay i will open my console and we can't see anything that because i didn't call this function i will call here and let's try again as you can see we have an object here and inside we have data this is our first post and this is second one so i can use them right now i'm gonna delete this and instead of console.log i'm gonna set my posts i will say response and data right now i can take these posts and i can pass this as props let's go to the posts component and inside i will take this prop so i can use them with array map so i will say post and map and for each post i'm gonna call this post component so i can delete rest and here brackets okay let's see right now as you can see there is only two posts so how i'm gonna use these properties here right now i'm gonna pass this post i will say post and it's gonna be p so let's take this prop inside here this post i will say post and right now instead of post title this lorem i will delete this and i'm gonna write pause dot title let's see okay they are here so let's update others i'll say pause dots created at if i do that i can't see this date properly like this so what i will do i will cover this and i'm gonna say new date and i'm gonna say to date string let's see right now okay perfect i'm gonna update this description also it's gonna be post.description and this image but as you remember we don't have any photo here let's write here a condition if post and this image i'm gonna show this image and it's gonna be post and photo let's see okay we don't have any image so what about these categories i will come here and let's delete this i will say pause dot categories and i'm gonna use map again and for each category i'm gonna call this span and here i will delete this and i'm going to write category.name we don't have any category and right now when i click this i want to go to singlepost to do that i'm going to use link let's come here and i'm going to say link i should import this from react root or dom let's do that and i'll say import link from real quick to dom okay we are gonna use just two so i'm gonna use curly brackets and backtick and i will say post and i'm gonna use this id i will say post dot id so inside this link i'm gonna use this span let's try right now i'm clicking and as you can see we are in the single page single post and this is our post id but there's a problem here as you can see they have custom style here i will say class name and it's gonna be link i'm clicking perfect so how i'm gonna fetch data according to this id let's come here and inside single post i'm going to use another hook here i will say const location and it's going to be use location and what we have here let's see i will say console log and this location i will open my console and as you can see we have an object and here we have path here so i can take this post id so if i say split and i'm gonna split this string with these slashes so if i say slash it's gonna split this string into three pieces one of them before this slash second one this one and third one this id to take this id i'm gonna use second item because first one is zero one and two so let's see again i will save okay because we didn't use here i'm gonna write here path name let's see again as you can see we have this id so i can fetch this data using this id i'm gonna do the same thing let's delete this right here const path okay so i'm gonna use use effect again and i will say whenever this path changes fire this use effect and again i'm gonna create a function i will say const get post or fetch post whatever you say an async function i'm going to create arrow function here and i'm going to use axios again i will say const response and axios it's going to be get methods and inside i will say posts and i'm going to use this id i will just say plus and path okay let's see what we have here again i will say console.log and response and here i'm gonna call this function get post okay it returns promise because i didn't use a weight here here i will write await okay we have data as you can see this is our first post right now i can use this title description everything here to do that i'm gonna create here my post use state i will say const let's say post set post and it's going to be use statehook and initial state will be empty object because we don't have any so i'm gonna update this post i will say set post it's gonna be response and data so i can use this post i will do the same thing if there is a pause and photo i can use this image let's take this here and instead of this link i'm gonna use my post dot photo and here this is my title and also will be post dot username and again this date i will say new date and inside post created at and i will say to string and instead of this description i will cover this and description so let's see right now as you can see name title date and description perfect and we don't have any image so i can close here so i'm going to home page again and for this one for example as you can see from chain and test description perfect so what else i can do before login and register i can fetch these categories let's go to the sidebar and here i'm gonna delete them and i'm gonna use use state again const cat and set cats it's gonna be use state an initial state will be an empty array and i'm going to use userfact and here it's going to be mterry because we are going to fire this at the beginning and i'm gonna say const get cats it's gonna be async function again and i'm gonna say const response and it's gonna be await axios get method and i'm gonna call my categories and after that i'm gonna update my categories i will say set cats it's gonna be response and data so let's call this function get cats okay right now i can use this array i will come here color briquettes and cat actually let's make this cats because it's an array okay and i will say map and for each category i'm gonna call this ally and it's going to be category.name let's see as you can see we have only music perfect so i can do one more thing as remember in our api let's open that and routes and posts as you remember we are fetching all posts by using nothing only with this url and also we can fetch this using query we have user and categories so for example inside this test if i click this it's going to go to home page or we can say posts and question mark user will be john updated too so in this case we are going to fetch all data but username should be john so let's go to the home page let's use location again i will say const location and it's going to be use location i should import and again i want to show you one more thing i will say location so i will copy this and here i will paste here as you can see we have a search property here so i can use this user and john i can use this search so instead of writing like this i'm just gonna take this search property [Music] i can add this search here i will say plus and search in this case i should add this search here as dependency save and see here i will refresh as you can see we have only test here if i delete this we can see both of them if i go back and write here chain right now it's from j now so if i click here i will go to cat and music nothing is gonna change that because we are using this search it's gonna be not user it's gonna be category and it's going to automatically fetch this data so i should give link for user because i can't click this for now so let's go to the single post and here i'm gonna add here a link i will say link let's cover this and here i will say two this time i'm going to use backtick but first let's cover and here let's say home page and here i will say user equals pulse dot username here dollar sign of course okay let's try as you can see it's linked right now i will give class name it's gonna be link because if you remember in the previous lesson in the public folder we gave link class name here here there is no text decoration there is no color okay let's see i'm clicking and we are going to home page with user jane and this is jane i will go to home page again i will click this when i click this user it's gonna fetch only john's post perfect so i will do the same thing for categories let's go to the sidebar and here i'm gonna add link let's import this and here i will say two again it's gonna be home page and my query is gonna be cat and it's gonna equals c dot name again there is no style class name it's gonna be link i'm clicking it's going to home page with category and music and as you can see there is no post because we don't have any post with category id music okay by the way you can make here more fancier if you want you can say if there is no response and data if there is no post you can write here 404 or there is no post something like that but i don't want to waste time it's totally enough let's close this okay so right now i'm gonna take care of this right and settings but to do that i should first register and login so let's go to the registry page and here you can use context api by the way for this register but it's not important for now because we are not gonna store anything after this registration we are gonna store everything after login process so i'm not gonna use it here i'm gonna use after login so what i will say i'm gonna say const and username set username it's gonna be use statehook and in the initial state it's gonna be anti-string let's do the same thing for passport and email it's gonna be capital and here it's going to be a password okay so how i'm going to change them i will come here and for this input let's go to the register page when i change this input it's gonna update this username and others also so what i will do if you remember previous projects we also use usedref but in this case just let's use on change and for the login page maybe we can use usrev so you can understand both of them so i will say unchange so i will say event and i'm gonna say set username it's gonna be event.target and value so whenever i change this input it's going to automatically set update this username so let's copy this and for email it's going to be set email and for here it's gonna be set password so right now i can register i will write here type submit and in the form here i will say on submit when we submit this form it's gonna fire a function let's say handle submit so i'm going to create this function const handle submit it's going to take e and i'm going to say e dot prevent default so why i'm doing this if i don't write here prevent default let's try when i submit as you can see it's refreshing this page but i don't want to do this to prevent this i will open this comment and let's try again as you can see it's submitting but it's not refreshing the page perfect right now i can use axios and we can register so i can write here async function i can use here async because it's just a function it's not use effect so i will say cons response and i'm gonna use axios and remember our api i'm gonna go to authentication auth and here i'm gonna pass my user so i can write here object and username and email and password [Music] so let's see this response and then we are gonna use this i will open my console if i click this without writing anything promise again i forgot to say wait and by the way i forgot this register also so let's refresh and again not found we forgot this post item yes it's going to be post method and finally again i will refresh and register as you can see we have an error here that's because we didn't send anything let's write something lama gmail.com one two three and i'm gonna register as you can see we have a data here status 200 and data it's going to return this user if i click again it's not going to register it's going to send error again that because we can't use same username again and by the way as i mentioned before we didn't take care of this error handlings if you want to if you have time you can go to api and for every situation you can send another error here for example in this situation you can check whether there is same username inside db or not and you can send another error you can say the username is in use or something like that it's not that hard if you understood everything so far i believe that you can use them okay by the way we forgot writing here try catch block let's complete them and here you can say catch and error and you can write here console log this error i will use again right now we can use this error so what i will do let's create here another use state it's going to be error and set error and for initial state it's going to be false and here i will say if there is an error set this error and it's gonna be true so if there is a response and data we can go to login page so how i'm gonna do this i will say window and location replace and i'm gonna use login page so in this case if we don't have any error and if we have any data which means we successfully register it's going to redirect us to login page let's try let's write here something like i will register and as you can see we are in the login page so it works perfectly let's go to the register page again if i write here for example if we use same name and something we can use this error because we set this error as true so what i will do i can go to button and after this button i can say span and something ventral as you can see i'm clicking by the way when i click this i don't want to see this anymore so let's come here and i will copy this and here before trying i will say set error false actually i can write this here after clicking button it's going to be false so if there is an error it's going to write again if there is no we are going to go to login page so i can use this error i will say cover this and if there is an error use this button so right now i'm clicking it's disappeared and comes back again perfect maybe you can change this color you can give any class name but i just wanna change color color will be red okay maybe margin top i will say 10 pixels okay it's better i'm clicking it's coming back if i write something different we are going to login page perfect so right now i'm gonna use context api you can use redux also or any other state management tools but it's a really small application we don't need any management tools we can use just context api so why we are using context api for example when we log in we are gonna have our user information so we are gonna use this user information in home page in this top bar when we click this right button we are gonna use this inside this right page that because it's gonna check whether we have user logged in user or not if there is no user it's gonna retire a class to register page and also we are gonna use inside settings page when we click the login or register it's gonna check again if there is logged in user or not if there is we are not allowed to reach this login and register pages so what i mean here we are gonna use this user almost every component every pages so if we come here this app.js if i create here user use state and after login to use this in every component i should write here set user function and after login process come back here and check user and pass this user as props every component every pages and it's not the best practice we should prevent properly link and re-rendering every component each time when this user changes so what i'm gonna do is using context api so i will come here i will close this and pages i'm gonna create another folder here it's gonna be context and if you want to get more information about this context i tried to explain here but it was not deep you can go to the social media application project and you can watch this context part if you go to that video man stack up full course you can check here these sections as you can see how to use use context actions reducers everything is more detailed right now let's create our context reducer and actions i will say context.js and i'm going to create reducer and one more is gonna be our actions so let's close them okay so i'm going to context chess and here firstly i'm gonna create my initial state i will say const initial state and it's gonna be an object i'm gonna say user and it's gonna be null because when we visit page there will be no user without login process and here i will say it's fetching it's going to be false and error there will be no error okay so after logging process if everything is successful we are gonna update this initial state we are gonna have inside this user object our username our email and we are gonna reach this user inside any component any pages okay it's gonna be null and i'm gonna say export const context and it's gonna be create context of course we should import this let's copy this and here i will say const create context by the way we are going to use use reducer also and from react oops why i said here cons it's going to be import okay so inside this context i'm gonna pass my initial state so how i'm gonna reach this user inside any component i should create here context provider and wrap these all components inside this wrapper this provider and then we are gonna be able to reach this initial state so what i will say here again export const it's gonna be context provider and here i will say children and these children will be are all components here you are going to understand everything better right now it can be a little bit complex here but don't worry so before writing here anything let's come here and discuss about this when i click this button we are gonna have three main process first we are gonna start sending our username and password it's gonna be username by the way we are gonna change this and after sending our credentials we have two more actions it can be successful or failure if it's successful we are gonna take response which is our user information our username email profile picture everything and after that we are gonna update this state it's not gonna be null anymore it's gonna be our username email or whatever so if it's failure if there is no username or password is wrong or there is something inside our server or mongodb it's gonna fail and after that it's gonna be null again and this time we are gonna change this error it's gonna be true so we are gonna take all these actions inside action jazz so let's write here i'm gonna say here export and after let's say const login start our first process and to start this i'm gonna take user credentials username and password let's say user credentials and after that i'm gonna write my type and payloads that's our type it's gonna be our action name so i will say login start after starting we are not gonna return anything we are gonna just wait for successful or failure process so let's write them i will say export const login successful so in this case it's gonna return us our user our information let's say here user and after that i will say type will be our action name login success so to update our state i'm gonna use this user i will say payload user you're gonna understand better soon so other process other possibility will be export const login failure and right now we are not gonna take anything because it's just an error and i will say type login failure let's change this okay as you can see i'm not taking any specific payload we are just going to update this as true ok we have actions here but how we are going to dispatch them and update our state here to do that we are going to use reducer let's come here and i will say const reducer or whatever you say you can say login reducer doesn't matter so here i'm gonna write here state we are gonna use this state soon and action so here i'm gonna use switch case block i'm gonna use all these possibilities so first i'll say switch it's like if as block it's nothing complicated so i will say action dot type which is our type here i will say if it's login start let's write here case so if it's login start what i'm gonna do i'm gonna return new state it's gonna be user null again and is fetching will be true because we are going to start our process and when i click this for example we can add here some progress bar circle or something and after ending after successful or failure it's gonna stop fetching we will see here some error or we are gonna update our user and go to homepage okay and in this case there will be no error because we are still fetching it's gonna be false again and that's all for now and for other cases let's copy this and paste twice it's warning us because we don't have any default case let's write this first i will say if default do nothing just return this state nothing will be changed okay so second one will be login success as you remember after login success process it's gonna return us a user so we are gonna use this payload so what i will say user will be not null anymore it's gonna be action dot payload so after that i'm gonna stop fetching it's gonna be false because we finish our process here and error will be false and other case it's gonna be failure and in this case user will in null because we have some error here it's going to be true and in this case we are not going to fetch anymore we finish this process again okay so i should export this i will say export and default it's gonna be just reducer okay so i can use this actions and reducer i can dispatch them i will go to context.js and here finally i can use my state and dispatch i will say const state and dispatch and i'm gonna take this from our reducer here to do that i'm gonna use use reducer here and here i will say my reducer as you can see we imported this okay but which state this reducer is gonna use it's gonna update this initial state so i'm gonna indicate here okay so i can use this context as provider what i will say here i will say return and it's going to be context dots provider and here i can write these children you are gonna understand his children soon so here which values i'm gonna pass i will say value and it's gonna be our user which is our state and user and i'm gonna pass his fetching again state dot is fetching he's switching and finally i'm gonna pass my error state state.error so one more thing i'm gonna pass this dispatch because when i click this we are gonna dispatch start and according to our server we are gonna dispatch successful or error so we can use this context provider right now so i will copy this and i'm gonna come here you can use this inside app.js or index.js if you use this inside here all components inside application can reach this data this user fetching error everything so let's do that i'll say context provider and here i'm gonna cover this up and i should import this okay this is our context right now we are able to reach our user and is fetching an error so how i'm gonna use this let's go to the login i will come here and login okay firstly i'm gonna change this email it's not gonna be email just username and text is okay enter your username okay that's right here type submit and for this form i will say on submit it's gonna be handle submit let's create this here const handle submit it's gonna be e again and again e dot prevent default [Music] let's write here const let's say use the ref this time we are going to use use draft hook i will say use rev and for the password and here i will copy this and inside this input i will say rev and i'm going to indicate my reference and i will copy this and here this time is going to be password ref right now we don't have to write your own change or something we can use them directly here so what i will do here how i'm gonna use this dispatch i can call this context and after we can take this dispatch or is switching let's do that i will say const and inside i will say dispatch and is fetching and to call this context i can use use context and inside i'm gonna call my context here okay right now i can use them firstly i'm going to use this dispatch let's write here and it's going to be our action type i'll say type and firstly it's going to be login stat when i click button it's going to call login start action and it's gonna come here and it's gonna update this is switching to true and others will be the same so after that i can make my api call i will say try and catch it's gonna be error and here of course it should be async function because we are gonna make requests to our api so what i will say here i will say const response as we did before i will call my axios and here post method so i will say authentication and login and i'm gonna pass my data that's my data my username and password let's write here username will be userref and current and value and for passwords it's going to be password ref current and value of course again wait don't forget this so i will say if there is response which means it's successful so i can copy this and paste here it's going to be login success because we have response and data and one more thing as you remember we are taking here action and payload so what's this payload it's gonna be our response and data i will say payload response and data so if there is an error it means it's failure so i will copy this and paste here i'm gonna delete this payload we don't have any so here it's gonna be again failure okay so let's write here user and we can see our user because we are passing here we can see this so i will say here console.log user so let's see i will open my console and here i will say mike and one two three as you can see it's small because we don't have any user like that so which user we have let's check here my blog and users let's use this i will write here and one two three and login as you can see we have a user and we can see also is fetching here let's see he's fetching i will refresh right it's undefined that because my typo let's copy this and right here let's see again as you can see it's false i'm clicking true and false again because it's failure if i write here correct one [Music] one two three true false it's successful after process it's gonna be false perfect so how i'm gonna use this user let's write your user again i'm refreshing as you can see it's still null that's because we are not storing this anywhere inside this storage if i come here and say application and here as you can see we have local storage i'm gonna add my user here and even if i refresh the page we are gonna be able to use this user so how i'm gonna do that i will come here and inside i'm gonna say use effect and i will say whenever this state end user changes fire this use effect i'm gonna use local storage and i will say set item and here i'm gonna write my item name item key is gonna be user and here my value if i write here directly state and user it's not gonna work that because we should convert this to json file to do that i will copy this and write here json dot stringify and here i can paste but it's not enough when i refresh page first i should fetch this user from local storage so what i will do i will say json.parse we change this as string here and this time we are gonna pass this to json so i will say local storage this time it's gonna be cat item my k so if there's a user inside this local storage it's gonna take this user if there is no user it's gonna be no let's try again i will refresh page as you can see our qm value it's null right now i will write this john here and one two three i will log in and as you can see it changed so if i go to console and if i refresh page as you can see it's still here perfect so i can use this user let's come here and delete this user we don't need this and this console log and i can use this is fetching by the way let's come here for this button this login button for example i will say make this disabled if is fetching let's see nothing is happening because we didn't give any style here let's go to the style and here this this is our button i will say if it's disabled i will say cursor not allowed or maybe i can change background color it was this color maybe i can make it coral and i'm gonna write here my username one two three i'm clicking as you can see it's disabled but this color is not changing that because it's border and it shall be background okay it's strange maybe change this light coral but something like that okay it's better perfect so right now i can use this usage let's close all of them and let's go to the app this time as you remember we created here sudo user right now it's not gonna be sudo user we are gonna fetch this from our context i will say use context and it's going to be our context okay as you can see even if we are in the login page we can go this page because we have user now so i can use this inside this top bar also let's go to the top bar actually i will copy this and paste here let's import them i will refresh and right now as you can see we can see these pages and instead we have logout right now and our profile picture perfect so let's do the same thing for lookout it's really easy if you understood everything i will come to actions and right now we are not gonna use start success and fader because we are not gonna fetch any data we are not gonna wait anything we are just gonna delete this user so just let's copy this and it's gonna be just log out and let's write here logout [Music] okay so i will go to the reducer and here let's copy this and paste here this time it's going to be logout and user will be null again and is fetching false and error false it's exactly the same position here it's going to be null false false it's going to be our initial state again and it's going to automatically set this user to now because whenever this state user changes it's going to be running so let's try this i will go to the top bar and for this logout i will say on click here i will say handle logout i will copy this and here const handle logout by the way i will import this dispatch here and here i will say dispatch and type will be logout let's try i will refresh here as you can see we have user i will click and we don't have any more perfect i will log in again actually i will just change this i don't wanna write update okay so i will write here just john 1 2 3 and login we are here we have a user and i'm gonna log out perfect so i can change this image also let's login again this is not our profile picture let's come here actually i will just copy this image and paste inside this zone or without profile picture we can test first i'm gonna say user dot profile picture it was picture or shortcut i'm not sure let's check here models and user okay it's correct so let's see right now as you can see we don't have any so i will paste this here and update i should log out and login again one two three and it's here again perfect right now i can go to to right section and here we can add some posts so let's go to the right here let's close them first and here write and write jsx firstly let's create your title description and file i'm not gonna use ref right now const title and set title it's gonna be use state i'm trying to show everything to you that's why i'm going your state and rev at the same time so for initial state it's going to be empty and for description it's going to be empty again and for the file i'll say null there is no file i will say set file okay so what i'm gonna do i will come here and say type submit and for this form i will say on submit it's gonna be handled submit let's create this here i'll say const handle submit it's gonna be event again i'm gonna prevent default e dot prevent default and after that i'm gonna use axios and pulse methods why it's not importing this okay anyway i will say import axios from axios so which link i'm gonna use it's gonna be posts and main url but before let's create here new post const new post and it's gonna be title and description and we need username by the way to do that let's take this user user and use context i'm gonna call my context here okay i will import this also context and context okay right now i can write here username will be user dot username okay comma perfect so i'm not going to send this directly not because we can upload any image here so what i will say i will say if there is image there is file i'm gonna create here a data cons data it's gonna be form data let's create a file name but i will say const file name and it should be some random number here you can use any uid or something but basic one basic idea is creating here a date and i'll say now current moment and after that i will say file dot name because if we don't use this a user can upload same image different image with same name so i just wanna prevent this what i'm gonna add to this data i will say append and firstly it's gonna be name and it's gonna be file name oops it should be comma and one more thing i'm gonna add my file okay when i click here it's gonna take this file and it's gonna add file name perfect so in this case it's not gonna be on the username title and description i'm gonna add also this file name so i will say new post and image it was not image it was portal and here i will say file name okay right now i can try and catch i will say try and catch i'm not gonna write anything here you can write console.log but for user experience you can write some error here or something doesn't matter for now so what i will say i'm gonna say await of course it should be async first and here i will say axios.post and remember our url it was api and upload and right now i can send this data and remember here let's come to index file and when we upload something we are using this url and we are using file and here if you remember request body and name and our file and our name perfect so after uploading finally i can send this post here i will say new post of course it should be dry catch again wait try catch so after sending our post i want to go to single page so what i will say const response as you remember is responsing us to this new post so i will say window dot location and it's gonna be replace and i'm gonna write here my link it's gonna be single post and here i'm gonna write my post id it's gonna be response data dot id let's try i hope everything is okay i will refresh here i'm gonna choose this image and here by the way when i choose this image i can't see anything here what i will do first i will say if there is a file use this image i will cover this and this source will be it's not going to be this image instead i'm going to write curly brackets and inside i will say url and create object url and i'm gonna write here my file so basically it's gonna create a url for this file and we are gonna able to see this here i will refresh there is no image here i will open and i'm gonna choose this okay we can't see anything because we didn't use input file here we didn't change this image here as you remember our file input so i will say on change so it's gonna set our file i will say e and set file it's gonna be e dot target dot files we are just uploading single file it's gonna be first one okay let's see again i will refresh and i'm gonna choose this image again as you can see it's here perfect so i'm gonna write here title my first story hello from react so i'm gonna publish okay please use new operator we didn't use it let's check here yeah we shall create new one i will refresh [Music] i'm gonna choose hello from react i'm gonna publish okay here failed title and description required that because we forgot changing this title and description also let's come here and this is our file this is title i will say on change it's gonna be e and set title e dot target dot value so i will copy this for this text area this time it's gonna be set description so let's try again this image from react let's write something and publish right now as you can see we are in the home page but there is a problem here because we are using this image address let's go to the post here [Music] and here i'm gonna say const public folder and it's gonna be localhost and 5000 and this image file here images so i should use this url let's write here another slash and instead of this post time photo i will say public folder and plus this photo and to use this url i should go to the index.js here inside our server and here what i will do i'm gonna go to my api cd api i'm going to add another library here and it's going to be a path so right now i can make this images folder public so how i'm gonna do this let's come here maybe here i can write i'm gonna say app.use and images i can use this path i will say express dot static and i will say path dot join and i will write here their name and i'm gonna indicate my url it's gonna be images oops i wrote here user use path is not defined i forgot importing here i will say path let's see okay everything looks good and here i will refresh so let's try actually here i will say localhost 5000 and images and let's copy this image okay i can see right now so let's copy this and here inside post actually we did this here yeah okay it's here perfect so when i click this i want to see this here also so i will copy this and inside single page where is our single post here i'm gonna paste this here and this time it's gonna be again public folder and plus post dot photo as you can see perfect so when i click this button i want to delete my post and by the way if this post doesn't belong to me i shouldn't see these buttons so let's do this i will say if post dot username equals user.username we can see these edit buttons but we don't have user here let's right maybe i can take this from right okay let's import them okay as you can see i can still see it by the way if there is no user i will put here question mark if there is no user it's not going to look at this username so it's not going to be any error okay so what i will do i will come here this trash and i'm going to say on click and i will say handle delete and here i will say columns handle delete it's gonna be async function so i will say await and axios it's gonna be delayed method and i'm gonna choose my post url and after that post id so what's my post id as you remember we choose this here and i will say plus this id of course it should be dry catch in any case and after deleting i want to go to home page again let's copy this and here this time it's going to be just home page and by the way to delete this i should indicate my user id or username let's check here posts for deleting okay username i'm gonna give my username here it's gonna be user dot username let's check right now i will refresh and i'm gonna click okay there is an error i think it says not found i forgot slash here i think and let's do this again okay it's unauthorized let's see here post if post.username equals body and username it looks okay but let's check this here i will refresh okay it's here username john my username john also so let's see this console.log user okay this is john okay let's write your post also and console here [Music] and this is john also interesting i will say pause dot username and equals user dot username okay it's true so i'm gonna use backtick here maybe that's the problem i will say post and id let's try again okay i can send this data directly because we are using delayed method here it's not pulse method so i should write here data i will write your data man that's all i can delight this i will come here and delete as you can see we are in the home page okay so what else i can do okay it's not ours i will come here and create new one my story and i will publish right now i'm gonna try to update these texts this title and description so what i will do here create new title and description i will say const title set title it's going to be use state and initial state will be empty string and one more it's going to be description so when i click this button i wanna transform this page to update mode so what i will do i will create one more viewstate and i will say update mode and in the initial state it's gonna be false so let's go to the other button here and i will say i'm gonna say one click and i'm gonna create function and update my state i will say set update mode it's gonna be true so in this situation i'm gonna change here it's not going to be h1 or it's not going to be p tag it's going to be input and text area so what i will do let's go to the title where is our title okay it's here so i'm gonna write here if it's update mode it's gonna be input here and i will say value will be pause and title so if it's not update mode i can write this h1 tag i will take them and move after h1 okay let's see i'm clicking as you can see i will change this style of course but i will do the same thing for this story but first let's give this class name i will copy this and paste here title input okay so let's do the same thing for description i will say if it's update mode it's gonna be text area so if it's not it's gonna be this p tag let's copy this and here class name description input okay let's arrange them i will copy this and let's go to the css file here my title [Music] i will use them and here i will edit as you can see it's like that so if i do this it's not gonna work because it's not a text let's try okay it's just centering this so how i'm gonna center this input i will come here this dropper if i say display flags and flex direction column helps so it's gonna be autofocus so i will say autofocus i will refresh and edit okay perfect maybe i can get rid of this outline this input and when it's focus i will say outline knob okay it's better maybe i can delete this border also and leave just bottom border i will say border none and border bottom like this and maybe gray light gray okay and i'm gonna change this color also it's really dark i will say color maybe gray let's try okay it's nice so i will do the same thing here let's go to do description and input i will say border none and here for this text area i will say value is gonna be post dot description okay and i will copy them it's better i think i will get rid of this outline also focus it's gonna be outline now okay perfect but if i do that as you can see i can't write anything because our value is title and description we can't change them so what i'm gonna do i will set this title and description it's going to be response data and title and description right now i can use them for this title i will delete this and description and i will say on change it's gonna be function and i will set my description again e target dot value of course here is e and right now as you can see i can write so i will do the same thing for title this input it's going to be set title i will refresh and edit okay so right now i can add here button let's come here let's try here where we are let's see okay it's here button and class name will be single post button single and i will say update so i will choose this and let's go to the css and here i will say border none and background color let's say teal padding five let's see first something like this i will give width here maybe a hundred okay i will say color white and border radius five pixels something like that i can give cursor pointer and i will say airline self is going to be right side which is flex and okay perfect maybe some margin margin talk to any okay nice so when i click this i'm gonna update so let's come here and i'm gonna say unclick it's going to be handle update and here const handle update equals an arrow function it's gonna be async function again we are gonna update our post i can copy this and here this time it's not gonna be replaced it's gonna be refresh sorry reload here okay this time i will use put and post my post id user.username and title will be my title here so i don't have to write this like that because as i mentioned before if they are exactly the same name you can delete them like this is enough and i will edit and update it let's update again unauthorized let's delete this data and update okay perfect but i'm gonna hide this update button because it's not in edit mode so what i will say let's come here and say my condition is if it's update mode i can see this okay let's test again i will say hey and my story again and update perfect actually i don't have to reload this page instead i can say set update mode it's going to be false and of course it should be not post and title it should be title description here let's try i will edit this and update perfect so i can delete this and we finished our writing page and we finished this single post page and we can update our user here we are gonna go to settings page let's close them and open top bar here by the way i'm gonna give cursor pointer for this user image i will say cursor pointer okay let's add here our settings page for this image what i'm gonna do i'm gonna add link and cover this image oops it should be here and i will say two settings okay let's go to the settings page and here i'm gonna change this image it's gonna be user and profile picture oops not use ref user okay we don't have user here let's delete this and here i will say const user i'm gonna use my context again i will say use context and my context as you can see our picture is here right now i'm going to do the same thing let's close them and open right page i will just copy this file i will copy here because we are gonna update and paste here okay let's import them and all submit or update doesn't matter so this time it's gonna be updated user let's just say no i can say user because we are using here so let's say updated user let's check our api here users and for update okay as you can see we are taking our user id so i will delete this and i will say user id it's gonna be user dot id and i'm gonna create what we have here username email and password let's create them username email and password it's gonna be empty string and let's make them capital letter ok this time i will say username email and password so if there is a file i will do the same thing i'm going to create new form data and i'm going to add my name and file name and here i'm going to change this this time it's going to be updated user and it's going to be profile picture and here let's import this axios import actuals from axios okay so it's gonna be users it will be put here and and additionally i'm gonna give my user id because it's required here as params so after that i'm gonna give my updated user here now i don't wanna redirect any other url let's delete this okay everything looks nice and i'm gonna update my states here firstly if you remember what we are doing i will choose this and paste here inside my file input it's gonna set our file and for username input placeholder will be drawn so let's choose this and write our user.username and for email oops just one okay i'm not writing my password here so let's set them on change i'm gonna take my e here and set user name it's gonna be dot e.target.value so let's copy this on change i will do the same thing for email set email and set password here okay and for this i will say type submit and for this form i will say own submit that was the name handle submit okay so let's try i will refresh the page and here i will say john to another at gmail.com 123. i will say update nothing has changed let's check here okay something is wrong i will expand this and we can see better okay we should add this option also let's go to the index file here it can be some problems with this mongoose so you can update here and true let's try again i will refresh drone2 and another i'm gonna update okay something is wrong but because i forgot here slash so let's come here let's add your slash and try one more time and update right now it's 200 perfect let's check here i will refresh as you can see it works perfect so let's change this again that before i want to give some notification here that's right here updated successfully or something like that i will create another use state is going to be false in the initial state and i will say success so after updating this data i will say set success and it's going to be true so if it's true i will come here and after this button i will say if success right here a spam tag and it's gonna be profile has been updated updated and i will say style it's gonna be color green we should be string of course so let's try i will refresh here and i'm gonna say john and password let's say something and update you success oh i wrote this here it should be here again okay perfect maybe i can center this text align is gonna be center and maybe margin it's gonna be 20 pixels okay perfect so what we have done here let's check our home page our categories and posts let's check here for jane i'm clicking here it's gonna fetch only jane's posts like this if i come here as you can see i can see this edit and delete buttons because it's not my post if i come here and choose one of mine i can edit this hey we finished and update it works perfectly i can delete this home page again and i can update my profile and finally i can log out so everything works properly by the way i forgot updating profile picture let's write here my username this updated one that i forgot his password it was not one two three four okay i should create new one i think let's register i will say last user last gmail.com and one two three last user one two three okay as you can see we don't have any by the way you can find any empty avatar you can add this inside these images and you can say if there is no image show this no avatar png something like that let's try i will choose this and when i choose this profile picture it should be updating here so okay it's here i will say if there is a file url and create object url and i'm gonna pass my file here so if it's not of course it should be question mark if it's not it's gonna be this profile picture let's see i will refresh so i'm gonna choose again this picture as you can see it's here so if i write here something else last test last test gmail.com okay gmail doesn't matter so i'm gonna update it's successful if i refresh you cannot see this here that because if i inspect and open my application as you can see after the login process our profile picture is empty so we should update this store so how i'm gonna do this let's come here this context these actions i will copy them and paste here it's gonna be [Music] update start success and failure and here also this time again we are gonna take credentials and when it's successful we are gonna pass this user as payload so let's go to the reducer so it's exactly the same thing nothing has changed so i will copy this and paste here it's gonna be update this time nothing will be changed so what i would say i will use spread operator and i will say state so nothing will be changed inside this state so here if it's successful i will update this user and by the way his switching will be true here is fetching it's going to be true so user and error will be the same and is switching will be true here if it's success we are going to update this user is switching an error is false and in this case if we can't update and user will be again same state dot user nothing will be changed and this switching could be false error will be true so let's come here settings here what i will say i'm gonna use my dispatch here so i'm gonna call my action at the beginning dispatch and type will be update start so i will copy this and after successful i'm gonna write here update success and my user will be this user so what i will do i will say const response and here payload will be this user payload is going to be response and data and in the other case it's gonna be dispatch update error failure i will log in again last test one two three here settings i will choose image i will say michael maybe let's update as you can see they are still here so if i refresh the page okay they are here but this profile picture that because we are not using this public folder let's write here commands public holder it's going to be http localhost it's going to be 5000 and images and here for this image it's not going to be user profile picture it was working that because in john's profile we are not using custom image as you can see we are using this url it's not working because we are using our custom url so what i will say i will say public folder and plus this user profile picture as you can see right now it's here so even if i refresh the page okay perfect and here also let's go to the top bar as you can see we are using this directly i will do the same thing public folder plus this profile picture and i will copy this and paste here okay perfect so everything works properly of course there will be some issues some errors it's not a complete tutorial but i believe that you have learned all these basics at least you can create your own api and you can use this api with react application you can fetch data post delay it and after improving yourself you can handle these arrows and you can focus on maybe performance issues so in the future we are gonna take care of them we are gonna use use memo use callback and advanced use rev and our react application will be on fire it's gonna be really fast so we finished this project of course you can enhance it but you can do more you can add an admin system maybe or you can use context api for posts but in my opinion it's not needed we are not sharing posts with many components but if you want to if you want to test yourself of course you can use and by the way you are asking redux in the comments i see them i'm planning to use redux in the next big project because we are gonna create an e-commerce application and it will be really important to use as store management tools there so i'm not saying it will be next week but we will create don't worry so that's all don't forget to like the video and if you want to see more you can subscribe to the channel and also don't forget to follow social media accounts okay i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 88,069

Keywords: react, react.js, node, node.js, mern, mern stack, mern stack project, mern stack authentication, react node mongo, react node app, node.js app, blog app, react blog app, mern crud, react axios, react context api, react login, react authentication, react project, react app, react tutorial, react full course, react hooks, react example, react for beginners, mern beginners, learn react, mern app, mern stack app, blog application, lama dev

Id: LelifxOrzvw

Length: 107min 41sec (6461 seconds)

Published: Wed May 26 2021