Giter Site home page Giter Site logo

tamoshaytisv / secret_santa_reimagined Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 9.49 MB

Hold Secret Santa event easily within your organization. Nice look and entertaining interface will make the process fun

License: MIT License

JavaScript 9.73% HTML 0.82% SCSS 26.29% TypeScript 63.17%
secret santa react typescript firebase wishlist team

secret_santa_reimagined's Introduction

Secret santa (typescript + React + firebase)

Install and run

yarn install
yarn start

Design inspired by

Firebase

In this project i used the Firebase Auth and Firestore as a backend part.

Setup the new project in the firebase console and copy a config which firebase suggests.

Create .env file in the project root and assign appropriate variables values

FIREBASE_PROJECT_ID=
FIREBASE_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_API_KEY=

GOOGLE_DOMAIN=

You also migt want to set security rules for the firestore so please reffer to the official docs https://firebase.google.com/docs/firestore/security/rules-conditions

I used the following config to restrict access only to users from my organization

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
      function isValidEmail() {
        return (request.auth.token.email.matches('.*@mydomain[.]com$') && 
        request.auth.token.email_verified);
      }
    match /{document=**} {
      allow read, write: if isValidEmail();
    }
  }
}

Authentication

I used google authentication as a way for users to authorize. You can use any firebase backend listed in https://console.firebase.google.com/project/%your-project%/authentication/providers and supported by firebase

Pass the provider class of your choice to the props of FirebaseAuthProvider component in index.tsx file

<FirebaseAuthProvider
    provider={TwitterAuthProvider}
    options={{...}}
    scope={[...]}
>
    <App/>
</FirebaseAuthProvider>

Event

Each year you might have different users and they should definitelly choose different presentees on each new event.

In order to achieve this, some manual work should be done in firebase console:

  • Create new collection named event in Firestore
  • Add the new document with ID equalsto the next year, e.g. 2021
  • Add the following fields in the document with values
active (boolean) true
started (boolean) false

Each year you should create new event and make it active as well as set inactive previous event. Having multiple events active will result in error.

started param allows you to restrict users from selecting presentees. Users will only be able to resister and wait for the event to start. This can be helpful to ensure you have some minimal number of participants before they start selection process.

You can start the event by manually changing started value from false to true. Users' iterface will react immediatelly with no need to refresh the page.

Admin

To make any user to see event stats, just add isAdmin (boolean) true to the /event/{year}/users/{userId} profile data

useSound

I use this great lib fork https://github.com/joshwcomeau/use-sound to play sounds. I needed to make small adjustments so that's why i keep its copy until my PRs will be accepted.

Screenshots

login become santa cracker presentee presentee wishlist my wishlist admin

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.