Tierbuilder is a slimmed down clone of Tiermaker.com built in React. This application utilizes RBD for the core drag & drop functionality, and Redux plus React Router for persistent state and routing in lieu of a backend. Despite there being no backend, users can still share their creations through a shareable url through conversion of state to/from base64. The tradeoff here is a lengthy url for no server-side dependency, but still suitable for a custom API to be added at any time. Users can also upload their own images for tierbuilding, customize each row of items, and save their finished product as an image through custom canvas-based rendering.
You can find a million guides on how to make a Netflix, Twitter, or some other generic clone. I wanted to do something different that I couldn't find a step-by-step guide for. I ended up setting my sights on Tiermaker after looking at this Tiermaker clone that had become defunct from outdated dependencies, using React, TypeScript, and Vitest. I also decluttered and added small improvements to the existing Tiermaker UI in this version.
- Clone the project
git clone https://github.com/jthefox/tierbuilder.git- Install dependencies
npm install- Start the development server
vite- For testing, run
npm run testor
vitest- For code coverage, run
npm run coverage