How To Build A Photo Editor With React And CSS Filters

[@xenon-x54]

No matter what I will support this guy, he has taught me react, express, mongo and most of the programming skills Love from India ❤ WDS

[@yepp794]

*Next Project maybe: How to build Windows 10 With React & firebase*

[@실험맨]

WEB OS ?

[@sommie4935]

the design part wouldn't be *that* hard, emulating a kernel and other low level stuff would be hard 😂

[@sommie4935]

@DVIRDTG yeah it was a joke. Unless you add low level APIs to v8 engine and manage to Integrate it with a Linux kernel or something! :P

[@sreeragpavithran]

LOL😂

[@sunn-e]

It's actually CSS and HTML.

[@chizuru1999]

"cancels subscription" A few seconds later sees the clone... 🤣🤣🤣🤣

[@SmfCoder]

Great tutorial Kyle, this was my official first project in react and it went smoothly thanks to you. I also added some other functionality to make sure I really understood.

[@WebDevSimplified]

That is awesome! Nice job.

[@SmfCoder]

@@WebDevSimplified Thanks

[@kaviisuri9997]

I am tightening my seat belts, he's gonna clone photoshop in 30 mins😂 Hackerman😎

[@fafamnzm3126]

One of my favorite youtubers! You have such an impact on me bruh 😊🤗

[@WebDevSimplified]

Thank you!

[@Awkwardandweird]

Web Dev Simplified You need to make a new extended tutorial on this to upload a file where the image goes and then you have the option to save it. I suck at js especially react.js sooo

[@reveluv8851]

Did you mean:bro

[@JustinK0]

@@Awkwardandweird i was wondering the same thing, its silly to have to manually move the image to the folder and change the css to match the name of the photo.. (or change the photo to match the name in the css)

[@Awkwardandweird]

Justin Caleb yep very true

[@SmartWizzard]

I wanted to build this - long back but skipped it now ur video inspired me to build some more features to it.

[@MrAlvaro1900]

*Thank you very much, your videos always help me, they are the best.*

[@manukyanq]

This guy is hero, without mask, thank you bro 😎

[@tonyzhao7915]

0:02 lol careful Kyle, you just lost your chance of getting sponsored by Adobe.😂

[@Awkwardandweird]

All my ads are when I load up this video are adobe ads 😂

[@azatecas]

bro your projects are 👌👌👌👌

[@a29stech33]

You are great instructor.

[@WebDevSimplified]

Thank you!

[@miho9453]

Amazing,that your tutorials are! But I have to say that your voice is soooo addictive. I can listen to you talking all day!

[@Mohamed-Maghrebi]

the best web development teacher ever

[@muhammadzeeshan07]

Fantastic man fantastic, top class developer

[@Anotherskater123]

Thanks to you, I was able to overcome one the hurdles on my unrelated project that I was struggling with. Great tutorial : )

[@Gerry090]

That was a great video! I plan to learn how to be a web developer and I wanted to see what I have to expect in that industry. I, of course, couldn't understand everything but I loved how you explained step by step the creation of your photo editor. Thanks!

[@aliaydn6776]

you have helped me to solve a big problem :) Thank you. Also you can teach very well

[@emirsalihovic8510]

Your content is improving drastically Kyle !!!

[@desmonddose]

I learned a lot from this tutorial. Thanks, Kylie.

[@254_Cyrus]

Had me when he said, if you have a photoshop subscription, cancel it. 😂😂. Big fan WDS

[@JeroldRaja]

i have a doubt in the react , I'm creating a web application user can able to cutomize the mobile case however they and once they save that edited image has to store in the data base , if she places the order admin have to see the image and able to customize the mobile according to that.. I wanted to know how i can able to do it either npm packages or userdefined from top to bottom ???

[@vengeance9047]

This man is ultimate 🔥🔥🔥🔥

[@edelciojunior3917]

Bro. You are the man.

[@yarinvanzikri]

you're the man! love your content so much! thanks

[@digigoliath]

Awesome! TQVM for this useful mini project!!

[@midhatahir8104]

I was waiting for this video tutorial after seeing your code on github 🚀🙌

