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"
@@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.
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!!!
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; }
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!
🤯🤯🤯 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'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.
@@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.
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.
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 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!
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.
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
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
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 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
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 😁😋
Next: How to make Vuejs with Reactjs
Bro !!!!! 😜😜
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"
I finished the app, now I will add features like registering, logging in, shared editing, etc. THANK YOU :D
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.
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! 👍
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
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
Kyle from the bottom of my heart please make medium clone with that text editor feature. Please am begging you. Thanks in advance.
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?
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
Local Storage Hook part is amazing.
Thanks bro you brought really awesome tutorial.
Glad you liked it
bro i was just thinking how online text editors worked and here you bless us with this video
Great stuff Kyle!!
You're doing amazing work Kyle! thanks for all the amazing content you keep pushing
🤯🤯🤯 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. 🤯🤯🤯🤯🤯
This is awesome content, unique, on point and don't waste your time!
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 😂
I was having trouble using codemirror and react together, thank you!!
that useEffect clearTimeout was smooth af
please make a more begginer friendly projects in React :) !!
Your recent videos have been 🔥 Awesome content, Keep it up!
Glad you like them!
I was waiting for this
Thanks bro. I was already working on this project. Now it will be much easier for me.
Next: how to make vscode using electron.js and react
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.
Next: How to build a javascript clone with React
🤯
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 ♥️ ..
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 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
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.
Love that you added the timestamps thanks man
Glad you like them! I am trying to add them to all my new videos.
That last part with localStorage was very useful
You are the most underrated talented developer.
Clear and concise as usual, great video! Keep up the good works!
Damn! this is amazing! I didn't know it could be that easy.
Thank you so much for the content!
Thank you. This is one of my dream projects.🥰
ty. its really easy to follow and understand your tutorials :)
Next video : How to clone the existence with React
.
.
.
You're Awesome Dude
next build codepen in codepen
I love codepen too and love this tutorial as well.
You are a clone master nowadays!!!
As Always, AWESOME tutorial! Thank you!
I watched the video at 0.75x speed and was able to get everything. Thanks!
Next : How to build RUclips 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.
forgot to say the useLocalStorage hook was also so pure and awzom to work with, thq
How to answer this question when interviewer ask that what is different in your code editior that is already available in market
This is SO COOL ...luv u kYle.
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.
thanks, i learn a lot from this video
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?
Awesome as always 👍😀
I just love this project 😍 awesome!!
Please can you simply the React routing 🙏🙏😅
omg this is so interesting, learned alot! Thanks!
Heyyy Web Dev you are the programming goat :)!!!!!!
Hi! I Like Your Simple Way Of Teaching!
import { WebDevSimplified } from "TutorialAwesome"
19:40 It felt like RxJS should be used for such things
amazing tutorial
thnx Kyle
Great video!! Loved it!
Alright now build codepen in your codepen clone
A tutorial on Node js compilex will be great.
Awesome!! TQVM!
thanks a lot for this project
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!
useLocalStorage() functionality is awesome
*React-codemirror2 is not for react versions above 16.x latest is 17.x any alternatives for react-codemirror2*
Please answer this!
Thank you so much!
i code on CodePen and i m going to build this clone today😀😀😀
Amazing content as usual. Could you explain docker or do something with service worker? Maybe some system design overview?
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!
Awesome content as usual 😍
thanks, really nice one
Yea, im gonna buy
Your content is 🔥
Amazing sir really amazing....
Good stuff as always.
Can you teach us how to make a syntax highlighting editor? (No Libraries)
Hey Kyle it would be really great if you could make a video regarding Dynamic Programming. I was asked this in an interview 😭
Thank you so much for this video! Can we use this with Python editor instead? (And compile it the same way with flask?)
you should make a hastebin clone that would be really cool
Next- Uber clone with react
How long did it take you to reach this level?
Hey, Kyle. Can we expect a TypeScript crashcourse from you. By the way, thanks a lot for the awesome content! Have a good one!
Amazing.....mind blowing....how do you actually get these ideas?
Thanks 👍
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
Do how to build codesandbox next!
Love it!
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
good tutorial thank you
Amazing 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
Its awesome man!!!!
Next: how to make Next.js with Next.js
Is there a way to prevent the from flashing white on update? :)
Just awasome...
thankyou!
Great video!
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.