Emailing Form Data with React and NodeJS (P2D28) - Live Coding with Jesse

hey everybody its Jesse today I'm gonna try to do something that doesn't happen often I'm going to try to get done what I said I'm going to get done in the video description and in my tweet and I'm gonna get it all completed in this stream and it's gonna work that's the goal so I normally don't prep beforehand what I'm gonna do but I knew there's going to be a lot of copy and pasting so I got most of that out of the way so I'll be explaining what I copied and pasted but in case you didn't read the description yet for the video what I'm gonna do today is get the suggestive story form working so let me show you what that is first and then we can go to the code so it's right in the middle of a pulmonary session so let me stop that here's the form it's really simple name email and then just a multi-line form or a multi-line input so what we want to do is when we submit this it's going to go to our server jas file and then the data is gonna get sent in an email and we're gonna use the send grid API to do that so we've already have some of the setup done for that since we're doing the same thing for another form for the service request form so we did that a long time ago though so I think this will be nice because it's way less complex it'll be a little bit more accessible for beginners to understand what's going on since we don't have to handle check boxes or the file upload field so this you know just text inputs this is a much more likely scenario if somebody was actually working on a site and some they wanted just a simple contact form you know most sites have something like that but not all sites will need a multi you know multi file upload so and they won't need to tie that into the project management system or anything but this is definitely a very common use case so I wanted to do this try to do it all in one video and have it be helpful and if you notice the title for this video is different than I have been doing so I had switched for this project to just saying what project it is and what day it is of that project but after talking with some of the other with Quincy and some of the other YouTube contributors for free code camp we decided that more descriptive names might be better and I agree I think for those who are closely following the project is probably ok to have the titles like I did have them but for anybody that's new or just suggestion pop-up and all they see for the title is project to date 20 they're gonna have no idea what that's about unless they took the time to click and read the description but how many people are just gonna click on a video they don't they don't know what it is so I'm gonna try to do descriptive titles from now on I may have to just change the title after the fact because I don't always know what we're gonna end up doing during these streams so in any case I just didn't want anybody be confused by the title change I did put after the descriptive title so it's emailing form data with reactant nodejs in parentheses I put p.2d 28 so that's project 2 day 28 so it'll still be there it'll still be in the description that way you'll know you know in the sequence of streams what stream or we're on but hopefully this makes it more accessible to new people or someone who maybe doesn't want to or doesn't have time to watch all of the project but might be really interested in just one part of the project so anyway let's um let's get started let me say hi to everyone all right so hey Sebastian Umberto's says he loves the p.2d 28 tag when I put that in there I felt like I was describing Android in Star Wars like r2d2 or something like sorry I'm a nerd okay America says is it possible to change the previous titles to match this yes definitely and I think I will try to go back it's gonna be tough to go back and find the time to go back and do that but I think I could probably go back and retroactively Lee change the titles to match this format that'll be better that'll give it I think well for the same reason that I just said you know for this video it's just gonna be a lot easier for people to know what's going on that particular video at a glance I may actually change some thumbnails as well so the thumbnails will most likely have my face on them and that'll be really easy for people to know whether they're seeing a video from me or from from beau or Cody or anybody on the channel at a glance they'll immediately know so right now you don't there's not really any way of knowing unless you really look at the text on the thumbnail so I think I can get rid of the live coding with Jesse as text and make the main text bigger and then have my face on there and then people will know all right that's one of Jesse's videos so anyway that's probably coming just some some changes that are gonna happen at some point I don't know when I need to get somebody to take my pictures I can put it on there but let's get started and let me walk you through I do want to say Sebastian's been busy adding on to his pull request from that I think he submitted yesterday initially but he keeps adding to it and it's awesome so I'm not gonna go through the stuff probably what I'll do is when we finally merge that in then I'll go through everything but for now if you're interested in client side form validation check that out because there's some really good stuff in there it's pull requests 56 that link to the repos in the description but now let me walk you through a little bit of what I've done so far and then we can just pick up from there so you can see I make this a bit bigger for you all on the right we have the service request form and I was copying heavily from the service request form so I'm gonna make this a bit smaller for now so what I've done is I've added in I've made it a stateful component so instead of a stateless functional component which it was before we need state so I've added some state right now all I have in here is the state that we need for the modal that comes up when you submit to tell you well when it's loading and then whether it's successful or whether it's failed but we're probably going to add some more state in here to handle the the inputs we copied over the handle the input change in some of this stuff we can get rid of right we don't need checkboxes on here so we can make this a bit smaller but right now it won't hurt anything to leave that in there we have this handle form data so you make a new form data object and then we're gonna post that to our URL which for now it's saying upload URL just because I copied it over but I did change the actual value to story form that's the URL or we're actually going to send it to so I'll probably change that name at some point so it's not confusing we're just doing some things to handle the the dialogues it's not really a big deal this is just basic stuff from material UI and then down here on the fields I've added in so in our service request form we've made you know constants for these fields so I think I'm gonna do the same thing here for consistency since this form is so small it would have been okay if I hadn't done this but since we're copying so much I think it'll just be easier to do it in the exact same way on both forms so this down here will change but I have added you can see the the dialogue components here and I've added a click handler here for the form data on the submit button all right so that's about all the farther I got the only other thing is that I put in the server.js bring this out something of it over here so for a server I've added in a section to handle this form so I don't think I've finished it but here we are so we have story form and what I've done here is just copied from what we are doing in the service request form to handle that I've copied everything except for of course what we had for file uploads and I also don't need to send this data to a project management system so I just copied the SendGrid stuff and it's nice we're already initializing SendGrid with our API key so we don't have to repeat everything's you see this section is a lot shorter than what we were doing for the service request form which is nice so that's just the big overview once we get things going and we can step through what's going on and I'll explain it a little bit more I don't want to spend too much time time upfront explaining so don't want to run out of time to actually get this this going so it may seem like I've already done a lot but don't worry I will explain it more and I'm expecting that it won't just work right off the bat and that I'll need to take time to troubleshoot so if that doesn't happen then that'll be amazing and that that'll be cool I like that but realistically when I'm copying so much stuff and trying to make it work um there's going to be something that doesn't work so it'll definitely take up some time on you know trying to figure out what exactly we need to change so let's go I'm I'm gonna try to explain as best I can what we're doing I think instead of initiating the state like this I think I'm gonna just copy everything that's here and then get rid of what we don't need so I normally do like setting state like this as opposed to using the constructor but since we're already using it over here I think it'll just be easier I'd rather just utilize as much as I can from this then kind of changing it and rewriting it and just you know for efficiency and consistency all right so we only have one multi-line field let's get rid of all of this except r1 and we only need name and email email here we don't have any check boxes and let's see yeah these are check boxes we don't need this either okay and we don't need this file input here but I do want to initialize form there okay wonderful so this date form string box we don't need check box props there we go there's your four string crops okay great so just to explain a little bit about what's going on here there's we don't necessarily have to use the constructor so I was saying before we could just initialize state as state equals and then put our object there if we did that and and also did not bind things here then we would need to use some arrow functions well like this to bind this in the proper way otherwise we need to do this okay so you can see right now we're only doing it once it's not a big deal but if you had a lot of things and you had to you know copy this let's say you had ten different things it's much cleaner just to use arrow functions if you can so I think we've talked about that and in depth a lot more in previous streams but I mean I thought it was worth it to go over it and I forgot to start my phone mode or is this just remembered all right let's see I started 15 minutes ago so all right I'm just gonna start it from here then so we'll start session from here after this timer goes off I'll take five minutes and go to the live chat and answer any questions that you have I'd like to get in at least two Pomodoro sessions there is something going on on campus later on that I'd like to go to so exit three so if I can make it there I would like to but we'll see how this goes okay so now that we have that there's only a few more things that we need to bring in to make to get it ready to at least test it okay so we have need for Matt property bring that in we don't need anything with the files we're already bringing in handling form data we are gonna need to adjust this a bit because you know we're still getting the upload input things we don't need that Tylar close okay great all right so let's go ahead and let's try to remove some of the file input stuff that we don't need so obviously this is for file input this is fine here this is fine okay great that looks good sure so close let's change the text new story suggestions and successfully okay alright now let's populate our form with these and the data that we have in in our constructor so you can see over here on our service request form on the right hand side how we're how we're doing this so let's copy it's copy what we're doing here I am gonna have to change it slightly yes a wife two cheese's I can change it here let's do that now while I'm thinking about it okay so I want this to be full width so we're using the materialized column classes so if I want it to be full width I'm saying on small screens and up I want it to be 12 out of 12 columns so it's a 12 column layout that's as well you can see with these I wanted to only take up half the width so in small screens still I want it to be full width but then on medium and up I wanted to only take up 6 of the 12 columns so not every framework has the same amount of columns but this is somewhat common way to do it in terms of just the concept of splitting the page up into columns it's kind of a nice way to handle responsiveness and you're changing your layout based on screen width okay all right so that's that's taken care of now here's where we're actually gonna put this stuff in it now we don't need these column classes anymore because we're including those up above so we're just gonna grab these two and you can replace let me make sure I don't get the there we go okay we have this in as well alright wonderful let's save that and see what will we get on the page it should look exactly the same awesome and it does right so now instead of us putting those in as we had them before you know where you could actually see each input now we're just iterating over our arrays that we had here so you can see we have name and email and then this array which right now only has one item in it becomes our multi-line field so this is you know somewhat unnecessary I guess to do it like this we could have just put the multi-line down there but it didn't really take that long since we were just copying it over and this makes it nice later on if we want to put in fields all we have to do is just add things to this array and if we really wanted to clean this up we could put this data in another file somewhere and then just import it and that would be good if we had really large arrays of data and that way you know could keep this clean and make it you know much more reusable to just you know pull in data different of data all you'd have to do is just import a different different data set or you could even pull it in from an API or you know or anything but for now this will work there's just a very specific use case for this and it's not likely to change often so this should be fine okay so I think we're ready we're ready to try to actually send this and let me just do this first I think we need to do this on our port 9000 and so we'll have to build I'm not doing any validation right now on this email let me I don't even think it's required I don't need this also right now I don't even think it's it's said I'll get into what's going on in the server in a second after I test this okay that's what I thought so let's sum let's go here I'll probably need to build again yeah so drive my let me bring over my terminal I am doing all of this in the master branch which now that I think about it I'm doing quite a lot so it probably would have been better to do it in a different branch but if I need to I can commit this to a different branch let's say if if it doesn't work out and I don't want to keep this on the master branch and it needs more work but I think it should work out all right so I need to build I think this will build first when I run this no it doesn't okay so basically we have like two different ports running on one of them the forms actually work on the other one it doesn't but this one pulls its data from the the build like the production build files so that's why I showing two different things for this this is still reflecting the last time that we did a build so I think build is still the command to use okay I don't think I mentioned this earlier but while we're waiting for the build I do have the secondary stream going on Instagram so if you're interested in seeing my office and seeing me as I'm coding you can check that out my my name on Instagram is in the description okay great start this up again and we should see a change there we go oops no we didn't see a change there we go said manually refresh okay great so what should happen now is that we shouldn't get an error but let's let's see let's just try to send this hmm okay we did get an error let's see if we got any message about that all right let's check out the server and this would be alright because then I can explain what's going on anyway and as I explained it I should find why I'm getting the error okay so we're bringing in the SendGrid api we're also bringing in formidable this helps us to handle form data this is no js' we're using Express okay so we're also using a lot of environment variables so when you see things like this process dot ends these are variables that we've saved in another file and that file does not get committed to the repository so it's good for things like passwords and API keys things that you don't want the whole world seeing you can put in that file and then in the files that actually do get committed to the repo you can just add this it'll grab that value no one will ever be able to see it okay so that's what we're doing we're just we're bringing in Ingrid and we're passing in the API key we okay so we will be utilizing this so when we want to actually send this to SendGrid we're gonna call make SG requests and then we're gonna pass in the body write the data and so this just sends it it's a post you know here's our path and then we're sending our body JSON format we're not we're not going to deal with this stuff with this form if you're interested in the Reich API you can check out one of our previous videos right now and you'd have to look at the descriptions but hopefully I'll get the titles changed so there's a bit easier to find certain titles alright so here's where actually handling the story form so story form so we're making a new using formidable we're making a new form we're setting our headers parsing the data okay we're taking the fields and we're creating this fields object we should be adding key value pairs we're also making a string and this is what we want to show up in the email and we want this this break here so that it makes it readable and it's not just all the values all scrunched together false we're doing error handling here all right so here's where here's what we're doing sending the email right so if enable send email so this is one of our environment variables I mean this itself isn't the environment variable but up at the top we're grabbing that environment variable so if we haven't enabled send emails then this will run otherwise it won't and this is because we're running tests that will automatically try to fill out the form and submit it make sure everything's working so we don't want email sent every time you run that test so normally we're going to keep that environment variable as false but I'm gonna go in and set it at true here in a minute so we can test that out we have you know just this part is pretty self-explanatory we have a two email from email a subject right here's your content and you can see I've put this field string that you saw we built up a little farther up the type is text HTML all right so you want to make sure if you're putting HTML tags in your field string or whatever you want to call this of course you need to put HTML otherwise it's not going to render as HTML so this is where and I mean this is from the SendGrid API this is where we're adding in all of our constants here and then now we're finally calling that function that we went over a little bit earlier okay so we're sending in right this this new mail right we're passing that in here and that's pretty much it so as I went through there I didn't notice anything other than the fact that we've said it to not send emails right I didn't actually notice anything else that should be causing that to not work it's possible that I just didn't hit save on one of these files so I I just did that now but my timer is up so I'm gonna take a five-minute break right now I'm going to go to the live chat answer any questions that you have and then after that five minutes we're gonna do another 25-minute session hopefully it'll just take one more session to get this working I think we're close all right Sebastian says I like the live coding with Jessie looks like a TV show yeah I feel like that too sometimes that's like the name of this of the show that was actually I didn't even pick that I think it was maybe it was Bo I think it was Bo it's possible as Quincy but one of one of those guys just they titled like one of the videos that and just said hey here's an example you could use this and I thought it fitted that explains exactly what's going on so it just left it kamal says this looks so complicated just started watching though so not sure if you're still watching because that comment came right at the beginning but yeah coming in at this point the project it probably looks complicated because we have so much going on but if if you can start closer to the beginning you'll see that we started just from basic things and just build little by little so it'll be a lot easier to understand then but even if you can't watch all the previous streams I'm trying to do my best to explain as I'm going along and I feel free to ask any questions and the live chat and hopefully you could at least get some tips out of it okay Sebastian says to push his changes to a branch so people can submit pr's to that yeah I would definitely do that sorry about that I wasn't even thinking thinking about that so all I'll probably have time to get to that before I leave today I might actually merge it into master or at least into the into the branch that we were doing the server-side validation on as well because I like how it looks now I know there's a little bug with the with the UI but I don't think it's actually that terrible I have some ideas for how to fix it but even if we didn't fix it I I don't think it's it's that bad I think the value of having that immediate validation far outweighs the slight shift and kind of increase in spacing that happens Umberto's says I still like the thumbnails as they are though unless you're really looking to have your person your face be known for providing incredibly helpful project tutorials yeah so I I originally didn't want to put my face on there because I don't know I just I like I didn't want it to be about me I just wanted it to be like about the code but I don't know so there's two reasons like one thing is I I don't think I can separate like me and my personality from what we're doing now because it is me on here you know that's that's what's unique about what I'm doing is is me right the code is the code but so anyway I'm not quite as worried about that now as I was initially I didn't want it to seem like I wanted people to look at me or anything but also videos that do have a face on it tend to be clicked more often than videos that don't so just in general so it might not be a bad idea and there's that immediate recognition that'll just help people differentiate since we have so many different people contributing to the free code camp channel right now it might make things a little bit more clear so anyway I'm gonna try but I'm not ready for that yet I don't have any any pictures ready or I haven't even tested out how I would do it so it won't happen immediately probably not even next week it'll be later on heart Harshit says why don't you use node mailer basically I I already had SendGrid account and it was just really easy to send grid so when we set up the other I was already using send grid on the other version of this project which is not using node so I needed to send I needed to send the emails client-side for the version of this that's live right now that we're redoing and so I used email Jas and send grid to be able to send client-side through San grid so since I was already doing this through SendGrid kind of in a roundabout way I I decided just to stick with it for this so i don't know i haven't used node meddler before so it may be a better option in general for node but anyway that's why I ended up on with Sangren all right awesome so last thing I'll I'll go over actually I'm almost let me just finish up what's in the live chat now and then we'll start she'd just take me a minute so Umberto is getting a gonna get a job offer today most likely so awesome congratulations on that definitely let me know how that goes if you take the job yeah that'll I'm really happy for you so yeah it definitely keeps us up to date number two is working on c-sharp dotnet tutorial series on a project that he's working on so I'm looking forward to that as well that's that's awesome we actually I've been mentioning that we've been going through the process of trying to hire a developer here for for another department here at the University of that work at and I was on the team that was interviewing all the candidates and we finally found a candidate that I think we're gonna extend an offer to but they're going to be working with c-sharp and net and that so they're going to need to brush up on that so umberto if you do that series I'm going to refer that person to your tutorial series to help them get up to speed because I certainly don't do very much with c-sharp or net so this other person is going to have to handle all that and I'll handle all the Java scripts though okay all right so I see Sebastian and Patrick were given some advice here on the air I was just kidding so let's go back to this I'm going to start the timer and let's go in so it seems like Sebastian's saying that the air was given from client side since you don't get any data from the response in the client side also Patrick says I would have seen some output in the terminal that makes sense I see there are some other questions in there now I will get back to the questions after I finish this this session so don't worry if you can stick around I will we'll get to all the questions okay so let's check yeah I actually didn't check the console at all when I tried to send that so let me just submit alright I'm getting nothing [Music] yeah are we sending anything um let me just try to add all these in yeah I didn't think we're doing any type of validation so since we've already checked out the server and it's probably not the server since we're not getting any oh wait a second we're getting something now sure there's 159 all right I'd much rather see an error message than nothing when something doesn't work 159 okay let's see all right so do we have I thought I'd check this out before I started the stream and we needed that okay that right we definitely didn't need this let me go through let me go through this slowly all right so that's good that's open it's closed this is always an issue and I'm copying and pasting things and modifying as I go making sure that I have all the right brackets and parentheses making sure they're all closed all right that's this looks good this looks like I have everything let me go back to that message Oh missing I thought it was I'm missing it here's after after yes there we go okay miss that before all right let's try this again yeah it's done okay awesome so look we've got our fields which are nonsense right now but it's sending the data to the server and we're at least getting this back in the console now the next step is on my other screen I'm gonna go to my environment variables and I'm going to enable sending emails so I can't show you my environment variables because then you you see everything my API keys and stuff and I have to change them so trying to think did we have did we put in a test one I think we did I just wanted something to refer you all to if you're not familiar with what it should look like I think I think we have there we go so we have an example of the environment variables so this is what I'm seeing on my other screen except it actually has the keys in there so this is what I mean really simple file okay if you want to do a comment you just put a hashtag and then you just put in the name and usually it's you use all caps and underscores and then equals and then whatever value you have and then you can write you can put whatever variables you want in here so anyway that's that's what I mean by environment variables okay so let's do it again and see if I get Nina actually let me think will this work yeah it shouldn't I was just trying to think if I'd have to build this again or if it would still try to pull the environment variables from here let me see my build files I guess I can just check my email and if I don't see it then I'll I'll try to build again let's see okay Sebastian said I just try to restart the server actually I don't have my gmail open let me open it up okay yeah I didn't get anything so let's restart the server see if it doesn't work this time then I'll I guess I can try doing a repo all right awesome so I got the email and pop this out to show you all so there we go there's the email I know it's really small but it's really basic doesn't look great obviously you know before I would want this to be live I would make this look a little bit nicer but you see it sent it to my email so let's let's check this out just to kind of step through everything so the date is come back here all right to our server das file and we've put in the two email which was my email address right so we know it sent it there the from email so and the subject you can see here new suggests the story form submission and here's the from email test at example.com and then here's our values so everything works well we want to add to this which I don't know how much time I have right now so what we would want to add which may or may not get to this today is we want to send an email to the person who's filling this form out so we would want to grab that email address value and then also send that to that person as well I can't quite remember how to do this with the API but I think it would I could probably just add a comma and then put another email address although I may want to actually send an entirely new email so I would probably just repeat this and have a different you have different content based on one going the users submitted the form and another one going to the people in my department who would be getting this this form so I'd want to do that I'd also want some validation so client-side we would want to make sure that the email address is a real email address and we'd probably want to make sure that the name is a valid name so if somebody just put in all special characters or all numbers that's not really a valid name so we want to check for that we probably want to check to if the story was longer than a certain amount right nobody's going to suggest an entire story that's let's say four characters long so we'd want to decide on a reasonable length that we'd be willing to accept and and then that way that will cut down on maybe some submissions that either are accidental you know somebody hits enter clicks before they were ready or maybe you know potentially some spam submissions so we'd want to do that client-side and then potentially we could server-side as well so we would do a check certainly to make sure that we actually do have a valid email before we try to send to that email address so I actually didn't haven't done that server-side yet so I have to figure out how to do that server-side but I don't want to be sending the sender and API some invalid email addresses yeah we just if somebody submits something that's an invalid email certainly we can't send that user an email back what I'm thinking though is if that were to happen it would probably be somebody trying to circumvent the client-side validation so probably don't even really want emails from those people so at that point we would just stop and not even send an email to anyone maybe you could send one I can maybe send one to me just to say hey something weird happened with this email check it out and I can check the form just to make sure nothing's broken at that point but anyway you can see now you kind of see where I'm going just to add some extra things we would want to make the content of the email look nicer yeah but that's basically it so we've gone through I know I realized a copy and pasted a lot at the beginning so it was a little bit of a cheat in terms of you know I didn't really go from scratch but I mean when do we ever make something direct you know from scratch we're always borrowing from previous work that we've done or from other people's work proper properly attributed and yeah so in this case we benefit greatly from work previously done some by me and a lot by pull requests from others so you can see you know we borrowed from the service request form and so this will be available on the github repo I'll commit this actually since this works I think I'll just commit it now and then that way if anybody's new we're not really familiar with yet you could see the process and committing and pushing so let's go get status and you can see we've changed the server dodged ass file and our storage is file all right that's what we want to see because we did change those files if we saw some other file in here that we we didn't think that we had changed maybe there's something accidental then we could check it out but now I'm gonna go get commit and I'm gonna put the a.m. flag and that means we're committing so we're adding we're committing with a message all at the same time so it just saves us that and let's say send story form data email okay great so now our tests are gonna run we've set up and by we I mean who set up the tests Kevin so Kevin contributed and set up some tests so the tests are gonna run we're also running some automatic code I guess linting and formatting and so that runs as well so it makes our code adhere to standards we're using the standard j/s standard and there we go so all the tests are passed i actually got another email I think so I got some emails from the service request form because I had set that environment variable so right now we don't have any tests written for this new form that we've put on here so we'll probably want to write a test for that as well let's see all right so everything works so that's now committed but it's not yet on github if we want this to be reflected on a github repository we have to push it so do git push origin master is where on the master branch there we go so we've just pushed our code from the master branch on our local machine to the master branch on the github repo so if you go there now you'll be able to see all the new stuff that we had just done it may look slightly different since we auto formatted everything but that's a good thing because we all have the same standard formatting even if you were to clone this repo and run it on your own machine if you go to to commit it would format it the same way as well so you don't really it's kind of nice you don't have to worry about learning the code style that I prefer and I don't have to about pool requests coming in in a totally different style so if you can set something like that up on your project I think it's really helpful especially if you have more than one person but even if it's just you it is still helpful to keep yourself the code that you're writing clean as well so we've kind of demonstrated how to do this in in previous videos I think yeah there is a title of the video that says something like using prettier in standard J s so if you look through my playlist it's in the previous project so not project two but in the first project you'll see that if you're interested in setting something like this up all right well that before I forget I'm gonna set this environment variable to false on my other screen so I don't get I don't accidentally spam myself with lots of emails so I think now now I'm going to go to the live chat and take your questions so this end up being a short stream today but like I said there is something I'd like to do in about a half an hour here on campus so right now if you were just here for the code I'm gonna do question and answer so if you can't stick around for that or don't want to stick around for that thank you so much for watching and I'll be back on Monday so please join again if you can and otherwise if you have a question please put it in the live chat now I don't think there's a ton of stuff in there so it shouldn't take me too long to get through so don't don't wait to ask or the show might end before you get it in there if for some reason you can't stick around I'll still try to answer your question and you can catch the answer on the recording which will be available on free code camp just a few minutes after the live stream ends otherwise you can ask me questions on any social media channel that I'm on I want most of the most popular ones I prefer direct messages on Twitter or you could just you know tag me in a tweet or something so but whatever you want to do so I am going to scroll up a bit so I don't miss any of the questions and I'm just going to go down through since there's not a lot in here I'll try to read out the comments as well and please feel free if you're in the live chat to add your own answers and opinions to the questions I'm certainly not an expert so if you have a lot of experience in some area where someone's asking a question I would really appreciate you kind of adding you know your expertise to the discussion okay all right so Kenny says no idea what is going on but looks cool and complicated for me now good job though so Kenny Kenny asked that a while back not sure if you're still here Kenny but did I already answer this one let's calm down I thought I already answered this maybe I did or I commented on it or at least one that was similar so just briefly I'll kind of sum up what I said before complicated now because we're on day 28 of this project and we've had lots of pull requests from other people so it does seem really complicated but we just built up little by little so we started out small with just really basic project and then kept adding and adding so it's not it's not anything that you all couldn't couldn't do yourself you just remember you know it's it doesn't get this big and complicated right away yeah you just break off tiny little pieces that you can handle and just kind of work on it if you could see I have this Trello board here which gives us you know these little chunks and let's see two probably three actually that's not bad we got got this done in less time than I expected I'll probably not move done though because I still want to add some validation and things as well so it's not entirely finished but you know the basic functionality is certainly there but anyway I wanted to show you the Trello because you can see you know everything is broken down into very small manageable chunks I try to break things up into chunks that are eighth Pomodoro sessions or less if it's bigger than that you can probably break it down even smaller the bigger the in terms of the time you think it will take the less accurate your estimations will be so it's better to try to break things down into smaller chunks if you want accuracy in your estimates you can see I don't always do that like for this one I actually know I estimated 5 and I've taken up 13 and I'm still not done with this one so not always accurate in the estimates but anyway just kind of like trying to be encouraging if you're coming in in the middle of this you know don't think this is like too much for you it's it's just that you know we're very far into this project at this point so I really think that a lot of you could definitely get something out of these videos even if we're farther along and you know ask ask all the questions that you need to oh ok Patrick said it should be suggestions were sent or suggestions was sent so did I I think I made some type of grammatical mistake somewhere so let me let me check that out this is the server I don't know if it's in server or maybe to be your story suggestions worse and okay alright your story suggestion was yeah that makes sense thanks Patrick aslam says hi oh I've done a bit of nodejs now but I'm struggling with understanding structure it all seems a bit messy compared to PHP any suggestions I'm not 100% sure what you mean by messy I have worked a bit with PHP it's possible that I don't like I said since I don't understand exactly what you mean by messy maybe I'm kind of off here but it's possible that you know JavaScript is a different you know a little bit different style than some of your other server-side you know traditional server-side languages so you know that could make it seem messy as compared to something else if you're coming from JavaScript enough from something else that would seem normal obviously so I would probably say it could it could be the case that it's not inherently messy it's just a matter of what someone is used to in the comparison between those things but I don't really have any suggestions in terms of trying to make it be less messy like I said because I'm not although I do have some experience with PHP I wasn't that into PHP so to me no doesn't look messy my server JS file looks messy B it certainly does it's huge and it needs some refactoring but in general note doesn't look messy to me so sorry it's not really much of an answer probably isn't that much help to you but maybe someone else in the chat possibly has some some further insight into that Sammy says any thoughts on using functional libraries like Ram Das I had a user and uh I've seen some talks at conferences about Ram de and it seemed really interesting to tell you the truth I can't I can't remember that much about it from from what I had seen of it before so sorry I can't really give give my opinion other to say that I do remember when I saw the presentation I thought it was really interesting but I haven't had an opportunity to use it since then and you know because of that I really only I don't remember that much about it okay so we had someone I'm not even gonna say who it is but it's just funny someone came in and into the live chat and said yo yo yo yo yo like twice just a bunch of years hi bye i subbed i unsubbed LOL and then a bunch of emojis and then some more yos so not really sure what's going on there but it made me laugh a little bit let's see some guy says and that that's actually the name this person's Twitter YouTube handle is some guy says I'm getting confused learning reacts patience patience yeah it can be confusing at times I'm trying to learn Redux with reacts right now and I'm getting confused about that although I think I'm having some errors that aren't exactly Redux related and I think that's causing even more confusion because I'm looking for the solution in terms of how to do Redux and now I'm starting to think that the problem is somewhere else which is even worse because now I have no idea no look but I definitely understand the confusion it did take me quite a while before I really understood enough about react to be confident and to build you know real like production sites with react Umberto says this is one we're talking about the new web developer that hopefully will be starting soon Umberto says well I hope they're already familiar net but I hope that if they're not that whatever I end up publishing actually helps yeah I'm sure sure it'll help this person is has worked with dotnet and c-sharp a little bit they're a lot more familiar with PHP I was impressed with their problem-solving skills in the technical interview we actually just had him do some JavaScript like algorithms and and I was impressed so ran into a little bit of a little bit of trouble but didn't give up and was able to like very calmly logically work their way through and find where the air was so anyway I'm hopeful that someone like that will be able to pick up on things and persevere and learn what they need to what they need to learn okay so Sammy says in response to some guy that codecademy has a good tutorial then you can create the react projects on free code camp so yeah actually that's good I did start out with the code Academy tutorial it was nice because you didn't need to worry about setting anything up on your own machine I know one of the big barriers for me and getting into react at first was webpack I was confused by webpack I had originally started out using grunt then I moved to gulp like I think a lot of people did and then I I was trying to make the switch to web pack and learn it but I just kept getting confused and so it wasn't until I found create react app and next j/s and I think I I think I first started to learn react before create react dad came out so I kinda had taken a little break from it for a while and then that came out and I came back to it that made it a lot easier for me because it handles a lot of the setup and you can just get to react so that really helped me out so if you don't want to deal with the setup stuff at first then code Academy is a great resource Patrick s when are you going to be putting this putting this on a server next week I hope to put this on the server next week so at that point that'll be cool because you all can test it out without having to run it locally I need to put it up somewhere so that people in my department can can work with it so I just want to wanted to finish up things like I needed to get this form functional because people are going to test it and want to know what's what's going on I need to put in there's a bit of new information that needs to go in there so I need to finish what we were working on yesterday putting in a modal with some extra information about photography projects once I get that in then it'll be fine to demo so at some point next week I'm probably going to set up a server I'll just do a droplet on digital ocean I think just kind of a basic five dollar droplet I'm gonna run ubuntu 16.04 we're gonna run node we're going to do nginx as a reverse proxy will set up a an ssl with let's encrypt so I have done that before so I don't know if I should do another stream with that maybe I will we'll see I need to repeat the exact same thing but it might be worthwhile we'll see let me know if you all have any opinion whether you'd want to see the server setup or not because I can definitely do that you know earlier in the day and not not on the stream all right so mike says hi hey Mike how's it going thanks for joining Oh Sebastian says Monday I'm moving to Germany don't know when I'll be able to watch the streams again oh wow sorry to hear that Sebastian well try to keep in touch if you can't if you can't make it for the streams for the live chat at least try to keep in touch you know other other ways through you know through really whatever you you prefer you know Twitter or whatever and I really appreciate all your contributions in the live chat I hope you can you can get back get back in here and be able to see the stream soon I hope everything goes well in the in the move Brian says hi great tutorial awesome um I'm glad you liked it thank you for saying that I appreciate it and welcome claude BS is their video of that set up already yeah so there's I have done basically that exact same setup I've done already the only difference is that I was building with NEX Jas instead of create react app and that's not really a huge difference almost all the steps are exactly the same so yeah so I don't know I have to think about it and I welcome your feedback on that I don't want to bore people by doing things again I don't think that there's very much that has changed probably nothing has changed in the setup if it was later on down the road and some things changed like maybe like the way you set up let's encrypt or a newer version of you know Ubuntu or something like that maybe it would be worth it I don't know I'll think about it Patrick says I like that kind of thing I don't need any help with that but I like things where I can be helpful okay cool all I'll keep that in mind I think about it William says currently following your first project is there a sequence between the first and second project a correlation okay a correlation between the first and second project they're not connected I mean they're two completely separate websites they're connected only in the sense that they're both react sites we did so I think if we borrowed code or anything like that I don't even think that we really borrowed that much code we actually did we did borrow some of the code so other than the fact that they're both react and that some of this the code was was borrowed and reused in this project there's there's not really a correlation I mean they're both done for the same you know for the same University but you could definitely watch either one you like it's not like you'd have to watch the first one to understand the second one actually with that being said with that in mind it may not be a bad idea to do the server setup again because there there may be people who for whatever reason aren't really interested at all in project one but they're interested in product two or whatever future projects we do so instead of making people go back and watch the previous videos okay I'm still thinking about it as a few more pros to doing it now yeah William so so it's fine if I just start watching your project - since it's ongoing yeah definitely definitely William said thanks for answering you're welcome yeah no problem but yeah definitely you can watch you don't need project one for - and in fact I intend that a lot of what I do will be self-contained so each project will be self-contained you don't need to watch the other ones at some point I am going to do some updates on project one I think in October I'm going to do some updates so I'm not sure how I'm going to handle that in terms of will that be considered like a third project or will I just kind of tack it onto project one and maybe make separate perlite playlists for each project I'm not on it since URL I'll handle that I think it kind of depends on how much I need to update it if it's just going to be a few days you know it's that's not really a big deal but if it's going to be like weeks of work then I have to think about how I want to treat that but I've reached the bottom of the live chat and I see Sebastian says update project one day one we need may update like the title to make it more clear that it's project one day one yeah I definitely should I've thought about that before it's just every time I think about it I'm not really in a position to change it I mean I'm busy or I'm streaming or doing something so I'll have to make more of an effort to remember and do that yeah that's that's definitely a good suggestion thank you alright so I'm gonna wrap things up here thank you so much to everyone for watching for contributing in the live chat for contributing with with pool requests thanks for your questions and in all your encouragement I really appreciate it I will be back on Monday and oh I'm not sure what time I'll let you you know I'll let you all know what time it'll be a notification in YouTube and I'll put it on Twitter as well I think I should be good to go for the for the normal oh wait Tuesday yeah Thank You Patrick Monday's Labor Day so in the United States it's a it's a national holiday on Monday so I don't I'm not working so I won't haha Thank You Patrick I don't know how I forgot that I won't be here on Monday on Tuesday I will be back so I won't yeah so I won't see you again for three days so anyway have a very nice weekend and I'll see you back here on Tuesday