Giter VIP home page Giter VIP logo

thbc-cloudybadge's Introduction

cloudybadge

An Interactive Attendee Badge Generator

Operational Process

Phase 1A (DEFER)

  1. Cloudinary Admin provisions an event (eg dev conference) on behalf of an organizer
  2. Cloudinary Admin populates a database with personal info of registered attendees (RA)
  3. Batch process generating EDIT and VIEW pages (obfuscated URLs) for each RA in database
  4. Each RA receives their personal EDIT and VIEW pages URLs via email (no formal auth)

Phase 1B

  1. RA uploads a photo to their EDIT page and interacting with image transformation(s)
  2. RA submits the modified EDIT page which then generates a completed badge (VIEW page)
  3. RA can share their VIEW page via the social media links included on their EDIT page
notes
  • RA does not have control over the placement and resize of their photo overlay on badge
  • RA can submit photos/transformations more than once, hence reset their VIEW page votes
  • Example URL for EDIT and VIEW pages: cloudybadge.now.sh/RANDOMKEY (different keys)

Phase 2

  1. VIEW pages are arranged in GALLERY page for voting by RAs (all or submitters only?)
  2. RA votes on their one favorite badge (except their own, which would show grayed out)
  3. RA votes are tallied on a LEADERBOARD page where highest voted RAs receive prizes
notes
  • Gallery page shows a randomized order of VIEW pages to avoid bias due to fixed order
  • Example URL for GALLERY page: cloudybadge.now.sh/RANDOMKEY (e.g. for HackBeforeXmas)

Phase 3 (DEFER)

  1. RA can post notes to their EDIT page
  2. RA can send messages to any other RA via their VIEW page

Personal Details on Badge

  • First Name
  • Last Name
  • Title
  • Company

Derived (Personal) Details on Badge

Badge Elements (non-personal, based on event)

  • Badge image underlay (for event)
  • Logo overlay (for event)
  • Social media icons/links (Twitter, Facebook, LinkedIn, etc.)
  • Optional attendee identifiers for social media links
  • Useful links to event website, Cloudinary website, etc.

Database Schema

  • Collection name is 'badges' (in database 'cloudybadge' under root database 'cloudy')
  • Columns: eventCode, firstName, lastName, title, company, editKey, viewKey, photoID, tranStr, voteID

notes

  • editkey is the reference value for the record in the collection
  • PhotoID is the ID of the asset in Cloudinary for the RA's uploaded photo
  • Transfo encodes the photo transforms submitted by RA (null otherwise)
  • VoteID is the editkey of the VIEW page voted by RA (null otherwise)

Flow Diagram

CloudyBadge Flow

Implementation Stack

Frontend: TBD (Vue / Nuxt / Gridsome)

Backend: FaunaDB, Cloudinary (Serverless)

Deployment: Zeit Now (Serverless)

Other: QR Code Generator (Lib or API)

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

thbc-cloudybadge's People

Contributors

mayashavin avatar tpiros avatar traderd65 avatar

Watchers

 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.