30 Minute App Challenge | MERN Stack Coding Challenge

I don't know why I keep looking at the time it's not gonna get any longer 25 seconds hey programmers welcome back in this video I want to switch things up and do a fun little coding challenge in real time for all of you so in this video we're gonna try to create a to-do list application following that classic crud paradigm so I want features along the lines of create read update and destroy and we'll see how many letters we can knock out in crud in just 30 minutes right so we probably won't get very far we'll give it a shot though and along with that we'll want to do is actually be sure to implement these features on both the front end and the back end so that have it really be a full stack application right so to knock out a letter out of crud we're gonna need to have the front-end and back-end for it so a few disclaimers before we start this is definitely not going to be a classic tutorial this is gonna be more of a challenge speedrun so I'll try to narrate what I do but don't expect to learn too much from this video it's kind of gonna be very rapid-fire shooting of consciousness I will be doing this in full stack JavaScript probably like an ode Express MongoDB react kind of stack and along with that I'll try to keep my copy and paste to a minimum unless it's like documentation code which I think is a fair game and finally Before we jump in I just want to mention the inspiration for this video lately I'm receiving a lot of messages from like current viewers or like old students of the channel kind of asking how you can get sober like proficient with like coding on camera especially and the truth is like you never do I really I edit the heck head of all of my tutorials right which is probably why you don't see me mess up in like a silly way obviously if I mess up in a way that's like fruitful for a student to see then I'll probably leave it in the video but most of the times if I just mess up spelling or I just like sneeze or something like that I will of course edit it out but I think in this video we'll keep it fun and I actually won't edit out any of the coding portion so what you will get to see is me mess up a lot and it'll be very very frustrating for you to watch right but if I've had the pleasure of teaching you in person you probably see me mess up a lot anyway alright so let's jump right in I'm gonna start by using Create reactive I think that's fair game because you probably don't want to watch me just set up a web pack and all that jazz right alright so let's do it starting in three two one go alright so let's do that create react app thing so I'll get all that boilerplate key react app and we'll call this to do front-end so that will take horribly long to install it's already been ten seconds this is not gonna work out well let's though I guess in the meantime setup our back-end which I have to mainly create so I'll do make dirt we'll do to do back-end and I'll initialize this as an NPM package NPM and it's nice and what it will need well we're gonna need Express for sure I'm gonna use MongoDB as our database and also use no demon so if you're not familiar no demon something I can use to quickly watch files in my back and just have some hot loading and as also slow as heck on my internet is trash let's so let's create an index file in our back-end in the meantime so this is quite an entry file so some standard Express setup no let's do Express we have to require that it's been a minute since I've actually done this require Express I'll give us some module focus Alden and well create our app which is just an invocation to Express so I need to begin my back-end server we'll just run this guy on port 3001 and and I hope this works so if it works well console dot log word please is gonna be so so bad all of you were gonna unsubscribe alright cool and maybe just start I don't know let's give it a some initial route so if you make a get to the root then what I'll do is I'll just send some arbitrary yeah well some JSON will just say hey did this work so my back end is uninstalling let me spin up the backend so I'll do no demon and we'll run my index J s work please okay so that's some good no errors and in the backend the localhost 3001 did this work it did work hooray alright cool so now that we have at least our back-end not totally garbage why don't we work in our database which actually don't know how to set and how do we do like MongoDB Express it's a very common stack right maybe some of you have even used it so I already oh yeah I already installed MongoDB probably just copy this weather play what version do I have why would they even do that three five all right so I'll grab this three bit copy and paste the secret to programming I usually do this off-screen just kidding so I'll do that why is this bar I'm so frustrated all right and what we'll do is well take out all of this weird mammal example stuff instead of animals I'll call my collection in database - duze nice that's my zip code just kidding that's just like the default or anything from MongoDB and let's let me just see if this throws any errors who cares right so that's a warning not an error but I should probably fix this so pass that option to the constructor all right actually tells me how to fix it which like never happens in programming right let's do that and it fixes it alright cool don't don't ask me what that does have no idea but I don't get a warning so let's go with that so let's um let me throw down an initial route for all our to Do's I'll make this like semi restful I'll try my best in 30 minutes Paul has it been by the way alright it's been four minutes we are screwed time valuation is the real thing let's do I get requests to slash to dues and yeah I'll doesn't get everything from my database ODB collection of two dues and I'll find everything turn it to in array and this stuff support promises now I know that's a thing so I'll say a weight that was to dues and send back them to dues alright I just want to get like two letters had a crud done oh wait is only valid an async function look at these excellent error messages they sink await nice and I'll hit 3000 1/2 dues and I get a massive error what I always wanted let's see DB is not defined I guess that means that DB is not defined all right course cuz on line 11 I need to create like a nasty closure thing so that DB this is horrible so now over here I can reference DB oh and there's my empty right it makes sense it's empty cuz I don't have any to do so I don't maybe an hour connect we'll just always see some like fake data I don't know so we'll do this thing in art reduce collection well insert many to Do's the beauty of MongoDB I could just throw down plain old JavaScript objects so what's our schema for it to do I have like a dun field oh my god I can't spell I have a done field and we'll make a boolean so true and I'll have a description some text will say right to code it will add a few more of these so write code fix and profit and maybe we'll make this one false to play around with so it looks like our schema for to do we have two fields right boolean as well as some text all right so let's say that how'd that look massive error no I didn't do the pacing thing and I'm gonna do that law in this video I can tell you that already let's see that cool so there are my my three - duze all right so I can almost have read a done out of crud I'd support this on the the front end right so why don't we actually just do that so over here I don't what so now my friend and I I don't want any of this like weird boilerplate from create react app and I will do minimal CSS don't ever expect a CSS tutorial for me cuz I'm trash I'll be just use a library index for yes we don't need this thing let's just try to render something we'll say hi and let me spin up our front-end to do front-end PM start let's go alright so come on so slow front end it's gonna be the hi there it is any errors negative our ever good so let's um let's try to do that fetch request right so here's what I'll do I'll have another component I'll have a list component probably all the girl taking props actually did my main component so I'll do like the Ajax request here for my tire list which in that case means I'll use some hooks so this is gonna be stateful also gonna need to do like a use effect because I want that like component big mount behavior let me just set that up right so we'll say I'll have some to do's and I have set to dues will do you state classic react pattern and yeah let's create the function to make the Ajax Rice's a Const fetch to dues equals async function now just make my fetch request here which I love how if I just needed now rice is a fetch and put my stupid route Chloe logos three 1/2 dues so I'm making a fetch request by default that does it get pretty sure as well wait that now get me my response and then I'll turn that into JSON which we have to actually a way which I didn't forget this time but I always do in other videos so I think for now we'll just see what we print print out gala me do they use effect on this too so let me mount this component I'll go ahead and fetch two dues edge two dues and we'll pass in no dependencies to watch so let me at least surrender this list that's bad did you do massive air nothing was returned from render and the list because that's exactly weighted wrong alright return I don't know that div with a list inside who cares error protocol error because this is not secured OOP that better another error different air cores express the bane of my existence so I guess that's like the shortcoming of Express right it's so lightweight it's so fast but it doesn't come with like anything out of the box right you Heppenstall is like middleware manually so it's a common thing so oh my gosh npm install' cores in the backend and I just do this so just use this middleware kind of standard stuff and Express if you want to do cross-origin stuff and I'll say F dot use cores and you invoke it yeah okay cool so that'll give me cross-origin abilities and we spin up my back-end again so bad typing no beam index oh right knee let's see back in our app refresh oh I see to do is why do I see six of them what's what's that I put three right oh that makes sense actually so because I have no daemon running it's gonna rerun this entire file every time I save it and make a change right if I save it right now I'll probably give me like a whole bunch more I have twelve now because it's gonna just keep adding to my collection over and over again so maybe I'll like drop the collection every time as well so DB collections of to do's and I'll delete everything before I add three that way I'll just have the same three to mess around with why am I getting there what do you want DB collection so that Manny's not a function cuz there's a random s here fine c3 perfect alright so now that I have those three objects and making its way to the front end let's not try to render them how much time do we have all right sorry about ten minutes oh no let's let's just create items right so Const litems little items singular this will be a presentational component so we will have some props I'm going to assume that we have a to do prop passed in from which I need to grab done and description right those two properties done description and what I'll do is well let's return that as a div for now is just put the description in there let's see and now for our list me to render those so what some Apple over it so what you do is dot map for every to do take the to do turn it into in a ten components and I need to pass in a prop of to do which will be that actual to do object let's see how bad this is this public not gonna work at all so what's happening here I'm not rendering cuz I need to add these right I need to actually save these constant items equals that throw down some items don't you work still not rendering not cuz I didn't even even set state so I don't want to console that log that was just ready bug right so set to do's of that thing let's see that there we go so warning key need to pass in a key that annoying react thing so I think my dues have yeah they have an ID which I automatically get back with my database so I'll just use that it should be unique right it's whole point so we're here for Mike he'll pass in to do dot underscore ID an extra brace cool alright so getting some happen now I think at this point why don't we be somewhat reasonable why don't I add a little bit of CSS I will use like a CSS library though so I'm a huge fan of semantic UI but we got to do is quick so I'll just use a CDN to get the CSS file nuts that's a JavaScript CSS is there every individual opponent that's horrible I'm not gonna look through those yeah let's just copy the me link tag I'll be like dang sure and I'll throw this down in our index.html on our front end so right PR seems reasonable alright so that should give me some freestyles letter supply some classes and what I want to do well we have like a list item paradigm which I'm pretty sure something in semantic UI semantic UI lists I don't know list formats I guess we can choose these all just look like allies and stuff this one seems reasonable oh why is it so much now we'll just copy paste I'll probably just take everything out yeah so that'll be our list style which I guess you know we'll just throw down here and our list has items actually don't need any of this yeah let's do that right because just items so here I'll render my items and now my item needs a class of items where's that class of 8 yeah that's a simple low so class cool all right yes I didn't mean class name amazing our messages okay so that was a lot of work just to get these alliance between them let's um I added like a little container thing I kind of want this now be cool cuz I just automatically it looks nice I think that's called I got card paratis nice those are I don't want any pictures those are weird this one seems one sees basic yeah let's copy this so this gives me like it looks like three different sections of a card which I guess we'll also just bake into our our list right so yeah huge stuff here and I'll just take out a lot of this so that'll be like one content section this is another one there's just a lot of boilerplate in it I just want to so this is just like the header that's sensible we'll just do like to do lists fast that's my heading and then in the middle bit will throw down our list how does does that look of course got to put class name that's gonna take a lot of time right all right and then from there looks okay why don't we add in that bottom section well add like the input for adding that to do so I'll give us the create aspect of crud I guess me just have read done right now which I guess is pretty fair I'm not really doing anything with a done yet which is kind of annoying but we'll save that for later so let's work on the creating part so we'll add like an input I think we have some free styles in here right you have inputs yes you do all right cool so just some nice inputs don't want any loadings stuff these buns are that could be useful this one looks nice like the color I'll steal this master of stealing coat and let us why is this wrong oh yeah input in react it's probably self closed right cool so I have my extra content let's make all of these class name I don't want the copy icon right that's weird let's make it a plus icon that has to exist nice I will say add here even nicer and let's start filling in these props so our value we know we want this text to actually work in the react way so have to make a controlled input so we'll assume a text slice of state which I'll do right now text no set text nice and then why is this bigger than its parent I think in uhm semantic UI you can have it like respond or react to the parent with by saying fluid oh I'll do that and now we'll want to actually make this a controlled input so I can't really type into it select I say right now we have a value but we don't have a change handler right so on change now I'll probably do is in line for the sake of speed so we have some event which we will set the text that was my hook from before we've set text with the e target value how we doing see all right that's works but I cannot submit yet which is fine so I don't have like a forum cuz I just didn't do that cuz I'm done let's um maybe just put up on click on the button I'll see that so on click I'll probably create a callback for this so we'll say add to do so when we click I'll fire this callback which will have to do some Ajax so all might be just copy this so it will call this my ad to do singular and this will have to make a post request so I know for this we can say like method post by default that doesn't get I absolutely don't remember the headers I needed so mvn fetch a reputable documentation so I want the application JSON header fashion do that way I can send some and JSON over the wire and yeah I need a body of course to for the to do I'm adding so what do I want in the body well I only have two fields right yeah done in a description so I'll pass in a plain object of the description which I guess it's just the text skirt house or of different names I guess who cares and I guess we need done so I'll just see if all done to false so when you create a new to do make sense that it is not done right so it'll be false and then from there I think that's it let's let's try support this on the back end so any other routes will make this as a restful as we can so let's make a post - duze so post and now for the to do collection I want to insert one insert one insert the body right so I think I sent over the wire the yeah I sent the entire entire object as the body so that should work not but not the best pattern but you know what do you expect in three minutes so I will just arbitrarily send back please work um cool it's a post post post nice let's let's try alright add to do so does this work oh it did not work oh no back in error type air ID undefined I hate that it's like JavaScript it always says that whenever anything's wrong let's let's debug this maybe their request body it's not defined see that fresh this work and what are we having our errors yeah it is undefined yay Express probably have to yeah I need that middle word body thing Express body Express I don't think even comes with yeah it's not coming body parser anymore so I have to install it myself so I need the middleware to actually parse a json out of the body which sounds ridiculous but you know it's somewhat an advantage of express when it's so light now we'll just do the standard middleware use thing wow this documentation sucks all right here let's take yeah we need this take this so get that middleware and will use it in its in JSON form BAM all right so can i parse it now show me the money on see so I'll spin up the backend no demon index nice nice and well he worked oh so there's the object that we received I think an error I don't have an auto refresh on the front-end so I have to manually do it oh and there's my there's my work oh yeah that totally works all right so in the front 10 we'll just have it automatically just fetch all two dues happy post one not the cleanest of patterns but it'll work so after you add it to do you're gonna assume it works cuz there's no way my code to be wrong and it will don't do any error handling we'll just fetch all them to do this and I guess while we're here why don't we set the text to actually be blank that way empties out nice all right so that's working let me take out this little debug so I think we have create I also think we have read how much time we have if we have eight minutes so we probably have time for either one of update or destroy I think destroy or delete it's probably the quickest to do it's kind of just like post but the opposite right let's um let's have like a button to click to delete stuff so maybe the front end first for this guy let's under an item give it an icon so I could steal this I guess and I'm pretty sure this like a trash icon yeah nice I love semantic UI let's make it read when you don't know CSS you just like some of these properties right I can't even say stuff like rights floated yeah and I'll just make this uh but while we won't even make an actual button I'll just put on click on it I think that's possible so when you click on the trashcan you want to do call back called delete to do nice and it's not to find of course I didn't define it one might or may even think about right now so it Const no we're gonna have the rails kant's delete to do and we'll do our Ajax or fetch before that deletes somebody's sink that'll be kind of similar to this I'll just copy this right I think about the leading though I need to identify exactly what I'm deleting which I'll make kind of restful so over here well-well pass along the the ID right so I'll do some interpolation will say slash so the rat will be to do slash the idea of that to do which I think we receive automatically right yeah I have a underscore ID so I can just pluck that here I think ID so they'll give me a nice delete and I don't need any of these headers anymore just deletes I'm just I'm just going to assume it works now let's try to work on that on our back-end so I need a delete it's a slash to Jews of UID nice and I think there's just a delete one that doesn't operate so I'll do delete one and I want delete the one where the ID is the thing in the per am so request stop params of ID and I know a num in express or rather in MongoDB I can't just use the string of the ID which is super annoying so I'll say I was did and here I'll say deleted I feel like cast it as an object so you need to grab that this is annoying let's take this out so from the MongoDB module we want to D structure out client and also it's an object ID constructor saying I know that it exists and I have to actually cast this first object ID so I'm going to delete one document with this particular object ID that they specified in the route params so let's see how that goes oh actually the core we actually test it before I forget now let's just test it let's try deleting something so refresh the page let me add something like new like an air post it is not defined then I didn't make it shrink close dude I'm in a string here yeah my bad let's try that refresh everything you know i'll delete prophet Boop crush it and it's gone all right we're good not that manually refresh it so after we um delete something we want to refresh the entire list I'm using a sledgehammer here yeah I'll just I'll just fetch everything this is gonna be very pretty let's uh get that fetch news down inside so I have to add the pass as a prop I guess right so fetch - duze pass that along and we'll just have the child fetch all the - dues over here so I could say props dot fetch to do so actually when we delete we'll just refresh the page or really the single component so let's do that boop boop nice and yeah this information is actually durable in our back-end right that's the pointers at MongoDB so say one two three I dig it lovely one nice and then from there three minutes three seconds we don't have time for an update I know that that's just let's just go as far as we can we'll see what - see what happens so one thing I'm not happy with is we're not using done that true/false thing that's like a render render some some check marks or something so maybe before the description will add another icon and I'm guessing there's like a there's like a check icon like a nice checkmark here I'll grab there's a real check marks let's grab this one check square outline so over here yeah I'll make it like a check swear outline and we'll make it green how does that look nice let's do a left load it so it's all on one line cool and now let's have it be conditionally rendered because sometimes done is false right so well make this bigger we'll say hey if this thing is done then go ahead and use a green check mark thing otherwise I'll just render it's probably just like a regular square right could you square it square up yeah let's do floated Square outline icon also well these are are done false by default let's uh reseed our database so I'll just add like a random comment here I should reseed never have it right so I have green checkmarks or things that are done and empty boxes for things that are not done how much time do we have we have one more 30 seconds let's um let's try to make this toggle that'll be annoyingly hard so basically if they click something that's done I wanted to be not done and vice-versa so for both of these we're gonna throw the B's let's do an on click and we'll do toggle done and then I'll add another another callback for that they say toggle done and we'll make it a nice so we got to be like a put request yeah so we'll make a put request oh my gosh and I'm gonna need all of this because I do want to send a body over the wire right OOP yeah so we'll do that nice and for my body I know just do a full document replace kind of going for the quickest solution so we want to invert the Dunnville it's also a done is not done and for now we can't change the description so we'll just say keep the description the same nice so we're making the correct request I think and I don't know why I keep looking at the time it's not gonna get any longer yeah 25 seconds let's try to support this on the front end so I know at least I'm gonna do on the front end is yeah actually I'm already doing it I fetch all the Jews after I talk aligned Oh guys going to the back end let's um have that put route so we put we definitely stop the state the ID but I want to do we'll just do a replace oh and that's time alright we got we are pretty far I'm pretty pretty happy with what we got down so we did create we did read again we did delete pretty well um since we're so close and I can almost taste it let's actually finish up and just have this thing at least toggle and I'll be very satisfied with our our update right so going a little over but I can't help it let's let's support us on the back end so when I make up a request to that you do with it to do ID I'm going to replace I think I can say we replace one place one thing where the ID is that ID and I think I can also I can give it the new document which will just be requested up body yeah I'll call this put putted that will made it up let's let's try that right so in our front-end they create so I refreshed irregular just add some code let's toggle this hahaha and there's our toggling so I'm considering that pretty pretty ok let's try to test all these features so we have our create or I can add stuff new thing nice I have my read just by like getting all these things and I have my update I can toggle alright and that state is actually saved on my backend nice I keep refreshing and it's durable data I can also delete stuff by clicking on these these garbage cans just pretty slick all right so I'm gonna consider that like 32 minutes right we'll call it we'll call it a truce I think all right programmer so you have it that's our full sack to-do list in just about 32 ish minutes so hope you enjoyed this video I don't have a good time making this different kind of content and I'll see you in the next one [Music]

Channel: Alvin the Programmer

Views: 7,710

Rating: 4.9763312 out of 5

Keywords: alvin zablan, coding challenge, technical interview, todo list, react, react hooks, mongodb, nodemon, express, semanticui, speedrun, node, app academy, fullstack, frontend, backend, tutorial, create-react-app, fullstack application, crud, restful, mern stack, coding challenge practice, backend challenge, frontend challenge, web development

Id: lvBH9Hj5gxk

Length: 33min 58sec (2038 seconds)

Published: Tue Jun 23 2020