Coder Social home page Coder Social logo

gift-exchange's Introduction

πŸŽ… πŸŽ„ SECRET SANTA: A HOLIDAY HACKATHON πŸŽ„ πŸŽ…

Be a Santa

"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.

Mockup

The project is deployed and accessible here.

Table of Contents

Table of contents generated with markdown-toc

Criteria

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.

About Be a Santa

Intro

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.

The Team

The Goal

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!

Testing

The HTML was tested with the W3C HTML Validator.

HTML Results

The CSS was tested with the W3C CSS Validator.

CSS Results

We utilized Lighthouse to evaluate the performance of the pages.

Lighthouse results

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.

Technologies Used

Languages

Libraries

Frameworks

  • EmailJS, as service to send emails to users.

Credits

Code

Images

gift-exchange's People

Contributors

avtpepper avatar jeffdruid avatar muzhdan avatar ebychacko avatar kailangen96 avatar cal-rex avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.