CloudinaryDemo/cloudybadge

cloudybadge

An Interactive Attendee Badge Generator

Operational Process

Phase 1

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)
5. RA uploads a photo to their EDIT page and interacting with image transformation(s)
6. RA submits the modified EDIT page which then generates a completed badge (VIEW page)
7. 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

• QR Code (graphic generated from first name, last name, event name) Example - https://davidwalsh.name/create-qr-code (NodeJS library)

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

• Each event is assigned a separate table (named as the event shortcode)
• Columns: firstname, lastname, title, company, editkey, viewkey, PhotoID, Transfo, VoteID

notes

• 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

Implementation Stack

Frontend: TBD (Vue / Nuxt / Gridsome)

Backend: FaunaDB, Cloudinary (Serverless)

Deployment: Zeit Now (Serverless)

Other: QR Code Generator (Lib or API)