|
A web app created in React.js that let's the user add colors to a Dala Horse to make a unique design. A Dala Horse is a traditional swedish statue of a horse carved in wood. Read more about it here: https://en.wikipedia.org/wiki/Dalecarlian_horse
This app was created to practice my React.js + Typescript skills and to showcase an idea of a potential ecommerce app for ordering your own custom designed Dala Horses. |
Here is a live demo of the app: https://osandell.github.io/dala-horse-designer/
In the editor the user is able to mix custom colors and to color the horse by either clicking or tapping on the canvas. One can zoom in and out by using the scroll wheel or by pinching. It's also possible to extract a color from the canvas with the colorize tool. The user can use the undo + redo buttons to go back and forth in history. Lastly it's possible to add the finished design to a shopping cart, or to save a modified design.
Here the user can see all the saved designs, increase or decrease quantity, and choose among 3 different sizes. The total price is then calculated and shown at the bootom. There is also a checkout button that is currently not enabled, but could potentially be integrated in a future version.
The app is designed responsively to look good on small mobile phones as well as big desktop screens.
- React.js - A JavaScript library for building user interfaces.
- Konva.js - HTML5 2d canvas js library for desktop and mobile applications.
- Typescript - An open-source language which builds on JavaScript by adding static type definitions.
MIT © Olof Sandell