HEKD Emotion Game Planning

Harry, Emma, Kate, Dom
Repo link

What Should The App Do

The plan was to use a face recognition api which returns information about what emotion it thinks the face shows.

"scores": {
      "anger": 9.29041E-06,
      "contempt": 0.000118981574,
      "disgust": 3.15619363E-05,
      "fear": 0.000589638,
      "happiness": 0.06630674,
      "neutral": 0.00555004273,
      "sadness": 7.44669524E-06,
      "surprise": 0.9273863
    }

The app would prompt the user with one of those emotions.
They would then upload a picture of themselves making a face showing that emotion.
And would get a score based on how close the api thought they were to expressing that emotion.

Obviously this was way too ambitious.

To Do

✅ Repo setup
✅ Node/Express/Handlebars installation
✅ Travis/Codecov
✅ DB schema/diagram

  • DB build
  • Hackmd
  • Basic user journey diagram
  • Basic Wireframe
  • File Structure
  • MVP feature overview
  • Get API key for MS Cognitive services (keys on Gitter)
  • Practice API requests
  • MVP feature completion (see checklist below)
  • Start on stretch goals
  • Finish stretch goals 🙀

Thursday To Do

  • Login & signup pages (hbs)
  • Sessions (see authentication)
  • Authentication(!!) - bcrypt, passport (stretch?), etc
  • Login and signup functionality
  • Upload page (hbs)
  • Upload functionality
  • API stuff??
  • "Do you want to play a game" NO hover to YES

NPM Modules

  • Tape, tap-spec, supertest
  • NYC
  • Nodemon
  • Express
  • Express-sessions
  • Express-handlebars
  • Bcryptjs
  • PG
  • Passport
  • Env2
  • Express FileUpload??

MVP features

  • I can register
  • I can log in and see that i'm logged in
  • I can logout
  • I can upload a photo
  • I can view the last 10 uploads

Stretch

  • I get a score back for how emotional my photo is (angry, sad etc.)
  • I can view the leaderboard whether logged in or not
  • Separate leaderboards for each emotion
  • EXTRA-STRETCH: I can delete my photos/account
  • EXTRA-STRETCH: Some sort of admin feature
  • Play express yourself by madonna hehe

Basic user journey

User Journey

Basic user views/wireframe

Mobile wireframe

Database Schema

V1.0
DB Schema

How to set up database:

  1. Clone repo
  2. Run psql or pgcli on your command line
  3. CREATE DATABASE emotions;
  4. CREATE USER emoadmin WITH SUPERUSER PASSWORD 'adminemo';
  5. ALTER DATABASE emotions OWNER TO emoadmin;
  6. The way it's set up doesn't need a config.env
  7. Create and populate the database tables: npm run db-build

Design

Colour scheme

  • Colours selected using mycolor.space. See link and scroll to "pin palette" to see our inspo
  • Colour hex values converted to HSL and stored as CSS variables

Fonts

  • Emma is sorting out the fonts, I think :P

Etc

Things to figure out

  • Everything
  • How to upload images to the server
  • How to use sessions
  • How to limit file size upload & file type (convert to jpg??)
Select a repo