/QR-Portfolio

Virtual business portfolio via QR codes

Primary LanguageJavaScript

QR Portfolio

Run

mongod
npm start

Overview

Not everyone carries around their stack of business cards or other identification cards with them at all times. They also prefer not to bring a giant card holder to recieve other people's cards at events or coffee chats. Moreover, it's also pricy to order personalized cards and card holders. This is where an online QR Portfolio comes in handy.

QR Portfolio allows you to create an online portfolio that stores QR codes. You can create a custom QR code with your desired information in it, whether it be regarding your business, education, medical background, etc. You can also collect other QR codes you see online by including a link to the QR code image. In all, this free service is incredibly handy for professionals, students, artists, and practically everyone else!

Data Model

The application will store Users and Cards

  • Users can have multiple Cards (via references)

An Example User:

{
    // required fields\
    username: String, // account name, unique
    password: String, // account password
    // optional fields
    cards: [Cards], // user's cards
}

An Example Card:

{
    // required fields
    cardname: String, // name of card, unique
    qrcode: String, // api of qr code
    // optional fields
    text: String, // qr code text
}

Wireframes

/ - page for signin or signup login

/portfolio - page for viewing, searching, and deleting QR cards home

/create - page for creating QR cards customer-profile/slug

/upload - page for uploading QR cards customer-new

Site Map

Site map

User Stories

  1. as non-registered user, I can sign up for an account
  2. as a user, I can log in to the site
  3. as a user, I can log out of the site
  4. as a user, I can create new QR cards
  5. as a user, I can upload QR cards from fileurls
  6. as a user, I can expand the view of a QR card
  7. as a user, I can delete QR cards
  8. as a user, I can search QR cards

Annotations / References Used

  1. Bootstrap 4
  2. QR Code API
  3. Gulp
  4. Concatenation and Minification of CSS and JS