I usually think that projects like this are hard to build but when I see videos like this where guys like you build them so quickly then it makes me feel that nothing is too hard. It just calm my nerves and gives me self confidence that I can too build complex application.
Not to burst your bubble but they usually have the project already made beforehand before they record themselves rebuild it while also referencing it from time to time. You too can build complex applications but they are complex of course and it may (will probably) take you more time to debug, look up things you might've forgotten and also get used to using the new libraries and such. Stay confident but also set realistic expectations on yourself or you might be discouraged when you fail to build a clone of a complex application in 30 minutes. All the best.
@@samiyemane4305 to add to this: the real codepen site is def not one that was coded in an hour or 2. With the amount of users they have, they probably have intricate software design systems and architecture set in place in the backend.
This was my first React project ever and wow did I learn a lot! So glad I found this channel! If I lived by a mountain, I'd climb to the top and yell "Web Dev Simplified is the greatest!" "...greatest" "...greatest"
This dude should have a million subscribers by now. I am so glad I found this channel. He explains everything so well and with baby steps. You do great work Kyle, keep going dude!!!
Please do more clone videos! Some other youtubers tried it but their attempt is a frustrating joke. Your videos are always top quality. You deserve at least a million subs! Love your work!
@@WebDevSimplified Please make this one. Those features are very useful in general and not a lot of tutorials cover them properly. Also a Trello close would be a great start for bigger projects.
@@WebDevSimplified I'd love to see this as well! Especially the drag 'n' drop feature from column to another, and *storing the order* of columns and the cards inside columns.
🤯🤯🤯 Codepen watching this video in disbelief of how small the source code is compared to how many lines it took them to create this functionality. 🤯🤯🤯🤯🤯
Mate, thanks a lot for this! I thought it was something really complex. But you make everything looks easy. And it's amazing to see how powerful simple things are. And how many problems we can solve making a good use of these tools.
I love this tutorial, and all your tutorials. Thank you so much for you time and effort. This was my first React project. A little complex, but I am getting the hang of it. Is it possible, if not already explained else where, to save more than one project and then open them, or even just clear the save with one button?
I'm the creator of kodeWeave. I can tell you there's more complexity involved with developing these type of editors. Such as preprocessors, integrating js modules, defining if initial js type should be a module or not, dom diffing, importing libraries from the cdn, if you want to add multiple custom files locally without a server you need to use service workers for that, I can go on. But initial setup concept is accurate. Typically for css you target the initial style id and replace the textcontent with the new styles so you don't have to refresh the entire (which can be integrated in a DOM diffing function but dom diffing isn't ideal when you're coding in js). Anyway that's all I have to say on this.
Hello Kyle! I really appreaciate all the videos you make! I also have one question as I am really curious about this one: How does a "normal" app development go? Is it like in your tutorials where you immeadiatly know where goes where with no stopping, questioning or braining since maybe you pre-prepared your code to show us? Or in real life example of development one wouldn't be so "efortless" and wouldn't know exactly how his code should be all put together? I hope you understand my question and that you will respond to clarify this one for me. Thank you!
Real life projects take much more time and I constantly am making mistakes and moving things around. This project probably took me a few hours to build out the first time.
2024: This is giving me 2 separate boxes for each language in top pane. so total am facing 6 boxes. and for every language, the top input box is not working, even if i type in the top box, its displaying in the latter one. probably its an issue with react codemirror2 FIX: add this in your css file: .react-codemirror2 > .CodeMirror:first-child { display: none; }
Thank you posting such a woderful video. However, I am getting an error saying all the imported packages in Editor component are not expprted from codemirror. Is it possible to fix? I have installed codemirror as explained in the video
I tried this today bro...and its awesome. Thanks for the video and I have an issue that I can't Deploy this site in firebase can u pls say me an answer for it
From MDN "Notes about sandboxing:When the embedded document has the same origin as the embedding page, it is strongly discouraged to use allow-scripts " What does it mean "the same origin"? And is it here that case?
Had problems with codemirror package so opted for monaco editor instead now my whole page reloads when the srcDoc attribute of changes. Is there any fix EDIT : It seems that it only happens on the mozilla developer edition. This wasn't a problem with brave or chrome. Maybe it is because mozilla doesn't use the chromium engine.
Just finished zoom clone and was thinking about creating a notepad like app, and I see this in notification. 👍 Doubt: can I deploy that zoom clone app in vercel ? If so how?
I know this is old, but if anyone sees this, then it'd be a huge help: I'm missing the reasoning behind these lines in your useLocalStorage custom hook: if (typeof initialValue === 'function') { console.log("function") return initialValue() } else { console.log("not function") return initialValue } If I replace all of that with just "return initialValue" then the functionality is unhindered and I was careful about being sure to wipe localStorage each time I tested the change. I'm just not sure why we'd have to specify the difference between "function" type and string type, as nothing is to be displayed initially from our js editor. I'm sure I'm missing a key concept here, so I'd love to hear what I'm missing if possible!
When I add the useLocalStorage hook in my App.js, it throws me a cross-origin error. If I use useState hook instead of the useLocalStorage, it works perfectly. I googled it, but couldn't find anything. I hope you can help me. By the way reallycool and informative video.
@@feng282 when we say "production ready" we mean "secure, stable, tested and documented". Most of those "*insert famous site* clone" are bare bones versions that would croak dead if used by thousands of simultaneous users, or wouldn't be secure enough for anyone to trust their data to them. These videos teach you to build toys, not real applications.
i watched their all video they are just make the design not working one Thi guy is really good he explain eah and every thing in simple manners and fully function thing
I usually think that projects like this are hard to build but when I see videos like this where guys like you build them so quickly then it makes me feel that nothing is too hard. It just calm my nerves and gives me self confidence that I can too build complex application.
Not to burst your bubble but they usually have the project already made beforehand before they record themselves rebuild it while also referencing it from time to time. You too can build complex applications but they are complex of course and it may (will probably) take you more time to debug, look up things you might've forgotten and also get used to using the new libraries and such. Stay confident but also set realistic expectations on yourself or you might be discouraged when you fail to build a clone of a complex application in 30 minutes. All the best.
@@samiyemane4305 to add to this: the real codepen site is def not one that was coded in an hour or 2. With the amount of users they have, they probably have intricate software design systems and architecture set in place in the backend.
same here bro@JitendraSingh-xc7yq
I finished the app, now I will add features like registering, logging in, shared editing, etc. THANK YOU :D
Next: How to build a React clone with React.
agree !
With Vue :)
React Docs are build with docusaurus
No bruh you're wrong, its like build a React clone with Vanilla Javascript :)
@@aldipiero747 it was a joke on how he always builds every clone in React. I personally love react and I like his videos 😁😋
This was my first React project ever and wow did I learn a lot! So glad I found this channel! If I lived by a mountain, I'd climb to the top and yell "Web Dev Simplified is the greatest!" "...greatest" "...greatest"
This dude should have a million subscribers by now. I am so glad I found this channel. He explains everything so well and with baby steps. You do great work Kyle, keep going dude!!!
he has reached 1m
Next: How to make Vuejs with Reactjs
Bro !!!!! 😜😜
bro i was just thinking how online text editors worked and here you bless us with this video
Please do more clone videos! Some other youtubers tried it but their attempt is a frustrating joke. Your videos are always top quality. You deserve at least a million subs! Love your work!
now he has millon sub bro
which youtuber are you taking about?
Local Storage Hook part is amazing.
Thanks bro you brought really awesome tutorial.
Glad you liked it
Great stuff Kyle!!
That is awesome i cannot imagine that i can get this type of information for free!
You can get a lot more if you buy his course
@@nabiisakhanov3522 you are right! 👍
Kyle from the bottom of my heart please make medium clone with that text editor feature. Please am begging you. Thanks in advance.
Could you do a basic trello clone that you can actually edit the card and add attachments or dates and be dragged
Great idea!
One in react and one in Vue 😁 I'm a Vue guy myself
@@WebDevSimplified Please make this one. Those features are very useful in general and not a lot of tutorials cover them properly. Also a Trello close would be a great start for bigger projects.
@@WebDevSimplified I'd love to see this as well! Especially the drag 'n' drop feature from column to another, and *storing the order* of columns and the cards inside columns.
I was having trouble using codemirror and react together, thank you!!
that useEffect clearTimeout was smooth af
Love that you added the timestamps thanks man
Glad you like them! I am trying to add them to all my new videos.
Thanks bro. I was already working on this project. Now it will be much easier for me.
🤯🤯🤯 Codepen watching this video in disbelief of how small the source code is compared to how many lines it took them to create this functionality. 🤯🤯🤯🤯🤯
That was one of the best tutorial i have ever seen...thank you for this series
same im just wating for my react app to make xD
If you aren't able to install react-codemirror2 using npm because you're using React 17, try "npm i react-codemirror2-react-17" instead
Thanks Man...I literally wasted 1 hour searching on Google..blessed to see ur comment...Tysm
need somthing for react-18 i tried react-codemirror2-react-18 but didn't work 😂
@@shreejitpal6598 yeah same problem
@@shreejitpal6598 what did you do then? I am having this issue.
Thank you so much, wasted almost an hour searching online
You're doing amazing work Kyle! thanks for all the amazing content you keep pushing
Mate, thanks a lot for this! I thought it was something really complex. But you make everything looks easy. And it's amazing to see how powerful simple things are. And how many problems we can solve making a good use of these tools.
I watched the video at 0.75x speed and was able to get everything. Thanks!
Building clone is new trend 😀
But it's great, to learn new things fast.
Yeah, but i love these trends instead of tiktok's shitty trenda 😂
next build codepen in codepen
You are the most underrated talented developer.
That last part with localStorage was very useful
Thank you. This is one of my dream projects.🥰
This is awesome content, unique, on point and don't waste your time!
I love codepen too and love this tutorial as well.
I love this tutorial, and all your tutorials. Thank you so much for you time and effort.
This was my first React project. A little complex, but I am getting the hang of it.
Is it possible, if not already explained else where, to save more than one project and then open them, or even just clear the save with one button?
Try this .. If you are facing issue regarding codemirror-2 package :- npm install react-codemirror2 --legacy-peer-deps
@@shouvikchoudhury9691 use the exact version as shown in video
It's giving module not found error
Thank you brother ♥️ ..
Clear and concise as usual, great video! Keep up the good works!
Your recent videos have been 🔥 Awesome content, Keep it up!
Glad you like them!
ty. its really easy to follow and understand your tutorials :)
if you are unable to install any library , the use command ` npm config set legacy-peer-deps true` . you can install library in react
but after that its showing this -> Missing "./lib/codemirror.css" specifier in "codemirror" package
forgot to say the useLocalStorage hook was also so pure and awzom to work with, thq
I was waiting for this
useLocalStorage() functionality is awesome
Damn! this is amazing! I didn't know it could be that easy.
Thank you so much for the content!
Next: how to make vscode using electron.js and react
How long did it take you to reach this level?
I'm the creator of kodeWeave. I can tell you there's more complexity involved with developing these type of editors. Such as preprocessors, integrating js modules, defining if initial js type should be a module or not, dom diffing, importing libraries from the cdn, if you want to add multiple custom files locally without a server you need to use service workers for that, I can go on. But initial setup concept is accurate. Typically for css you target the initial style id and replace the textcontent with the new styles so you don't have to refresh the entire (which can be integrated in a DOM diffing function but dom diffing isn't ideal when you're coding in js). Anyway that's all I have to say on this.
I just love this project 😍 awesome!!
Please can you simply the React routing 🙏🙏😅
Hello Kyle! I really appreaciate all the videos you make! I also have one question as I am really curious about this one: How does a "normal" app development go? Is it like in your tutorials where you immeadiatly know where goes where with no stopping, questioning or braining since maybe you pre-prepared your code to show us? Or in real life example of development one wouldn't be so "efortless" and wouldn't know exactly how his code should be all put together? I hope you understand my question and that you will respond to clarify this one for me. Thank you!
Real life projects take much more time and I constantly am making mistakes and moving things around. This project probably took me a few hours to build out the first time.
@@WebDevSimplified Thank you very much for your quick response!
Amazing content as usual. Could you explain docker or do something with service worker? Maybe some system design overview?
Yea, im gonna buy
You are a clone master nowadays!!!
2024:
This is giving me 2 separate boxes for each language in top pane. so total am facing 6 boxes. and for every language, the top input box is not working, even if i type in the top box, its displaying in the latter one. probably its an issue with react codemirror2
FIX:
add this in your css file:
.react-codemirror2 > .CodeMirror:first-child {
display: none;
}
thank you
I am facing the same issue. Can you please explain
very big thanks bro literally wasted lots of time in doing chatgpts and all
i code on CodePen and i m going to build this clone today😀😀😀
A tutorial on Node js compilex will be great.
Thank you so much for this video! Can we use this with Python editor instead? (And compile it the same way with flask?)
Amazing.....mind blowing....how do you actually get these ideas?
As Always, AWESOME tutorial! Thank you!
*React-codemirror2 is not for react versions above 16.x latest is 17.x any alternatives for react-codemirror2*
Please answer this!
amazing tutorial
thnx Kyle
thanks, i learn a lot from this video
Thank you posting such a woderful video. However, I am getting an error saying all the imported packages in Editor component are not expprted from codemirror. Is it possible to fix? I have installed codemirror as explained in the video
I tried this today bro...and its awesome. Thanks for the video and I have an issue that I can't Deploy this site in firebase can u pls say me an answer for it
Awesome as always 👍😀
Is there a way to prevent the from flashing white on update? :)
great video! I'm wondering, how can we add a console to this app?
Do how to build codesandbox next!
How to answer this question when interviewer ask that what is different in your code editior that is already available in market
thanks a lot for this project
This is SO COOL ...luv u kYle.
Awesome!! TQVM!
you should make a hastebin clone that would be really cool
Which code app you are using?
Thank you so much!
Hi! I Like Your Simple Way Of Teaching!
import { WebDevSimplified } from "TutorialAwesome"
Hey Kyle it would be really great if you could make a video regarding Dynamic Programming. I was asked this in an interview 😭
Great video! but I`d like to find out how to add the possibility to write on jsx/react? thank you in advance)
From MDN
"Notes about sandboxing:When the embedded document has the same origin as the embedding page, it is strongly discouraged to use allow-scripts "
What does it mean "the same origin"? And is it here that case?
Had problems with codemirror package so opted for monaco editor instead now my whole page reloads when the srcDoc attribute of changes.
Is there any fix
EDIT : It seems that it only happens on the mozilla developer edition. This wasn't a problem with brave or chrome. Maybe it is because mozilla doesn't use the chromium engine.
Just finished zoom clone and was thinking about creating a notepad like app, and I see this in notification. 👍
Doubt: can I deploy that zoom clone app in vercel ? If so how?
Evernote clone - ua-cam.com/video/KWBIm_P23zc/v-deo.html
wow nice video. soany new concept to learm just out of curiosity could we open to new page if we want? having the design save?
19:40 It felt like RxJS should be used for such things
Is it possible to use anything like jQuery in this?
I know this is old, but if anyone sees this, then it'd be a huge help:
I'm missing the reasoning behind these lines in your useLocalStorage custom hook:
if (typeof initialValue === 'function') {
console.log("function")
return initialValue()
} else {
console.log("not function")
return initialValue
}
If I replace all of that with just "return initialValue" then the functionality is unhindered and I was careful about being sure to wipe localStorage each time I tested the change.
I'm just not sure why we'd have to specify the difference between "function" type and string type, as nothing is to be displayed initially from our js editor. I'm sure I'm missing a key concept here, so I'd love to hear what I'm missing if possible!
Hi. You're a professional developer, why don't you use WebStorm for JavaScript development?
Next video : How to clone the existence with React
.
.
.
You're Awesome Dude
Can you teach us how to make a syntax highlighting editor? (No Libraries)
Thanks 👍
Good stuff as always.
wp got through it with ease.
When I add the useLocalStorage hook in my App.js, it throws me a cross-origin error. If I use useState hook instead of the useLocalStorage, it works perfectly. I googled it, but couldn't find anything. I hope you can help me. By the way reallycool and informative video.
I love codepen
if you run into codemirror problems, just get the version@5.57.0, just solved some package problems I was stuck on
great work! would a simple kids learning game (like shapes, colors) be possible with React?
omg this is so interesting, learned alot! Thanks!
Next- Uber clone with react
Heyyy Web Dev you are the programming goat :)!!!!!!
Alright now build codepen in your codepen clone
Next : How to build UA-cam with React
lol 😂
@Clever Programmer already did it
@@yt.mhasan it's not production ready
@@sukhvsin2 Just out of curiosity, is it front-end completed at least? When you say production, you mean backend?
@@feng282 when we say "production ready" we mean "secure, stable, tested and documented". Most of those "*insert famous site* clone" are bare bones versions that would croak dead if used by thousands of simultaneous users, or wouldn't be secure enough for anyone to trust their data to them. These videos teach you to build toys, not real applications.
thanks, really nice one
Next: How to build a javascript clone with React
🤯
there you go, the clever programmer surely clone this!
i watched their all video they are just make the design not working one Thi guy is really good he explain eah and every thing in simple manners and fully function thing
Awesome content as usual 😍