React.js tutorial - Sliding puzzle game with custom image

In this video tutorial I show you how to build a 16 tile sliding puzzle game where you can set your own image as the puzzle background.

[challengerssb]

Very cool to see you code along. It helps a person that's new to coding like myself to get in the mindset of how things are done and how to tackle problems step by step. Subscribed; hope to see more of your content🙌

[ecan]

I've recently discovered your channel, omg what a gem! Thanks a lot, please keep up the great content!

[AudreyWrightAL]

Hi Daniel! Thank you for such a helpful, straight forward tutorial. I adapted your code to work with a board of any square number of tiles and also fixed the background-position to where the pieces of image are sized correctly. This was fun to follow along with and I hope to see more tutorials from you!

[davidobodo]

Thanks man, just exactly what i was looking for

[code_school]

how is the isSolvabe working ??? what is the product used for and how can we reverse the

[ronwiener]

Great video, I enjoyed making the puzzle. I wondered if you could insert separate photos or images into the puzzle? Maybe alphabet letters to spell words?

[talhaaqeel]

Hi there! just review your code but it's giving me an error of React-DOM not supported in React 18 so I downgraded it by using the command:


but it started giving error of:

npm ERR! arg Argument starts with non-ascii dash, this is probably invalid: –save
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "–save" of package "–save": Tags may not have any characters that encodeURIComponent encodes.

so I even changed the lines in package.json file under the dependencies to following:


But it's still not working. Kindly guide me about it.

[nirosham]

Pls help me.i am getting as "can't resolve the react motion" as error..pls help to correct it bro

[saideepesh]

This is cheating you didn't use SOF 😂