How to Code a LeetCode Clone with React and Node.js

what's going on guys my name is engineer and i make sub-optimal content in this video we'll go over a step-by-step walkthrough of how to build a lead code clone with react and node now for those of you that don't know lead code is a platform that's supposed to help you with your coding interview prep and all it does is it takes in some code and it runs the code on a server and then it tells you whether your code has passed a couple tests or not creating a simple version of lead code is actually not too bad as it turns out there's really like six core steps that we need to get started with right the first thing is setting up react with tailwind css and then displaying the code editor using the code mirror library finally sending that code to the backend which is going to be running on node.js and express and inside of the back end we're going to want to figure out how to run python code in a node.js server and finally send those results back into the front end so we can display whether or not the user has completed the correct project that's going to be the whole sort of full stack project that we're going to be going over today and before we get started i'm just going to ask for one small favor from you guys and that is to leave a like for this video and consider subscribing for more suboptimal content just like this cool with that out of the way let's get started with a demo of the app we've got the prompt which is asking the user to create a function to add to numbers and once we create the code we're going to be able to submit the code the backend should be able to process whether or not what we've written is the correct code and then display the actual results so here i have created a python function called add and all it does is add a and b so once i submit this code we should see that there are three test cases passing so suppose i incorrectly completed this code instead of returning the sum of a and b i returned the sum of a and a then we would expect that some of these test cases have failed and rightfully so we can see here that when i submit the code two of the test cases failed now if i just return for example negative one then all three of these test cases should have failed because we are not actually solving the problem at hand and this is the app that i want to build for you guys today completely from scratch and do the full front end to back end walkthrough so let's get started so the first thing that we want to do is go to a empty directory and create a react intel window project so tailwind has a really good installation guide so i'm just going to follow that right now so right now it's telling me to do npx create react app and then just specify my project name i'm going to call this client because we're going to have a client and server with node.js so i want to separate those two things so right now it's creating the react app and let's just scroll down and start copying these commands because we're going to need to do this to get tailwind set up cool so the create react app command created the client project so we can see the into client and now we can start running these tailwind commands so these are just some commands that you're just going to need to follow all they're really doing is just setting up tailwind because tailwind requires a couple of extra packages and it requires you to set up your project differently than just you know what the default create react app provides with you so that's all we're doing right here we're installing tailwind we're installing craco with changethepackage.json so inside of the package.json what we can do is uh you know remove our react scripts and do this with cracko instead and of course we want to create our cracko config as well craco.config.js and here just you know just sort of copy these things because it just makes it uh you know yeah you're just gonna have to copy these things and figure out set it up in your project so it just takes a little bit of time to set this up so create a new file tailwind.config.js and paste the information from here and you know copy this you actually don't need to do this if you're not deploying to production but you know let's just follow the directions anyway and the last thing you're going to want to do is import the tailwind css styles into your index.css file so i'm going to go to the src and then index.css and here i can import the tailwind styles and of course we want to make sure that index.css is imported into the react project which i believe it is automatically so we're good to go so the best way i like to do that i like to test whether or not this is working is to just change the text of the project so i'm going to go to learn react and right now learn react is probably just in white so i'm just going to make it red using i think it's text red 500 and so if i save that and run this app using npm run start what i should see is that the learn react text is now in red and that's going to ensure that we have set up tailwind css properly inside of our project so let's just make sure that everything is up and running cool so as we can see learn react is in red so that means that we set up tow improperly all right so the next thing that i like to do is just remove all the unnecessary code and so i'm just going to do that real quick right over here so i think auto completions are currently not working because this is a js file so i'm going to change that to jsx and and that seems to fix auto completions i don't know why that is the case but that is the case so let me save that and now we get html auto completions and if i refresh this page oh one more thing is i have to change this inside of index.js and make this instead of underscore i mean dot slash app change it to dot dot slash app dot js x and then if i rerun the app i should see uh you know our code once again as that's running i'm going to remove more code that is unnecessary just because i don't like seeing it inside of my app so i'm going to remove the report web vitals stuff because that's just annoying we don't need this svg thing so let's just remove that remove remove this remove setup test just remove a ton of files that are largely unnecessary for this project just so it's a little bit cleaner and you guys aren't confused with what all the other extra files are doing so right now all right so i'm importing this so that's causing an error but if i refresh this it should work again cool so now that we've cleared out all the unnecessary code the next step is to display the code mirror editor and getting started with codemirror is actually pretty straightforward all you got to do is install this npm package which is the uiw forward slash code mirror library so you can go to your react project and you know stop it from running and then do an npm install and then i think it's dash save yeah so what this is going to do is install codemirror into your project and the next thing you want to do is display the code mirror editor so let's go to our app.jsx file and let me just npm run start this so that our code is up and running and we can see it refresh live and i'm going to go to app.jsx and do these imports so right now i imported the code mirror sublime text keymap as well as monaco instead of monaco let's do dracula just because it seems to be the most most popular style for a code mirror editor and finally what we want to do is just display the code mirror so we can replace learn react with code mirror and let's see where that gets us now again this isn't going to be monika is going to be dracula and so if we save that we should see something happening this looks like it's an error code mirror is not defined code mirror in line 11 is not defined am i not oh am i not importing code mirror oh right i want to import code mirror as well oops i forgot to copy this line so let's go back up here and then import code mirror and see if this is going to fix the issue for us so refresh the page and there you go so you got a simple little code mirror editor and inside of it we've currently set the code to be constant a equals zero so that's exactly what it's displaying right here and the mode is jsx first thing we want to do is just change this to python and kind of style this code mirror app just so that it looks a lot cleaner than this because right now it just looks really weird so let's see how to do that so i'm going to create um a div and this is where tailwind comes in handy just because it's really easy to work with tillwind and i'm going to say class name and i'm going to call this absolute and we're just going to do a top maybe like a top 20 bottom 40 left 10 right 10 and see what that gets us if we refresh the page so it looks you know pretty okay text is centered and we don't want it centered so that happens because in one of these classes the text is centered so we can just do text left and that's going to align the text to the left side for us and now what we want to do is bind the code mirror code to a variable inside of our app we can do that using react hooks let's create a use state and here i'm going to name the variable code and call this set code and the initial state of this code is just going to be const a equals 0. in fact let's change this to be let's change this to be python code so it's not javascript and i'm just going to say a equals zero and let's save that here it's saying use state is not defined and that is because we have not imported the use date so let's import ustate from react and right now the code here is we have the same thing basically except now the value from this code is coming from our hook and what we want to do is change the code whenever we change inside of code mirror it has this really great option to do that and that option is called on change so on change what we want to do is call a function and this function takes uh the code mirror gives us a couple things from this onchange method so it gives us editor it gives us a couple things i forget what they are let me just check it out right over here maybe it shows in the documentation on change so we get the instance of the code mirror we get the change so let's go to uh down here and call this change but really we don't care about the what's what's being changed here all we really want is the text of this editor so oops let me change this to python and so we can do is set the code to be the editor dot i think it's get value and so whenever we change the code inside of the editor we should be automatically updating the code inside of our function let's just confirm this is happening so let's console.log the code as soon as we change it and let's see what happens here as you can see as i am changing the code the new updated code is being displayed so basically set code is working as expected so we can just remove that because we know it's working and now what we want to do is just ask a question right ask the user the question that we want them to solve so i'm just going to create a simple little div and here we're just going to say create a function that adds to numbers in python so that's going to be the question that we are asking the user and the last thing we want to do is submit the code that the user writes in here when they are done with it so let's create a little button at the bottom and this button let's just call it submit and let's add a little bit of styling here so i'm going to do a border too and then let's do background green 500 i think and when we click it on click we can call a function and this function is supposed to send whatever is inside of code to the back end right now we haven't created the back end yet but we will shortly so let's just call this function submit code and let's create this function as well const submit code is a anonymous function that is going to i guess it's going to submit the code to the back end but right now we can just console.log the code so cool we got our submit button over here and this is our editor so let's open up the console once again and let's just say you know def define a function called add which takes an a b and then returns a plus b so we want to do now is when we submit this code we should see that sorry when we click this button we should see that the code is getting console.logged cool so we got the python code and it's getting logged so now what we want to do is send this code to the backend and process the python code so right now we've got our client-side code mostly completed and what we want to do is create a node.js server that's going to take in the python code and handle it and make sure that the code that we written is correct so let's create a new folder inside of our project and here we're going to call this the client so we can just say mkdir sorry we're going to call it the server and when we cd into the server we want to do an npm init and what this is going to do is it's going to initialize node.js and you know we could just skip through all of these real quick yeah that's fine and when we're here all we want to do is create an index.js file and here let's just create a simple little express app so i'm going to save that obviously it's not going to run because we haven't installed express so let's install express and we can do that with running npm install express we also want to install course because you know we're going to run into some cores errors because we're going to be talking from the client which is going to be running on like port 3000 and let's change the port to 80. i think it's called app.use cores like this we want to const course equals require scores like that i think and one more thing is we want to use json to communicate between the front end and the back end so i'm going to do use express dot json so all i'm really doing right now is setting up the server so that the front end can communicate with the back end and what i want to do is create a python endpoint this endpoint is going to take the information from the front end so let's open up the front end from our project and what we want to do is create a axios query that's going to hit the back end and send it the required code that we want to execute so that you know we can actually see if it's working or not so on the front end on the client side we're going to run an axios query post and we pass in the url so http forward slash localhost forward slash 80 and then python and here we want to pass in the actual code and i think it's dot then then we're going to get a result and let's just console.log that result so right now what we're doing is creating an axios query on the front end that's going to talk to the back end running on localhost 80. what we want to do from the backend here is accept a post request for python console.log the request dot body and then just send a res.json [Music] message and then let's just call it success so i set up the front end to talk with the back end now the last thing i want to do is obviously install axios on the front end because i haven't done that yet so let's go to the client npm install axios and so once this is up and running we should be able to once we submit our code get a simple back and forth communication working so let me open up the client and the server cd into clone and then server and then run npms npm i think it's index.js wait a minute do i have to run did i not set it up properly um let me just create it like this start and then oh sorry it should be node that's what i meant to write index.js but anyway you can just do oops npm start this should start up the local host ad server and then if we do npm run start on the client we should have our project up and running got it whatever so let me refresh this and let me open up the console to make sure that we have the full front end to back end oh axios is not defined that's because i have not imported axios into my project so import axios from axios cool so now it should be running so if i press submit we should send this code to the back end the backend should log something in the terminal right over here and then it should send something to get logged inside of here as well cool so we got our code and we also got our data so let me just clean this up a little bit we don't really care about the request we just care about the data so let me just do that and yeah there we go we got the message success so now we got a front-end to back-end communication so the final thing to do is to run the python code that we're sending to the back-end and make sure that it is actually working and to do that we're going to need to install python shell but python shell is a npm package that basically allows you to run python inside of node.js and now the important thing here is that the easiest way to do so is to actually create a python file and then send that information send that and run that file basically first thing we want to do is convert whatever is being sent from the front end into a python file and then we want to send that python file into the python shell and run it so let's do that real quick we know that we are sending the request body which is the code to the back end but what we want to do is turn this code into a actual python file right so the actual python to do that we're going to need to import the file system so const fs equals require fs so the file system uh this is the file system and let me just sort of clean this up because i don't like how it's unordered weirdly so yeah so we're going to import the file system and what we want to do is create a new file hold on so we want to do is create a new file when we send it to when we send anything to the python backend we can do fs.writefilesync and the file that we're going to create is just going to be test.py this is going to be the file that we're going to write to and what are we writing into this file we're going to write the requests body dot code and so now when we have you know when when we send something to the backend we should see a file open up inside of our server folder called test.py with the actual code that we sent so let's just test that out and see that that is working so i'm going to restart the server now i don't have nodemon installed oh something is going on here i can't have express before installation oh right i have to collect this so i don't have nodemon installed so i'm to have to keep restarting the npm server but hopefully you know it still makes sense so right now let's open this up and we should see that when we press submit here we should see a test.py file with this code inside of it so let me submit it and there you go so test.py is working because we are writing to this file and what we want to do is send this file to the python shell and then ensure that the code is correct but just remember that the code that i'm sending is actually not correct right this is not a function that adds two numbers now it is a little bit now you could take this to the next level and actually code out the full implementation and take in the variables or anything like that but i decided to create it more simply um so that you know we can just sort of do a proof of concept for this project right so i'm going to pass in this code to the back end and ensure that it's working so let me just confirm with you guys that this is the same code that is going to add to numbers so we're going to this is the function called def add two numbers and what we're doing here is um we're creating the python file itself so that we can run it inside of the python shell on the back end and what this is doing is it's taking in three separate arguments right so it's taking in the first argument as argument a it's taking the second argument as argument b and it's singing the third argument as the result so what we want to do is when we're running the project we want to pass in a simple test like for example we want to pass if we're running the code right let me just do a sample right over here what we want to do is say python and pass in dot py and then pass in the argument one two and three what that's going to do is going to set this first argument to a second argument to b and the third argument to three so that when we print it out we're going to return true and so that should uh you know it should work so if we do like 5 2 and then like 7 this should be true now if we do 5 maybe like 4 2 and 7 because add and add a and b are going to return 6 instead of 7 this is going to be returning false and then we can handle that error in the back end and then send it back to the front end um let me stop this server and let me install the python shell so npm install python shell and here in the python shell we can pass in some specific options so it's really easy to pass in a couple arguments so the mode is going to be text the python options are going to pass this in and of course the arguments that we want to pass in as well so let's see how to add this inside of our code so we can do is just sort of copy this as is right and what we want to do is we don't need this thing or this thing because let me pass in argument 1 argument 2 argument 3 like so and what we're doing here is going to run the python script now the script that is getting created is called test.py so we want to change this to py and we're going to pass in these options right over here and here all we're doing is printing the results right we're not actually sending anything back to the front end for now but let's just print the results and see what results are happening we should see that it's getting printed to true because we're passing in the arguments 1 2 3 1 is going to be a 2 is going to be b and 3 is going to be result so because one plus two equals three we should see the result true on the back end so let me npm start the back end code and let me submit this to see what happens did i have to refresh this uh maybe i have to refresh it let me copy this code again oh i didn't save it i think yeah i didn't save that code oops anyway let me get the actual code this is the correct solution so i'm just copying that and let me submit it oh what's happening is i forgot to import python shell oh my goodness so let me import [Music] const python shell equals require python shell dot python shell let me restart the app and now we should see it as you can see it shows the results and the results are true so for example say we pass in a plus b plus 10 right this should in turn say that instead of being true the result should be false so let's see what happens cool so we get the false result so now all we got to do is pass this to the front end and display an error or success message so now we've got the results that we want and all we want to do is pass these in to the front end and so we can do so by just calling it here right and here we can just pass the results now i'm just going to pass so for the purpose of this tutorial let's just you know pass in one sample test case because adding multiple test cases as a little bit more complexity but i actually did that inside of the github repository so if you want to see the full code then you'll just check out the github repository for this project but you know for the case of this demo let's just send the results back to the front end right instead of logging the results i'm just going to send them to the front end pass or fail and this is going to be result 0. so we know that results is an array and it's basically returning like an array of true or false because we know that these are the only two options that it can be we can just sort of pass that back to the front end and once we have that in the front end we want to display it right we want to update our ui so let's just confirm that it is getting sent properly i'm going to open up the console and when i submit this i should get false right oh i forgot to restart so yeah so we restarted the app and we can see that it is false so now if we pass in the correct uh code we should get true cool so now all we want to do is display this in the front end and that is actually pretty straightforward so what we can do is create a variable actually let's make this an array so correct test case says and let's call this set test cases and let's just make this an array and what we want to do is when we get this data we want to uh well yeah we want to push this into the uh into the project into the starting test test cases so that we know whether or not it is correct and let me show you how to do that we can say set test cases and set it to be data dot pass or fail so this is going to be data.pass or fail and we also want to display this inside of our app so for every test case so let's say test cases dot map test case let's pass in an integer as well so that we can avoid that div each div needs a specific key issue and let's just display the test case for now and see what we get here so i'm going to refresh that and let me find the correct code that actually solved the problem because i don't want to keep uh you know doing that over and over so yeah we get true here so that means that this code is correct so if i press 10 it should be false now all that's really left to do is a little bit of ui changes so for example if the test case equal equal true then we can say that you know this was the it was a it was a success otherwise we can just say that the test case failed and so as you can see here this is the incorrect definition of add because i mean it's not right so it's going to fail and then if i were to correct it and then submit it then you get success so yeah that's gonna be it for today hopefully now you guys know how platforms like lead code or algo expert or coder pad just how they work under the hood and now you have an understanding of how to build one out for yourself and if you guys enjoyed the video then leave a like and definitely consider subscribing for more content just like this thanks for watching and i'll catch you guys next time [Music] you

Channel: Suboptimal Engineer

Views: 1,150

Keywords: suboptimal engineer, suboptimal software engineer, suboptimal, react.js, react js, leetcode, react leetcode, react js tutorial, react tutorial for beginners, react tutorial 2021, react node js, react js full course, react hooks, node js, node express, node.js, node js backend, react codemirror, node js python shell, node python, react python, react tailwind, react tailwind css, react with node js backend, react node crud, react node express, node js tutorial, node js react

Id: aXXZwyeTJ98

Length: 35min 23sec (2123 seconds)

Published: Wed Sep 15 2021

Reddit Comments

[u/americanKittyCat]

Link to code?