Decorate the Christmas Tree!

A fun game where you can decorate a Christmas tree together by dragging and dropping decorations. Share your link to show others your decorations and let them add to them!

Comment

Our Team - Team Jack Frost

Mentor - Robert Curran Team - Dave Huckfield BC14, Kunle Oladiji BC14, Taimoor Balal BC15.

Inspiration

Our brief was to create a Christmas-themed app that would bring people together. We explored a number of ideas including a Secret Santa organiser and a booking system for charity events before choosing our idea of a collaborative app to decorate a tree and share the results.

What it does

Users can decorate the tree by dragging and dropping decorations, and share the results with others via a custom link, who can then modify it further. Our eventual aim was to make it into a quiz game where users can learn Xmas facts from around the world and place one decoration for each correct answer.

How we built it

We used React for the front end, starting with simple image elements and using the React library Draggable to enable drag&drop functionality. We also installed some other libraries like useSound for the sound effects.

Tech Stack

Front-end - React. Source control - Git / Github Deployment - Netlify React libraries - Draggable, Drag & Drop, useSound.

Challenges we ran into

Implementing drag & drop was a lot trickier than we thought, with a couple of other libraries not working well for our purposes. We also had issues with moving elements causing other parts of the page to distort, and our sound effects not playing. There are some issues with storing the positions of elements, as this is relative to browser settings and not always consistent. We worked on making the item positions relative to the central tree image but this still needs some work.

Accomplishments that we're proud of

We're proud of achieving our working MVP within one day, including sound effects and potential for multi-user sharing.

What we learned

We all used technologies we hadn't used before, including drag&drop, incorporating sound, and storing/sharing information via JSON strings in the browser.

What's next for Decorate the Christmas Tree!

Our stretch goals include: Perfecting the positioning when sharing with others Implementing our quiz functionality to encourage learning & communication. Testing full compatibility with different devices Option to permanently save creations with user accounts More customisation options inc. more decorations, backgrounds, etc.

Built With

Share this project:

Updates