Live Search with React and the WordPress API Part 3 (P5D41) - Live Coding with Jesse

Key Takeaways

hey everyone welcome to live coding with Jessie today we're going to continue with our live search component and we're gonna try first to search through a lot more than we attempted to search through last week just to see what kind of performance we get when we do a search like that and you know how many entries were likely to get on you know a single search and then after we see what that looks like on the page I think we can continue on with kind of building out the UI so that's the plan for today I do have a meeting in two hours so like the stream to be about you know now somewhere between an hour and hour and a half I should give us plenty of time to get some things done and you know answer a lot of questions I hope everyone had a good weekend I I wasn't feeling well like Saturday so I actually really wanted to do a lot of coding get things done on Saturday and I ended up not so so it was it was weird and just mental health update and to help anyone else out there so I was feeling a little bit sick Saturday and my my kids were at my parents and my wife was gone so it was like I hadn't worked out in a day or two because I wasn't feeling well I was just by myself I was trying to get a lot of stuff done feeling a little bit overwhelmed and my depression and anxiety were just really bad so it maybe was a combination of you know a lot of different factors of you know this the sickness not exercising you know being lonely and you know all those factors I think may be combined so this is just something for me to watch out watch out for and maybe for for you all to watch out for if you're dealing with the same kind of kind of thing so I was kind of really pumped to be able to get all the stuff done but you know I just couldn't and so I'm gonna have to watch out for that next time and maybe come up with a different plan you know to keep myself up and and on target when I'm not really feeling well so all right so let's get onto some coding so we have a lot more people watching now I wanted to wait till we had a few more people in until I share this link here is the end rot link for this project so if you click on that link you'll be able to see the project that I'm locally working on you'll be able to see that in your browser and anytime I make changes it'll be reflected immediately in your browser so you can use dev tools on it and search around in different pages and you know you're not limited to just seeing what I happen to have on my screen at any given time I am now going to switch so that you all can see what's what's happening all right Michael said I know the feeling went through the same things this weekend yeah I am I'm feeling a little bit better now like mentally way I'm feeling I'm feeling better yeah but it was just yeah Saturday was just a weird weird day but did get some good news over the weekend so Saturday night Saturday evening at some point I found out that I was accepted to speak at the moms can code virtual summit so it's it's like a week-long conference it's all online and there are 40 speakers 39 of the speakers are women I I'm the only man that got accepted so I'm I guess I'm pretty honored to be on that list and I feel pressure that I guess I need to do a good job to justify me being on on that list but anyway that's that's really cool I'm excited about that and that'll be sometime in April so you'll see me I'll be tweeting about that one more info comes out okay so let's all right that was a different page I was working on so I've been working on the data we have stored in WordPress trying to get things in shape because you know some of it came over in fragments we're like we have a page but then each section of the page came over as a different post type so I'm trying to consolidate those and just make sense of them michael says Congrats I think have they seen the picture of you with the beard I don't know what picture they saw good pictures this of me so yeah I mean some of my social media pictures and a lot of my videos I don't have a beard so I don't I don't know so let's go to the search page and if you want to follow along on your computer our search page is just slash search so first thing I want to do is start this Pomodoro timer so we do our first coding session and then let's go in and add post types onto our search query that we were doing so I was working on this page and let me push this I just committed my changes and now they're on github all right so now the code on github is completely up to date with what I have here locally I also I don't know how many of you remember or following along at all with one of the side projects that I'm working on that was a JavaScript AF and we had a lot of we had a lot of ideas for the site but I think we're narrowing the focus I don't want to have a site with a bunch of different features and none of them not have enough time to really perfect any of them I'd rather have a site that does one thing really well so we're focusing this site on being a place where you can find and share really cool github repos like javascript github repos so it'll just have a nice UI and whereas the site github is not focused so much on discovering new repos and being able to search for them you can do that but the focus is being able to actually update merge and maintain repositories this site is not going to have any of that it's just gonna have a really kind of nice search function and you know potentially a way to upvote repositories and try to share I'd really like to get some of these some of the things that people are working on that aren't really well-known maybe they don't have a lot of stars to get those some more exposure to the community especially some maybe the more unique things that are happening with JavaScript I think it'd be cool to highlight so if anybody's interested in that at all you have any ideas or feedback or you'd like to contribute to that check out my github repo the project is JavaScript - AF and then we also have an API hard just came in the live chat and I will mention that Harshit has done the majority of the coding for this project unfortunately I've been too busy over the last month to contribute much in the way of code so I guess I've been kind of guiding things just with with ideas and encouragement for now and Harsha's on a ton of the work so thank you to harsh it for that but I welcome anyone else to you know be involved if you want to it's it's a react project so if you're interested in reactors that and then Harsha and it could tell you more than a live chat about how we're building how he's building the backend and the API part of it if anyone's if anyone's interested all right so here's our search page where's our oops this is probably so small I apologize there we are okay so I'm on the search page so if you are following along locally or in the repository it's in the pages folder in its search j/s and we're down here at the I could shrink this up a bit and this makes more space so this is that that query that I was talking about see see right now we're not really getting that many post types so we're getting admissions pages and chapel pages so I just want to keep adding on a few more types and I'm gonna on my other screen I'm gonna check out some of the types we have so I can add them in quickly so let's go one two three four five let's try to add five types for now so we can have let's just have let's see faculty and major and I think all of these are singular if they don't work I guess then we'll find out and Department see what else most of you have academics page one more what's it gonna be if I include news it's gonna be a lot well I want to test see what we can handle so let's include news in here alright so I'm gonna save that and let's see if it works we'll just search for a really common word see if we get back a lot okay see we're getting here so we got a department admissions pages chapel page academics major okay but it looks like we didn't get anything from News which is odd I mean I'm pretty sure the word the is his in some of these news posts see did I mess up that last one and type news I may have to check to see how I put news in there in our custom plugin yeah news it should be news I didn't use yeah news was the rest yeah so I had for the rest API that's pretty weird not sure what's going on there let's see if if there's some sort of limit and so let's move news up here I don't need this type post or type page because we don't have anything in posts or pages right now anyway okay search I can't tell if the searched again or not okay we're still not getting any news it's weird I listen to see all right not really sure why that's happening with the news pages I'm gonna check the live chat here to see if if any of you said anything about that or if you're getting different results on your your local version all right I wonder alright let me know what you all think about this so clearly we're not getting everything that we could be getting here for some reason we're getting nothing from news not even if I search for news there we are finally so we did get news now this is I wonder I don't think I have any caching setup yeah all right this I wonder if it's limiting our results by that 100 maybe that's it I mean I'm not gonna count these but I figure we're probably getting a hundred if I can get a number here yep we're getting a hundred results so we're limited to that hundred which is not bad so we do all right here's here's my idea let's we're just gonna have to do either a button here that says more results or do an infinite scroll since we are limited by that 101 100 posts for a search I don't well I'll tell you what it has been a while since I checked the API documentation for WordPress it used to be and it might still be that you couldn't go over that 100 limit let's see if you can now let's just let's say 500 I yeah I don't think this will work I think 100 is like a hard limit but we'll we'll test it whoa yeah so that that must have given us an error when we tried to see and did we have area what's fun over using we don't have the the limit here it's gonna say we could see exactly I suspect we're getting this back I will copy and paste that into here so we can see what's happening we'll give it this per page 500 let's see whoops who's over here and okay we're getting something back but it's definitely not oops this isn't what I need right I made that I did that wrong no rest route and that is how we have it in here will pose now I flipped it around sorry about that okay so that's an invalid parameter we can't use 500 we can't use 200 we can't use 101 so I think it is still 100 as the limit okay yep all right so we're limited to 100 limited 100 here it's not going to be a huge problem I said we can do the search the infinite scroll type of search or have users hit a button either way and then we're going to have a lot of options for users to choose exactly what type of content they want so assuming that they're only choosing one type of content like let's say they only want faculty members to come up in their search we're fine we're now going to go over the limit especially if they're saying I only want faculty members and I want them from this specific department or I want the faculty member that has this name right there that's going to be okay the news will probably be the only post type that it really has more than hey sorry let's try to hold back a yawn so yea News definitely has more than a hundred so that will come into play if somebody searches a very common term and wants to know about news hmm okay yeah we're just gonna have to deal with that so I think I think we're okay right now yeah we're okay right now let's work on some of those let's work on some of the filters then I think before Before we jump into UI stuff kind of like wow my mind is still on that search query I think it would be a good time to do that if I switch back into like design mode it'll be harder to switch back if I want to do it so let's just put in some some test filters and see how they're gonna work so what will happen then is this whole portion of n-type news and all that that those are going to be variables just like search term is so let's see how we'll do this so let's take this and type news and copy that that's going to be the template and we're getting the search term right now from that gets saved and state I believe and why are we not okay let's see there's our input all right so we have on change get search results so let's go up til I get search results function search good ok I don't know what I was thinking so search term is passed into this function I'm not sure I want it to happen like that I think I may rather have the input be a controlled component so it actually goes up here and in state and then we don't pass anything through here we can just run it from whatever's happens to be in state at that time so let's let's do that so first thing we're gonna do we're gonna change this and we're going to say search term and we're just gonna initialize that to an empty string not equals we initialize that to an empty string so for a search term it's we're gonna say this state search term and we don't need this anymore and then down here we're gonna call fetch search term but we don't need that search value anymore and then here and put on change we're gonna put a value ID and there it's gonna get its value from this now we don't let's just say search term whoops and we're going to whoops not under props we're gonna do this and we're gonna say search term and now we're gonna say this state and what are my lines for not search CR CH T or and why can't I do that I'm pretty sure I can do that right okay let me check my time while I'm over here okay only about a minute left so let's just see if this works now well let me type in okay this state data map is not a function X as I didn't get any data oops that's weird okay I messed something up in this flow of let's see search term oh okay I'm not actually changing event default concert so it's unfocused keyword so I'm not actually setting setting state so I'm gonna set the stay here this set states and we're gonna go search term search Hey so it I have a floor no it's not working dony I think I need something else okay I would say our Christopher said it should be this state equals you did state equals all right what line was that okay yeah all right all right let me let me set my five-minute timer so I can go back to the live chat and answer some questions then I'll come back and troubleshoot why why the values not working for that that inflated I suspect I'm just messing something up syntax why somewhere hey everybody who said hi at the beginning I forgot to say hi to you off also thanks for everyone saying congratulations for me being able to speak at the moms can code summit a noble and savage says you big rough rough looking man with giggle haha also says how he all doing I just started that 100 days thing to give me motivated to do many hours a day awesome my wife still in the hundred days of code as well so that's that's really cool I hope you hope you do all your days and learn a lot and build cool stuff all right Nikki has a crypto question so I mentioned it last week that I started doing a tutorial to build distributed apps on the ethereum blockchain using a language called solidity I think its solidity um and the tutorial is crypto zombies that I uh Sonique es is it going out to the Internet every time that zombie eat kitty function runs so true the blockchain to be specific I think so I think how that I did that lesson yeah so I think all those assuming that it's connected up to the blockchain like and not in some sandbox environment then I think all of those main functions or do go through the blockchain which I guess makes sense right because then that would that would change like important information because you would get a new zombie so it'd be a new zombie with new DNA assigned to your specific ID so I do I believe so but I'm still going this route through the tutorial I'm on lesson five now no but I'm not not at all an expert on it okay I should say and maybe show the progress on the test domain for the JavaScript raf project yeah we'll see how much time is left after I get your questions and stuff and after this next Pomodoro session and then we may do that or maybe if not today then I'm sure at some point this week we can we can show it off a bit okay Chris you're saying doesn't npm sort of do that JavaScript they have thing well I guess I mean NPM doesn't have NPM wouldn't necessarily have all the the projects there's so like not every JavaScript project on github is also an NPM unless I'm wrong and let me know if I'm wrong about that and I do want your honest opinion about the project Rea because if if you all think that it's a ridiculous idea this this github repo search thing with JavaScript dot AF let me know because I'd rather not spend a bunch of time working on something that's that nobody wants or nobody thinks will be useful so constructive criticism is definitely welcome I may try to do some live streams on my own channel where I work on that project and then that way you all can get kind of a better idea of what's going on Christopher says on your Franciscan page the nav links probably need some indication of hub or other than mouse pointer send these ones yeah let me think ok so I I'm I'm not a hundred percent sure I want to add another indication but if we were to add another indication that these are clickable what should it be so I'm up for suggestions here keep in mind I would like it to be as material design issue as possible but let me know if we're gonna have anything I would like it to be subtle I don't want a lot of crazy motion or something like that no like text getting a lot bigger stuff but I'm I am open to subtle something subtle I'll at least consider that if you all think it would it would really help okay so didn't quite get through all the questions this time we'll get to the rest of them after this next Pomodoro session alright let me reset the timer and let's figure out what I did wrong why this isn't working alright so let me let me walk through the flow of what should happen then so initially initially a search term and state to be an empty string so initially the value in our input should be search term and we should be able to get search term from here right that's why we don't need to write this state down here then on change it goes to this dot get search results so let's go up there let me see as well as psycho searches so when we go to get search results oops all right I see what the problem is I did this all in the wrong place shoot I'm gonna have to undo a lot of stuff here I'm gonna be copy this so I had we left in some there we go yeah yeah we I left in some functions that we may need at some point but right now we don't need so that's kind of that's what happened there all right so what I need to do then is go call this set state and put in a search term and set that equal to value okay and the reason we're doing that before we do this is that this is going to determine the value of that input so I don't want to debounce or check for length of that input right so otherwise I'd be able to type two characters and nothing would show up in my input all right so that's that's not what what we want so we want state to get set immediately and then we can also check here to make sure before we actually search anything that what we're debouncing so we don't search too many times and we're also not going to search for tiny strings okay so with that and that let's go down here and add this back in and let's add our value back in the value is gonna equals search term and this makes sure nothing changed I don't believe we went back so far that anything else changed yet up here okay let's say that see if it works there we are okay good so now our just to show what's what's really happening let's go into react and make this bigger maybe too big make this whole thing big there we go so here's our search term in our state and we say it says the now so if I go back we have a th there so you see every time I type this is updated so this is what we call a controlled input a controlled component we're essentially on a good way to remember this is the value of the input is controlled by state so when you type something in state is updated so the dataflow as you type state is updated and then the value of the component gets updated so as soon as state changes a rerender happens and when that rerender happens the value of this input is changed based on the value state okay so that's how the flow goes it may not seem like it makes a lot of sense or adds any benefit here when we only have one input but as we continue to add our filters on it does you'll see that it does make it easier when you have more form input so these that's been what I found is is that it's it is nicer in in those cases okay I think let's let's commit that right so I think this is enough of a feature that we can commit this before we add in some more inputs so I'm going to again status make sure of what we changed get add and then we'll do our yarn CM so this is particularly this project we have kind of a special kind of format that it takes you through so you can see this let's do a refactor yeah who do you think refactor would be appropriate oh yeah we'll say refactor and we're just gonna say we factor search input to be a controlled input okay great and this doesn't break anything and it does not affect any open issues now it's going to roll the tests once it passes we can commit this to our github repo great whoops get push origin there we are okay all right so now that we have that all sorted we can add in our filter there so this is what I was attempting to do at first and then realize that we needed to do some more work so let's as I was trying to do before grab this first one this type news just as to use as our template I guess and we're gonna let's see we're gonna create an item and States how are you gonna do this all right I'm sure we'll refactor this as we go on I'm gonna try something first we'll test and see if it works and then maybe it can be improved but so at first we're gonna do search type and this will be a string and let's just for now we're just going to put search type news in there and what do I need to grab type news and do we want the end there all the time we went up we want the end to be here okay so search site news and forget like okay and then we're going to let's take all of this get rid of it for now even this let's take all of this get rid of it for now and throw it over here just kind of in our scrap for the file and because we'll refer to that a little bit later but what we want to do back here where we took all this stuff out is we want to put in a class we could do we'll just concatenate these two the state search type right why is this not working you're why is he giving me an error this state search type as we okay okay so it does work I don't I don't know what was up with that error I guess it didn't like that space in there but you can see we've I don't know how if it's easy to see this down at the bottom here but we have our search did exactly we have the search term though and then the type equals news so now if we want to change what we're searching for all we have to do is change this in state this search type so what we can do now is add our inputs that are going to change what we're searching and each one of those will change this value here so here's what I'm thinking it'll be check boxes because we don't want to limit users to only search one thing at a time that would be I could see that as being annoying that a user picked the wrong category they're not sure exactly what they want and they have to go through like four different categories searching for the same thing in each category that's that's annoying what if they say well I think it might be in one of these four categories so I'm gonna search for all four of these categories at once so that's why I like the idea of checkboxes as opposed to radio buttons so we will have checkboxes for each of the search items if you've ever been to amazon.com you notice that on their search they go mostly with the check boxes so we're gonna go with something like that and so each check box that's checked is going to update what is in search type now we're going to do this this is what I was pausing to think about before and I said I would just put it off the best way to not only add to this string but also remove items as well series oh how about this what if instead of just having search type to search tight we have we had can we can we do this search type is let's go majors do we have majored yet this would be insight major faculty is gonna give us okay so you get what I'm doing here okay and then what we would do is map so we would look through this so every time the search happens you would loop through this and then add these together so essentially a search happens everything's cleared then gets added again and that's on search or that happens on click of a checkbox so we just go through and and add those in yeah okay let me check the the live chat because I think some of you are commenting on this as well oh okay Alexander's saying it's hard to read the console you know what I I had moved my where my my video shows up when I made that so Friday afternoon I made a I think it was Friday afternoon maybe Thursday anyway I made a video about installing node and and get and cloning a repo to your local machine and getting it up and running kind of just like a beginner's basics video and I posted that on my channel so if you're new to get and github check that out maybe it might it may be helpful for you but anyway what I was doing in that video made more sense for me to have my thing over here and I forgot to move it back thank you for bringing that up though I apologize if this has been covering things up the whole time john hanson saying it could be an array of objects michael says is there a way to group checkboxes in a frame and then build a search query of the check boxes in the frame i know access could do it john says you could also make those default value as false and true on checkbox okay all right let's go let me let me test things out which is these three will make some check boxes and then see if the concept itself is just working at all and then we can refactor after that l exam dove saying this state search type as an array okay yeah actually we could do it and I think somebody else mentioned it as well as well what about an array of objects yeah let's do an array of objects that makes sense let's see if it'll let me do this yes but we don't need this to be defined with you talking about oops all right they don't like that Alexander says who you would separate the URL creation from the logic okay we need some checkboxes now should we check material UI yeah whoops let's check this component selects it's any checkboxes click the wrong thing wait there's got to be checkboxes checkbox yeah I'm just missing it in here Oh selection controls that's what it was under control okay let's see this one I guess we can grab all of this and we'll paste it for now we'll just put it right below I know we have this in a form tag but for now I'm going to keep it separate we need form control form label while we need a lot let's just copy and paste okay so we're gonna have to change the values of course just to make sure no the sandals change is not a function alright let's let's bring in the handle change function as well I miss that oh you know what I forgot we already were pulling in some filter stuff it's alright just to get this working for now no change alright cool so here's our our inputs and I wanted to use the material UI ones instead of just throwing in an input like we did here because you know we see we have styling built in so I'll probably adjust the Styles a bit like maybe add a little less space between these but this is basically what we want I don't have that much time left no not enough time left so we need just a price all right that's that's not what we brought in all right I'm at a time for this one we're gonna have to save this I suppose for tomorrow normally I would try to get this done but since I have a meeting coming up I can't I can't go to too much longer so the plan then is and I may just hold off and do this in the next stream we'll see but the plan is just to connect these so that when you check it it does actually change something in state and then once someone were would search or click it takes everything in States these strings and it makes one large string and that's what gets inserted into here so let's you know let's change this now well I'm thinking about it so we need get rid of this and make that blank and then instead of search type this needs to be checkboxes there we go okay so now we can still say where do you search type in here this makes sense now we're saying these are the check box values yeah this may be over complicated to do it like this it's all separate objects so anyway that's that's basically what's going to happen if that works then I'll just add all the possible combinations as check boxes that we want here and and then we need to make clean up the UI a bit so on a large screen you know we could probably display all the options and it wouldn't be an issue on mobile we're gonna have to come up with some other way to display all the options probably some sort of toggle that would display them and then hide them okay so let me go back to our left off in the live chat let me get a drink first so I'm going to go back to where I left off I'm gonna answer as many questions as I can before my meeting I think I should be able to get all the questions and if you have any more questions please put them in the live chat now feel free also to ask me questions in the comments of this video or to send me a question on Twitter or Instagram Facebook email whatever else you can think of I can't always get back to you right away but I do try to eventually get back to everyone that asked me a question see Guerlain says how do I gain abilities like you just practice so I take some like if you haven't already done it go through some of the free chord free code camp challenges you can check out some of the free Udacity free or paid Udacity courses just take advantage of a lot of the online resources that are out there to help you learn more about JavaScript HTML and CSS if you're interested in design I recommend reading through the Google material design documentation if you're not a fan of material design you know check out apple's design stuff I assume Microsoft has something similar for their their style so just just to give you an idea of you know all the thought and and that goes into you know designing a a nice looking and useful user interface and then just practice this keep building things if you can get paid to build that's even better but either way just keep building and I mean that's that's really how it's done there's no substitute just for experience and in practicing so there's a little bit every day if you can is is great sandé says hey do you play csgo I do not play csgo so I'm not currently the only thing that I've been playing and I don't really I don't play every day as Zelda breadth of the wild for Nintendo switch so occasionally I will play that and some usually like if I'm hang out in the morning on exercise bike sometimes I'll play if divi Anshu says hi I just joined what did I miss we were so we tested out some of the limits on the search in terms of how many things we could search for at once and we can search for a hundred things at once we can't go past the hundred thing limit we can search for a bunch of different types of content all at once but we're still limited by that hundred thing limit we made an input into a controlled input so just using state as the value and then making sure we update state every time we change that input and then we add it in some check boxes and those will eventually be used to determine exactly what types of content we will be searching for John said congrats on the talk Thanks thank you I appreciate it siphon siphon X says are you reading this I am now that's your if you're still here I should say even you don't know how large that codebase is gone I'm assuming you're talking about the JavaScript AF yeah I'm sure I I don't know how large the code pieces because I haven't been through it all so in that after saying that hard I mean do you in your opinion do you think it was a good call to say we're just going to focus on one thing instead of trying to do a lot of different things just in terms of being able to manage the repository will that help you cutting things down Aniki says kind of off topic but phantom Jas is having drama and is being retired luckily it kind of got replaced by puppeteer while ago yes yes so I don't know if if anyone knows about this but so phantom Jas was open source project there's just not enough people maintaining it and so they are retiring it I believe they said that it could be revived at a later date but that's not really guaranteed they would need more people to get involved with the project so so I guess I mean when things like this happen it's good to remember these open source projects only exist because people donate their time to help keeping them alive so if you have the ability and the time to keep them alive please please do that and contribute to the projects maybe if if you don't have the time or the ability to contribute maybe consider can tributing money to help keep these projects alive so either way that can be very helpful John says anyone interested in the upcoming changes in react should watch the video sneak peek beyond react 16 on the react JSL work blog a sync rendering time slicing suspense and many other new things yes definitely give that a watch so ya go to react jest or go to the blog check out the video the video is embedded right there in the blog I didn't watch the entire video I watched at least half of it when it came out last week very impressive very exciting so I'm not gonna try to explain it because I'm sure I'll mess it up I only watched it once last week and only halfway through so maybe if I go through the video more and understand it a little better maybe we'll talk about it on the stream but it was cool like when I got to the point in the video when I was really starting to think about okay how could I use this on my projects then it's it started to get exciting it was cool you know thinking about things I've done in past projects that were kind of a pain and in thinking wow if I had this back then it would have been so much better really really cool cool stuff Fernando says hi Jesse I am from Argentina welcome thank you for watching John Ensign says and this is about the new reax there's no more need for debounce yeah you're right I saw that part so there's something that may be coming in react so all these things in reactor like not guaranteed yet none of them are finished so they could change but like there was a thing in there that maybe it would make debounce obsolete so we're using it in this project right now if you just talked about it earlier in the in the stream we saw that line where we're debouncing so we wouldn't need to do that okay hard sink so that show the site if time allows alright let me get through these last few things in the live chat horseshit and check the time Michael says I've hit a brick wall with my free code camp Simon I'm not great at front-end but good at logic I've been fighting a way to make it look good but it breaks my logic is it better to look bad but I'm nice logic or look nice and have spaghetti code on the backend it depends on who's looking at it right from from a user's perspective I guess as long as it works they would prefer that it does look nice and they don't care what the code looks like at all they probably never think about it but if you are going to be showing this to death so if it's going to be on your github repo then you probably do want your code to look nice if it's something you're going to go back to and have to maintain you don't want spaghetti code either so that's interesting that the look of it is breaking the logic I said hmm Michael do you have that on get that project on github and would you mind if I just took a look at it at some point I can't I don't have a lot of time so I can't guarantee I'd be able to do anything but if I get a chance I'd like to at least like just check it out so let me know chef in says hello I'm from Bangladesh hi welcome thanks for watching Chris says that's great advice oh thanks thanks Michael says no no no it was that a no no no to be looking at it alright it's cool it's cool if you don't wanted me to see it I understand but uh alright so I've gotten through everything the live set so I guess I'll have a look yeah let's let's have a look at the the project here so hard Harshit you want me to show the project on the test URL are you cool with people knowing the test URL right now I'm gonna open it on my other screen and wait for an answer here all right some still I'm waiting for response hopefully our she heard me I just want to be sure that the test URL can handle traffic and that it's okay for people to know about it okay there you go all the old stuff was loading I had to refresh it okay cool so let me let me pull this over and I'm just gonna spend just a few minutes on this because I will have to go to my meeting soon but here's a sneak preview of what Harshit has been working on in doing pretty much all the coding for especially all the backend stuff and I've been just somewhat involved and to be honest but this is just a little taste we're not even in beta yet like we'd like to have a beta at some point so very much open to suggestions the idea is you could go here to discover new repositories you could certainly have different criteria for what you would want to how you want to filter these and how do you want to sort them and there will be some sort of way to let's say upvote different repositories so I would like it I'm not gonna say right away that I'm going to exclude the big repositories but I would like to make it so that the big repositories are not always on the top right you know we you can always see like react has it's honest you know reacts up at the top like the the big stuff from big companies are usually at at the top of like the most starred repositories so I everybody already knows about those what I want to highlight are some of the smaller ones so I'm hoping that's what we'll do we'll just have to kind of as we go through beta testing and things we just have to kind of adjust how we're pulling these in to make sure that that happens so here's some of the other things like we have a feed our sugar we are we not doing the feed at first I think that's what what's happening so I think I think we're not gonna have the feed so there was some social media components that we're gonna hold off we're most likely I where either gonna split it into another project or just hold off on them and maybe think about adding them back in at some point but for now I think we're better off focusing on one thing getting that ready so we can actually get it released and doing that one thing well we also had a spot where we were gonna allow people to post jobs so this is one of the other things that may be added on as a feature at some point obviously we're going to have a search which this one currently is searching for people and repositories so for sure we're gonna have a repository search I'll have to check with Harshit on whether the people search adds a lot more complexity or not if it doesn't then we may keep that if you know if not it might just be repositories at first the messaging thing that's another thing that Merriman may not be available at first but could be a feature later on I mean it was working like yes there's no rooms here right now it was working before so it's not working right now but you know that's that's how it is when it's in a state of development and then of course we have this is another one of those social media elements that probably won't be in there in terms of like followers and things like that and yeah so that's what we have so far should let me know if I missed anything I should saying the search works oh really cool let's see is it not is it just working for people right now do we only have limited stuff in there that's probably all right okay horseshit saying it's only working for people right now okay all right so that's the basically the idea behind it and I'm not indexed yet that's all right so that's the idea behind it I really just want I just want it to be a place where you can go to get inspiration and see what other people are doing maybe figure out projects that you would like to contribute to and just have it be a very nice fast interface this is all you know react based and let's see hard saying test yeah so we have the cool that's cool live search and that's using algo Lea which is pretty cool search service I like it it's not free but I I think it's really cool so anyway that's the idea at least that at least at first I mean this is gonna be totally free at some point I might like to add in some features like optional features that could potentially bring in some revenue to at least pay for servers and things like that because if we did get a lot of users I'd imagine it would get pretty expensive so that's that's on the horizon as being a possibility you know the other alternative maybe is trying to run off of donations and things like that so first things first is let's get it to a point where we can beta test it see if anybody is even interested if we even get any users and then you know take we'll go from there but the domain name will be JavaScript AF which will make sense for a javascript repository you know site yeah so anyway the the repo for this project for the front-end react part is JavaScript - AF and that's on my github my github account and then we also have the backend is JavaScript - AF - API so you can check out both of those Harshit mentioned before you do need some environment variables to get things up and running for the different services that we have so if you if you'd like to work on it and contribute let probably want to let hard know that you're interested and then see about getting what you need to get things up and running yeah and we'll definitely need beta testers - so even if you're not interested in contributing code beta testers are going to be important so I'll make sure to let everyone know when we're when we're at that point I think we're pretty close to being able to do some sort of you know beta like really limited beta you know all right okay so I'm gonna have to go now and get a few things done before my meeting and I should be back tomorrow I may have I got a double check I may have another presentation tomorrow it's not on my calendar but my the head of my department mentioned something about it so I need to figure out what what's going on with that so depending on what happens with that we'll see if I can stream or not and what time I can stream but I want to try to do there's many streams as I can this week kind of get back in the swing of things here Oh Michael I did not get a chance to check out the node CD manager I'm really sorry about that to be honest with you I keep forgetting about it and every time I see it in my github account I just look I'm not at a point where I can actually check it right boys like in the middle of doing something else so I will get to it I can't tell you when but I will try so apologies okay alright that's it for today I really need to stop talking now and I get ready for my next meeting I really appreciate everyone watching today and thanks for checking out this project and thank you to everybody who listened to me for a few minutes earlier talking about my mental health I know it's not very interesting for a lot of you but I I think it's good for me and it's good for other people in similar situations to talk about stuff like that so that's why I do it let's see okay see add a few more more comments I was just checking in the in the chat there but anyway I'm gonna try my best to be back tomorrow and until then have a great day everyone