Build Your Own Code Editor using React, CodeMirror and Judge0 | Unique React API Project I AccioJob

Hi Guys, in this tutorial, Samudrala (https://www.linkedin.com/in/samudrala-aravind-13599b172/) Acciojob's instructor, will help you build your own Code Editor. Samudrala will demonstrate how different components and pages are interconnected for smooth user interactions. The tech stack consists of HTML for structure, CSS for styling, JS for interactivity, and ReactJS for reusable components. We'll also touch on essential topics related to these technologies. Project Link - https://code-deck.vercel.app/ CHAPTERS: 00:00 - 20:28 - Lecture - 1_ Exploring the project 20:28 - 29:19 - Lecture - 2_ Project Setup and understanding the routes 29:19 - 52:25 - Lecture - 3_Homescreen UI Part 1 52:25 - 01:27:44 - Lecture - 4_ Homescreen UI Part 2 01:27:44 - 01:37:33 - Lecture - 5_ Homescreen functionality overview 01:37:33 - 02:06:20 - Lecture - 6_ Introducing Context 02:06:20 - 02:42:01 - Lecture 7_ Creating Playground Modal Part 1 02:42:01 - 03:00:59 - Lecture 8_ Creating Playfround Modal Part 2 03:00:59 - 03:12:32 - Lecture 9 _ Modal Form Validation, Data Storage and Bug Fixes 1 03:12:32 - 03:33:42 - Lecture 10 _ Creating Context for New Folder Modal Functionality and Styling 03:33:42 - 03:53:06 - Lecture 11_ Managing State Adding and Deleting Folders in React App 03:53:06 - 04:12:21 - Lecture 12_ Edit Folder Name State Management with Context in React 04:12:21 - 04:53:37 - Lecture 13_ Delete Functionality and Creating Playground Modal State Management with Context 04:53:37 - 05:04:18 - Lecture 14 _ Routes in React App 05:04:18 - 05:26:48 - Lecture 15 _ Layout of home page 05:26:48 - 05:45:40 - Lecture 16 _ Designing Input and Output part 05:45:40 - 06:17:31 - Lecture 17 _ Designing Editor container 06:17:31 - 06:27:50 - Lecture 18 _ Adding theme in Editor 06:27:50 - 06:45:41 - Lecture 19 _ Adding Import functionality 06:45:41 - 07:08:37 - Lecture 20 _ Adding Export functionality 07:08:37 - 07:21:47 - Lecture 21 _ Adding change language functionality 07:21:47 - 07:34:14 - Lecture 22 _ Adding functionality in Input and output container 07:34:14 - 07:43:29 - Lecture 23 _ Default code added for language 07:43:29 - 08:05:40 - Lecture 24 _ Adding functions as save code, update code wrt lang, and full screen 08:05:40 - 08:31:34 - Lecture 25 _ Api integration 08:31:34 - 08:44:28 - Lecture 26 _ How does API work 08:44:28 - 09:07:48 - Lecture 27 _ Adding api subminssion function 09:07:48 - 09:30:15 - Lecture 28 _ Added run code Source Code - https://github.com/SAMUDRALAARAVIND/code_deck/tree/main/src 📌Learn the basics of programming for free - https://bit.ly/3HSoENJ AccioJob is an ed-tech startup run by IIT Delhi Alumni and backed by Y Combinator. We train students in Full Stack Web Development and Data Analytics. By now we have impacted the lives of 7000+ students with the help of more than 450+ Hiring Partners. Our students are currently working in Top Tech companies including Amazon, PayTM, Walmart, Visa, Airtel, Salesforce, and many more. **AccioJob on Social Media** Instagram - https://bit.ly/insta_yt0 LinkedIn -http://bit.ly/3C0IPHp #code #programming #codeeditor #react #reactdevelopment #javascript #frontend #frontenddeveloper #reactproject #project #html #css #redux #website #websitedevelopment #appdevelopment #techcareer #technology #coding #reactjs