Codepen Clone | React and Material UI | React Project Series
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2024
- CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It is an online code editor, where developers can create code snippets, called "pens," and test them. In this video we will create Codepen clone using React Js.
🎥 All React Projects Playlist
• React Projects
⏩ Codepen Website: codepen.io
📕 Source Code/ Documentation/ References
---------------------------------------------------------------------------------------------
Source code of the Project
github.com/kun...
---------------------------------------------------------------------------------------------
➡ Java Projects: • 1/12 - Bank Management...
➡ JavaScript Projects: • JavaScript Projects
➡ React Projects: • React Projects
➡ MERN Stack Projects: • MERN Stack Projects
➡ Spring Boot Full Stack: • Full Stack Projects - ...
➡ Next.js Projects: • Next.js Projects
➡ LeetCode Questions: • LeetCode Solutions | Java
➡ Projects with AWS: • Projects with AWS
🌎 Find Me Here:
Instagram: codeforinterview ( / codeforinterview )
Telegram: codeforinterview (t.me/codeforin...)
#react #reactproject #codepen
Checkout other React Projects: th-cam.com/play/PL_6klLfS1WqHM02usd5VBnc0yempce2pt.html
Bro I successfully completed many channels projects.. but yours was the one with maximum learning.. country needs more teachers like you 🙌
Thank you so much 😀
The way you explained it so well , including every single small information , hats off to you man 👌
Feeling very sad by seeing your subscriber, I swear bhai, you deserver atleast 6+ million of subscribers as your content quality, explaination style, your attractive voice, your way of speaking, oh god, it is just superb, I am your student but on the other side, a very big fan of you bhaiya, I consider you as a nice personality in tech field..... Don't know why, people's are not supporting you...
Thank you so much sir for this video. And the way you responded to my queries is unimaginable, because i thought you would not respond but the way you guided me through this entire project is amazing. I had great fun while developing this editor thank you sir for your concern
And i want viewers to know this point :-
if you are facing the issue while compiling the code-mirror5 packages(even after installing "npm i codemirror --force") instead run this command-> "npm i codemirror@version5" it will execute without any error🙏🙏
Thankyou bro🤟it's actually working 💫
Pls help me it's not working for me
@@ritikakeshri9620 if you are facing the issue while compiling the code-mirror5 packages(even after installing "npm i codemirror --force") instead run this command-> "npm i codemirror@version5" it will execute without any error🙏🙏
@@ritikakeshri9620 if you are facing the issue while compiling the code-mirror5 packages(even after installing "npm i codemirror --force") instead run this command-> "npm i codemirror@version5" it will execute without any error
try this if you have problem like this
Thank you for making this video.
Other youtubers only write codes and not explain properly . But you explain properly.🔥👍👍
thankyou 🙌❤
Sir your teaching skills are amazing 🤩 keep going this is the first video I saw of your channel
Thanks and welcome
Wow...
Very lovely .
Waiting for more projects on mern.
Some cool and choota project.
Thanks a lot 😊 cool and chota mern project coming soon.
Pasting the playlist of all MERN projects
th-cam.com/video/BZRT5qgLu4Q/w-d-xo.html
Thank you so much brother i was searching for this for a long time now my codemirror was not working but after watching this video it worked thank you soo very much
successfully completed the project in 3 hours.✌
that's great, you can checkout the React Projects playlist for other cool projects
th-cam.com/play/PL_6klLfS1WqHM02usd5VBnc0yempce2pt.html
Hii can u help me out ...i m stuck in this
Your videos have always been a great help to me, and I am confident that your expertise on the topic will provide me with the guidance I need. Your clear and concise explanations, along with step-by-step demonstrations, make it easy for me to understand .
I am facing some difficulties with the deployment aspect. I was wondering if you could create a video on project deployment,
Thank You for your amazing content.
You need React deployment video or MERN deployment video?
and thanks for your kind words
Please find the deployment video of this project
th-cam.com/video/dMpVz_IIfpU/w-d-xo.html
you got a new subscriber, you explain each thing
Welcome aboard!
Thank you sir for this ❤ hope you will continue this projects series
Yes, more projects coming ❤
please bring more on MERN projects ..hats off to your hard work ❣❣
Yes, I am working on it 🙌
one doubt why you did't used debouncing at the time of code updatetation
Ek bus ya car booking system banaiye bhaiya chotta sa mern project. Bahut demand hai iss project ka.
sir I'm getting error while executing codemirror2 portion from 40:34 please respond and clarify how to remove that error
write in your terminal..... ... npm i codemirror@5
@@khushidubeypoetry i cannot thank you enough for this
itna dikkat aa raha tha meko, i was stuck on this for the past half hour! godsped!!
Awesome Content bro 🤩🤩🤩
thanks bro!
Shaandaar jabardast👌👌
❤
When I am trying to run the code, such an error is showing- ERROR in ./src/components/Editor.jsx 13:0-54
Module not found: Error: Can't resolve '@mui/icons-material' in 'C:\Users\acer\OneDrive\Desktop\React-project\codepen-clone\src\components'
write in your terminal..... ... npm i codemirror@5
Facing the same😢😢
You teach very well
So nice of you
Great sir Love your Project
thankyou so much 🙌
Hi sir, I am facing a problem that when home component became child of dataprovider my output is not coming, it's blank page is there
Sir i m using next js nd i m also facing the problem of duplicate editors but there is no in my code can u suggest any other way to solve this i also try to use shorter version of react but it is not working with other modules please suggest any solution
Thanku sir... 🙏
Amazing..... ✌️
you're welcome
After installing codemirror2 and importing files in Editor component I'm facing moudule not found error for xml , css, and javascript... How to solve?? please reply.
Facing the same😢
@@abhilash4292 keep practicing bro., you will get it one day.,
sir i am facing issue in getting the value while typing it is not taking the values
make sure you are passing value prop in ControlledEditor component
Worth💫
thankyou 🙌
Superb project sir❤
thankyou so much :)
ERROR in ./src/components/editor.jsx 11:0-47
Module not found: Error: Package path ./mode/javascript/javascript is not exported from package C:\VsCodeProjects\React\code-pen
ode_modules\codemirror (see exports field in C:\VsCodeProjects\React\code-pen
ode_modules\codemirror\package.json)
webpack compiled with 4 errors
Thanks for the video man... I tried to add an extra feature to this project by adding a terminal window in the page which would display all the console logs of the . But i couldn't find a way to do so... Can someone pls help
Sir, I faced one issue. In my system JS Code isn't working in this clone editor.
Else everything is alright.
Were you able to resolve it? I am facing the same issue, can you please help
ERROR in ./src/component/Editor.jsx 9:0-39
Module not found: Error: Package path ./lib/codemirror.css is not exported from package C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror (see exports field in C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror\package.json)
ERROR in ./src/component/Editor.jsx 10:0-39
Module not found: Error: Package path ./theme/material.css is not exported from package C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror (see exports field in C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror\package.json)
ERROR in ./src/component/Editor.jsx 11:0-33
Module not found: Error: Package path ./mode/xml/xml is not exported from package C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror (see exports field in C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror\package.json)
ERROR in ./src/component/Editor.jsx 12:0-48
Module not found: Error: Package path ./mode/javascript/jav/ascript is not exported from package C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror (see exports field in C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror\package.json)
ERROR in ./src/component/Editor.jsx 13:0-33
Module not found: Error: Package path ./mode/css/css is not exported from package C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror (see exports field in C:\Users\Dell\Desktop\code-pen
ode_modules\codemirror\package.json)
facing this error plz help me
Hey! did you find the solution?
facing same issue
@@ajaynishad9329 during installation of codemirror use 'npm i react-codemirror2 --force' instead of legacy peer deps
@@beast2485 thanks bro
@@beast2485 thank you so much its working
Can't understand how you loaded that "const logo" cause my image is not loading with relative path
WoW Explanation
Sir i am getting global is not defined
And codemirror.css is missing what i need to do to solve this error
please try to import css file in index.css with @ symbol, let me know if that resolve the issue or not
@@codeforinterview Its not resolving the error. still getting modules not found.
@@adityarastogi6092 did you solve the issue?
Did u solve the issue?
wow awesome project bro
thankyou, means alot ❤
Bro showing module not found for code mirror
Error aa raha hai jab codemirror2 ko import ker rahe hai aur uske function ko
--force krne per bhi kuch nahi hua
Eroor he dikha raha hai
Koi aur solution jisse compile ho jaye without error ke
write in your terminal..... ... npm i codemirror@5
Bhai waiting for new videos ❤❤
new videos coming soon, thanks for your comment 🙌
Sir by making projects can we gain knowledge about front end development without deep knowledge in js and react ?
making projects is the best way to gain knowledge of a topic, this is my personal opinion
Awesome Bro 7
thankyou ❤
"I can't find any drive link in the description for the logo."
Thank you sir
So nice of you
After importing codemirror entire webpage goes blank how to fix please help
Any update for nextjs with react-mirror 2
Is it a good project for resume ?
Yea, you can add this in resume
I am getting error onChange is not a function plz help
Is this project working perfectly?
What is the issue you are facing?
How did you host it on GitHub??
Will there be a backend for this project like how to save code in backend
Backend is not there in this project
sir please make a complete Mern stack project like an e-commerce with admin panel using redux toolkit.. i am finding many videos on youtube but nobody teach like you so please its a humble request to you
th-cam.com/video/2zoq8vvwX4M/w-d-xo.html
bro please make a video on MERN user login and verifying user details , basically a notes or todo list mern app with login signup, there's a lot of confusion with that, don't know how to show users his only notes and keeping him login by storing his data in cookies
Amazing
Thanks❤
Can we mention this project in resume for service based company like TCS, Infosys, Wipro, Deloitte, etc...?
Yes, you can
@@codeforinterview Ok Bhaiya
bhaiya aapse paytm interview me dsa pucha gya tha ya sirf devlopment hi puchha gaya tha
DSA bhi poocha tha bro
Sir I'm getting error React Hook has a missing dependency srcCode. Either include it or remove the dependency array.
Pls help sir I'm stuck 🙏🙏
is the problem solved now?
Bhaiya Local Storage ka use kaise hoga isme? t aaki refresh karne par bhi na jaaye hamara written code
can anyone provide me the link of the logo 23:00
is there no database management in this sir?
This project is strictly a frontend project, I have not used any database here
Code mirror 5 is not working
after installation of react-codemirror2 and code mirror I am getting this issue "Module not found: Error: Package path ./theme/material.css is not exported from package" please help 🙏🙏
try to solve react-codemirror2 dependancy using -force
import the css file in the index.css file with @import keyword
I am facing same issue
How did u resolve it?
Its coming for javascript/javascript, css/css, xml etc😢
@@codeforinterview Tried but not worked Module build failed error
how did you solved ? I didn't solve it...... its been 3 days I've been trying to do it.. Please help me if anyone of you solved that error
Which version of vs code u used bro
use any, it doesnt matter
I have tried everything but my codemirror dependency is not working. Please help
have you completed the project?
Is me local stroge use kaise hoga
I'm getting error in installing npm , it shows a complete log of this run can be found in
What is the first line of the error?
@@codeforinterview after installation the npm I @icons --force , still I can't use the icons and shows err
But in my dependencies I can see mui/icon-materials
@@shubhamkumarmandal2132 Do you have any error?
Google drive link is missing?
i am getting a line after line number how to remove it?
please debug, I can't say without looking in the code
Nice
Thanks❤
Bhaiya please make a URL shortner project in Hindi
can you make a video about online codesandbox clone?
added in todo, thanks for the suggestion
no link for google drive
Bhai while importing the css javascript XML from code mirror i am getting an error as i had installed codemirror earlier
What is the error?
@@codeforinterview Missing "./lib/codemirror.css" specifier in "codemirror" package.i am getting this error .
@@AvikNayak_ You solve this error? plz guide me
@@sheezanawaz476 i couldn't.
got module not found error for codemirror.css.....
Same....has it resolved?
17:46
can you make a project with html and css with javascript in backend thx
Yes, I am planning to start a HTML, CSS and JavaScript project series soon
1:05:00
😍
❤🙌
👍👍
🙌❤
please help i am facing issues with codemirror dependencies 🙏🏻
Yeahhhhhh!! Mee too.
@codeforinterview pls help
What is the issue?
@@codeforinterview thanks for replying but problem solve hogaya
@@ajaynishad9329how?? Plzz tell
@@ajaynishad9329I am getting file not found codemirror/lib/codemirror.css does file exist?
op
thanks :)
i am getting each section two times why is that?
maybe your useEffect is running twice, check the dependency array of useEffect
1:09:22 .... kuch vhi nahi likh ra hai editor pe
check the developer tools console for the errors
@@codeforinterview dekha bhaiya...kuch vhi nhi hai
@@guddudurga make sure to pass value prop in the InputBase, otherwise it will change the state but you will not be able to see anything on the screen
@Guddu Durga I am also having same problem.Did u find any solution?
@@rajkir2852 I am also having same problem.Did u find any solution?
Bhai merko iski report chahiye documentation 😢😢 please bhai khaa pe milegi
I don't have the documentation of this project
Cant use codemirror😢😢😢😢
What's the issue?
@@codeforinterview ERROR in ./src/components/editor.jsx 10:0-33
Module not found: Error: Package path ./mode/xml/xml is not exported from package C:\VsCodeProjects\React\code-pen
ode_modules\codemirror (see exports field in C:\VsCodeProjects\React\code-pen
ode_modules\codemirror\package.json)
webpack compiled with 3 errors
@@codeforinterview ERROR in ./src/components/editor.jsx 10:0-33
Module not found: Error: Package path ./mode/xml/xml is not exported from package C:\VsCodeProjects\React\code-pen
ode_modules\codemirror (see exports field in C:\VsCodeProjects\React\code-pen
ode_modules\codemirror\package.json)
webpack compiled with 3 errors
@@codeforinterview ERROR in ./src/components/editor.jsx 11:0-47
Module not found: Error: Package path ./mode/javascript/javascript is not exported from package C:\VsCodeProjects\React\code-pen
ode_modules\codemirror (see exports field in C:\VsCodeProjects\React\code-pen
ode_modules\codemirror\package.json)
webpack compiled with 4 errors
27:31
Kisika deploy hua kya?
watch this video, procedure is same
th-cam.com/video/dMpVz_IIfpU/w-d-xo.html
need twitter clone using mern
Will do this after Instagram clone
@@codeforinterview Instagram clone using mern Or simple react?
same bro very much needed
mern projects bhai pls :(
I am working on it.
Those who are facing problem with codemirror, use -> npm i react-codemirror2 --force
Sir I installed git hub repository but it's not working and not giving output below
After installing codemirror2 and importing files in Editor component I'm facing moudule not found error for xml , css, and javascript... How to solve?? please reply..
type in terminal -> npm i codemirror@5 --legacy-peer-deps
code mirror 2 install nahi ho raha hai
try --force instead of --legacy-peer-deps
@@codeforinterview Yes.. working fine now.
After installing codemirror2 and importing files in Editor component I'm facing moudule not found error for xml , css, and javascript... How to solve?? please reply.
Same problem
I gave up and making other projects, may be i will find the solution for that error soon@@neppalibhavana6399
After installing codemirror2 and importing files in Editor component I'm facing moudule not found error for xml , css, and javascript... How to solve?? please reply.
write in your terminal..... ... npm i codemirror@5
@@khushidubeypoetry not working even after installing the version 5 module...what to do????