Let’s pair program a Reddit place clone using Firebase

Key Takeaways

one one hour BAM counting let's pair program and read it play strong with firebase where every function returns a promise all right [Music] [Music] Monday morning we have David with us today we are going to do kind of the same thing as last week we're gonna code and or something that is suggested by the audience and we're going to use it with an arbitrary technology also chosen by the audience and an arbitrary restriction also chosen by the audience and we're gonna do it pair program live pair programming sort of sort of wraps it will be edited who knows who so so what are we gonna do let's just figure spend five minutes figuring out what it is that we're supposed to be doing and fun forum so we have one restriction we have very very little time like this is setting us up so much for failure it's not even funny all right we should really have a timer hang on setup and time a poor feminity all right the time box we need to decide within five minutes what we're gonna do what tech to use and what silly restriction we should have so sad to suggest billing Skynet seems a bit woozy too easy builder stories help characters locations as an interesting one tech view Jess like I really dislike view for arbitrary since have you ever used it No so that's perhaps that's a good thing to do try it out I have never used it no that's true like because I'm a view racist I sure solely use view so maybe a bit over-ambitious but something like ready to place what is ready - yeah let's read its place the experiment involved an online cameras of 1 million pixel squares located at the subreddit add a subreddit called our place which registered users could add it by changing the color a single pixel on a 16 color palette oh that's pretty cool actually I like the idea of some kind of weird collaborative like yes the canvas where all users can just dump and I figured like if you if we use something like firebase or something then it will probably be relatively easy to build as well what do we have on the timer oh and we have two minutes left MPD is ideal social network that would probably be just something that is completely focused on just meeting other people like just event based tinder yeah like now we could use a tinder that it's not about meeting it's just about being judged but let's just write the title or this thing like Reddit place let's let's pair program a reddit place Klum with what firebase we need an arbitrary restriction last week we had Comic Sans so here's a bunch of like only is one hand make it in your Swift the only use libraries you never used before okay one minute to find a restriction from the Twitter yeah sure meat no mutating state where blindfold it make it compatible with Internet Explorer 6 hey IQ like this everywhere every function should return a promise okay let's do that where every function returns a promise so basically I guess we should just like design-wise it's just one blank page that with pixels like here is that page see we have pixels but if we're doing mobile they are really really hard to get so we have to have some sort of way of just like zooming in on a pixel so we should have like a coordinate system that exists that doesn't have to correspond to every pixel so perhaps it's one each each pixel in our world is perhaps one fraction in the CSS so whatever I don't know yeah and there yeah yeah and when you click a when you click a spot then that will have to pop up some kind of color picker or that you like you have a color picker somewhere so for each thing Oh were you only allowed to do one pixel yeah you would like the restriction on the ready place was that you kind of once you place the pixel you timed out so you couldn't place another pixel for five minutes that's probably out of the scope for okay so I suppose we start the timer yeah one one hour BAM counting let's pair program and read it place clone with firebase where every function returns a promise all right all right so I will set up the visual studio code environment and like a great write react app I suppose while you get us some firebase keys googling firebase keys what are we gonna call this fun fun place fun fun theme I love watch the progress voice alright I have a react environment I'm star setting up a cloud fire store I guess that's what we're gonna need test mode allowing all reads and writes to database so secure I'm sure that no audience member will mess with that no no database is ready to go just add data so it sounds so simple cool I sent you the collaboration link or vicious idiot oh I'm here I got it so when we're doing dishes to do code can I save things like hello now I am updating and then can I save it and it will be saved for you as well yes oh that's pretty cool huh that's funny we have 53 minutes remaining so how do we get the firebase stuff in I don't know I can check out the docs and see how we do that and you can start with something else you realize that my recording stopped at some point Oh your video recording yeah but if it was stopped I will replace it without like mspaint drawing of myself perhaps we need to get some stream or a gear for this yes like eventually I want a stream like with my proper camera like I know exactly what gear to get is so expensive support the show on patreon by the way okay you need to add the firebase admin SDK to your app so just type hey hey give me the console and let me type yeah don't you have the console where's it gonna live share livejournal share terminal read/write right now you should have a terminal oh my god that is so cool amazing I love this this is this is a lot of fun like I can keep on doing this while you're doing whatever you're doing yeah we should like probably invite like audience members to do this oh that's awesome is there a way to share and remote like Chrome because that would be very useful if we could like navigate Docs together and stuff like that if you're watching this and you know how to do that bleep write it in the comments because we can't do it here because then the entire I don't know 50 minutes will go to that okay what are we doing this dot state dot I'm gonna put this on cloud functions on Google cloud platform or as our own server I figure like what's the path of least resistance just do it that's our own server because we have never used to cloud platform or functions in that way I think isn't this just a client app like we're not doing are we doing things server-side at all no because everything is in their storage because right now we're not like at a later phase I suppose that we will be bothering with with security yeah and then we will probably have to have like it then perhaps a cloud function would be an a good thing because then we could just make an HTTP request and then that writes to the database if it determines that the client is allowed to but and then we then it won't be able to do orbit arbitrary writes to the database as well but we'll do that later for each so oh that worked sort of ok I'm enabling anonymous sign in provider for our cloud project or whatever they're calling it that sounds amazing what does that mean that means that I think I'm enabling every everyone to be able to write and read and do whatever they want super secure position:absolute now things will work oh I'm surprised that this actually works why does that work I could probably refactor this to be cooler these structuring for the Queen's suite we have 41 minutes remaining and I've drawn a pixel I'm gonna draw another pixel yeah I need to actually multiply this by 10 or more work how's it going I'm reading no I hope the fun part here we're just using tools that I know figure out a color picker here yum install reacted color github this looks pretty nice Matias I have to you have to authenticate with firebase so let's just try this I will post your terminal stuff and we'll see what happens when I run mmm no firebase now we probably need to install the npm module you get some kind of authentication window popping up right now no perhaps I think that sort like a shorthand of like generating keys and stuff we run it in a real terminal nothing happens no we have to firebase login first wait wait wait all right won't act i X is your Google Account login successful brilliant aha that's funky like the default firebase product for this directory we have a project court I misunderstood project active run with project I've defined on alias while you're doing that I'm going to do define this field clicked function I supposedly to get some kind of event let's just console all right let's see what we have here I can click the the dear I suppose I was expecting that that would have worked oh I always just clicking and correctly so I was I was trying to click down here but if you watch the dev it's actually yes that sighs what are you calling your coordinate feel like something pixels or are you calling it I'm calling it pixel painting sort of a collection with something in it so do we have an an x and a y and a color we started yeah exactly if you look in app top J is on line 12 oh yeah great it's very nice that I can see when where you have oh that's awesome so Microsoft are not sponsoring us but they should they should contact us you have you know the business you know you find it on the about page of the YouTube channel when the color picker has changed then this as Joel's gives stump also oh and gives me a hex excellent blah blah blah blah blah blah so when we have a coordinate clicked going to set the state to whatever is like the current pixel and so on X so it's going to be x + y I mean I I could be just doing this and just like transferring that but to be honest I'm not a fan of that kind of programmer comes because it becomes hard to figure out what the hell coordinate clicked is actually accepting and what's it it's doing this is a lot easier to you know follow what is going along and it makes like coordinate click does a simpler a simpler clearer function rather than something that passes something arbitrary along that should maybe be formatted in a certain way if this dot state dot current pixel there so if I click now that should be showing the color yes it does con cats I think we can do this mmm that did not work why not why not why why is the console not expanded console is so small well it's it what is what console it's so tiny oh it's only the console that is actually really big nothing but the console can actually inspect the state here because we have the react chrome plug-in which is really nice it's actually adding the the pixels here so it has an X and a y-coordinate click we need to actually divide this by 10 or it won't be correct I think oh hang on I can't do this I need to use set state I am done this dot set state I don't know react when we worked with it for years pixel it's this even fire ring oh the car pixel is oh it's because it's still triggering its in its triggering and whenever I clicking the color pick it's probably triggering a new click on the on the dip which we should prevent so perhaps oh hello there beautiful think I have this working now actually you check out the screen share yeah wow that's awesome it's not perfect math dot for the world yeah now it's actually like pixely also the position of the holes like a picker is bit messed up the color paper container position oh you know perhaps I can actually use the current pixel X and times ten what is happening must be wrapped in an enclosing tag what is wrong with me it's Emily's hard 14 minutes remaining okay yeah soon I have something here okay I haven't really read the documentation that well well check out firebase Jas so I think it's trying to initialize and then I'm trying to sign in and honestly and then try to get the pixels in the pixels collection I don't know where to run that how do you do this export module dot exports or I don't know it's different in wherever know it's like the exp is export to fold stuff import stuff from like this is so annoying like element dave has no corresponding closing tag oh it's because I'm getting that one come on are you compiling please compile is it running yeah module not found firebase functions in a football field SRC it would have been good to sort of I don't know learn fire place before we started yes let's make videos when we draw the same conclusion in every video so people know what to expect exactly so it's like yeah this would have been good to learn beforehand and then we don't learn beforehand in the next video brutal okay more Joel not what the hell is this okay firebase admin is that it but I like this whole code sharing and terminal sharing thing yes logo is defined what never used uh-huh okay then it's the versioning what is that comment that out and I will keep on working uh you can actually come and out oh yeah of course that way you can break my code alive cool then I can do that and that but I expected it to I cannot hear what you're saying writing in the chat I cannot hear what you are saying you are a robot well it's a really bad Wi-Fi here and then I used my 4G and then that wasn't working so I tried the Wi-Fi again and then so we're are we on time oh three minutes so I suppose a firebase we didn't solve that part no that's on me I suppose the firebase setup is they have some work to do all right so perhaps you should switch to that I I don't think that I think that a mistake here is that we should ask each other for help when we're stuck yes because I have been like having super flow here and like this so let's try to like give ourselves like ten more minutes and try to solve that so once we've altered I just want to make a query and then get something get doesn't give you the live feed it just gets one document at one instance I just wanted to try something and I don't know if I'm doing this like the firebase initialised app with the firebase configuration if I really have to do that off I'm not really sure I think that it works in mysterious ways is there a firebase old package it should be yes install that it's really annoying that they're all there examples are or isolated give us a full example you bastards so I can send you one example that they do have [Music] friendly eat stop Jaya but these are global what do we that pull this in firebase so it's it's an example to serve it on firebase in some way so perhaps that's why they don't have the requirements brat because they sort of assume that it's available globally and someone some how could that be the case oh you think that why firebase is sort of weird when you're using it with with NPM yeah we don't do this initialize app thing oh okay now I get it yeah yeah okay now I get it like this is just yeah because we don't have access to that right now we need the actual keys of course you know a lot of sense so this is just this is the you need to paste your actual keys in here I would have actually seen that if I had just read the code from top to bottom but I just started staring at this thing so I suppose that then that this earth here is only available once you actually do the initializer we actually had a restriction that every function should return a promise is that let's be it oh I suppose I could make every function here return a promise but it actually wouldn't make any difference because everything is just happening and as a consequence of state being changed if I make this and sing like I'm going while you're doing that I'm going to yell conform to our arbitrary requirement Oh can't resolve service account GJ son why perhaps it can pull in Jason Potts she would just save it straight up in the code just to get because I'm possible that the Jason thing in no specific knowledge it okay that seemed 205's all signing on your own oh god white behavior data be stored in fights or conscious change and your app may break today on court in promise cannot confirm convert undefined or null to object forgetting this thing by res config environment variable is missing initializing firebase admin will fail but we're not initialized in firebase admin so ah I think that we let's square it we're over time we failed doing a simple query to firebase and we cannot figure out what is wrong but that's just one hour and there are at least eight hours in a working day so for one hour sort of that's okay I would money theory like just from my previous experience with fibers is a firebase is kind of based on you pulling in script tags and if you don't do it like that and you start you want to use NPM like we use here things are just like the docs are not adapted to that so we're not really using their golden path because their golden path is dumb but I don't know I I don't know like what does this even mean like no bonus gr PC expense they request over dependency is an expression like what are these things else No we will probably figure it out but not in an hour but it got pretty far like I I kind of have this pixel figure working and I think that we could probably get get it working in what do you learn so first I can say that I learned that firebase is like any other service that you just have to figure out how to how they're doing authentication everything and I'm sure it's super sweet once you got that service account thing and everything running but in one hour I didn't get it running so perhaps it's a two hour task or eight hour test but I think by looking at the documentation it seems pretty sweet once we get past this part so what did you learn on the front end I learned that Visual Studio like coaching is pretty great it's pretty cool like it was that was very simple to get working yes like we literally just tried this for like ten seconds before the stream and everything just worked extremely smoothly and it was very easy to yeah I just had to install the extension and then I got the link and I clicked the link and it said do we want to open code with this link and then I said okay and it started working also getting like this react color like it's so nice to have a strong ecosystem I could just like oh I want to react color picker and then I asked oogle react color picker and there was one that was super easy to to get working it was also good that we discussed like had this like that we did this extremely dumb simple if spec beforehand that made things a lot easier because it gave us like a correct that gave me a direction to work with we also it was also good that we figured this thing out where we like didn't do like a pixel coordinate system because that would have meant made this a lot more annoying the arbitrary restriction that we had was actually not all that interesting in the in the context of a react app where everything is functionally reactive because you're not really waiting for any function call to complete you're just calling function so the fact that they return a promise is completely irrelevant because you're never using the return values of anything you're setting state and then things happen as a consequence of that so and then the lesson is that we should learn the basic tools before we start using them because otherwise it's always this whole learning thing but I guess like in reality that's the way you do it you have to learn it the way while you while you're trying to figure things out you have to you're learning it while you're figuring it out it's a common programming mistake to sort of try it try to figure things out on your own it seemed like a good idea to parallel process yes but it wasn't but it wasn't pair programming no like I think that we if we had focused on two hands on one issue at a time we would have been much further along like I think that this actually ironically we kind of demonstrated the problem of not doing pair programming because you when you are not doing pair programming your team is always as like if there is a breakage on one chain like the entire team slows to that speed so that that's why more programming and pair programming works so well because you're constantly swarming on the most difficult problem at the time which means that you are actually maximizing your velocity ironically even though like you're not maximizing your efficiency also like we it would be even better if we could find some way of remote controlling the browser I'm sure that that is possible yeah you okay so we're done yeah I think so you watched an episode of fun fun function we release these every Monday morning Oh 800 GMT but you will forget that so you can subscribe by clicking here or watch another episode right now by clicking I am mpj and and I'm David until next Monday morning say curious [Music]