[@drone9336]

How to save the images after applying these filters?

[@just_A_doctor]

Google how to add download feature man don't be lazy 🦥🦥 to Google

[@aunshonhasan1146]

Awesome man... Loved it... Always follow your video ❤️

[@freekeys]

Your projects is just awesome 🙏❤️

[@Yash-fz7kw]

How to add Choose image and download edited image

[@saitejagatadi9711]

Amazing Amazing Video, Expecting a 4 hours project in your channel

[@chris94kennedy]

You put these out so frequently yet they all maintain high quality. Thanks.

[@josephwong2832]

Thanks kyle

[@neoX12000]

You made it look easy as it walking in a park

[@arnavthestar]

Please make a video build a illustrator clone.

[@johannac6149]

Thanks for the tutorial. Can I do this is next.js?

[@nitishkhanna9368]

Thanks for this video !! Hoping for a MERN Stack project tutorial.

[@drzzero6349]

We need one like this for javascript too kyle 😁

[@jamie_SF]

This is great, thanks. How would you save the CSS onto original image?

[@CodeWithYubraj]

Excited to try this. Thank you for this, Kyle. Please, more tuts like this.

[@yeicore]

Not what I expected but very interesting. I would make a Canva clone

[@prabhukadode723]

but after that we must be able to download that image

[@JustinK0]

print screen, snipping tool, right click -> copyimage..

[@negatif9163]

did you find how to download method?

[@prabhukadode723]

@@negatif9163 not yet . do you have any solution

[@wb-slg625]

this was just a click bait. really, Photoshop in 30 min! ha, ha but still, tutorial was good. not "Photoshop" but photo filter application,

[@arunramachandran7509]

True. The 'Photo filter' could have been the suitable caption. But as you have mentioned, the tutorial is really good.

[@WinterSnowism]

He is just joking around bruh

[@kartikpawar7320]

How dumb are you guys

[@wb-slg625]

@@kartikpawar7320 oh, i guess we are dumb and you are smart but have you heard of "the dunning kruger effect".

[@yasraprojects]

I love all your videos about React ♥️ it will be more complete if you also make a Redux tutorial. Thanks and good luck

[@michaelask9018]

This was great - thank you for this! Very hard to keep up with you typing along - but still learn lots. Would, however, like to see how to save the "modified" image - this being an editor ;) Keep up the great work

[@negatif9163]

did you find how to save method?

[@marinpilyser3677]

@@negatif9163 developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

[@ManOnHorizon]

You can do that by simply adding two packages: - html-to-image; - file-saver. I would also post the code but KZbin bans such comments. The methods are very basic for the packages though.

[@microbyte0019]

When might you want to use a cms like wordpress or webflow?

[@AdeTheCoder]

Can you do a tutorial about how to create a desmos clone?

[@dynogamergurl]

chrome reads the slider value as an undefined object so you have to add 0 as a default value for console log and the slider to work.

[@RyanJohnson]

So these are just CSS filters being manipulated, how would you actually set things up so you could save out an edited image?

[@princerajroy16]

But we can't download the edited photo can we? :(

[@WebDevSimplified]

Not currently, but you can easily modify the code to make that possible.

[@DSCuber-28-01-2019]

@@WebDevSimplified how can we modify like that? i couldn't find any code for that

[@ridl27]

ty.

[@avichai987789]

Hey Kyle, great content i really enjoyed it! i tried to add some functionality of inputting other photos and try to filter them but couldnt find a way to do it.. can you tell me how would you have done it?

[@kumarshashanktiwari]

Beautiful.

[@lalluramprasad985]

In Photoshop, you have this option to apply blur to certain parts of an image. Can you do that in react? Amazing tutorial BTW!!!

[@DSCuber-28-01-2019]

I did the same css but mu picture is too small

[@Plehlowla]

AYYY, I DID IT!!

[@nabiisakhanov3522]

Would you make another video extending functionality of this app with Canvas API?

[@shahrukhkhan-tw6nv]

Impressive. !! Make Amazon clone just front page. Will you make that?

[@boris7258]

THX!

