Minneapolis Institude of Art (Mia) Empathy Tool
This tool is built for Mia to use to measure empathy in participants. It involves a quiz interface which will record quiz data from its users, and an admin interface where administrators of the tool can manage and view sessions, quizzes, and participant data.
- Firebase (Cloud Firestore)
Front-end File Structure
src/: The React front-end.
src/assets/: Images, sound files, and other resources.
src/components/: React components, separated into
adminfolders for the user-facing quiz and the admin panel respectively.
src/stimuli/: Resources used for quizzes.
firebase.json: Contains configurations for Firebase.
database.rules.json: Contains Firebase database read/write access rules.
yarn.lock: Contains dependency management configurations for Yarn.
Hosting your own database (via Firebase)
Setup your own Firebase App and Database
While this quiz was originally created for use by Mia, you can easily connect the app to your own Firebase database.
- Create a new Firebase project (or use an existing one).
- Go to the project from the Firebase Console (if you just created a new one, you should already be here).
- Under Get started by adding Firebase to your app, select the Web option.
- Choose an app nickname, and leave the option for Firebase Hosting unchecked (you can always add this later).
- Under the Add Firebase SDK step, copy the contents of the firebaseConfig variable in the code snippet, and replace the config object in
src/Firebase.jswith this code. You can also find this SDK code snippet later in the project settings screen.
After creating your new Firebase project, setup your Database and Authentication:
Firebase Authentication Setup:
From the Firebase Console
- Click Authentication
- Click Set up sign-in method
- Under Sign-in Providers click Email/Password, then click the "Enable" slider, then click Save.
- Under Sign-in Providers click Google, then click the "Enable" slider. Set the Project support email to your email address, then click Save.
Firebase Database Setup:
This provisions your new Firestore database in a Test Mode. From the Firebase Console
- Click Authentication
- Click Create Database
- Choose "Start in test mode", click Next.
- Select a Cloud Firestore Location, click Done.
- Now select, Start collection.
- Collection ID type "admins", click Next.
- DocumentID, leave as Auto-id.
- For Field, type the value "email", Type string, for Value type in the email you used for Authentication. Click Save.
After building the project locally, you can then access the admin panel and start writing data to your database by adding your own sessions and quizzes. You can view this data both in the app and in your Firebase console in the Cloud Firestore database.
Tested with npm version 6.9.0 and node v10.16.3.
In the project directory, you can run:
Installs all dependencies for the app. You need to run this before you can run
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
npm run build
Builds the app for production to the
See the section about deployment for more information.
If you connected this app to your own Firebase project and have the Firebase CLI installed, you can make use of Firebase hosting by running
Building and running the App via Docker
Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
We have also included a sample Docker setup to enable you to run a local copy of the Empathy tool on any computer running Docker Desktop.
This will still require you follow the steps for setting up a Firebase App and Database. (See above)
The following files and configuration can be used to get you started, they should not require editing on your part.
Dockerfile: File configures a preferred Node version and runs the necessary build commands as above.
docker-compose.yml: Uses the docker-compose utility to handle running the Docker container and code for the Empathy tool.
You need to have added your Firebase SDK Snippet to /src/Firebase.js before running this the first time.
This command will download all the necessary components (e.g. Node and required modules) and build the container for a local instance; as well start the Empathy tool for you, which if completed can be accessed On your local machine.
Will stop the Docker container from running.
Will re-build the image if you've edited any of the configuration files or code in the app.
Administration of the App
The admin-side of this app enables creating and managing sessions and quizzes for the app. To access it, go to the
/admin route (e.g. https://mia-empathy.firebaseapp.com/admin) and sign in via the Firebase auth interface using the same email you added to the Firestore database.
User Guide for an interface walkthrough.See the
Exporting the Firestore database
While Firebase's Realtime Database supports data import/export, Firestore does not. Instead,
exportFirestoreDB.js includes a script that will do this in CSV format.
To generate an exported copy of the Firestore database:
- Clone the repository.
- Open up a terminal window and navigate to the project folder.
node exportFirestoreDB.js(make sure you have node installed).
- You should now see three CSV output files in the project folder, separated into
The Empathy Tool is licensed under the Creative Commons Attribution license.
Major support provided by the Andrew W. Mellon Foundation. Generous support provided by Nivin MacMillan, Kaywin Feldman and Jim Lutz, Hubert Joly, John and Nancy Lindahl, Marianne Short and Raymond Skowyra, Jr., Richard and Jennie Carlson, Ken and Linda Cutler, Alfred and Ingrid Lenz Harrison, Leni and David Moore, Jr., Sheila Morgan, John and Carol Prince, Joan and John Rex, and donors to the 2018 Mia Gala.