{ 🌱 } Chill Stream - Working on a full stack mapbox app with FeathersJS and react / hooks! PART 1

[Music] hello friends welcome to coding garden with CJ welcome to build a full-stack app with feathers J s and react plus hooks you might be noticing I'm wearing the new logo t-shirt I also have a mug yes today we're gonna build an app actually don't know exactly what we're going to build because we're gonna figure that out but first let's say hello to all the people in the chat hello Shan tanu welcome to the stream Raul is excited about feathers hello ro welcome hello Bryan welcome to the stream hello Kenan yes and if you look in the chat I shared a link to where you can submit ideas for what I should build but essentially it should have some real-time aspect and I want to include maps in it as well so what do you think hello from bed says bohon welcome bohon hello jaan welcome hello Danielle hello Stacey hello much uh I see killer YT is asking why react instead of you mainly because it's popular and the the other reason the reason I'm deciding to use maps in it is well because that's also really popular there's a video I made over a year ago and it still just constantly gets views and it's just reactive list maps so that's what we're gonna do today people like react and I write react every day and I want to build something that I want to build and react so that's we're gonna do hello Andrew Lane welcome to the stream hello I'm on who agrees it should be a react app again check the chat there's a link to submit ideas hello Brooks welcome Aman is asking is feathers a framework like express so you can think of feathers as a collection of nodejs modules including things like Express and also some ideas sprinkled on top on how you should structure your app and how you like write your app but I would say it's kind of built on top of Express we will be using Express I'll see that hello in fee who says I have no idea about react and I'm probably not the only one so be sure to explain the advance stuff oh absolutely yeah we're gonna we're gonna go from the basics I mean we're gonna write the app but I'll explain everything as I go and if you have any questions feel free to ask yep yeah I see Hiller says its back into a stick so in the most recent release of feathers v3 they actually reaaargh attempted it it used to be fairly coupled with Express but now it is no longer I don't know if the other plugins exist but essentially Express is the package you use to allow your feathers app to be accessed accessed over rest however it may exist or it may be coming soon you'll be able to use things like koa or happy instead of Express so that's why it says it's it's agnostic and it's also database agnostic which I'll show because we can choose pretty much any database we want I'm probably gonna use because then we can say we're doing the myrn stack people like that to come on this has been a while but I've reworked the whole Channel all right yeah so I got I got this this new logo the new intro yeah hello energy who actually made it matcha says nice merch thank you let me know if for some of you if you look below the YouTube video is it advertising these t-shirts because it should be and they're pretty cheap this the shirt 14 bucks you get a short sleeve 111 bucks I make like 20 percent profit on it so if you want a sport coating Garden logo please do hello Matt Sean and welcome to the stream hello Gabriel hello abdelhamid um let's see what Fe has to say so you can think of feathers like that expresses like making sequel queries and the CLI and feathers is like sequel eyes feathers uses Express but it makes it easier that's a good way to think about it yeah good analogy hello with the frost shade from Morocco it's 137 a.m. well welcome hope you get some sleep soon or eventually s ELISA CJ is an excellent teacher in program or build a crud with some Asura or something real full stack appreciate that we are gonna use offs because we're using feathers and it has it built in so we'll do that hello Jacob welcome to the stream abdelhamid said is there cross-site scripting in your YouTube chat manager no there's not it's because I'm using view which automatically escapes inputs even so yeah it's not you can try and actually YouTube will stop you because youtube doesn't let you so comments that have less than or greater than signs in it so yeah hello Amata welcome to the stream hello John who says what a nice surprise finding the stream welcome young says love your live coding tutorials I appreciate that Keaton is sitting I don't see any ad do you have an ad blocker on if you do it that's fine leave it on but for those of you that don't have an ad blocker on you might see some t-shirts for so below below the video hello Felix Brian says hello CJ hello Brian who says I got a job as a developer and no didn't react it was possible thanks to your tutorials that is awesome and great to hear and congratulations that's awesome I'm Dale who made is asking what is the URL of my store let's figure it out so if we go to the video that's happening right now that t-shirt actually I think it might literally be teespring calm slash coding - garden yeah here it is teespring calm slash store slash coding garden look at all this wonderful merch you can buy I will say I literally get like 20 cents from anything that you decide to buy so if you buy it you're only kind of supporting me if you so I really say buy it if you if you want to like rock the the coding garden logo that's what I'll say but if you're looking for other ways to support me om fee does have a [Music] maybe because you're a trusted user I know and know I know it has blocked people from from using less than and greater than before but better ways to support me are through patreon or direct donations but if you do want some merch check out this you can also check out March on red bubble comm and again I get like 10 26 from from every sale so it's really only if you want to rock this awesome merch oh and new new stickers on red bubble I uploaded the CJ emojis I am gonna order some of these I'm just waiting for my other red bubble order to come in because I ordered a bunch of stickers because I just want to make sure that it they cut them in the right way cuz I've ordered sticker packs like this before and sometimes but sometimes red bubble doesn't cut them the right way but if you search for coating garden on red bubble you'll see stickers and then if you go in and click my name you'll see all of the other stuff that have up there too cool awesome Young says anyone interested in Gatsby Jess I should probably look into it at some point I haven't built anything with it John says I would love to see you kick the tires of the.net core it's a lovely place to be these days cross-platform open-source and fast so my my first job in industry was doing c-sharp net and pretty much like right when I left that industry and started doing full-stack JavaScript is when they open sourced asp.net core I was actually at the Microsoft build conference where onder's clicked the make public button on the asp.net core source but yeah yeah so here we go everyone is trying to cross-site script it's curious that it's letting you cuz it didn't used to hello Rolando he says hello CJ you're great Thank You Rhonda Oh a Koi is saying you'll see the t-shirt ads if you close the chat that's good to know Amana Singh a possible react native app in the future maybe motivation maxed-out says yes i managed to do my groceries and come back in time for super and watch CJ welcome that's some hot merch thanks Danielle yeah so how YouTube is letting these less-than or greater-than signs I don't know why but as you can see it's not trying to render that so I'm not vulnerable to it [Music] cat is saying I only get 20 cents per shirt is because I set it that way so on T spring you can set how much profit you want to make and I wanted to make the t-shirts as cheap as possible so I put the lowest amount of profit and that created an $11 t-shirt which i think is awesome yeah because you can get this shirt for 11 bucks you yeah I don't admit I don't know if it is trusted users I really don't know why you all are able to sit in less than and greater than signs like even mods didn't used to be able to do that yeah super weird okay I'll send this link one more time but you can go to this URL and submit an idea for for what I should build because I don't know what I'm going to build so I know the technology I'm going to use but I kind of need an app idea so we need to decide what to build it should include some sort of real-time aspect and it should include a map those are the only constraints we have right now so we have a Pokemon go app maybe a GPS based game that's interesting an app like door - so door - is food delivery it'd be interesting what we would do with that I don't know what we would be delivering we could make it like a fake food delivery service but yeah interesting live streaming video and real-time video chat that's a little too complex and I don't know how it would involve a map exactly Andrea's saying I'd like to see the front end of the chat app you are making I mean this is the chat app it needs work this absolutely needs work but this is it and the code is on github if you go to the coding garden github organization you'll see the code for this it's called live chat manager it's pretty basic right now where is the ISS right now I kind of like that so the ISS is the International Space Station and I think they have an API which will tell you it's I think it's coordinates above Earth International Space Station current location you there it is had a to longitude that would be cool we could have a map and it could show the space station moving across it in real time this doesn't involve really any sort of like login or anything like that but I think that's ok we could still make use of react and hooks and then on the back end the back end would essentially turn this API which is not a real-time API because it's just a one in done request because you make the request and you get it back and then you have to make it again and looking at the docs it says pol rate so please note that there is an inherent uncertainty a single client should try and keep pulling to about once every five seconds so what we could do on the backend we could have a feathers jazz service that hits this endpoint every five seconds and then once it has an updated value it'll emit that to any client that's on the webpage so that's that's doable I like that idea because it's it's doable in like a couple of hours this doesn't have to turn into a multi multi episode stream yeah video uploading and streaming I think that's just it's just too much we could do it but I would want to I would want to plan it out we'd have to figure out like what services we're gonna use for a hosting and streaming but yeah Jacobs saying a simple RPG so um it's not real time strategy what is a role-playing game a simple role-playing game is a different kind of app with the stack so some sort of role-playing game where you're on a map and there's some real-time aspect that's that's another interesting one I like that live feed of emojis used in tweets and displayed on a map that's also a cool idea so I think I feel like there was an API so when Tony and I built the save the emojis gorg maybe that's is it just saved emojis dashes there it is Tony and I made this website a while back but to go to the stats page this actually reaches out to an API and it that API tells you the the occur the frequency of a given emoji in Twitter tweets and part of save the emojis is we got the tweet the the emojis that are lis used the least and we're showing them here so that you should use those emojis but which means there's a oh yeah there it is on the right left hand side emoji tracker calm epilepsy warning epilepsy warning if you have epilepsy look away from the screen but this is essentially real-time updating of tweets on Twitter account of the number of emoji uses I don't think this has location data but maybe we could get it I don't know let's see you private social media site that enables all of coding garden subs to login into your ideas and topics this is actually in progress I would say this is kind of like the coding garden community app that's being built that's like a future version where people can log in and it'll be like a forum but that's that's in the works an online marketplace like Fiverr maybe something where people can claim sections of a map and somehow like gems and pokemons go so I'm not totally familiar with the gameplay and pokemons go but yeah we could come up with some sort of game where like you draw a square on a map and you have that your actual location has to be within the map and then you get points maybe like a capture the flag kind of thing I don't know something you can use to set up or locate local coding meetups sort of like a look looking for group app coders can specify a meeting place a time in a language that's also an interesting idea so I use meetup calm and that's where my L the info about my meetup is hosted the one that I host nimber UJS meetup but if you search for meetups I don't think it shows them on a map so that could be an interesting view because we could say okay we want ten miles within Denver that our tech meetups all coming events that match that and so look at all the events happening tomorrow night I guess they're not many tonight but then for any given event if you go to it it does have an Associated location here so we could actually have a map that has all of the events upcoming on it I like that I just don't know how real time it could be like it it could essentially auto update the map as new events get added but you won't really see the real-time aspect on it Josh is saying make the chat manager with feathers but I want to use a map I want to use a map a real-time app that displays snapchat like short videos of people saying I can't see it hello friends around the world that's cool too so unlike literally on the map well like you say like record my video it then uploads it and puts a dot on the map and you can click it and see that person saying hello friends that's also really cool but I did build the guest map which kind of I mean it doesn't you can't upload a video but there have been thousands of people that have gone to this website it takes a second to load because the backend has to spin up but lots of people have gone to this site and added a message with their location and once it loads we'll see all the dots on the map cool let's catch up on the chest if anybody has any interesting thoughts or ideas on this Bowman is saying shipping to Europe would be an additional $20 well it's also I think like teespring has I believe they have Europe based manufacturers because I also got to set the price in Euros as well so you should you should see I don't know if I'm oh hello Josh welcome to the stream you okay yeah I was a little compelled dinner supper before so I said super but yes motivation maxed out made it back home for supper so that they can watch coding carding with CJ that's cool and she says I meant the front end of the feathers J s chat at oh yeah I still need to do that but I wanted to do something else for now yes hello harsh welcome to the stream young is saying some sort of local social web app John says real-time lightning strikes with emoji ooh lightning strike API does that exist Aries weather the Lightning API endpoint revised access to global lightning strike data up to 250 lightning strikes can be retrieved in a single query please note use the Skip parameter will pull the next 250 strikes that's cool in fees saying how about a very simple text chat only discord clone yeah but I wanted to have a map on it I guess it doesn't need to have a map on it we could do without yeah hello Sean welcome to the stream much uh yeah is that where the tractor emoji came from yes because at the time when we made the save the emojis website the tractor emoji was a very under equals the most underused emoji so we we wanted to up the stats by using the tractor emoji more yeah okay Danielle was saying was thinking for doing on like on-the-go on-the-spot meetups like a flash mob for coding so you just you're at a place you say it's happening here now and then anybody that's looking at the app will see the thing pop-up and they can go to that place interesting idea yeah so hey at this coffee shop at this location come join me hello David welcome to the stream hello Omar Kenan sink for the door - app I made an app for a merchant delivery service live orders and driver driving to the customer yeah so yeah it doesn't have to necessarily be food it could be really any kind of delivery yeah so a map is in Google Maps similar to this yeah and here it is with all the dots on it so I built this one a while back but essentially every dot on the map is just someone that dropped in and said hello in Canada there is a fanatic swimmer in the middle of the ocean they probably spoofed their location so I want to build something like this but real time enabled yes Kevin is asking what are we building I don't know we're trying to figure that out so if you scroll up in the chat there's a link to this poll you can submit ideas if you have them I want to make sure that I'm not missing any incoming ideas okay how about this I hope I don't hurt any feelings but I'm going to archive the ones that I don't think that I want to do today it doesn't mean it's a bad idea it just means that it's not something that I want to do okay so live-streaming gonna call that out maybe something pokemons go we'll figure that out an uber clone that shows cars moving in real time on a map yeah web scraping a website and feathers but how would you do that in real I mean we could scrape the data to show on a map potentially yeah interesting I'd like to see the front end of the chat app you're making oh yes and that's what your comment was incoming not today but soon where's the ISS that was a good idea yeah we're not gonna do a video uploading a live feed of emojis using tweets displayed on a map this one will kind of only work if we can find location data about those tweets as I mentioned this idea is very similar to the coding card coding garden community app an online marketplace similar to fiber but how do we put it on a map and how is it real-time it's an engine like all of these like I said they're cool ideas but not necessarily something I want to do today yeah claim a section of a map that's an interesting idea yeah I guess we could do something this idea which is similar to the video idea but you pick a point on a map take a picture and then it puts a dot on the map and you can see that picture that would be interesting you not gonna do it though locating meetups and it is a good idea Josh to make the chat manager with feathers maybe I'll do it not to not today but one day yeah there's the showing short video is on the map I'm a basic GPS app so tracking position and counting distance yeah it would be it would be hard to test though or in because like I mean it's not gonna be a mobile app it would be it could be web-based it could still work on a phone because it could have access to location but in terms of me building and testing it right now I can't really move very far so we wouldn't get very good GPS data yeah we'll check out the API directory an app that shows the quality of life data for a city yeah I've seen uh I think it's called like nomads or digital nomads or something like that maybe this is the one move to your best place to live and work I want low income tax clean air and water cultural activities low crime near the mountains find a job remote work car free less traffic all right show me my cities yeah this is too much I don't do that yeah what happens if I just search for Denver Denver Colorado that's cool well where's the real-time aspect we need real-time split the world into squares and generate a three-word address for each given square doesn't have to be that many squares at development stage and so I think this is for the like the kind of like the pokemons go on or not the someone mentioned about like Jim's so you essentially could like claim an area on the map interesting maybe elaborate on that in the chat map of typescript using usage Kappa no crime report yeah that could work too so if someone reports a crime it like instantly pops up on the map Instagram but on a map instead of a feed that could be cool yeah I need a fight I would need to find an image hosting service I guess firebase offers a free one but then if too many people start using it I'll start getting charged for their image uploads we could use imager and I'm an innocent imager yeah imager image uploads because those are free so may maybe just maybe yeah so you take a picture and then it just puts it out on the map I kind of like this one I kind of do which is very similar to what other people mentioned about like it's similar to the snapchat one but instead it's just images let's do that oh we could make a just like a dashboard that has weather news calendar you could call an uber that's pretty cool too a PV birth report up like as babies are born something pops up on the map a risk game using Google Maps with CJ versus someone else and viewers join as an army that is intense without that would be cool it would technically use a map and it could be real-time I don't really know the game of Risk though I know that you're trying to take over certain territories yeah trying to keep this simple Brooks ruled time old words visualization like World War one or two I want to do something peaceful exercise tracker don't know how a map would be involved distance between two point selected like a flight duration calculator yes but where is the real-time Twitter on a map no images to worry about I mean it's kind it's very similar to the guest map that I built where'd the tab go the only thing is instead of saying hello to me you're like saying hello to the world okay let's catch up on the chat yeah and that was snails idea it's a cool one just like a general dashboard Bohan is saying who is populating the database with lightning strikes around the world somebody somebody's got to do it a meteorologist I suppose Joshua's saying people can submit hey I went there and did this this is why you should do it is that the Instagram on a map I'm leaning towards that idea maybe people vote on it but I'm leaning towards that idea what about a leaflet open source map that's what I built that let me pull it up again guess map that's why I built this one with leaflet so I might use leaflet but we do have to decide on the mapping technology for sure John says thinking of app ideas is hard it absolutely is yeah the link to submit ideas Josh got it Thank You Josh the capturing thing could be like a live capture the flag type game or a king of the hill yeah so like you you partition out parts of the map and you get points for being in a particular part of the map the person that's been there long the longest is the king of the king of that part of the map then when somebody else comes into that part of the map yeah I mean it's kind of like capture the flag where it's like no one's gaining points at that point I don't know the thing about this though is it's really hard to like demo without like faking location data whereas like the image upload if I get this thing working then I can put the link out there and then everybody watching at least a few of you could maybe take a picture upload it and it could show up on the map that could also result in some very weird pictures look if I want to do that yeah yeah so we're trying to figure out what to do trying to figure it out I could use firebase cloud functions to purge old ones when you run out of space yeah I mean maybe what if what if it's like ephemeral images so like you can take you take a picture you upload it it puts it on the map but that picture only stays there for a set amount of time and then it just gets deleted and lost to the world yeah a game where players plant a plant and implement some mechanism of growing like incremental games interesting would you plant it on a map No yeah no no worries behind plus one for the dashboard idea 100th chat message there you go from abdelhamid what about an app I can tell the community I need something from somewhere and someone from the community can chat with me and make this service for be also a payment for that like stripe yeah this is kind of like it's called TaskRabbit yeah connects you to safe and reliable help in your yeah the convenient and affordable way to get things done around the home so yes maybe may not be exactly what you're thinking of but it would be interesting to build essentially someone posts a request for something like I don't know I need you to mount my TV ready to book right now when I go to my old work location this is not where I live don't worry one our task paying a 55 inch TV see tasker's and prices look at that Paul will hang my TV for $80 what if I do within three days interesting yeah I don't know if there's like a map view but this this is kind of like that where you just you just request the thing that you want and then people can say that they might do that that would be interesting to build cuz it would be I don't know I kind of like that idea too yeah a social network driven by blockchain I'm not gonna do with anything with blockchain today snapchat for maps map chat yes because that's the ephemeral idea so once you take the picture it only you know it only stay around maybe maybe so it maybe it stays around for a certain amount of time or maybe it disappears after a certain number of people have viewed it hmm I like this I think I think we're going down a very interesting path I like it so image stays for one hour and then poof people can comment as well on the image yeah yeah motivation says as a project you could make an airplane traffic game with a real-time map where everything moves every second so there's like airplanes flying on the map yeah snag map leaked snap map with a dota 2 map it's a heady dollars because he'll mount the TV we're like wearing a suit yeah that's great if you we were on task rabbit and the guy was wearing a suit I think it's because it's short notice but yeah if one person views it goes okay I you know what I don't even like we're not I'm gonna vote I've been streaming for already 30 minutes we need to just build this thing this is what we're gonna do we're gonna do we're gonna build a map where users can first sign up and then post an image at their current location it'll show up on the map and then that thing will disappear after a set amount of time or a set amount of views I think that's what we're gonna do and oh and what if you can only view the image if you're at that location because then then it kind of becomes like a like a real-world thing where if you want to see that image you have to go to that location yeah a snapchat with respect to privacy well for showing location information it's not really respecting people's privacy that's a good point like random like slightly skew it like put it off by like a hundred meters or so so that way it's not exact yeah Mohan calm down please don't do that you're gonna get me demonetised realtime games match making you poster requests ins pop up on the map yeah that's similar to the the TaskRabbit thing okay I think we're going we're going with snapchat we're going with snapchat I'm gonna end this now and I appreciate that you everyone that submitted an idea it was great but we're gonna do it Reynolds we're gonna build map chat snapchat I think map chat an online based discussion tool that allows multiple people to interact with a common map well their website isn't very cool you a super simple location-based chat I don't know help me come help me come up with names I'm going to create a new idea topic let's delete this what should we name this snapchat plus map app go okay it should be at the same euro you submit your ideas now I'm not showing like an admin code here am i hopefully not please don't hack my my poll thank you Thank You Josh snap Matt that's yeah that's think that's great that's super easy okay so while you all are suggesting what you all are suggesting app names I will get this cholesky like a to-do list going yeah let's let's throw in some of these ideas that people had so randomized the location yeah let's see location scavenger hunt I feel like this could be like that because if you make it so that you have to go to that location to see that image it's kind of like a scavenger hunt though that's a totally separate app idea like what if you have different weight points on the map that you have to go to as part of the scavenger hunt hmm tinder Maps geo is snap oh that's a good one submit did you submit it over here you chat lists geo gram geo snap cool map yak which is I guess like kayak matcha says you're welcome for I don't know okay but let's let's get this let's get this go let's make it to do list so we've decided what to build we are going to build maps plus snapchat and a quick description of what this is is posts and image at your approximate location the image will disappear after a set time after it has been viewed x times we can come up with other things so post an image at your approximate location and then the image will disappear I spelled that wrong did disappear disappear disappear disappear help me oh well yeah so it will go away image will go away / delete after I set time or after it is been viewed x times what else I think that's pretty much it so this app will have login and we'll use some sort of social off probably see you I guess we'll use let's use github because most people here have a github account like we could use something else but still need login you then need a map view with current location and then we need to be able to add an image at current location and in doing that specify settings yeah this is basically the app that we're gonna build we're gonna do it today I'm not gonna stop streaming till it's done within X distance to view the image I like it because you could you could set it as a thousand mile radius and then if somebody is within a thousand miles of your image they can actually view it so yeah I like that snap-snap Matt remove exif data for privacy reasons that is a great call thank you this is from John Smith and if you're not familiar exif data is all the metadata that your camera adds to an image whenever it takes the image and if you take it on a phone a lot of times people have location enabled and the image will actually have the latitude/longitude embedded inside of it which would negate the point of somewhat randomizing their location so that's a good call John disappear to peace oh oh oh thank you 1s2 peace I could have looked that up you yes I think we'll use image or upload I've done it before and they also allow like or at least they used to allow anonymous upload so you actually I don't have to have like a client ID I think we'll use imager because then there are gonna be like any data caps or anything like that and it's being stored on image or server I think that's the way to go I'm not saying let's use Google+ I like that and it's easy so in terms of social off github or Google it's gonna be one of those two I don't want to use Facebook we probably could use Twitter but yeah we'll see Joshua was saying you can make it so only full accounts can submit an image kind of to prove of an authenticity of the user and add accountability just in case yeah I think I mean I think the app is gonna require login so even to even be able to view any of it you have to be logged in and then I mean I don't know if we'd build this in now but there's got to be some way of [Music] giving a particular user credibility so that we know that they have they post trusted images in feeding discord has the worst social off ever hello Willie lump lump welcome Zuzu is this a name for the app Zuzu yes we can set up a radius from one mile to five thousand I like it so that way you could post something and someone in another country could potentially look at the image if they're if they're within your radius so the damage will disappear can be viewed at set radius yeah I like it tomorrow saying using use already a I to detective the photo posted does not contain any nudes or violence that's not a bad idea I would have to find an API to do that but I like what I like I like where your head's at because I'm sure somebody's done it he's hello hey Zeus is saying we could add the allow the user to select how much you should randomize the location like min 100 meters but from there you have to select up to annex distance I like I like it so allow the user to select how much they should randomize location motivation is asking how do you remove picture metadata making it something like a new photo kind of like when you crop another photo it's that's that's one way to do it because if you crop a photo you're technically generating a new image and then they would have no exif data in it I believe there's actually a JavaScript library which will strip XF data inside of the browser so we might do that and you know what the imager API might actually strip all of the exif data anyways we can check okay Josh was saying only if step users that have fooled certain fields in their account provider yeah so if we do sign up with Google well I think Google you have to have a first in the last name and we could require that we pull in the email as well yeah so I like this so this is just in terms of like validating trusted users Suzu as the name of the app Zuzu hello Mike welcome to the stream Image shall be able to be captioned with markdown with a high character of limit yeah so you can kind of do a text post along with the image but you write your stuff in markdown I like it so instead of just posting an image it's a little bit like a story like a mini a mini blogpost Instagram might have an open API for photo checking Instagram photo what's the word I'm looking for raiding photo raiding API you photo type detection I'm really trying to avoid searching for the word nude well there's the cloud vision API detect image properties dominant color what else can it detect that's pretty cool well we'll keep that one Andriy hello Andrea saying why not make a log frequency analyzer on Web Audio API because today we are focusing on real-time and maps with feathers and react Brix is saying otherwise images might end up sideways yes so we had that issue there were some images for the bar choir app that we built recently and the exif data inside of them actually specified a rotation so when you looked at them directly in the browser they looked fine but if you loaded them into an image element they would rotate 90 degrees and that was because of the XF data which is interesting hello eyes welcome to the stream at a karma oh I kind of like this yeah so like I mean it's kind of sad if just like an image disappears but if an image has a high number of up votes maybe it sticks around for longer yeah I like that image profanity thank thanks for the search come on image moderation profanity filter and video moderation api's web purify comm photo moderation whether it's live it's live people or the latest in a 8ai technology so or start a 100 photo free trial filtering inappropriate content with the cloud vision API get a $300 free credit to spend over 12 months that is avocado toast adult is very unlikely and violence is very unlikely so that's interesting maybe what maybe we'll use that I I consider it kind of a stretch goal maybe maybe it'll be required I don't think I don't know you yeah it floated up by a viewer it stays otherwise it disappears when it hits zero and that's kind of what read it does there's like an algorithm based on number of up votes and time posted and eventually like it disappears from the front page but yeah yeah discord detects it yeah we're just not doing the Web Audio API mainly just full stack apps for now but I trust you but I also don't want to pull it up on stream upload filter Daioh has a filter thing okay so let's well look at this and then we gotta we gotta make a plan we got to build this app hey get started for free pricing twenty five hundred requests per month that's pretty cool okay well well hold on we'll hold on to these things because we we gotta build the app first okay what do we call it five up votes for chat the only thing is slide Oh doesn't do IP duplication checking so we're gonna do this we're gonna go to straw poll I know I said we were gonna build the app but we need a name for the app before we can build the app so chap has five up votes we have map my snap I don't want to get snood bison hopefully get sued by snapchat though we'll see snap map Geo gram a Geo snap smack chalice snap garden that's pretty cool because it's like the coating garden snap world there's so many ideas John I don't call it John tender map would probably have a copyright issue or whatever Tara Matt snappy MCMAP face oh how about Matt be Nick Matt mappy MCMAP face yeah geo chat is that on there no geo chat alright pull is over well that that pole is over now we get to vote here we're gonna do I plead to F P duplication checking and improve spam prevention create the poll now all right if mappy MCMAP face wins that'll be really funny it's a reference to a boaty mcboatface I think there was an internet yeah there was a pole they put on the Internet I think and they let people vote for the name yeah although boaty mcboatface was the most popular suggestion in the name our ship pole the suggestion to use the name for the mother ship was not followed don't vote for that do not vote for that Isis asking how to stream video using a socket and a base64 image I've done something like this before it's it's it's not like video quality real-time chat or like real-time video but it is it is doable now basically what I did is I I made an app where we would take a picture with the webcam every five seconds and then that base64 image that it took is the only thing that would live on the server so it didn't save any of the past images it was just every five seconds replace the base64 image that was there and then the client could just see the latest image so it was kind of like a I don't know it's not exactly video chat but it but it is a way of like seeing on somewhat real-time image of someone else that's that has their webcam open oh yeah a decay rate algorithm per post based on views likes and comments yeah I think that's the the symbol that's the what do you call it the algorithm that reddit uses as well I don't know what's called decay decay rate but sounds like we could find something if we googled that snap my pickup Zuzu oh well you didn't submit it on the other thing sorry all right how we doing so the highest votes is snap garden interesting yeah I mean it's fitting this is the coding garden you will you envelope I don't see the link to vote in the YouTube chat is that a joke because I posted it seven times but I'll leave this up and you can go there to vote I'm gonna go I'll be right back I have a package that was supposed to be delivered I'm gonna see if it's here I'll be right back you no package mm-hmm yes go go to this URL to vote looks like snap Gardens going we'll see a package a package yes hey Zeus is mentioning you can use fixify j/s to remove exif data cool sweet oh also Willie limp lump in the chat up at the top all right anyone else that's watching if you want to see the chat that I'm shoot seeing make sure that you have live chat selected for some reason like I don't even know the purpose of top chat maybe if there's a lot of chat happening but if you click top chat which is the default sometimes you won't see messages but if you choose a live chat you'll pretty much always see the latest messages um yeah the camera tries to focus when I'm gone it's the ghost [Laughter] live unboxing of the package that would be actually I might do that that would be fun but I do need to build this app let's see what one snap garden one that's cool ten votes overall there were 31 votes YouTube says there's 72 people watching but uh that's fine snap garden I love it okay let's build it so yeah I'm gonna make a directory well yeah I'm gonna call it snap garden snap snap garden snap - garden we'll call it that for now and we're gonna have a client and a server first let's go and just generate the server after we get all the apps up and going we're gonna have to take a step back and let's just think about the data model like what kind of data is this app going to have how is it all going to relate but first let's install the latest feather CLI make sure we have the latest but we're gonna generate generate two apps will have our feathers back-end that'll be in the server folder and then we'll have our react app in the client folder cool so I should be able to do feathers generate is this going to create a folder or should I do it in an existing folder uh I think it's gonna create a folder it's call it server Oh No oh sorry feathers generate app and then the name is server we're gonna use javascript the project name is snap garden this might not create a directory if not we'll figure it out description leave it blank source folder we're gonna use NPM will do rest and real time I like you are we gonna have any test what we'll use just if we do write any tests and this app will use authentication out of the box let's do Google and no user no local off we're only going to allow users to login with a social service I said let's see let's use Google because usually they make people use their real name so that will potentially prevent people from posting sketchy things let's say that but what is the name of the entity the user entity users is good for me what database should we use we will use mongooses that looks good to me create the app and make sure that I have MongoDB installed locally should I create a docker container let me know in the chat should I create a docker container or should I just use local I've already been streaming for an hour though docker container will take I don't know 10 minutes to set up you mmm yeah everyone chatting right now has a go but literally literally anyone watching on YouTube or posting a YouTube chat has a Google account so I like that choice cool so that's there and it generated it in this folder but that's okay we're gonna do some command line foo so basically this folder that we're in I want that to be in a folder called server I'm so I'm gonna go up one directory I'm gonna move snap garden to a folder called server so now it's called server and I'm gonna make a directory called snap garden and I'm gonna move server into snap garden so now snap garden is here we go into snap garden it has a server folder cool I want this layout because I want the server that's gonna be our feathers app and then we'll have a client folder which is our reactor okay let's start up the server and p.m. run dev localhost 30 30 hey got a feathers that sweet and while we're here let's generate our react app just going to do MDX create react app we're going to call this client so we'll have a server folder and a client folder you know there's less glare if I do their face my coding garden mud you you mmm docker docker yeah I guess and maybe not exactly but I have seen Google do some checking before like if you type try to type a weird name like it won't let you yeah let's do docker we're gonna do docker alright docker compose for my bet easier than installing it for folk cloning this later yeah I mean cuz yet because technically I could create a docker container that has the backend app inside of it and the MongoDB I'm just I think I'm just gonna do a docker compose file with MongoDB and then you start that up and you have MongoDB running in the background that's what I'm gonna do it'll be the easiest and I think I'm gonna make sure that I don't have running locally because I do have it installed locally brew services stop dB I have not agreed to the Xcode license what did I install updates recently am I about to be hacked what's happening here cool what in valid invalid option do I spell license wrong gosh darn it unknown version so Mungo is running oh man so I think I think I updated did I up some updates installed in the background and now now brew through his messed up uhh Shauna Singh a new Xcode Xcode update drop that could be it brewed doctor you yeah let's just uninstall it you cool yeah okay so it's it's not installed it's not running hopefully we won't run into issues there let's let's get a a database thingy running so I'm gonna open up vs code in this well in the server directory and let's just create a docker compose file right here we're gonna use version 3 and then we're gonna search the web because I'm sure someone tells us exactly what we need to do so version 3 I believe there's a services and then under here we describe each service we're gonna want a database service and then it's gonna have some options so let's let's just look that up so we want a MongoDB docker container that's from 2015 let's just let's see what they have to say maybe we could we can derive what we need to do from there no it's too much yeah I mean the container name is I guess we could probably just pull from latest so let's just look up doctor compose like the the default docs for docker compose we'll figure it out from there cool so there's that do they have an example that uses an image and don't worry I'm gonna explain what all of this means once we figure it out you networking you you you exemple stacked I am Ultimo get four Bunco wait what I see it here we go okay this is what I was looking for so the service we want you give it a name they called there's I'm gonna call mine database you say image and so image is usually you do something like latest something like that or start always in it DB root username root root password through this is just for our local so doesn't really have to be that secure and then typically you want to map its data folder to a local folder so that if you ever restart the container it still has all of your data so we need to find out what is what is that folder data this is not helpful like this is this is this is too much I literally okay let's see was this gonna help they're pulling down this this stalker composed from bitna bitNami do I want that here we go path to persistence well in the bit Nami image is called bit Nami I guess if we look up the one it'll tell us what the data path is oh here we go I should've just scrolled down however what's the data path do you note that none of the variables below will have any effect if you start the container with the data directory that already contains a database okay docker run docker run network host are they specifying any volumes here we go data slash dB why was that so hard to find oh my goodness okay so we want to specify volumes and we want to say on my local machine this is going to be in a directory we're gonna call this database data and we're going to map that to data / DB inside of the container so the way stores all of its data is in this folder and we're gonna have that locally on our computer so that way if we ever shut down the container and restart it all of the data will be inside of there for now let's create that folder called data base data we're gonna throw a dot get keep in here and then we're going to ignore the database data folder so I don't want to push all that MongoDB stuff up to github so I'm go ahead and ignore it database data so that won't push it later on we're gonna have to manually add to get keep but let's explain what's going on here so this is a docker compose file typically you might actually have multiple services listed in here so right now I have my database service but I could put my server in here I could pull the image node latest and that would give me an image that has no js' inside of it I could add my react client on here if I wanted to run it all inside of a container but this compose file is essentially a collection of different services that you want to run together in our case we just want a database we're gonna pull from the latest image tell it to always restart and we're passing in what the root username and root password should be this is just root and root we also want to expose some ports because we want to be able to access this database from the host machine works and there's it's usually a mapping I have to figure out what the port is but typically you say like on my machine I want to access the database from port whatever and inside of the container it should be running on that port but let's figure out what the port is 27 zero one seven and I'm just gonna map it like this so this is the default MongoDB port but what's gonna happen is that's this container is going to be running inside of it MongoDB is going to be exposed on that port and then from the host machine we can access it from this port so that way whenever we set up our connection inside of our Express app it'll just think that the database is running on localhost when actually it's running inside of a container but it still will be able to access it on that port yeah let's see what happens so now that I have this docker compose file I do need to make sure that docker is up and running there is an update I have version 2.0 point 1 install update 600 look at my internet speed that's pretty sweet right all right let's let's catch up on the chat while that's that's downloading um yeah Danielle says I want that mug check out the video below the video um I think this is like 10 bucks I don't know snap garden we did it mayor Shawn says I don't do note that much but am I the only person that that thinks 30 thousand files and node modules is insane no I it's ridiculous so let me see she's coding garden yeah okay I have I currently have 70 gigabytes free on my machine he was yesterday maybe his Monday morning I had 12 gigabytes of free space left on my machine I ran a recursive command that just deleted the node modules folder in my dev directory because I mean you can see like coding garden has a bunch of apps that's inside of dev which has a bunch of apps he cleared up like over 40 gigabytes of node modules like that's just insane like I don't I don't know why we accept things we accept that yeah so that's a thing it did encourage me to use P NPM which is very similar to NPM but instead of copying those files every single time you do an NPM install it links them which is pretty nice however there is an issue using this with something with the view CLI which I ran into you can fix it but it takes a command line flag I don't know but Mayor Shawn you are not alone it's it is insane it's insane also I have like nine Google accounts yeah I have several too but I don't know I think it's better than nothing Dimitri is saying I should use MongoDB community let's check it out do I need to find that on docker hub you might work we'll try it you Brian I have only slightly dabbled in react native I don't really have any tips other than you kind of had just have to relearn layout and styles basically everything you know about layout and styles that you learned in web programming is very different and react so there's that justice says I mean this update is brutal brew get it brew yeah yeah and so we we were building a native app for the coding garden community app and we were gonna use react native but everyone was running into issues so yeah a MacBook Apple has detected that I don't have the latest 29:10 2019 MacBook that could be the reason behind your tech problem this is a 2015 MacBook Pro and I've loved it I am going to use this thing until it literally dies it has a full HDMI port no USB sees I love it flutter seems interesting if I build a native app I might use flutter well someone just asked is it only for a mobile they actually are releasing flutter for web as well so pretty soon you can use it in both cool energy is watching I think they watch the earlier part of the stream at two times yeah there needs to be like a note light yes I agree all right moment of truth let's see if this compose file that I created about that yes let's see if this works so what we do is from the terminal we are in the server directory and it has this docker compose file so I'm gonna say docker compose and is going to first pull the image so latest is the image that has the database inside of it it's all set up and ready to go so it's going to pull that image and then after it pulls the image it's going to attempt to start it up [Music] starting and we can see all the logs here I mean technically I could run this in the background I like to leave it in the four in the foreground so that way I can kill it when I'm done with it and let's let's see if we can attach to it so I have the docker extension added in vs code BS code docker containers refresh not found what maybe I need to remove and reinstall this thing oh you know what oh when I removed all those node modules it might have worked all of my vs code extensions because they have node modules in them let's uninstall and reinstall this install sucker fresh oh no this is not good there's there's another thing we could do if I don't I don't have access to this but let's uninstall it reload and then we will attempt to install it you Hey you that's so weird why won't it work if it doesn't work I'll show you how we can do it without it but it's a pretty convenient tool because it shows you all of your running containers and things like that that's so lame oh well so we have this container running here's what I do I'm gonna do a docker PS that'll tell me all of the docker containers that I have running we can see here that I have this one running and its name is server database 1 so what I want to do is I want to go into that container so that I can run some commands inside of it and so essentially once I connect to it I can use and like explore the database so what I do docker I think you do exec image name and then bash SH echo host name echo so it's running it in the container it might not have it might not have bash installed so I can't do like an interactive terminal weird am i doing that right docker exec so docker accept options container and then the command that you want to run yeah so for some reason Oh - I I want it to be interactive Oh a minute okay so I'm inside the container for some reason there is no prompt but I should be able to type yeah and now I'm inside of a shell and I can issue database commands that's super weird that there's no there's not like an interactive prompt but our our our MongoDB container is working and it's running inside the container so when we connect our database we should be able to use that specific database cool all right where were we we generated a client app so let's go into the client just make sure that's running you're working you cool so we have a reactor this is the new reactive react logo so that's cool too okay so just to recap what did we do here in the server folder we created a docker compose we told it what image we wanted to use and also we can see here this database data is this folder and if I look inside of it there should be a bunch of crap yeah because this is all of the files that the container generated but it put them in here and that way if I ever kill the container and restart it all of my data will still be there now we exposed the port so we could access it locally and then we set up the username and password cool so yeah I think we need to configure this server app so if we go into default we should see yeah we need a Google OAuth key and secret so that we can log in with users and we can see our MongoDB connection string this this should actually work because to remember I exposed that port Oh however we do need username and password so we should probably do something like root at the root : root at localhost so what this does is it connects to the database but with with the username root and the password root and that's because and our docker compose we told it to have the username root and the password root so that should work honestly though it might actually work without it because when I was inside the container I was able to just use MongoDB let's let's see if this works if we get an error we know that we need to add the username and password okay let us add the OAuth key and secret so I'm gonna need to go create some API keys let's do it you you okay I'm going to create a new project we're going to call this snap garden all right you you okay so I'm in the snap guard I know you I know you can't see my screen I just don't want to expose any API keys Oh yeah I can only show this here we go so I'm in the Google API console I created a project called snap garden now what I need to do is create an OAuth key and secrets if I click on credentials I want an OAuth client ID before that I need to configure the consent screen so this is the screen that people will see whenever they attempt to log into the app so the application name is snap garden is that what we called it laugh garden cool the logo let me get the coding garden logo just a second you you so the other weird thing is so when I deleted all those node modules folder it changed the modification time of all of my folders so now they're in like a super weird order and it's kind of hard to find things cuz I have so many random projects on here here we go almost there [Music] nice cool so we have that logo support email yeah we'll use that one scope email profile and open ID cool authorized domains for now we're just going to do localhost I wonder if I need to do 30 30 yeah just localhost yeah I guess I don't need to do that for now because it's not going to be deployed anywhere just yet homepage link we're go to coding garden and then authorized domains hmm coding dot garden cool yeah I don't have a privacy policy or a Terms of Service let's just say it's here safe Oh much be cool so that saved it now on this screen I can choose the type I'm going to choose application web application I'm gonna name it and this is actually where I get to specify the JavaScript origin so this is where I'm going to do localhost for now HTTP colon slash slash localhost 30 30 and then authorized redirect URIs this is going to be localhost 30 30 / o ah / Google / callback and this is based off of the settings in my feathers app so if I look at my back-end [Music] should see I guess that's just the default if I look in the source and I look at authentication yeah it doesn't have it there either so I just know that by default that's gonna be the callback URL so ooofff slash cupola slash callback cool all right I'm gonna click create and that's probably when the API key will pop up there it is so I have my off client ID and my OAuth secret cool [Music] awesome so what I'm gonna do right now and what I so I have this back-end app I could actually just paste in the OAuth key and the OAuth secret right here but I don't want to do that because I'm going to push this code up to github so I'm actually going to install da T and V in here and then this can read from an environment variable and that way I don't have to push that up to github so let's do that so in the server folder and actually let's see on first connect authentication failed interesting but we'll see that in a second if when we suppose we start using the database and stuff so I'm going to install env in the server folder cool and then I'm gonna create a dot env file and we're gonna add something we're gonna add Google OAuth key and then Google OAuth secret is that what they call them in here off key all secret yeah so I'm gonna have these this is where I'm actually gonna put the values but I'm now gonna take this dot env variable and put it here and then I'm gonna take this and put it here and the feathers configuration package is smart enough to know that when it sees this it will actually pull it from the environment variables but we do need to load the environment variables so we'll do that in a pas right at the top here before we bring in anything else we're just going to say well let's bring in dot E and V and then really before we do anything else we're gonna do dot E and V dot configure o dot config and that will read in this file put it in my environment and then later on when the configuration runs right here it will have the correct value for my key and secret so we should be good there [Music] okay but why is there so much extra space so we're good there I'll update my doggie Envy one thing I'll do right now is I'll just copy this dot env and then rename it as dot and V dot sample and so the sample will actually get pushed up to github so people will know what they need to put in but the env is going to get ignored if it's not already ignored oh and these need to be inside of the server folder like so and if we look at the git ignore is it it's not so let's edit we're gonna ignore or dot E and be cool all right I'll hide my screen put in my actual values that was the wrong thing well let me put in the values and then we'll be good to go to try and test this thing joonie so I have my client ID and then I have my client secret that goes in my dot env file good there I'm gonna go ahead and close that tab I'm gonna close the dot env file so it doesn't appear okay yeah it's complaining about like spelling problems in my daddy and me I don't care about that um cool so I think we do need to configure Google OAuth because that's not configured by default for some reason which is interesting but we'll do that really quick just to make sure that it's working so in my feathers back-end if I look in the authentication J's file I can see that it's set up to use JWT the local strategy isn't being used because I didn't check it but they are bringing in ooofff so well we'll go to the feathers Docs but I do believe that this exports a ooofff strategy and essentially we need to create our own strategy that extends that for for Google so we'll say class Google strategy extends the OAuth strategy and then we need to overwrite one of the methods I'm gonna look at the the feathers Docs because in their getting started guide they show how to set this up with github so yeah get entity data and this should give us access to their email so get their data with the profile based data and then we're passing in the email we may have to debug this I'm just going to log base data and also log profile cool and then now I need to register that strategy so I do that right here so I'll say authentication that registered github or not get up we're going to call it Google and we're going to do a new Google strategy okay let's let's see what happens and I mean I may need to override in my user service so for looking services users yes so for sure let's look at the the users model that we have set up so it just has a Google ID but I will definitely want to put the user's email on the user ID so this is a mongoose schema that describes the document store for this and so i definitely want to store their email as well so that and i think and you required true i'll have to look at the mangu stocks but i think i want to do this because i want to make sure that they have a google ID and they have an email I guess I probably want display name and well when we debug this we'll see all of the incoming data so because I'm logging right here base data on profile we'll see what data we get back before it gets inserted into the DB so there's that our user service is pretty bare I don't think we need a hook to set these properties like they should automatically get set we'll see um so now I think it's time to it's time to try so if we go to localhost 3030 let me go to slash off slash Google should get redirected oh it's a oo off slash Google we get redirected and we see a redirect URI mismatch the you would redirect URI in the request does not match the ones authorized for the OAuth client let's just make sure that I specified this correctly I want to pull back open the Google console and make sure that that URL is in our authorized redirects oh I didn't add one at all so I definitely need to add that so it's just from the from the console page you click on your client and then you can add a redirect URI and in this case I wanted to add this exact one that it's telling me is an error so that it's now a valid redirect URI so let's try again localhost 30 3000 off not slash github woth slash pupule there we go I'm going to use my coding garden with CJ account and something happened let's look at the logs [Music] feathers application page not found type feathers error name not found class name not found URL slash auth slash Google they do something wrong it might be I might have specified the the other callback you are all wrong just say let me look at the Google console you you yeah so that's an authorized redirect URI let's see what else am I missing you alright let's just look at the feather stocks together so if we go to API we go to authentication and we go to off so we already have it installed oh do I need to specify a redirect I think the redirect is already specified as slash so if I look at my config dot JSON redirected slash so that's fine the default path is ooofff ghost Protocol callback let's try again let's see if I get a better error so leave the logs running there and then we're gonna try again so go off slash Google sign-in want to use this account seeing any logs okay I think it's cuz the loggers disabled so we go to the logger jeaious it creates the logger and if we look in middle where does it have a logger if we look in our fjs bringing in the logger error handler which gets passed the logger not seeing anything logged [Music] for more detailed errors change this to debug let's try it and we should at least get a log when we like request the app no ok try again the era's command aggregate requires authentication yes we can we can search that but I'm first curious why aren't we seeing anything else in the logs here and why aren't we seeing this I mean it could be that it's failing before it even gets here and it could be that it's failing in the users create I'm gonna figure this out okay first let's let's search for that error that we're getting command aggragate requires authentication error oh so it could be that it can't connect to the database and that's where I need to specify the username and password I mean let me just try that because that's that's the first thing that we're not doing so I'm gonna say root : root at the host okay now we get an error failed to connect to server the first connect authentication failed in our docker composed we did see the username and password is root and root this could be an issue we can you say cat docker container we'll figure it out though we're gonna get there yeah so it grabs MongoDB just this I mean maybe that's not that's just the initial username and password let's see you let's let's just confirm my TV connection string yeah typically it's used its username : password at that fills though let's look back at that uh that docker compose or the docker for in it DB root username currently this is only supported you know what feel like this needs to be specified as an array and let's just do something like this and then let's queue our back-end up let's kill this docker compose and then let's delete all the data in our database data folder and just re recreate the whole thing though actually because what I'm seeing is this is version 3.1 and I just said version 3 and I'm used to specifying these Oh actually I'm used to specifying it like this I don't know let's try it and let's also catch up on the chats this whole episode is just gonna be me debugging getting ooofff in the database working uninstall and reload vs code that was for the extension thing which wasn't working I'm having all kinds of issues dr. Koh default dark mode yes see you later in fee thanks for tuning in it's really early there Wow Morales asking is it possible to set up multiple authentication strategies for example Google Local auth so the user has a choice yes you can and you can also have multiple social or OAuth strategies so you could have Google and github if you want to do yeah it's possible see you later Omar thanks for tuning in Europe is asleep um motivation says what is that what is the feeling that you experience when you watch one of your videos I mean you watch yourself move in all is it not weird I don't really watch my videos I like the the the only times I'm watching them or if I'm editing them it's okay I don't I don't mind yeah what the audio idea is pretty cool but I'm just not going to do that today yeah you McKey akika hello Mikiko who says if a user is not logged in or approved blur all images on the map yeah I think I won't let them see anything on the map unless they are logged in though it might be interesting to see at least what images are available so it would make them want to sign up I don't know it's a good thought though Danielle is asking how am i lacking feathers so far I like it I'm just having I think they think this is a database issue so now that we started up with this new syntax let's update our config to say user is and passer it is and then see if it works hey it crashed what if we do with no username and password then it works but if we try to login command aggregate requires authentication okay last last-ditch effort so let's let's kill this let's let's just specify the docker compose exactly as they do it so we're just going to do this I think the only difference will be the exposed ports and the yeah so we need ports and volumes it could be because it's version 3.1 okay let's delete this database data of all the stuff in the database data folder delete delete move to trash empty trash and I did pull this from latest which I think you would do by default well let's try again port is already allocated has active endpoints what I need to remove orphans yeah because the old the whole container was still up okay we're gonna try again okay waiting for connections on 2701 a17 okay moment of truth username root password example gosh darn it okay I bought it I wanted to use docker but I think I'm just gonna use local a local MongoDB because I have debug this for way too long let's kill it kill it cool or not we're not gonna use docker it was a fun it was a good try thanks everyone for participating but we're not going to use we're not gonna use docker brew install MongoDB through install what is it literally brew cask install I've never done brew cask install brew install I may be things have changed I don't know all right let's tap the MongoDB brew tab package still isn't here just unfortunate okay we tapped it now we're going to install the community initiative you that was an old message when you mistyped off instead of off okay then that was earlier but that makes sense yeah so the error message in the URL had to do with the database my container wasn't working okay we've got running locally now let's just let's try it so no username no password run the server cool now let's try to login you I'm gonna try with this one hey something happened okay it was we wanted to use a docker container but I didn't set it up correctly but we're gonna keep moving we do get in their users validation failed displayname path to display name is required that's fine what I wanted to see was the profile logged and the base data logged awesome so and and then we can we can get a better idea of what's happening here in this get entity data function so we pass in the proto so we first get the profile so that's what we get back after the OAuth flow so after the user clicks accept and this has their name their given name their family name their picture their email and email verified true oh I guess I could I could only allow user just users to sign up if email verified is true I don't know believe it now for now and then we do get name so name is the display name and so actually I'll just rename it in my users model to be name and that way it'll map one to one from the data that I get back from Google to the data that's being inserted into my database and so we can see that we are returning an object that has their email will also pass in name which is gonna be profile dot name so that's going to get inserted into the DB and then let's also add their picture [Music] yeah I think that's what we want and so now I'm going to add a picture to the users models so that way it gets put into the database as well cool and I think that should do it so now if we try logging in again it should work but we're gonna get all this other info in our database so let's do go off slash Google I want to login with this account and we get an access token cool so I'm gonna hide my screen for a second I'm gonna pull up an app that can connect to MongoDB I think I have yeah robo three t installed and then I'm going to create a connection to my local database and the database I want is snap underscore garden yep you you cool so this is a tool called Robo 3t it can connect to running locally on your machine or to remote instances but you can see I have the users collection here and it did insert a user which is awesome and I think also it's smart enough to not create a new user if the user tries logging in again so let's try logging in again choose this it should just redirect right back awesome we refresh the database we don't have any new users but the same user is still there cool so Olaf is working that's a good it's a good thing so when I kind of what I kind of need to do is I need to set it up so that after the redirect has happened you get redirected back to the the client which is running on port 3000 here so I'm actually going to do this I'm gonna say my redirect is localhost 3000 and that will redirect them there and then my react app will need to like use that token so that they're now logged in cool let's just get that set up I think I'm gonna go ahead and install the feathers client in my react app let's look up how to do that look at API authentication client so we can add the auth client I think if I just install [Music] at feathers J s slash feather now I'm going to need to install all of these yeah cool yeah so I need to do that I the thing is though since we're using reactant we're gonna use hooks I saw someone post on the feather slack about this thing called fig burn which is a a react library that is a wrapper on top of the feathers client that uses hooks and gives you like built-in effects and things like that so you can like get a particular entity and it automatically stays updated behind the scenes so yet we're gonna use this and I think this might actually have auth built into it yeah so this is from the company humans but yeah someone someone shared it on the feather slack and it looks really cool it's a newer library but basically it's hooks for working with feathers in react so I'm going to install it github somewhere man deaf deaf go please have to jump out to Google it's not nice big bird Big Bird big bird there it is cool so last updated six days ago this is like a brand new library and it's still missing some things but let's see we can get things find things mutate things I don't it should work right if we come across something that's miss missing we'll make a pull request and add the feature I don't know but let's get going so how do we install this thing we need to install fig bird and app feathers Jas feathers so I'm going to go into the client directory and we're going to install Big Bird and at feathers J s / feathers you and I think I saw did I see like a logout yeah feathers dot logout probably do feathers dot login all that good stuff cool okay so I have those two things to go back to BS code minimize the server let's close all the server stuff for now in the client source directory indexed is is where we render our app but if you look at the fig bird docks we need to configure it so we need to have a fig bird provider and then we have our entire app underneath that let's see you yeah so something like this and I'm probably gonna I'm gonna need to install like routing and stuff like that I guess I'll need to find a router that works with hooks well let's see okay so we have our app component because we're gonna set it all up just gonna do this export default function app and I guess app doesn't actually have any children well doesn't have any props it's just just gets rendered and then all of our all of our stuff is going to go within the the fig burg provider so we're creating a feathers client let's look back at the feathers doc to see how Doc's to see how all of that works feathers fly it that's curious oh I see typically you import it like this but then it overrides that okay so let's just do that so we create our client we do need to configure it to use I guess for now we'll just use sockets we're also gonna need to install socket IO client so let's do that this is becoming a much larger endeavor than I had initially anticipated the connection string needs the docker container name not localhost it works with local host because I have the port mapped so it's connecting to the database and my my Express app isn't inside of a container my Express app is on localhost so that's why that should work something was just wrong with the authentication I don't know did the package arrived yet it might have and then maybe somebody stole it let me check nope they're supposed to be here by 8 a.m. you oh says is delivered I guess I'll go grab it I'll be right back I went straight for to our soccer and we just have we only have a nap set up okay I'll be back you focus here it is should I open it I've barely written any code okay I'm gonna catch up on the chat and then you all will decide if I should open this package hello Slayer who asks how old I am I'm older than 12 and younger than 40 I'll say that yeah so local works I'm just gonna stick with that actually creates if you try to connect to a database that doesn't exist will automatically create it yeah Andre I'm not I'm not really familiar with Web Audio API and visualization it would be a fun fun project but don't really want to do it anytime soon what is inside the package you're waiting for wouldn't you like to know Kat is asking do you think dev sometimes over complicate things using too many tools when unnecessary example docker I yes I think so but there are some scenarios where like docker is supposed to make things easier I mean supposed to being being the thing the word because typically once you have it set up it then becomes really easy for any other dev to come up and just start your app without having to figure out what versions of dependencies you need and trying to replicate your environment docker is really cool because it can it basically describes your entire environment I ran into issues I'm obviously doing something wrong so it's my fault I just need to figure that out but yes I think you can absolutely overuse tools but docker is it overused maybe not because I think I think it's pretty helpful when it works yeah and then that's with Omar saying it's kind of like all in one go Brooks is saying you can run the command NPM repo repo name to have the git repository of any packages in the browser but Brooks what happened which I saw is if you look at NPM if you look at fig bird on NPM it doesn't have a link to github so that probably won't work but we can try it really quick npm repo laughing bird yeah no repository found so they they didn't put their repo name in there package.json excuse me we were gonna attempt to build like a real-time map where anybody can take a picture upload it it gets put onto the map and it's like snapchat and that the image can disappear after a while or after a number of views we're just running into setup issues Jim is saying view is so much nicer easier to get set up you're not wrong I do need to figure out what routing solution we're gonna use because we will need multiple routes we need like a landing login page and then we need the Maps page but you probably just get away with two routes there's just one big map with all of the images on it but yeah package yeah view and that's the thing like when you generate an app with the view CLI it comes with a router it comes with state management everything is just pre-configured and ready to go whereas with react to kinda have to find find your libraries hmm us being English says I'm late to hope I don't miss the hooks part I've barely barely gotten started I've been running into issues Big Bird is similar to feathers UX just for a different framework yeah so fig bird is built for react it's a it's a brand new library I think they just released it like maybe a month ago if that but it looks really interesting I did I couldn't find any other react library does similar things but it gives you custom hooks to talk to your back-end feather service which is very similar to feathers view X which it's not hooks but it allows you to integrate feathers with view X so it's similar in that way it's a big box nobody told me to open the box okay I'm not gonna open the box what we need to do is we need to get we need to get off configured and set up so basically what's happening right now is if we go to localhost 30 3000 off Google so localhost 30 30 is our back-end and we'll attempt to login but our front end is gonna be running on port 3000 I'm I have too many tabs open but if we go to localhost 3000 it's broken right now but this is we're not broken there's nothing there and actually let's make it work let's just put like a hello world should work cool so basic app nothing is happening but what needs to happen is after this sign-in flow is done from localhost 3030 it needs to redirect back to localhost 3000 which is where the client is running and then the feathers client authentication will will kick in which we haven't configured yet but it will kick in and it should allow the user to be logged in so we'll see we do get redirected back to localhost 3000 it has the access token in the URL and then the feathers client should take care of like taking that access token and using it for for login so that's the next thing that we need to setup and configure so let's do this I don't yeah I'm not gonna I don't think I need to use stay here I think I'm what I'm gonna do is I'm going to setup my feathers client import it into this file and then pass it down to the the fig bird provider so let's do this we're gonna create create a file let's call it feathers Jas and this is where all do the standard setup of creating the client and connecting it and all that good stuff and I think I just installed yeah I just installed socket IO client [Music] do I also need to install socket so I installed feathers J s socket IO client I think I need to install socket IO client as well Oh socket dot IO - client like that okay so those things are installed and now in this file is where I will get everything set up and he just needs okay some reason this is required we don't want this to be require we want this to be from and this needs to be important so import these things from there we'll just do IO and right now we're going to connect to a local host 3030 because that's where our back-end is we create the feathers client we configure it with sockets and then we need to configure authentication so if we look at client off we need to bring in feathers authentication client so I'm going to install that as well and then we'll import it in and then we need to configure it so we'll say clients dot configure off and then we invoke that with some awesome options and I believe the main option we want is storage are the options setup listed in the options section you don't I don't see the options but I do know that one of you maybe these are the options it's called authentication client but I think storage need to set as windowed local storage so it stores the token in local storage and then we're going to explore at default client let's rename this to Heather's client so this file gets us set up and connects then we will use this feathers connection in this file so yeah I don't think I need you state but we'll say import feathers client from feathers client like so cool so there's our provider let's look at the fig bird Docs I don't think they have anything specific on off so we may need to just have something attempt to log in and really we need a landing page with like a log in with Google button kind of want to see if feathers is even working though okay so we have our provider that's great and then now in any given component we need to say use fig bird well no use use feathers which will get that that client that we specified and then we should be able to do something with it so if we do something like try to query the user service let's just do this so we're going to import use get from fit bird we should get an unauthorized error because we're not we're not we don't have off set up yet but well it really needs to be a nested component below the fig bird provider pretty sure yeah okay so we need it let's call this the lane we're gonna create a component called login for now let's create a folder let's call it components and inside of that I'm gonna add log nsj let's get rid of all this extra stuff in here while we're at it get rid of app dot CSS will keep the test for now index dot CSS logo dot SVG we'll delete that cool ok login is going to import react from react and then we're gonna have a login which is just going to be a functional component and then little export default login now we'll import this login component so that way we can use it right there so we'll say import login from log components slash login cool and now in the login component is where we're gonna try this yeah use get thing which is the built-in fig bird thing which will connect to our feathers service on the back end so really [Music] you um actually no only we want to do use fine because I want to I just want to list all users in the system just to see that it's working or at least see an off error if it's not working so let's say const users equals used find with users and then for now we're just gonna have like a pre tag and inside of it we're just gonna throw the json string of users all right what do we get not authenticated cool so that's that's working it's basically connected to our back-end cool that's awesome that's really cool so now what we need to do is we need to like add some like a login button and stuff like that should we use a component library I think we should I don't want to use material UI let's a react component library I just want some default styles eleven react UI component libraries you should know in 2019 we'll look at that open the box open the box open it tell us your age reach router yeah that's the one I was like someone had mentioned it to me but that's that's the one I want to use okay keep a note of that that's what we'll use open the box okay let's yeah let's over the box we got we got react to sort of connected to the backend it's not logged in yet okay so what's in the box so on a stream a couple of streams ago someone mentioned or we mentioned that it would be cool if Brooks came on the show and we did a like a fireside chat that's gonna happen eventually but I am essentially going to set up my streaming space to allow for interviews like podcast style so I've got lots of goodies for that and that's what's in this box with the box all right first up is the canon vixia hf r 800 this is a fairly inexpensive HD camera it's it's the same it's not the exact same model but it's a similar model to the camera that I have right there that I've had for years but now I'm gonna have two HD cameras so one will be pointed at the streaming area and then one will be pointed at the podcast slash guest area so let's take a look I might actually use this as my main camera because it's it's newer so maybe it'll be better whoa [Music] it just looks like an updated version of the camera that I have right there sweet so that's that's thing number one cool now not in this box because it's coming in a separate package is an HDMI capture card that will go along with this but the one that I ordered was a PCI Express HDMI capture card because if you've seen any of my setup streams or if you see my my gear if you've got a coating garden and slash gear I use these elgato hd60 s capture cards these run over USB three and I have two of them one for my laptop one for this camera but Elgato also sells a PCI Express version of it which I'm guessing is going to be like less delay more performant but that is one we use to capture what's next a 25-foot HDMI cable I think I got a 2-pack yeah it should be - good - in here I got some studio headphones with deep bass for for the guests like I already have my own set of studio headphones for monitoring where's that a cord protector there's some blue in there but basically I'm gonna have a bunch of wires and this is like a yeah it's a 15 foot long thing that I can put on the ground and run all the wires through I think this is a second blue screen I need something to open it with that's not good yes it is open the books yes so this this invisible thing is is a second blue screen so I'm basically gonna have like a full full blue screen because there's one behind me but then there's gonna be another one on that wall so that when I set up like a podcasting table it'll have a blue screen behind it too we can show the all kinds of like the the screen we can have a background backdrop all that good stuff and then this I'm actually very curious about so this I got two of them it is a $35 set that comes with like so cheap but it has very decent reviews let's catch up unboxing a box full of boxes yes cool so we've got a pop filter that's great we've got a microphone telescoping arm let's see yes so it comes with the cable attachment so basically like this will attach here or somewhere and then we'll be able to move it around and it comes with a phantom powered condenser microphone that that attaches to the arm windscreen microphone holder oh and like this is an extreme this is an amazing deal it has decent reviews like it's not gonna be like super pro level sound but it's gonna be decent and then you have a shock mount for the condenser mic which is also sweet and then this Oh weird I even know it came to this it comes with a USB sound card so you can actually plug directly from the microphone into your computer I had no idea that came with this I already have an audio capture card which is what I'm gonna use but that's nice so yeah I got two of these one one for me one for the guests and so it's gonna be great it's gonna be a blue screen podcast set up multiple microphones everybody's got headphones it's gonna be cool it's oh I got two of those so that's it for the box of goodies hello Danny who says I didn't realize feathers was more akin to Apollo I thought it was like a Ruby on Rails thing no it's it's very modular and it absolutely is decoupled like you technically could have a feathers client that's running inside the public folder of your of your feathers Express app but every app I've built has been totally decoupled and then this fig bird thing is a new library where they created custom hooks for interacting with a feather service so I mean the the feathers feathers itself comes with a client library so if you check out feathers client basically you can tap into a service listen for when events happen and then like create or update things using that service so this is like the standard vanilla J's version of feathers but I'm attempting to use fig bird which makes it more react like c.j went on an online shopping spree like I have like I looked I hadn't bought anything on Amazon in like two months so I made up for it but it's gonna be it's gonna be great and then I could potentially eat so I know I think Brooks is gonna be coming on in a few weeks but eventually I can have guests on the show you do interviews that kind of thing maybe have a coating garden podcast so yeah it'd be cool I am interested in the Web Audio API just not tonight because we're working on other things yeah and that's the thing I'll have to remind any guest that comes on the show don't wear blue do not wear blue because you'll blend in with the background robot arm [Laughter] yeah and so it may it may not be a podcast per se it still gonna be live streamed but I think eventually that format could be edited down into a podcast cuz that like if you look at my like morning tea streams or any of my QA or hangout streams sometimes there's some good conversation that you may not necessarily need to be looking at a screen for so it could be in podcast form so yeah I can now host multiple streams at a time yeah I'm also a yeah so HAP first multi multiple camera angles mo like extra extra capture cards better sound and more sound yeah it's happening in general what's it going to be centered around anything any literally anything like it will be tech focused I think when Brooks comes on we're probably gonna do like origin stories we're just going to interview each other and talk about how he got into the industry and stuff like that yeah have you have to tell your guests to wear blue think of all the awesome floating heads yes cool alright where were we we we're looking for a component library to use on the front end I don't want to use material UI because I've used it like crazy and I don't particularly like it I mean I pretty much use it in every single react app I've been working on at work react bootstrap is a contender because it's fairly easy to use let's open that in a tab react toolbox never heard of it react Bell also never heard of it react Gromit I don't like the way it looks material components web in design maybe you're using a design semantic UI once in UI reactive virtualize provides react components for efficiently rendering large lists in tabular data I'm not doing that [Music] cool I wonder if there's like a component library that is specific to hooks I mean I don't know how that would work exactly but let's see going straight to Google for this one compound components ok nevermind we might go with bootstrap let's look at react toolbox bootstrap your application with beautiful material design components let's just look it I want to compare this to using something like material UI so cool we can bring in buttons icon buttons cards have card title card media that's it looks easy enough I like the way this looks compared to material UI bell configurable rat react components with great user experience looks like they don't have a lot of components so we've got buttons cards we actually don't need any UI components we need like some forms so we need maybe not even a form we just need a login with Google button and then a form for uploading your image so maybe I'll use react toolbox I don't know what about ant design [Music] let's look at their buttons button button where's the code you I can't find the code I'm not gonna use it is that Java what what's happening I don't I don't like their landing page any thoughts out there I might use react toolbox omar saying is there another collab stream with the coding train I would like to we just haven't talked about it and I know he's been super busy setting up his new studio and everything yeah etienne is awesome the new setup hello she felt Lana welcome hello Luqman omar says they use react strap components in their last project I think it's it's between these two it's between react bootstrap and react toolbox you know what if I use react bootstrap I probably can use something like boots watch it's been a while so I'm gonna just I'm just gonna I'm just gonna do it okay use react bootstrap with boots watch okay getting started install react bootstrap and bootstrap I'm not gonna install bootstrap I'm gonna install boots watch okay here we go oh and we're gonna install a reach router too so install react bootstrap and boot swatch like so we then need to include the base CSS so I'm gonna go to boot swatch boot swatches website free themes for bootstrap [Music] which one should we use you kind of like cyborgs it's like it's kind of ugly but I like that just in the lime and the purple you [Music] Lux is classy touch of class yeah we're gonna use Lux okay so that installed in my index J s I need to import the CSS so I'm gonna do that right here boots watch slash dist slash Lux slash bootstrap top main dot CSS will have to verify that so if we look in the node modules folder and we look at boots watch this looks bootstrap min dot CSS cool so that should give us the default Lux stylings [Music] and we import we import what we need so import button from react bootstrap slash button so we want a button so in our login page we're going to import button and then we're going to use a button right here it says login with Google and the variant is gonna be danger because then it's a red button and Google is red right there we go login with Google easy enough let's Center it on the page do they have uh can I do like a flexbox you do a container I I might just am I just gonna create a create my own little flex box so I could Center this thing do we just do a style tag we could import like CSS and js2 me too many options I just want to build the app okay um we're just gonna do we're gonna do inline styles for now mainly because I've been streaming for almost three hours and we've barely got anything done okay we're gonna do display flex justify content center and a line items Center this will have a width of 100% and a height of 100 percent and if we look at this okay it's centered there but let's look at the elements so we have our div ID root and then we have that div right there so we just need to style the root element will do that in index dot CSS we'll say root has a width of 100 view width and a height of 100 view height margin:0 padding:0 and we'll do that same no margin no padding on the body what do we get there we go nice so I have a nice little log in with Google button we're gonna click it it's gonna take us to log in with Google okay so let's because can the button have a to prop or do I need to put an anchor tag inside of it epi HF providing an HR F will render an email element styled as a button that's what I want so this needs to go to HTTP colon slash slash localhost 30-30 / oo / Google like so click the button logs in with Google and then we get redirected cool so now we need to configure the client to actually use this token when the page loads so let's do that if we look at the feathers docs for client authentication we can do app dot authenticate if I pass in strategy strategy github will that work I don't know but here's what we can do Big Bird I believe comes with a used feathers hook and that gives us access to our feathers instance so at the top level we have our fig bird provider where we pass in the feathers client that we created but now any component below that can do use feathers and that has access to that will give us access to the actual feathers client where we can then do things like authenticate or different things like that so for this I think we should probably use an effect because it will attempt to either authenticate or reoffend to gate so we don't want that to run on every render use effect is gonna allow us to run something basically win the component first loads and so win the component first loads we want to attempt to login with feathers and so we should be able to do feathers da tree let's try reoffend ik eight I really don't know how the whole Olaf flow is gonna work let's try it just like this . then we logged in catch oh no we'll throw in the error right here does this give us the user okay let's try it away that's too easy oh my god Oh holy crap that's that's crazy okay so let's just do this really quick well let's just do feathers log out when this component loads and then we'll try again cool so now there is no user and then if I run this code it should say Oh No yeah not authenticated cool but check check this out Wow okay I'm gonna click this click that we logged in that's exciting do we have some emojis in the chat that's exciting hello Ashwin from India welcome he says can we use feathers for IOT applications yeah so I mean if it totally depends on what you're trying to do but feathers does support real time via socket IO or Primus and if you're dealing with real-time messaging it could potentially help with that I know a lot of people have used I think rabbit MQ for like messaging of IOT devices you could potentially integrate feathers with that it's possible tailwind is great but yeah tell wind is really just individual styles it's not like a framework and how Google is read Facebook is blue why am I saying this I have I have no clue well done emojis in the chat yeah - two out almost three hours to get here so this this is amazing okay so now now that we've authenticated I think we kind of we kind of need some some top-down state so like the app will have the main state and they can hold on to the user and so the login component when a login is successful it will pass the user back up to the to the app so that it can be passed down to any other component I think we need to do that so we could create our own custom context provider and consumer so basically we could have some use state up at the top here where we like create a user state and a set user function and we create pass that in as the initial state for a provider and then lower down like in this component we could take in the consumer which then what do you call it can access the user or can call the set user function in this case we would call the set user function yeah I think I want to do that so there are there's a library for react hooks that I came across recently that gives you lots of cool stuff so it integrates I believe like the use reducer hook with redux dev tools automatically and you don't need redux or anything like that let's just let's just look for it react hooks use reducer redux dev tools it's a library it's like react re-inspect that's the one you yeah use Redux step tools to inspect use state and huge reducer cool so that's that's one thing but then there's a package I believe that's built on top of this that gives you I think it's called use global that's what what I want react in is it reactant is that the thing that I'm looking for react but with built-in global state management and so this I guess this would be out the alternative to using a context provider in consumer because use global would allow me to create some global State at the top that is like user and then a lower-level component I can set the user so I think I think this is the one that I want yeah so we can set global set the initial state directly yeah this is what I want we're gonna install reactant hello Adam welcome to the stream his up huh oh it's Nev oh cool finally full stack with react cooks we're doing it over high using easy-peasy state management is pretty simple to use I've never heard of it easy peasy yet vegetarian-friendly state 4 react create the store you store that's cool I'm gonna use how many use react in though hello shuttin welcome to the stream Slayer is asking what stacked is used at my job so we use react mainly on the front end and node and express on the back end the database varies depending on the application but we're pretty much a full stack JavaScript shop cool and I'm pretty sure that use global uses re-inspect under the hood so we should get redux logging okay Oh interesting and now we actually import react from react in instead what it treats global state as if it were built-in to react itself without the boilerplate of third-party libraries I think this is what I want let me just search their code base for re-inspect and I think they automatically know did I spell it right pretty sure Rhian spectat you state is injected to use global hook here I'll react extras okay so maybe I didn't want reacting because I think react extras has some packages which includes react hooks I think use global hook and then it's using re-inspect maybe I'll have to install Rian's back to look separately oh all these libraries okay I think I do want to use reactant though it has okay use global so that lets you do set global and then in sty inside of a component let's see no I don't want that set global oh wow a set global can accept a promise and it will populate the global state with the result of that promise that's crazy and then use global will give you access to a particular thing do I want to use reactant I guess so I already installed it let's okay let's keep going okay so at my top level here I'm gonna import react and use global from react in I'm not use global asset yeah set global okay and then before my app spins up we're gonna do set global we're gonna say user is null like so and then we also want to use global and right here we'll say a Const user comma set well really just want access to the user I'll say use global with user and we'll just do some conditional rendering so if user is defined then we'll say just like an h1 hello and we should be able to do user dot name I guess I don't know but if that is not defined then we want to show the login component like so so the on the page we should see the login component so actually this is user user name well you know what I am just going to I'm gonna set this as the user just the user object so I should be able to do user dot name okay so if user is defined we'll say hello user dot name otherwise show the login component now in the login component I also am going to use global so right here we will pull in and we want use global from reactant we're going to use user but we also want access to set user and then if we are logged in we're gonna say set user with user dot user otherwise we stay on the login page so now when the login page loads it's going to reoffend ik eight and then set the user and then at the top level we should just see hello we won't see you login anymore cool it's pretty cool hooks are cool use get is defined but never used oh you're right you don't want that for login user is assigned a value but never used in login yes well I mean there's no way around that cool but that that does it we are now logged in we can make we can make authorized request so let's just create another component we'll call it map a J yes just for the sake of time I'm just gonna copy and paste my login component we don't need to do any of this anymore and now and this thing isn't gonna set the user is just going to get access to the user so we'll call this map and I guess I technically we could we could give them a little logout button logout oh this makes me think of another scenario though because basically what we need to do is if the auth ever changes we need to set user to null so we'll tap into that so let's say feathers equals use feathers and then this button whenever you click it it will log you out if we look at the button docks I'm sure it has an on click function yeah so we can just do when this button is clicked why is that there that doesn't need to be there when this button is clicked we're just going to do feathers dot log out like that and right here we do have access to the user which is on global State but we should be able to say a user dot name and now our flex Direction needs to be column so there should be right on top of each other you're not using an effect anymore oh and now we want to use this map component so in-app dodge is instead of showing this h1 we're going to show the map component like that and we need to import it cool hello coating garden so we click logout that technically logs the user out but we need to be listening for when that happens so that we can redirect them back to the login page let's look at the feathers doc stocks I think there's something like a client dot on authentication changed let's see indication client you there's got to be some way to listen for when auth changes I mean technically what we could do and maybe others I'll just do this is we also take in set user and when they click logout we actually call set user with null like that that should do it so now we can log in with Google hello and then logout which doesn't seem to work here we go I had to click it twice we did get set user oh it might have happened too fast you oh don't do that you okay can we like inspect the state of all this so if we look at map use global its context should have a user object it's intense there's a lot going on here uhh you yeah like it kind of works but I think it don't think it happens in time so like I click it we see it happen for like a split second but if i refresh the page there is no longer a token oh well this is perfect this is perfectly fine for now let's get a map on the page I think that's I think that's what we need to do is get a map on the page motivation is saying I'm listening to your Domino's Pizza video at the same time as your livestream what happened here at hat it's not it's not winter it's getting cold but when that video was recorded it was actually pretty cold so I used to wear a hat Adams saying why you're not using react context because I don't really have to so under the hood fig bird is using a context and under the hood I believe use global is using a context and so I don't have to create a context of my own these packages are doing all that under the hood and it all kind of just works so yeah I'm actually pretty excited that how simple that code is oh I see easy peasy which was mentioned earlier is a wrapper around Redux Omar is asking is volunteer remote software engineer thing like if I email a company inside my country that I need to work for free as volunteer they might accept it I'm sure anybody would like someone to work for free it seems more of like that would be more of like an intern position but yeah I don't see I don't see why not you could reach if there's a particular company that you do want to work for you might just say hey I'm looking to get experience I don't want to get paid is there somehow that I could come on as a in come on to your to your company and work for free maybe I don't know hmmm redirect or refresh after deleting the token yeah I mean technically yeah and I don't have routing setup either yes we should set up routing I mean I guess I have basic rut leg this is my router right here you're either logged in or not but I could do something really silly like window dot location dot href equals like just do a fool page refresh like logout boom that works I'm okay with that um alright yeah I'm not gonna use a router because we're just gonna have one map that's it okay so let's should we get the map yeah let's get the map going cuz it's it's more visual what map should we use I've used what's it called leaflet let me clean up these tabs that's for removing exif data feather stocks we can come back to darker stuff oh wait was that boots watch yeah we'll leave that we'll leave that open you react in okay oh look a leaflet yes I think Matt box is another one that I've heard of react components format box glj s made by uber let's look at some examples markers and pop-ups this is pretty much what we're gonna do so like on the map you're gonna see a marker when you look at this they wrote the code for us when you click it potentially like you won't see all the markers on the map but you maybe you'll only see the ones that are near you will see all the markers but if you click one and you're not within the given range to view that image you'll see a message that says you are not within range you must be within X miles of this marker to view the image we're building like a snapchat kind of thing that works this way cool so this is nice and it actually looks really cool too I like the dark theme custom cursor you look at that draggable marker mm-hmm geo JSON ooh nice colors locate user that limit the map interaction a drag pan yeah so now you can't drag this is cool I really like this okay how do I use it documentation reacts map GL is a suite of react components format box GL GS a WebGL powered vector and raster tile mapping library cool so getting started we install it and then you just add it the current map box she'll release requires the stylesheet to be included at all times you may add the stylesheet to the head of your page okay so this is a specific map box CSS matte box tokens do ya or this is this is the thing to ask or to to wonder like does matte box cost money do I need to sign up to eat an API key or what products maps get started yeah Google and that's why I didn't defaults using Google Maps they charge money now I think for low use apps it's still free but people are looking for ultra alternatives can you show me pricing please pricing generous free chair start for free every product has a meaningful free tier so you can sign up and build without friction map loads for web up to 50,000 map loads for free okay yeah let's do it let's sign up sign up right I'm gonna hide my screen while I sign up you okay so I have a signed up I have a public token I guess I'll verify my email real quick it didn't ask me to weird okay so it's giving me a default public token create an access token choose a name to help associate it with a project okay we'll call this snap pardon tile styles styles read fonts read datasets read vision read what I don't want to read datasets okay I'll show you what I'm looking at so I clicked on create token I'm naming it snap Garden restrict this token to specific URLs okay for now it should be equal / / localhost 3000 well that work yeah and then I'll click create token confirm my password I don't know what I don't know what password I just I did figured it out cool so that gave me a token I'm gonna copy the token and now I guess I use it on the web select a method for installing matte box GL jeaious use the matte box CDN use a module blender bundler let's use the CDN include the GL j s javascript and CSS files in the head of your HTML so I'll do that I think I just need to include the CSS because that's what this thing was saying yeah include the CSS because the react map GL includes that stuff so let's do this in my public index dot HTML I'm going to include the styles let's go ahead and change the name to snap garden is the snap garden there's a garden snap snap garden and then let's in try installing react react map GL okay it installed [Music] you so let's try it let's just get a map on the page so we have some state well we'll update this to be to use hooks let's see okay so we definitely want to import react map Geo so if we go to our map component [Music] no honestly I might create a header and that's where I put the logout button like up at the top okay but I do need to import react map geo and then we're gonna need some state like that and so we need to bring in use state and so I'll say Const viewport set viewport equals use state and we'll pass in that initial object cool let's just move this to the top to the top okay and then now we need a map let's just comment out this stuff for now and we're going to just spread viewport not this dot state W port so just viewport and then when viewport changes we don't have to do this that set state we just say set viewport with viewport all right will we get a map what do you think where are we where's my app yes I closed it no token warning for information on setting up your base map read note on maps okay so we do need to set up the token that I created so about matte box tokens cool you can provide it in the URL display maps without a map box token oh I guess I could use a different tile source I'm not going to do that though map bak X map box API access token and then you pass in the token okay so that's one that's what I'm gonna do so I can do that right here and then I'll just use an environment variable wait set the map Bach access to open environment variable so let's can I just set it I think create react app comes with dotty and V by by default date react app dot ian dot env file adding custom environment variables process env okay okay okay okay okay [Music] so let's just create a dot env file we're going to have map Bach access to again equals something like that we'll create a sample and then the sample will just empty and in the get ignore we need to ignore env yeah it looks like it's ignoring other things too but yeah and then in my doggie Envy I can put my actual map box s token so let's do that hide my screen I'm doing a really good job of not not exposing API keys I say that now you my account if I get the right token you okay so I've set that environment variable no API keys are showing how I'm going to kill the react app and restart it and hopefully it pulls in that environment variable you let me hide my screen first again let's just see if it actually works so in the map when it renders I'm just gonna log process that you would be and I hid my token so that should be okay yeah no D&V development public URL um okay so it's not picking up my custom environment variables I need to fix that oh do I need to prove I think I need to prefix it with react up that feels like a thing that happens it exposed my API key okay so if we kill it restart it there it is sweet react up matte box ask access token it's it's weird that it has to be prefixed with react app though I'm gonna go ahead and say that that needs to happen okay I'm gonna hide my screen put my real API key in there what okay here we go again got my API key and though technically I think this is like a public API key because it's gonna be in mine deployed app anyways but regardless I don't want expose it okay so I'm not going to log process DMV I mean I think what I'm just gonna do is actually let's let's see if let's see if it works first no it doesn't so what I need to do is pass in Mack box API access token equals token so I'm going to do that equals process and VDOT react app underscore that box app access token like so are we ready oh I need to restart it tada [Laughter] it works we have a map on the page that's so great okay can we set the width and height to be a percentage sweet and then on window resize it probably needs to resize but yeah we got ourselves a map dope all right Matt from NYC or Matt NYC says in hello Matt says I have a question so I have a technical interview for a SD position do you have any tips on how to answer questions confidently if I happen to not know what to answer what can I say what is SD software development cool so I know that in interviews can be extremely stressful and especially like if you're a nervous person it's almost like you're not yourself when you're in that interview so yeah but yeah if you happen to not know an answer it's okay to say that you don't know but what you want to avoid is just saying literally I don't know next question please because you you but you you kind of want to talk around the subs like for one you don't want to be s like if you don't know something say straight up like I don't know this for sure but this is my experience with that you can also ask like clarifying questions if you completely don't understand what they're even asking it's like do you mean and and if if they're nice they'll try to clarify for you but yeah it's okay to say I don't know but my my advice is to be able to to back that up with okay I don't know the answer to this question exactly but in my experience I've done this or I've done that is that what you're talking about sometimes you just absolutely don't know but I think that's one of the biggest turn offs for interviewers is if someone just says I don't know one after another and they don't elaborate on that I don't get to see your thought process I don't get to see how you handle when you don't know things so yeah hopefully that helps that's pretty rambly yeah ask the interviewer to explain it to me that's that's totally fine you can say can you expand on that a little bit I'm not I'm not exactly clear on what you're asking and if they explain more and you still don't know then you can just say I don't know yeah so if the interviewer is talking about their experience connect it with your own ask him to talk about himself a lot that's what you see like people like to talk about themselves I don't like to talk about myself but I think if I'm put in that situation and I don't realize it's happening I'll probably talk about myself but yeah if you can ask the interviewer questions and get them talking that's a good sign or a good thing where else is this is probably a silly question when they say map loads do they mean it is counted with every refresh so I'm a user and i refresh my map page five times I think so from the what I was reading it was essentially any time a client loads the JavaScript library or I think loads the CSS that counts as one map load we can clarify on their website but I think that's what it means yeah hey no no I think this is totally totally allowed Matt and that's a good way to put it I don't think I'm familiar with that can you provide some insight or some more detail or yeah yeah Josh was saying how long does it take for the token to activate it's it was active immediately it was just a matter of figuring out how to get the token in because here's here's how I read things so I mean close that now but when I read this line it says so there are several ways to provide a token to your app set the map box access token environment variable so my understanding was lit is if I just did that we'd be good to go however that didn't work that provided in the URL I'm only loading the CSS from a CDN I'm not learning the JavaScript from a CDN and then this one pass it as a prop so what I ultimately had to do was a combination of this so passed it as a prop and use the environment variable but yeah all right state management interactive map is designed to be a stateless component its appearance is entirely controlled by the properties that are passed in from its parent okay yeah I mean I think that's kind of what's happening see that adding custom data native map box layers overlays built-in overlays third-party overlays advanced cool let's try to put a marker on the map you so I think we can do that right here I need to import marker you oh wow it's literally the text you are here that's awesome um I guess you can just put like an image inside of it and it'll pop up there styling yeah I'm curious what they were using in their example for like markers and pop-ups yeah let's view the code examples I guess it's in controls you so they're importing City pin city pin they're specifying a size and then there's a pop up let's look at their city pin it's literally an SVG and that's that's the marker cool I guess we could get like a little let's do this so instead of saying you are here what if we did there's like a span with a camera emoji like that look at that it's kind of cut off but like we can make it way bigger that's awesome it's too easy okay yeah let's do some inline Styles font size ten rim nice it's definitely it's not like relative to the map size though which is which is unfortunate we could do uh ice we do zoom level yeah let's do viewport dot zoom times some value times 0.5 that whole thing with Grandma up with rim on the end of it yeah so it gets smaller as you zoom out and then bigger as you zoom in look at that okay at this point I'm just wasting time and you know what I've been streaming for over three hours we got a basic app we can log in and we have a map I will continue this soon but I think I gotta go you yeah yeah there's some api's that take a while this this one was instant hello friend hello Robin welcome response I don't know but why didn't you tell me about it that could work too but you also want to phrase it in a way that like yes you're curious or you know a little bit about of it but you don't know the exact answer yeah Dmitry's saying would you expose your client environment variables when you deploy since you can check the network tab yeah absolutely so and I believe this token I'm using is a public token anyways but yes you were absolutely right when I deploy this thing it's a front-end app so that map token is gonna is gonna go with it however when I signed up and when I created that token I set the I set right now that it can only work on localhost 3000 but when I deploy this thing I'll create a token that will only work on whatever domain that I deploy it to cool but yeah I I'm gonna end it there I did not get as far as I thought I would however I am very excited about use global Big Bird which I mean we haven't really seen what I can do yet but it seems super easy to use we're able to like use these hooks to log a user in it's something it's easy the OAuth just works like okay let me put that login button back okay before I go let me let me let me have a navbar from bootstrap the logout button now barbg equals dark so we do this on the map page so NAB our brand and then we need to import an app bar from react bootstrap what happens failed to compile we need a fragment that's definitely an f bar why does this scroll okay so we really only want the height to be like I don't know 80% it's probably too little that's fine though cool so we've got that and then I want to put this button over on the right hand side so that the user can log out let's look at the bootstrap Docs um isn't throw away to like pull right or something like that navbar toggle placement Oh I guess if I did fix top then the map will be underneath it yeah and then I could keep it as a hundred percent 100 percent yeah then we don't get any weird scrolling issues it's just behind the navbar cool I'm looking for like how to put something on the right-hand side of the navbar but margin-right:auto margin-left:auto I don't know throw this button here oh man need to get that button back that button there we go fixed top throw a nice little button right there what do we get easy enough and this should still be a hundred percent cool yeah so we got ourselves a map we may need to resize it on window resize but we can log out if we log in we can log in with Google then we get ourselves a map three and a half I mean technically been took coding for like two and a half hours because we thought of ideas for like an hour but I'm okay with that I'm gonna use this code to change spin size oh you're welcome Slater thanks for tuning in mr. Taylor is asking what am I gonna do another view J s livestream I don't really know I don't really have anything scheduled I felt like building something with react hooks today we obviously didn't get to build very much but it was cool to use this global state to use big bird feathers like this this app is going to be surprisingly easy like we still have to be able to create and upload images and all that good stuff but I I just I can foresee this being very easy to implement these features given that we have access to all these all these little things cool hello Alvie I'm ending the stream anyways but maybe you can watch the other restream waiting for the bus does that mean you're about to go to work yes you're like 12 hours ahead of me or so I think yeah all right I'm gonna head off thanks everyone for tuning in look below the video so you can buy one of these super awesome t-shirts or one of these super awesome mugs and yeah wherever you are in the world have a wonderful morning afternoon evening or night and until next time here's this [Music] you

Channel: Coding Garden

Views: 11,822

Rating: 4.9814816 out of 5

Keywords: coding, css, full stack javascript, effects, learn javascript, vscode, educational, programming, tutorial, backend, node.js, javascript, full stack web development, web development, live coding, live stream, lesson, live streaming, frontend, full stack, learning, mechanical keyboard, react, debugging, mern, hooks, html, learn node.js, beginner, web

Id: LBC8pAD2FJk

Length: 221min 14sec (13274 seconds)

Published: Wed Sep 25 2019