[@AleksandarIvanov69]

Hey Kyle, any Vue content planned in the near future ? :)

[@vishakhviz3743]

Kyle for the rescue....Thank you dude....

[@prabhukadode723]

Hi bro, but can you add one download feature to it ? a user must be able to download a image after adding these filters

[@marinpilyser3677]

developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

[@dsa0decoded]

In handleSliderFunction using { target } is showing error that 'target' is undefined

[@ПанЧиЛо]

Nah, click bait :( Useful tutorial though

[@slcnaveen5458]

Can you show us how to create the zoom clone using firebase...

[@herbertk9266]

Cool thanks

[@dynogamergurl]

reactDOM.render in the index is deprecated, what can we use instead?

[@noahperrin9905]

really nice, as always 😒🥱😂😉

[@soumyanandan1567]

Can you please make a video of "how to make a video editor on javascript html and css"

[@Funnyplanet818]

Hi, how do i add this editor into my existing code files?

[@sqarcle]

Let's try creating after effect or premiere pro

[@scorpion32]

Is it possible to create a photo editor that has a layer mask option?

[@NorteXGame]

What more?! This dude got all of the software done in react lol

[@abukhalidrifat3994]

Can you make same video with vue

[@bunnybloods768]

Oh my God. Bro I think you Have done FANG Companies and feel bored.Started youtube. awesome🥰🇳🇪🇳🇪🇳🇪

[@kushagrajain2407]

I didn't destructure the event and then used return {...option, value: event.target.value}. Why is this giving me error?

[@kirarevcrow]

The clickbait is real around here, disappointed

[@gleidonn3735]

Its not a clickbait to some extend.

[@gametony947]

stop whining and appreciate what he did

[@georgeomara]

This is wonderful man! Thnx a lot. Would you mind doing a video on creating a simple video editor too!

[@MOHIT-PRASAD]

Thats really great project I would also like to build one with more functions like crop,zoom or adding filters. Can anyone help me how to add crop method in this project.

[@qasimjaved2667]

const selectOption=options[selectedOptionIndex] Hi everyone, Can someone please explajn me this line of code?Why did we use this with "useState" ?

[@saulgoodman8895]

nice videos man, have you ever thought make a video with redux and how we can combine it with react?

[@mirzazplayz_rblx]

You deserve a thumbsup man awesome

[@Lolo5]

who need to crack ps if you can make it yourself xD

[@IamMclov1n25]

this man said photoshop

[@nikunjkumar8320]

please make a real life project that is good to show on a freshers resume😊😊

[@gautampurohit9081]

How to reset all the filters on the click of only one button?

[@just_A_doctor]

Add a reset button man Lazy 🦥🦥 to Google it ???

[@rohandevaki4349]

how to make a canva with javascript?

[@harratreco]

Hi guys, does anyone have links to resources on how to create a web app, add plugin functionality and ability for devs to develop plugins for it? Like how wordpress has it's plugins OR shopify & it's plugin. Thanks

[@pranitabhagat5496]

does anybody know how to download CSS filter applied image?

[@sauravjain6135]

A new competitor in the Market, Adobe feel insecure

[@astricx6364]

how can you make it an exe file?

[@padamsubba1973]

Make product image magnifier with React for eCommerce website

[@dotamovie1033]

Hi sir, can you also make apps like easy worship?

[@clauseland9005]

how about an Illustrator clone with bezier curves with fill / strokes, combine/ split paths. That would be awsooooome :)

[@kasetophono]

Dude, why all this hate? Chills your balls, people

Photoshop is not just Brightness, Contrast, Saturation, Grayscale, Sepia, Hue, and Blur.

[@JustinK0]

0:37 wow good thing you told him, else he wouldnt know.

@@JustinK0 i mostly said this for people who kept commenting that this is a copy of photoshop, or a clone

[@negatif9163]

are there anybody who can make it save file? i tried but i didn't. i want to add "save button" or "download button". how? please help.

[@yaduveerakala5486]

Please increase volume 😁😁😁

[@achonwachris8431]

Amazing, 🔥🔥 I really need to master react could web simplify be my one-stop place ?