3D Room materials displayer with React

3D Room materials displayer

Once again hellow there code enthusiasts, this one was a hard one, a lot of stoppers and not so much time anyway let’s dive in

liveDemo.mp4

What is this ?

A kitchen furniture customizer-visualizer, here you can pick some items like the floor, worktop and furniture and customize the material to see which one looks better.

Live website: https://3d-room-material-showcase.vercel.app/

What stack did you use ?

That’s a very good question dear reader, usually I just wanna go with me most simple and lightweight stack possible when developing.

For code quality

  • Standard.js as lintern made me appreciate a lot more eslint , AirBnB rules and prettier, I know it’s a solution to avoid useless discussions but it makes development a lot slower.
  • SonarQube another static code analysis that finds all kind of code smells and gives the neccesary feedback to have a clean code
  • Jest this is the go to for unitary and integration testing , very handy with react-testing-library, or at least that’s what I would say if I could make it work, the SWC rust based compiler didn’t wanted to transform the node_modules/firebase to common.js for my firebase mocks to work, so now i only have a smoke test of a button lul
  • TypeScript all the power of strong typing in JavaScript , no more words needed
  • LightHouse Even with smalls project it can help you find accesibility problems with the colors you use, great tool.

Main stack

  • Next .js with his wonderfull image optimization and the amazing server side rendering
  • Tailwind This is by far the best tool I used for styling, you have an utility class for any css property , inline css so you don’t have to worry about extra css files, speeds up the workflow and you have consistent units to create a cohesive design with tailored style for components.
  • TypeScript Since I use Typescript I reduced my chrome devtools debugging by a lot, it simply makes life easier.
  • Firebase with fireStore, pretty great solution for a noBackend app but no so much for testing with an old Next.js version mixed all together
  • Framer Motion for magic and animation SIUUUUU

Are you happy with the result ?

Actually… yes, it was a pretty clever and tricky challenge that remembers me the importance of planning before coding. I did some drawing about how to structure the state, how to fix the responsiveness of the displayer and how to map the selectors in any screen overall I am confident with my code and how I structured components, state, usability, accesibility, best practices and seo (Props to lighthouse for helping me with most of that metrics haha).

I mean I got rid of all the sonarQube codesmells and I think all it’s left is a good performant code with emphasys in redability.

Made with patience by Emiliano Polanco

GitHub

View Github