Santa's Workshop

• 

  Home

• 

  Compete to be the best Santa in Santa Co. Ltd!

• 

  Spread joy by creating favour cards for others to redeem!

Inspiration

What better way to celebrate Christmas than to participate in the spirit of gifting! Well, since Santa is having issues targeting the doomscrolling youth, why not let them celebrate online through doing short favours for each other? Sprinkle in some 'game' elements with the leaderboard, and we've just enabled the constantly online to have some wholesome interactions with one another, all in the name of Santa! {Santa Co. Ltd. holds no liability for the favours that are placed on the website.} (the core gifting cards mechanic was given to us by ChatGPT, but after implementing some features we felt that this would be a better idea to also fit the theme.)

What it does

Users sign in using their Google accounts to access two main pages, the Wishcards page and the Top-Santas page. The Wishcards page allows for the user to interact with cards put up by other users like them, and contact the author of a specific card to claim it for the favour written on the card. The user can also create their own favour card for others to claim, adding to their tally of gifts given.

The Top-Santas page is a leaderboard page, allowing the users, mainly youths, to participate in competitive gift-giving for the title of Santa's Best Substitute! It tracks the number of gifts given by users in real time, allowing for an interactive leaderboard.

How we built it

In development of the website, we used Firebase and React/Next.js for the backend scripts, and using TailwindCSS and React.js for the front-end user interface elements. We utilised Figma to do user interface sketches, and settle on a theme for the website.

The website is hosted on Vercel, through Github.

Challenges we ran into

The main challenge was the debugging of the backend for the website. None of us had any experience in web development, and we had to learn along the way using resources given during the workshop.

Error codes given by React/Firebase API were quite vague and sometimes made no sense at all, and Firebase API documentation did not have many examples for some of the main functions we were using (quite painful). Luckily, the workshop slides and Notion were comprehensive enough to give us a good understanding of React and the FirebaseAPI.

Using TailwindCSS to do styling of the front-end was quite confusing at the start; some classes were missing and had to be input on our own for testing, while other CSS functions were renamed (for example align-items: center became items-center and there was a whole different function named the align-... class). Learning how to organise everything into <div> to fit together was quite satisfying though.

Accomplishments that we're proud of

Getting out a MVP that not only looks alright, but functions satisfactorily given the fact that none of us in the group understood web development at all at the start of the workshop, and that majority of the members were inactive during crucial development phases. We managed to successfully learn how to integrate Firebase API, use JSX, and understand how Typescript roughly works, as well as the basics of input handling in websites, allowing us to create real-time elements, user authentication, and connect to databases. (Thanks Rayner!)

We are also quite proud of the fact that minimal AI assistance was used scripting portions of development, only being used to deal with errors that made absolutely no sense or had some obscure solution that we would not know as beginners.

What we learned

How to use Firebase , React , and Tailwind to create a full-stack web application, fetching and integrating the Firebase API into our website, input handling and real-time updates.

We also learned how to use Git from the terminal, allowing us to swiftly update our progress on several parts of the project.

What's next for Santa's Workshop

If given more time to become more accustomed to the tools at hand, we would like to implement:

1. A Tracker for the total number of cards claimed
2. Create a menu for people to see the cards they have claimed and their own cards claimed by others, to better link the two people together and allow for greater quality of communication.
3. More types of card covers!
4. A method for deleting your own cards as needed using user authentication, and preventing yourself from claiming your own cards

Built With

• firebase
• next.js
• node.js
• react-native
• tailwind