"Be a Santa" is a unique virtual gift exchange platform that brings the joy of giving to users around the world. This innovative platform allows users to play the role of Santa by sending virtual gifts to anyone, regardless of geographical boundaries. Users can embrace the spirit of generosity and surprise strangers with thoughtful and heartwarming virtual gifts.
The project is deployed and accessible here.
Table of contents generated with markdown-toc
In our pursuit of enhancing the user experience, we've integrated visually captivating animations, festive Christmas-themed colors, and carefully chosen fonts that ensure readability and aesthetic cohesion.
The project's responsiveness and accessibility across different screen sizes are made possible by the contribution of NAME, allowing users to enjoy a seamless experience regardless of the device they're using.
During the hackathon, our workflow was streamlined using Github Projects, where we created and tracked issues collaboratively. This approach facilitated efficient teamwork as we collectively addressed challenges or, at times, independently tackled specific tasks.
It's worth noting that our project is exclusively front-end, eliminating the need for any backend technology. This decision not only simplifies the technical stack but also ensures a lightweight and fast user experience without compromising on functionality.
In surpassing hackathon requirements, our project distinguishes itself by strategically incorporating extensive JavaScript. This elevates essential functionalities, adding dynamism and interactivity. Our intentional choice reflects a commitment to delivering an experience that exceeds expectations. The inclusion of intricate JavaScript not only enhances overall appeal but also showcases our team's dedication to innovation in this hackathon.
During our initial meeting, we outlined the direction for our "Virtual Gift Exchange Platform" project. A crucial requirement was that the project had to be entirely frontend, ruling out the possibility of creating databases for automated gift exchanges among users. In response to this challenge, Andy proposed a portal where users could input a person's wish and discover comparable or more budget-friendly alternatives. For example, if a user was searching for a gaming console alternative, the portal would display images, information, and links to purchase equivalent handheld consoles. Despite this suggestion, we ultimately chose to pursue Alex's idea, crafting a platform that allows users to virtually send a gift from three different price ranges for recipients anywhere in the world. Users select the destination continent, and in return, after filling out a short form, they receive a gift themselves.
Our aim was to develop a virtual gift exchange platform using only frontend technologies. Initially, the constraint of relying solely on frontend posed a challenge, but as a team, we quickly brainstormed and generated several ideas.
The essence of "Be a Santa" is to promote the joy and spirit of Christmas through the simple act of giving and receiving. It emphasizes the sentiment behind the gesture rather than the physical presents themselves.
This gift exchange platform is designed for users who wish to share joy and Christmas spirit during the darker winter months. Receiving a small gift from a stranger has the potential to bring happiness to anyone.
By opting for virtual rather than physical gift exchanges, we bring the focus back to the true meaning of Christmas—a celebration of joy and spreading happiness, rather than a holiday centered solely around acquiring more presents. We believe that everyone can benefit from a little extra joy!
The HTML was tested with the W3C HTML Validator.
The CSS was tested with the W3C CSS Validator.
We utilized Lighthouse to evaluate the performance of the pages.
The drop in performance is explained by the use large layoutshifts, images not being served in next-gen formats, large contentful paint elements, image sizes, offscreen images, disabled text compression, render-blocking resources, preconnection to required origins, unused CSS and JavaScript from Bootstrap import.
- Bootstrap
- jQuery
- Font Awesome, for the "Go back button".
- EmailJS, as service to send emails to users.
- Snow fall Credit, for the animated snowfall.
- jQuery Documentation, for overall use of jQuery throughout the page.
- Lottiefiles, for santa delivery, santa flying and elves animations.