Giter Club home page Giter Club logo

ynmstudio / yes-no-maybe-app Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 210.7 MB

In collaboration with communication design and web development studio Yil & Mann, the Berlin Art Prize e.V. has developed an online-based tool for anonymized selection processes.

Home Page: https://www.yesnomaybe.app/

License: MIT License

JavaScript 0.33% TypeScript 22.45% HTML 10.40% SCSS 33.60% CSS 32.62% PLpgSQL 0.59%
artprize artapplication hasura-graphql angular firebase firebase-auth firebase-storage firebase-hosting hasura coconut

yes-no-maybe-app's Introduction

About the YesNoMaybe App

In collaboration with communication design and web development studio Yil & Mann, the Berlin Art Prize e.V. has developed an online-based tool for anonymized selection processes. Complex artist portfolios are submitted and anonymized via the software. For the jury process, a linked CMS allows the portfolios to be viewed, indexed, and classified via interactive evaluation functions. The application is kept simple and streamlined for all users. Overall, the YesNoMaybe app is intended to prevent discrimination in selection processes and focus attention on the content of the applications.

read more

Important Notice

The application is in alpha state While we tried to minimize the chance to introduce vulnerabilities (authentication/file-system), this application and its codebase haven't been audited by security specialists and it shouldn't be used to store, share or publish sensitive information.

Usage

Developers should be able to setup a new project by providing Firebase Config file and update the links to a Hasura instance (cloud/self-hosted). Please check the section Getting Started for more details regarding the configuration of Firebase and Hasura. The Section Deploy contains information on how to built the frontend.

Other authentication/storage/hosting providers may be added at a later stage.

Prerequisites

  1. install Angular CLI
  2. install Hasura CLI
  3. install Docker
  4. install Firebase CLI

Features

  • Built upon the Hasura GraphQL engine
  • Frontend built with Angular + Tailwind CSS
  • Multi-language support (supported languages: EN/DE)
  • Authentication (e-mail/password with Firebase Authentication)
  • File Storage (supported with Firebase Storage)
  • Automatic image resizing (built with Firebase Functions)
  • Automatic video converter (built with Firebase Functions and Coconut.co)

Technical Infrastructure

  • Angular for Frontend
  • Hasura as Database and GraphQL Layer
  • Firebase
    • Firebase Authentication
    • Firebase Storage
    • Firebase Hosting
    • Firebase Functions
    • Firebase Remote Config (for App Settings etc)
  • Coconut.co for automatic video conversion

Getting Started

Angular

  1. cd frontend
  2. duplicate .env.example and rename to .env and adapt accordingly. Please adapt firebase env accordingly (see firebase section)
  3. npm i
  4. npm start

Hasura

Hasura Setup

  1. duplicate .env.example and rename to .env and adapt accordingly. please adapt firebase env accordingly (see firebase section)
  2. docker-compose up -d
  3. cd database
  4. First time: hasura migrate apply --admin-secret myadminsecretkey --envfile .env
  5. hasura metadata apply --admin-secret myadminsecretkey --envfile .env
  6. hasura migrate apply --admin-secret myadminsecretkey --envfile .env
  7. hasura metadata reload --admin-secret myadminsecretkey --envfile .env
  8. hasura console --admin-secret myadminsecretkey

Local Development

Important: always run via hasura console --admin-secret myadminsecretkey inside folder database to keep track of changes!

IMPORTANT! REQUIRED JSON API MIGRATIONS

Currently, session variables are not available in computed fields by default and/or can be added via the console but must be added via the Hasura Endinge API. For more details see their article: Accessing Hasura Session Variables in Computed Fields.

rated_by_user field

The field rated_by_user has to be added via the Hasura API on each machine hasura will run on.

  • POST to http://localhost:8080/v1/query

Request

POST /v1/query HTTP/1.1
Content-Type: application/json
X-Hasura-Role: admin
X-Hasura-Admin-Secret: <your-admin-secret>
{
  "type": "add_computed_field",
  "args": {
    "table": {
      "name": "applications",
      "schema": "public"
    },
    "name": "rated_by_user",
    "definition": {
      "function": {
        "name": "application_rated_by_user",
        "schema": "public"
      },
      "table_argument": "application_row",
      "session_argument": "hasura_session"
    }
  }
}

Expected Response

{
  "message": "success"
}

Migration

  • hasura metadata export --admin-secret myadminsecretkey
  • hasura migrate squash --name "<feature-name>" --from <start-migration-version> --admin-secret myadminsecretkey
  • hasura migrate apply --version "<squash-migration-version>" --admin-secret myadminsecretkey --skip-execution
  • hasura metadata apply --endpoint <external-hasura-endpoint> --admin-secret <admin-secret>
  • hasura migrate apply <squash-migration-version> --database-name default --admin-secret <admin-secret> --endpoint <external-hasura-endpoint>"
  • hasura metadata reload --admin-secret <admin-secret> --endpoint <external-hasura-endpoint>

Firebase

Firebase config data will be extracted via REST-API before publishing the project. (see Firebase Remote Config API as an example)

