While I am a super huge van of the Vue framework for web development, I don't have a lot of React code in my github / portfolio. When I was asked to freshen up on React for work, I decided I wanted an excuse to learn how the R3F (react-three-fiber) library works. It's wrapper around ThreeJS that turns your scene graph into XML (JSX) based components, so you can reactively build 3D scenes in the same way you would build your normal components.
It's a neat concept, though I can't help but think it's a bit of a step backwards to the old VRML days.
But that said, it did work well and was easy enough to grok.
I decided I wanted to build a simple tangrams builder / editor fully in React and use R3F to render the pieces in 3d.
I wanted to capture a lot of the skills I've been using in Vue, in a react project to see how they'd translate.
Ultimately I made a drag-and-drop editor, with both light themes and dark themes and the ability to save your project to local storage - or to export it as JSON.
At work I had done a lot of work with dynamically generated SVGs in VUE, so I wanted to work with SVGs here as well. Not only are all the shapes SVGs, but you can also use the editor to download a valid SVG or PNG of your project.
One cool feature I added was the ability to share the project via URL, where the entire project is compressed and encoded into a URL. This way, projects can be shared, but the entire application is stateless and doesn't use a backend of any kind. This was perfect for hosting on GitHub Pages.
Of course, if the project is too complex the URL may end up too long to fully contain the project, but for simple things it works really well.
I added some pie-menus both to add pieces, or rotate / re-color them.
You can play with the live demo here:
https://orokro.github.io/ReactTangrams/
You can find the source code here:
https://github.com/orokro/ReactTangrams
Learn more here:
