My XMAS Tree

Decorate your XMAS Tree

Comment

Inspiration

The hackathon started on the Christmas eve. I was pondering what I should build this weekend with the Holiday theme and then I got the idea! Why not make a web-app that enables users to decorate their own Xmas tree. And I started working on the idea.

What is it

Decorate your own Christmas tree with the decorative items given and share your decorated Xmas tree with others.

How I built it

I used ReactJS with HTML2CANVAS module to make the elements draggable and capture the screenshot. Flat Illustrations and SVGs are designed/edited in Adobe Illustrator.

Challenges I ran into

Capturing the screenshot and scaling it to the appropriate size was a challenging task for me. I haven't worked with Canvas before. But thanks to StackOverflow, I was able to correct the errors and made it working.

Accomplishments that I'm proud of

I loved the landing page design. Also, fixing the errors of html2canvas.

What I learned

I learned how to convert html webpage to canvas and save into png images. Also, how to make the elements draggable in reactJS.

What's next for My XMAS Tree

I'm planning to include more decorative items and enhance the user experience by making the web-app more optimize.

Built With

Share this project:

Updates