Firebase Setup

  1. cd functions
  2. firebase login and select your project
  3. Set the admin account which gets the team role assigned on sign-up with firebase functions:config:set hasura.admin_email="[email protected]"
  4. (optional) Set automatic team member accounts by defining your email domain with firebase functions:config:set hasura.team_role_email_domain="@example.com"
  5. Set admin secret key for synchronization from Firebase back to Hasura with firebase functions:config:set hasura.endpoint="http://localhost:8080/v1/graphql"
  6. Set admin secret key for synchronization from Firebase back to Hasura with firebase functions:config:set hasura.admin_secret="myadminsecretkey"
  7. Set shared secret key so hasura is able to interact with firebase storage with firebase functions:config:set hasura.shared_secret="somesecuresecretkey"

To be able to download PDF files and show them inside the application tool, you need to configure CORS for Firebase Storage

  1. Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> in the root folder. For more information check the documentation.

Local Development

  1. cd functions
  2. npm install
  3. firebase init emulators
  4. firebase functions:config:get > .runtimeconfig.json
  5. npm start

Automated Video Converter

Limitation: Currently only S3 Buckets are supported

Videos are automatically converted via Coconut.co For support the following environment variables must be set for firebase:

  1. firebase functions:config:set coconut.api_key="k-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  2. firebase functions:config:set coconut.access_key="XXXXXXXXXXXXXXXXXXXXXXXX"
  3. firebase functions:config:set coconut.secret_key="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  4. firebase functions:config:set coconut.webhook="https://app.coconut.co/tools/webhooks/<coconut-webhook-id>/<user-name>";

Check https://docs.coconut.co/ for more information.

Deploy

Database

The Hasura database and GraphQL engine can be deployed either via Hasura's own Cloud Service, which offers a fairly generous free tier. Otherwise you can deploy Hasura on your own server. Please see their documentation for all deployment guides: https://hasura.io/docs/latest/graphql/core/deployment/deployment-guides/index.html

App

The app can be deployed using Firebase Hosting, but any other static file server should work as well (for example Netlify, GitHub Pages or your own server). For deploying the application, the build script needs to run inside the frontend folder npm run build:prod.

Firebase Hosting example: cd frontend && npm run build:prod && cd .. && firebase deploy --only hosting

Upcoming Features

  • Add function to let the team add notes to applications the jury should see when evaluating an application, e.g. where to pause a video.
  • Add internal tagging system.

Presentation (german)

Walkthrough Tool and the infrastructure

Funding

Funded by Senatsverwaltung für Kultur und Europa Berlin

yes-no-maybe-app's People

Contributors

denisyilmaz avatar dependabot[bot] avatar

Watchers

 avatar

yes-no-maybe-app's Issues

feat(list): add note, that the user already voted in this round

Wenn von mir schon bewertet, wäre ein expliziter Hinweis gut, z.B: anstelle des Bewertungsbutton die Angabe “schon bewertet” (und dann kann man ggf. draufklicken und die Bewertung ändern, siehe Punkt 1)

Also, on that page, I cannot see which portfolios I have already rated.

replace youtube/vimeo link confirmation button

Bei 'Youtube/Vimeo' Links eindeutiger machen, dass das '+' nach Eingabe geklickt werden muss, sonst isses wech (wie bei mir nach Klick 'Show preview ...'). Hatte es wie das '+' bei den Bildern verstanden, im Sinne von 'Weiteres hinzufügen'.

replace fullscreen icon

Für Administrator: innen /Jury anstelle des Vollbild-Modus-Zeichens vielleicht eher ein Symbol wie ein Auge (kritisch kucken) nehmen, denn letztlich wird ja erst da der Bewertungsmodus gestartet, das wird nicht durch das jetzige Bild vermittelt

Revisit edition switch button

Muss für Administratoren die Edition immer so sichtbar sein? Den Menüpunkt ruft man ja nur ganz ganz selten auf.

[FR] chat notes for specific work, not full application

Interne Notizen gelten immer nur für ganze Bewerbung, nicht für einzelne Arbeiten, Zuordnung zu einzelnen Arbeiten/Bildern wäre super (oder sollte das schriftlich funktionieren, zum Beispiel: “Bild 3 ist ja eine tolle Farbkombi”)

Revisit color of "rate" button

Bewerten-Button vielleicht nur beim Mouse-Over in dem starken Blau, ansonsten zurückhaltender? Leuchtet irgendwann ziemlich während der Durchsicht und lenkt ab wenn man sich aufs Bild konzentriert.

add vertical arrows to fullscreen mode to switch between works

Bei PDF-Einreichung + einzelner Filme/Bilder lässt sich im Vollbildmodus nicht zwischen PDF und Filmen switchen, blaue Pfeile werden nicht angezeigt, auch nicht die Punkte für die Anzahl der eingereichten Arbeiten, nur PDF mit Seitenzahl (Beispiel Min-Wei Ting und Wieland Schönfelder)

[FR] Add sorting by columns

At the moment, the applications with no feedback appear first. (Screenshot below) Is it possible that the jury can sort them by Ratings or Stimmen

image

Prev / Next buttons not working

Vorwärts- Rückwärts zwischen den Bewerbungen funktioniert nicht, Pfeil rückwärts führt lediglich einen Arbeitsschritt zurück, nicht zur vorherigen Bewerbung, Pfeil vorwärts funktioniert gar nicht

[FR] Allow admin to add portfolios manually for an artist

Admins should be able to upload portfolios later for an artist. For example, if an artist makes a mistake and sends us a to replace the original one?

For now the only thing we can to is to “reopen” the application period for a set time.

jury introduction should be expandable

The jury introduction, written by Sophie (translated by me) should appear as a drop down. It will probably take too much space away from the artist applications if it is always seen in full at the top.

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.