Coding a LeetCode Clone with React and Node JS

== [ Description ] == In this video, we go over how to build a LeetCode clone with Node.js and React. We start off by setting up the frontend with CodeMirror to allow the user to write Python code on the web. Then we pass that code to the backend written in Node + Express. Finally, we execute the Python code using PythonShell and send the results back to the frontend and update the UI.

== [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng YouTube ▶ https://youtube.com/SuboptimalEng Website ▶ https://suboptimaleng.com

== [ Resources] == GitHub: https://github.com/SuboptimalEng/LeetCodeClone Tailwind CSS: https://tailwindcss.com/docs/guides/create-react-app CodeMirror: https://www.npmjs.com/package/@uiw/react-codemirror PythonShell: https://www.npmjs.com/package/python-shell

== [ Timestamps ] == 00:00 Full Stack App Overview 01:28 LeetCode Clone Demo 02:34 Set up React with Tailwind 06:03 Cleanup React Project 07:41 Display CodeMirror Editor 11:00 Bind Code to React Hook 13:41 Cleanup React Frontend 15:57 Set up Node.js Backend 17:48 Connect Frontend with Backend 22:01 Save Code to Python File 25:02 Python Code Explained 27:05 Run Python in Node.js 30:05 Update Frontend with Results 34:46 Fin

== [ Tags ] == #suboptimal #reactjs #leetcode