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

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.

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

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**

#code #programming #codeeditor #react #reactdevelopment #javascript #frontend #frontenddeveloper #reactproject #project #html #css #redux #website #websitedevelopment #appdevelopment #techcareer #technology #coding #reactjs

[amit-jxlh]

Huge respect to you sir for bringing this video to us learners❤🥰

[haricharanvalleru]

very helpful video and explanation is good

[LaurenGillott-oo]

Does the playground work properly with user input, e.g. input in a loop that prints and inputs in each iteration? I’ve tried to use the app but it just infinitely loads.

[bevanmehra]

didn't understand the part from 4:06:30 - 4:14:00

[zaryabzubair]

export code downloads all files in txt format.

[Ahmad-emu]

Man, i'm here because i want to know to implement codemirror. If you use monaco editor instead, you should update your video title to reflect that.

[shortsreel]

Bro if you understanding Hindi then please make videos in Hindi because if you are making video in Hindi for your country you have chances to more growth on your videos

[Kamaldev-ng]

judge0 login not work, website errors