React Node Travel Map App | MERN Stack Full Course Using Mapbox and React Hooks

hello my friends today we are gonna be building this map pinning application using react and node.js i can register and login after login we are gonna store this user in the local storage so even if i refresh the page it's still gonna be here and after login process i will be able to create my own pins title description rating and i can submit and i can see all pins around the world from other users and they all are stored in the mongodb as you can see my pins are red and other users are purple and finally i can log out and delete this user from local storage it's really nice project to put your portfolio and impress your clients in this project we are going to be using nodejs and express framework for backend and for the client side we are going to be using react.js with functional components and hooks i hope you will like it if you want to see more real world projects like this you can subscribe the channel so if you are ready let's get started okay firstly i'm gonna create two folders here one of them will be backend and second one client or front-end okay firstly we are gonna work with back-end so i'm gonna install my express framework and mongodb here so i'm gonna go into backhand i will say cd backend and here i'm gonna install my libraries i'll say yarn at first one will be express which is our nodejs framework and second one will be mongoose they are installing i'm coming to browser and i will open mongoose here as you can see here we are gonna connect our mongodb here and we'll be able to create our mongodb models and then we are going to create our own routes we will create or list or delete or whatever let's go to mongodb here is our main page we have collections here if you watch other videos we created here social media application we can create here as much as we want but i will turn back here there is a connect section by the way if you never created any clusters in mongodb just create an account and then create a free cluster it's really easy so i'm not going to explain how to create them okay i will go to connect here and as you can see there are three options here this is from terminal this is from desktop application and this is from inside code so i'm gonna choose this one and here is our database url we are gonna use this and connect our account here and after that we will be able to create our collections and documents but before let's go to code editor here i will say new file and it's gonna be our main file index.js i'm gonna call express here i will say const express and require and express and one more it's gonna be mongoose okay so i'm gonna create my express application to do that i will write here const app and it's really easy just i will call express function that's all and here i'm gonna decide which port we are gonna be using i will say app listen and here i'm gonna indicate my port number it's going to be 8800 doesn't matter you can write everything here unless you are using on another application and here an arrow function and inside i will say console.log and inside backhand server is running okay i will save to start my application every time i should come here and say npm start or we have to start for example i just laid this i have to come here and say start again i added again i have to come say again to prevent this i'm gonna add an awesome tool here have some library and add node one and here in the package json because we didn't initialize our node.js here so only thing i should do is writing here npm and init and here it's gonna ask me something package name version description i will just enter them and i will say ok and it's going to create our note.js application and here we are not going to use any test instead i will say start i will say nodemon and index.js i will save and here i will save and when i write here yarn start or npm start as you can see nodemon is listening our application i will change something here and save as you can see it's restarting automatically i will change again as you can see awesome i'll go to browser and here i will open mongoose documents and here i will search for connect nothing or here connection so this is mongodb connect method so i will copy this and here after express i will just paste it and here as you remember we have a url here i will copy and paste here but there is a problem if you upload your application in the github or github or when you share with someone they can always see your secret url so it's not the best idea to write here your url so i will come here and open new terminal i will go to back end and here i'm gonna add one more library yarn add and it's gonna be dot enb so right now i can create an emv file here it's going to be dot env and inside this file i can keep my secret case i will say url and equals i will copy this url and here my database name will be pin here it's important just delete this and write here your user password mine is lama again so we can use this url to do that i will just delete these codes and here i will say process and emv and here my url okay i will say then which means if it's successful i will say console.log and mongodb connected and otherwise i will say here catch if there is any error i will just console.log okay let's try i will save okay there is an error here must be a string it can't read our emv file this emv that because we didn't configure our.emv i will multiply this and here it's going to be dot env and after that i will configure it to do that i will write dot emv and just config ok it's ready i will save it okay mongodb connected but it warns us it says please add this parameter also so i will copy and here okay perfect our server and mongodb they are working perfectly okay so right now i'm gonna try to create users or pins you can come here and say app dot let's say post and maybe here users and register or login over here pins and get all you can do that inside index.js but i don't recommend it it's going to be a rest api so i'm going to create here my models and routes i will say new folder and models and one more it's going to be roots and inside model let's create user.js and one more pin.js here i will save and by the way i can copy this and here i'm gonna create my user schema i will say const user schema and new mongoose dot schema so i can create my attributes first one will be user name and it's gonna be an object and inside type it's going to be string require it's going to be true because we can't create any user without username it should be required and here you can indicate your minimum or maximum character i will say minimum 3 characters and maximum let's say 20. and one more thing i will say unique and it's going to be true as well that because i don't want any user with same username it's going to be only unique okay second one will be email address type string and required you can write your required or required tool and let's say maximum 50 and it's going to be unique as well and last thing here it's going to be password and here type string and required and lastly i will say minimum six characters okay so our model is ready but one more thing here i will write timestamps and it's going to be true so these timestamps will automatically add creation or update date for this user for example we created some user it's going to be username email password and additionally it's going to be created at and updated that there are gonna be outdates okay so i can export this i will say module export and here mongoose model i'm gonna indicate my model name here it's gonna be user and here my schema which is user schema okay so i can copy this and here inside pin it's gonna be pin schema and here it's gonna be pin okay so i can delete them so i'm gonna create new ones first one will be username every pin has a username here type string and required i will just duplicate this and second one will be title and description you can write here minimum character and it will be rating it's going to be type number required so i will say minimum 0 and maximum five and here i'm gonna indicate my coordinates so i will say latitude type number and require and last one it's going to be longitude and number and required also okay and here comma okay i will save so i can close them so here inside roots i'm gonna create users and pins so let's create pins first because it's going to be easier so firstly it's going to be our router so i'm going to call router here const router and require it's going to be express and i will call router method here okay that's all and here i can call my model const pin and require i will indicate my model here models and pin okay and firstly i will be able to create new pin create a pin and second one will be get all pins so i will say router and it's gonna be post method because we are gonna be creating something and inside for main url request and response and after that i can create my pin i will say const new pin and here new pin we are using our model and here request and body i wrote here request a body because we are gonna be sending our title description or rating everything inside this body by the way to use something as a post i have to parser with this body to do that here i have to say app.use and express json after that we can use anything as a json like here okay after them i'm gonna use try catch block catch okay here i'm gonna try saving this new pin if there is an error i'm gonna send something to user what i'm gonna send i will say response and status it's going to be 500 and then i'm gonna turn json file and i'm gonna turn this error and here what i'm going to try i'm going to try new pin and save and it's going to return us this save pin so i will say const saved pin and if it's successful it's going to return us this saved pin i'll say his pawns and statues will be 200 which is successful and jason send us this saved pin okay if i do that it's not gonna work that because this is an async function what i mean so it's gonna try to connect our db and try to add new pin so it's gonna take time for example two seconds but here we said send this eight pin as a response before 2 seconds it's gonna try to send this state pin but there is no statement it's still waiting so what i should do here i will say this is an async function and here i will say await so this time it's gonna await this function if it's successful it's gonna return us that's all it's really easy i will save and here i'm gonna open my postman it's a really strong tool to make requests for your api and here i'm gonna try to create new pin but before we created this route but we didn't use inside our index so i should export it here i will say module and exports as a router and here in the index.js i will just call it const pin root require i will choose my roots and pins okay so i can use this route i will copy and before this listening i will say app dot use and here i can indicate my url for these pins first one i will say api you don't have to write this you can write anything but i like using this api first and i will say pins and after that i'm gonna use this route so whenever i go to my local host and say api pins it's gonna run this route i will go to this route for example for post this is gonna be our main url after this api and pins if i say here one more slash and if i use post method it's gonna run our pause method here okay i will delete this so what i'm gonna do i will say api and pins it's a post method okay and for body make sure you are using row here and here json but i'm gonna say we don't have any user but i can indicate here doesn't matter i will say username it's gonna be john and title let's say eiffel tower for description it was an amazing place i will give rating here it's gonna be five stars and two more things latitude and longitude okay let's see here actually i can write here any random number we are not going to check exact coordinate of this fl tower we don't need for now and comma okay i will send as you can see 200 successful and here it's our saved pin id created at updated ad as you can see so i will go to my db here as you can see there is a pin and here inside pins it's creating this automatically and here it's our first pin awesome so it works yay so i can create new route here it's gonna be router again and this time it's gonna be get method slash and after that i will say async function request and response i will create my function and i will try and catch if there is an error i will send this error 500 and json sent this one okay and here i will say const pins and i will call my model here and if i say here find it's gonna find all pins inside this pin model of course it should be await and here if it's successful it's gonna return these all pins to us i will say response and status will be 200 again and json pins okay before calling this i'm gonna create one more pin here let's say oops i will go to body and say chain what can we say here let's say berlin it was an amazing city let's change this okay i will send it's successful there is one more pin here and right now if i make this gap method and send and we are not sending anything here we can't use this body because it's not post method so don't care about here and it returns us all pins inside db as you can see from jane and from john awesome so if you are beginner i think you understood how to create get and post methods so let's go to user right now it's going to be something more complex actually i can copy everything here and paste i will delete them instead of pin i'm gonna call my user user model and here it's gonna be register and login okay so how i'm gonna have register i will say router and pause method right now it's not gonna be only slash i will say register and after that async function request and response and here again try and catch error i will send this error response status it's going to be 500 and json error okay and here there is an important point because it's going to be our username email and password if i write here password directly for example one two three four we can see here as one two three four so which means it's not secure so firstly i should generate new password and then i will create new user and finally i will save this user and send response okay so how i'm gonna generate secure password i will come here and yarn add pcrypt as you can see in this page i will copy this and here and then we are gonna use this hashing function and after that when we login we are gonna use this function and we are gonna compare our hashed password and login password if it's same will be able to login if it's not it's gonna be some error okay so here i have to create first salt i will say const salt it's gonna be be await because it's a synchronous also and be crypt and gene salt let's write here any number i will say 10. and after that i'm gonna hash my password i'll say const hashed password and it's gonna be await again decrypt and hash function and here i'm gonna take my password i'm gonna send this inside body request and body and password for example when we write inside this body password it's gonna take it and hash it with this salt and create a new password so i can use this new password i will say cons new user it's gonna be new user our model and inside username will be request and body and username and email will be same and in this case password is not be request buddy of course they are request not response this case is not going to be requested by the password so instead i'm going to use my new password ok so right now i can try to save i will say const user it's gonna be await and new user and i'm gonna save it so if i can if it's successful i will send it status it's going to be 200 successful and json sent this user but i don't wanna all properties i just wanna take maybe user id maybe username doesn't matter okay so right now let's try i will make it post methods and this time it's gonna be users of course i should indicate here first and here api users it's gonna be user root i will delete them username chain email jane at gmail.com and password let's say one two three four five six i will send okay something is wrong yeah okay we can't use required it should be rukai i thought we can use but so i will play this it's gonna be require true okay let's try again oh not found cannot post of course it should be registered i'll try again and one more error it's gonna be status i will say send and this time it's 200 and it returns us this user id so let's check inside our db here users as you can see jane email and this is our hashed password awesome so i will go to login and here router post methods it's gonna be login page right now an async function request response okay i will try and catch again quickly error and response 500 and json error and here what i'm gonna do firstly i'm gonna find user i'm gonna validate my password so if everything is okay i'm gonna send successful response okay let's try to find user i will say const user it's gonna be await i'm gonna use my model here user and i will say find one because there is only one user with same username and here i'm gonna indicate my condition it's gonna be username should be request body and username so we are gonna send username inside this body it's gonna take it and try to find if there is no user like that we can send another error here status let's say 400 which is incorrect credentials and here json you can send any message here you can say wrong username but in this case we generally use wrong username or password we don't say to user which one is wrong so i will say wrong username or password so if it's correct i'm gonna validate my password i will say const wallet password it's gonna be wait and be crypt again right now i'm gonna compare this to passwords first one is request body and password and second one will be user password which is this password okay if this password is not valid i'm gonna do same thing wrong username or password okay and if everything is okay right now i can send 200 start this and it's going to be successful and finally i will send this user but i don't want to again turn whole user username email password i just wanna take id and username i will say id user.id and username it's gonna be user.username okay so it's gonna return us this id and username let's try i will say login i can delete this email firstly i'm gonna write wrong username let's try 400 wrong username or password right now it's gonna be correct and this is gonna be wrong again as you can see perfect finally i can write correct one right now two hundreds and our user id and username perfect so we created our user and pin routes we finished our login and register and here also we can create and get all pins so we are done with this backend i can close all these tabs and here inside front end i will close this backhand server we don't need it actually i can destroy this second one i'll expand this and here i will go to frontend and i'm gonna create my react application to do that i will write here mpx and create react app and it's gonna be inside this folder okay during installation as you always do i'm gonna go to google phones okay i can close them and here i'm gonna choose poppins it's gonna be three hundred four five and seven okay so i will copy this so here it's ready i will go to public folder and inside index i can delight this unnecessary things color file icon okay so i can change my application name it's gonna be travel pin app okay let's delete here also and here i can create a css file but i'm just gonna add two things so i don't need it so i can create style here and for all document i will write inside something but before let's paste this form family okay i have to copy this inside my css which is this style okay and one more thing i will write here margin 0 because by default there is some space here from top left right and bottom so it will not be any margin ok so i can delete these icons logos we don't need any of them and inside source i will delete this css test it's going to be on app.js and index.js okay so inside index i can delete this css here and inside up we don't need any css or logo and inside this div i will write just hello so let's start this application yarn start okay it's ready right now we are gonna use full screen map so how we are gonna use this map most popular ones first one it can be google maps if you go to developers.google.com you can go to your console as you can see it's gonna redirect you but in this case it's gonna ask you to create your billing account so you have to give your credit card by the way it's giving you 300 free usage which means thousands and thousands and thousands of requests so i don't think you can exceed this limit but any case i know most of you don't want to give your credit card for any cloud service and some of you are under maybe 18 you don't even have any credit card so i will skip this option and i will come to map packs if you go to mapbox.com and here products it's totally free no credit card required and here you can use any maps any teams here it's awesome so if you go to your account as you can see fifty thousand freeloads fifty thousand free requests so here there is a public token remember what we are doing these tokens i will go to my front end and here dot env and inside i will say map box and this token but if i do that it's not going to work because if you are using react application to use emi files you have to write here react underscore app underscore whatever you want you have to write this okay i will close and here i will open my terminal i'm going to add this map library i will say yarn add and it's gonna be react map gl let's come here and search for it i'm going this page and it belongs uber by the way so it's really strong and useful if you go to get started here as you can see i can use this map here inside my application and here there is a use state hook it besides width and height latitude longitude and zoom so i will copy them and paste here and this viewport and finally this map i will delete this hello and here so i will save and start again and basically this map is using all these properties here inside viewport and on report change is going to be firing when we try to hold and move to map what i mean by that you will understand here as you can see access token is required so i will write here map access token and it's going to be process and yeah me and what was the name i forgot my memory i will copy and here let's try again yeah it's old one i will close and refresh as you can see it's here i will take this here and i want to make it full screen so here i will say 100 vw and here 100 vh okay so by default it shows san francisco i don't want to usa here because it's really huge and i don't know anything inside usa i don't know any place so i'm gonna choose europe so instead of this i will write here 46 and 17. let's check okay we are in europe right now but it's really far i will change this zoom it's going to be four okay house we have all europe here so how i'm gonna add marks i will go to my documentation and here api reference and here i will choose this marker to use it i should import this marker and i can use like that inside this map by the way i will delete this and write like that and inside this i can write my marker okay so let's change this latitude and longitude so i'm searching for eiffel tower here here i can use them and longitude oops okay let's see as you can see it says you are here but instead of this i want to use an icon here i will open my second terminal and here cd front and and inside i'm gonna use material ui yeah add material ui and first i should install core and second one will be material ui icons okay let's check here material ui icons and as you can see there are many of these icons but i will check here let's write map ok i can use this one so it's name is room so i'm gonna use this name let's come here okay it's finished and here i will say import and i will call this name and from material ui icons so instead of that div i can use my component room let's see okay it's here perfect but there's a problem here if i zoom it's always in same size it's not growing so let's change this i will say style so how i'm gonna use this zoom it's inside this viewport if i write here font size and this viewport and zoom let's see as you can see it's really small but it's growing so if i multiply this by something let's say 10 and i will refresh the page okay it's really big but we will change it anyway i'm zooming as you can see it's growing awesome it's really huge right now maybe i will make this seven let's refresh okay it's nice so i will change this color also i will say color and slate blue let's see okay it's better but i don't like this map because it's really cold you can go to mapbox gallery so you can choose any of these maps but i didn't like any of them as you wish you can choose any of them doesn't matter but here if you say account and here there is a design in map box studio if you click this you are going to go to studio and you can create your own map here you can create streets buildings i mean colors of course and here i created something basic something like that i think it's much better than this one it's just gray so i'm gonna use this one so it's public i publish this i will share it in the description below if you go to style url and copy this and say inside this map i will say map style and just paste it let's see right now it's much better something like that it's really nice so what can i add here more i can add popup i will import it again and here i will copy this pop-up i will import here and here after marker i can paste and again i will choose same coordinates it's going to be afl okay i will not use phone close for now let's see you are here perfect you can change this anchor it can be bottom like this but i prefer left okay it says i will close this later but inside let's write something i will delete this and here class name let's say cart and inside label i will say place three more here i will say review and rating and information and after this maybe h4 i will write here afl tower let's give class name i will say place and after review it can be ptec beautiful place i like it and for rating i'm gonna use again material ui here i will write star and i will use this name let's paste here so let's try it here one two three four five stars we are gonna change time later it's gonna be dynamic but before of course it should be some container here class name stars okay and for information i will say span and class name will be username created by i will say bold and subject and one more i will say one oracle and it's gonna be date okay if i go to map it's gonna look something like that but i will change it let's create a css file here i will say app.css to use that i will import here up.css here i will say card with 250 pixels height will be the same i want them to cover all this container and also i will separate this date and name and this information also they are in the same line to do that i write here display flex and flex direction will be column and i will say justify content space around okay i can arrange these labels i will say label color will be tomato font size it's gonna be a little bit smaller and i will give border bottom one pixel solid and tomato again let's see okay i will give some margin here it's to be margin 3 and from left and right it's going to be 0 okay and here i can reduce this 0.5 and they're really long if i write here with maximum content i have some so title is good i can change this description font size let's say 14 it's not description okay i forgot giving class name it's gonna be task let's see okay and for these waitings let's give them also i will choose whole and here class name and it's gonna be star and here star color will be called nice and for this information i will say user name font size 14 again and for date font size maybe less like this it's not perfect but it's nice i don't want to waste time for this css it's not that important so how i'm gonna close this so i'm gonna comment this off because we are gonna be using multiple markers so here for popup okay so right now i'm gonna call my back-end server how i'm going to use it i will go to package.json and here i will say proxy and remember our port number in the back-end server plus http and localhost 8800 and for using these routes it should be api here and that's all to send any requests for this api i will add here axios it's an awesome library for sending any request for icon server so right now i'm gonna start my application i will go to backend cd backend and i will say yarn starts okay our back-end server is running and mongodb connected helps so i can use this proxy so i'm gonna use this whenever i refresh this page i want to fetch all these pins from back end so here i should use use effect and here i'm going to write my dependency so when i want to fire this use effect just add the beginning so i will leave this empty so i will write here a function const get pins async function because we are going to make request async and i will create arrow function here and inside again try cache and error console.logged is error so i will say const response because it's going to return a response i can use a weight and axios it's gonna be get method why it didn't import okay i will do by manual import axios from axios okay okay here i will write my url i don't have to write here localhost and 880 because we use proxy here i will just say pins so what i'm gonna do with this response let's create here data i'll say cons pins and set pins it's going to be use statehook again and for the initial state it's going to be empty array because we don't have any pin after this response i can set my pins i will say set pins and it's going to be response and data all data inside of course i should call this function otherwise it's not going to fire this and after that i can use these pins i will go to marker before this i will say pins and map and for each pin i will return something and it's gonna be this marker and this pop-up okay and here i will delete them and say p dot lot mp dot long okay something wrong here that because i can't use two components independent it should be parent view or fragments here i will use fragments okay let's save it [Music] okay i have so so when i click this i want to open this pop-up let's open this pop-up first and here i will use my pin here p dot slots p dot long and here title [Music] description and here p dot user sorry username okay let's see right now we can see all these pop-ups so how i'm gonna use this one hour ago i just add time ago.js you can install this yarn add or npm install i already installed here so how i'm gonna use it i will say here import formats from time ago if i write here format and p dot created at because as you remember here our pin and created ads let's check okay they are here so how i'm gonna open just one i will come here and create another use state const it's gonna be current place id and set current place id and initial state it's going to be null i will say use date okay for this icon i will say on click and handle marker click let's create this here const handle marker click it's gonna take an id let's pass this id here i will say p dot id it's going to be underscore of course because here like that so we pass this pin id so i will set current place and id of course arrow function here okay so i will come here and for this pop-up i will say if pin id equals current place id we can open this pop-up here okay let's try here if right now i'm clicking as you can see value i'm clicking here right now it's a file awesome so how i'm gonna close them or this pop-up i will say on close and right now i can make this current place null set current place it's gonna be no let's try again i'm clicking yes opening clicking perfect i want to add here cursor pointer for this icon here cursor and it's going to be a pointer okay helps so i wanna do one more thing it's from jane it's for john of course i'm gonna add here login and register system but for now just for temporary i will create here const current user and let's say jane and here for color i will say if pin username equals current user make it tomato if it's not it's going to be this purple again if pin username equals current user which is jane it's going to be tomato otherwise it's going to be slate blue let's see as you can see it's tomato right now if i change this john also if i make this suffic both of them will be purple okay later i'm gonna add your login and register button when we login we are gonna store our username and we are gonna use it so what i can do is when i click somewhere twice i wanna create another popup and it's gonna be input inside we can write title description and we can send to our back-end server we can create new p to do that i will create another place here and it's gonna be new place let's make this capital it's gonna be null so let's go to our popup i'm gonna create another pop-up here here hello let's delete them okay it's not gonna work because we don't have any lots or long so i will comment this out and i will go to my map here here our whole map here i will say on double click and here another function i will say handle add click let's copy this and here again arrow function here okay so how i'm gonna decide new coordinates i will say here e event and let's write here console.log and here inside i will write my event and let's check i will open console and i'm clicking twice as you can see by the way there is an error here we will handle this i will come here and as you can see our new lat and long sorry first one is long second one is that so i can use them if i write here const long and lat from event and what was this method i will copy this okay and after this i'm gonna set my new place here set new place and lots will be this lot and long will be this long you can write here lat and that long and long but after es6 you don't need to do that because if it's same name you don't have to write second one okay so here i can write my second pop-up i will open this and here another logic if there is new place you can open this popup and right now i can indicate my new lat and long new place dot lat and near play is not long let's see right now i'm double clicking and as you can see our new pop-up perfect so to close this i want to make this new place null on close it's not gonna current place it's gonna set new place i'm clicking apps opening clicking let's refresh and one more thing here i'm taking this here and when i click as you can see it appears here but i'm seeing this part i just want to move this map here and center this popup so how i'm gonna do that as you remember when we click this it's going this function we are just passing our id right now i'm gonna pass my lat and long p dot lut and long so let's go to this function here it was just id right now it's going to be light and long also so how i'm going to center this map as you remember we have v port here our latitude longitude their centering so if i change this and write my own lat and long here it's going to center this place let's try set viewport everything inside this object will be the same that because width height and zoom they will be same we are going to change only these two properties so here latitude will be new lat and longitude will be long let's see i'm taking this here i'm clicking perfect but it's really fast i can arrange them let's go to our map here if i write here transition duration and let's make it 200 milliseconds as you can see it's a little bit slow when i move it i'm clicking okay it's better if you make it really long time let's say one second when you click it's better but when you move around this map as you can see it's i don't know some people like this but for me i will go with just 200. i have some so far so good so let's create our form here it was just hello i will create a d first and inside i will say form and again label title review and rating and after that it's gonna be a button let's say add pin okay i will say here class name submit button and type will be submit here i can create input and i will give placeholder here enter [Music] a title for this review is going to be text area because it can be a little bit longer again placeholder say uh something about this place and for rating it's going to be select here and inside there will be five option option one value will be one and i will duplicate this two three okay let's see something like that it's taking this css because of label as you remember we already used this here okay let's arrange this i'll say form 250 250 and again display flex flex direction column and i will say justify content space between okay it's better and here for input i will say border none just bottom border one pixel solid and gray something like that and for this placeholder i can reduce this font size input placeholder and also for text area placeholder on size i will say 12 pixels and color will be grey but lighter something like that let's see maybe too much okay awesome and i will do same thing for text area it's gonna be only bottom okay and for this submit button order none i will give some padding inside and border radius 5 pixels let's change color text color will be white and background color will be tomato okay cool i will make this cursor pointer it looks nice so what i'm gonna do here i will create new use states it's gonna be title description and rating and for rating first it can be zero and others will be now you can use use ref also as we did before in our designs but right now it's just small application i will just leave it doesn't matter so here for title i will say on change and i'm gonna set my title i will take this event and e target dot value so whatever we write inside this input it's going to change our title let's copy this for description and for rating it's gonna be rating okay so i can submit this one i will say on submit and i will create new function here i will say handle submit i will create here constantly submits it's gonna take e arrow function right now if i submit it's gonna refresh the page to prevent this i'm writing here prevent default it's not gonna refresh page anymore and after that i will say const new pin username will be current user we have here we don't have login system but we have current user here and title i'm not writing again title as i said before and description and rating by the way it's not user it's username and after that let's remember when we click somewhere we are taking new lat along here what was that it was new place dot lat and one more long okay so we created new object here after that we are going to send this to back end to do that i will write here try and catch block arrow i will cancel log this error and here i will say const response and await i will say axios it's gonna be post method and my url here it's again pins and after that i'm gonna pass my new pin here it warns us because we didn't write here async function okay so after creation i'm gonna add this inside my map i will say set pins and everything inside pins will be the same but i will add one more pin here it's going to be response and data so one more thing after creation i don't want to see this form anymore so i will write here set new place it's gonna be no we will not see that pop-up anymore okay let's try i will refresh so let's choose here somewhere good and i will say for let's check our db i will refresh as you can see it's here from john because our current user somewhere description and rating now so if i refresh page it's going to be still here i'm clicking am i waiting here i have some but as you remember it was 4 star let's arrange that i will go to stars i will delete them i will just copy one inside jsx we can't use 4 and say here start from 0 and if it's smaller than 5 i can't do that so instead i'm gonna use array and i will take this rating from our pin rating and i will say fill and i will paste this component let's see as you can see it's four right now let's look at here it's five awesome it can be a little bit confusing is just take this number as an array and fill with this component which means write this component four times okay so it's really nice let's change this current user and add some more i'll say suffact okay let's come here and choose maybe somewhere here see site okay i will choose because and here title and rating 5 stars i will add pin okay but as you can see our icon is here but i clicked here it's not exactly showing what i choose so i will go to code editor and here marker and here is offset left and top as you remember we just multiplied by 7 this zoom i will copy and here it's gonna be minus v port zoom multiplied by 7 and here i will do the same thing but this time it's gonna be half because this part will be center of the width so i will say three and half let's see right now as you can see it's totally centered perfect okay let's continue with seaside i have some beaches and here i will say camera and awesome beach and cheap holiday okay let's give five stars also let's go to poland and here krakow cheap beer nice people i will give five okay something like that so right now i can add login and register page here so i will go to handle to component and here i'm gonna create three buttons [Music] it's gonna be logout login and register let's give class name first one will be common class name just button and second one logout i will copy this and here it's gonna be login and register let's go to css here i will say button border none and padding 5 pixels for the radius 5 pixels and text color will be white and i will give specific background color for log out background color it's gonna be tomato i will make two more it's gonna be login and register i will make this tail and last one slate blue let's see let's check these class names okay they are not capital okay something like that so right now i'm gonna move them here this lockout will be alone and i will create here due it's gonna contain login and register and class name i will say buttons and for these buttons and logout i will say position absolute top will be 10 pixels and right will be 10 pixels like that we can't see logout because it's here under register so i should write here a logic i will say if there is a current user use some components here if there is no use other one so what i'm gonna write here if there is a current user we can only logout i will take this here if there is no user i should see these buttons i will delete this of course so let's see as you can see right now we see only logout i will give cursor pointer for these buttons okay right now i'm gonna change this current user it's gonna be use statehook current user and set current user i will say use state in the initial state it's going to be null we are going to change this later because we are going to take from our local storage for now null is okay let's come here source i will create new folder i will say components and inside new file login.jsx or js doesn't matter but i recommend you to use jsx jsx okay i can create my css files also register dot css i actually always create new folder like login and inside css and jsx file then register but it's really small application just two components so we don't need them so i will close everything here and open this login maybe register first okay right now i'm gonna create my function here and we don't need to react here because after react 17 we don't need writing here so i will call my css file i will say register those css it's going to be our container class name register container and inside it's going to be logo div logo and after that i will create my form no action inside i'm gonna create three input first one will be username that's right here placeholder username and here it's going to be email type and placeholder email and last one will be password and placeholder password after that i'm going to create a button i will say register okay let's add this in our application i'm going to handoff to component and here i will say register it's here so i will make this absolute position and i'm gonna center here let's go to register css i will take this here so i can write my container with 300 height 250 and i will give some padding inside and border radius 10 pixels and background color will be white oops let's see for now like that and position absolute to center this i will say top zero bottom zero left and right zero and if i say here margin auto it's going to be centered yep but i will center everything inside this container to do that i will write your display flags align item center of course it should be column display flex flex direction column let's see okay i'm gonna add here a logo and i will separate this logo and this form i will say justify content space between okay let's create this logo inside this i will use material ui again it's going to be room and after that i will write here lama pin let's use this class name for logo i will say everything inside will be slight blue like that i will make this display flakes again and center them okay i will change this font weight phone trade 700 okay awesome so i can change this button did we give any class name no let's give register button again boulder known padding five border radius again five let's change color and background color slate blue so i can add here some success or failure text i will go to register and after button i will say span and it's going to be success successful you can log in now and one more it's gonna be error i will say something went wrong and it's going to be failure okay let's arrange them success will be color green and font size will be 12 and for failure right now it's going to be red so i can center them text align center okay so i will create here use state and i'm gonna decide do we have success or error i will say const success and set success and for initial state i'll use use state and here false and one more it's gonna be oops typo i will make it fail or error let's close this it's almost end of the tutorial but just came my mind right now and i will shrink this okay and here i will say if there is a success use this one if there is a error use this one right now we don't have anything if i make this true it's gonna be just successful so it works so what i'm gonna do here is remember we used use state for these inputs right now let's create refs and you can see them also how to use udref i will say const for user name name and i'll say use rev and for email and password email and password so right now i can use these references here for these inputs i will say ref name ref for email email ref and password draft so whenever we change these inputs these drafts will be changed so we will be able to use them so here for on submit i will say handle submit let's copy this and here comes handle submit it's gonna be e remember what we are doing when we sign something we are saying e dot prevent default so it's not going to refresh the page and after that i will create new user here cons new user and it's going to be an object and here username so right now i can use this name ref name ref i will say current and value that's all i will do the same thing for others email email ref and here passwords okay so right now i can use axios i will make this async function and here try and catch error i will console.log actually i will set this error it's going to be true and inside try i will say const response equals axios before await axios and it's gonna be post method and i will use users url and i'm gonna pass my new user okay and after that i will set success set success it's gonna be true actually we are not going to be using this address we don't need that okay by the way if there is a error and we try again error will stay here so i will delete this in any case i will say set error it's gonna be false okay let's try i'm gonna say alum and lmgmail.com one two three four five six and register something went wrong now i forgot again register but it was a good example to see this error so again i'm clicking successful you can log in now so i should close this i will add here a cancel button so at the ending let's check for this cancel button i will say cancel okay it's same name so i can use it after this form i will say cancel and import from material ui as you can see it's here and i'm gonna give a class name and register cancel let's use it here i will say position absolute and top five write five let's see as you can see it's here i will give cursor pointer and for this button also this register button you forgot this okay and here perfect so when i click this it's gonna close i will go to app.js and one more use state here i'm gonna say show register and actually we can do for login also show login and at the beginning they will be false and here for login button i will say on click i'm gonna set this state set show login it's gonna be true and for register i will say show register and here i will say if show register if it's true you can show this register component and for the same thing for login i should import this oops okay let's import here okay right now i'm clicking register it shows up so how i'm going to close this i'm going to pass this set state i will copy this and for register i will pass and for login so how i'm gonna use this i will take this as prop and right now i can use it let's go to cancel and on click i'm gonna make this state false let's do that set show register it's going to be false i'm clicking navs so i want to separate these buttons let's go to app css and for login i will say marginright 10 okay it's better so i can close it we finished our register page and let's do the same thing for login i will actually copy and paste and here i will change function name will be and it's going to be show login after that there will be no success because we will open home page as soon as we have success so we don't need email also okay that's right here login container and i will delete this email and success and i will say login cancel set show login and here i will say login button and login let's copy this css and for login css i will paste it's gonna be logging container and logo i will make this still i will change color and for button till and name there is no success and login cancel will be the same let's see i'm clicking it's here what's wrong ah it's still register it should be login css okay awesome maybe i can reduce this height it's long i will say 200 okay it's better i will close and open okay awesome and here it's gonna be login i will say not new user just say user okay let's try i will write here wrong it's gonna be error here so what if i enter correctly right now we are going to be using local storage i'm opening my console it's our error here and i will open here application as you can see our map library already stored something here it's storing plus success token or something like that so right now we are gonna store our username to do that i will go to fjs and here i will create here storage local storage i will say const my storage and it's gonna be window dot local storage what i will do i will send this local storage to login okay i will take this prop so after creation i will say my storage and set item first is gonna be name it's gonna be our key and then we will assign this value i will say user and it's gonna be our username how i'm gonna get this username i will say here const res as you remember it returns as a response and it contains user id and username so i will take this username i will say res dot data dot username so let's try i will log in and chain one two three four five six and login as you can see user nj and after login process i should close it and at the same time i should assign a current user so what should i do i will take this current user sorry set current user and signed login so i can take this probe also i will say set current user and after that i will assign this response data and username and after that i'm going to close this container we have set show login here after that i will paste and i will make this false so let's try login okay this warning because it's just one two three four something like that as you can see we have user here so how i'm gonna log out i will go to application i will go to logout here and i will say on click and it's going to be handle logout let's come here and const handle logout arrow function and here i can use my storage again i will copy this and here right now we are not gonna set anything instead we are gonna remove i will say remove item and which key we are gonna delete this user so i will write here user and also i will delete current user it's gonna be null okay let's try i'm gonna refresh okay i deleted this and i will refresh login chain man23456 login as you can see log out a user and i'm clicking logout it delays here and here there is an error oops i write here current user it should be set current user okay again chain password login and logout apps it works register llama mama gmail.com two llama123 register successful you can log in now okay i will login llama let's write here something wrong login there is an error i will write here lamar123 and login apps so i will refresh page okay it's not here because our current user is null instead of now i will say my storage and get item it's going to be user so whenever we refresh page it's going to take user from local storage and assign as a current user awesome it's still here i will refresh perfect let's add here something in spain almeria i really miss his sight i think almeria and beautiful five and add pin okay right now it's red i mean tomato because it's our and others are purple awesome so we finished this project i hope you enjoyed if you learned something new please like the video and subscribe the channel and by the way i would be appreciated if you join our facebook group it's new you can ask your questions there or get inspiration from another users or from me so that's all i hope i will see you in the next video goodbye

Channel: Lama Dev

Views: 34,096

Keywords: react, react js, react course, mern, mongodb, node js, react node, react project, react app, mern stack, full stack app, map box, react map, react hooks, travel app, location app, map pin app, express, mern stack projects, lama dev, google maps, axios, material ui

Id: 9oEQvI7K-rA

Length: 118min 2sec (7082 seconds)

Published: Wed Apr 21 2021