Quice

The Self-Hosted Form Submission Service

Features • Demo • Get Started • Contribute

---

Quice is a headless service to handle any kind of form submissions. It is meant to be self-hosted on Vercel and uses Firebase for backend services. It exposes a REST endpoint to which you can send arbitrary JSON to, which will then be stored in Cloud Firestore.

All submissions can be accessed through the web interface, where the submission data will be displayed in an organized layout.

❯ Features

Self Hosted

You can deploy the application to your own Vercel account and connect it with your own Firebase project. This way you control your data.

Ready for Teams

Get your whole team onboard with an easy-to-understand. Anybody can be assigned to work on taking action to a form submission, so you always have a clear understanding on what needs to be worked on.

Customizable

During deployment you will fork the project, which will allow you to add any custom features you and your team need. If you implemented a feature you think everyone would benefit from, please send in a pull request!

❯ Demo

If you want to have a look at the interface before deploying it yourself take a look at the public demo.

You can use the account test@quice.io with the password password if you refuse to create your own account.

Please note that the demo app is modified to be accessible publicly. After you deploy your own version, only you and members of your team will be able to access it.

❯ Get Started

In this paragraph you will deploy your own instance of Quice with the Firebase console and the Vercel deploy button.

1. Create a new firebase project

Head to console.firebase.google.com and log in. Then hit the create a new project button and give it a name:

Disable Google Analytics for the project and then create it. You will now be redirected into the Firebase Console. Now we have to enable the different features Quice is going to use, first off Firebase Authentication.

Head over to the authentication tab in the menu and click the Get Started button. Enable the "Email/Password" provider and hit save.

That's it for authentication, now we want to enable Firestore. Go over to the "Cloud Firestore" tab in the menu, which is right below Authentication.

Click on "Create Database", choose the Production mode for security rules and choose any region that is closest to you.

Your Vercel deployment will be in US east, which cannot be changed for free accounts, so you cannot go wrong with picking us-central as the location, since it is the closest to your Vercel deployment. Read more about Vercel regions here.

We will now set up the Firestore security rules, which you can find under the "Rules" tab along the top tab bar. Here you want to paste the content of the most recent security rules file for Quice, which can be found here.

After that we have to create two composite indexes. Head over to the "Indexes" settings in the top tab bar and create an index.

The first index will go on the submissions collection and index the fields done ascending and createdAt descending. Set "Collection" as the query scope:

The second index will also go on the submissions collection, but it will index the fields formId ascending and createdAt descending. Set "Collection" as the query scope:

This is it for setting up Firebase, but don't close the Firebase console quite yet!

2. Collect Environment Variables

We will now collect the Firebase credentials which will be supplied to the deployment as environment variables. Click the deploy button below and create the project until you get to the project settings where you will be asked to enter environment variables.

Your page should look something like this:

First we will grab the credentials for a Firebase service account. In the Firebase console, hit the little cog icon at the top of the sidebar menu, go to "Project settings" and in the top tab bar choose "Service accounts".

Here generate a new private key. You will download a JSON file, from which you want to grab the private_key and client_email entries and paste them into the FIREBASE_PRIVATE_KEY and FIREBASE_CLIENT_EMAIL fields on the Vercel deployment form.

It is important that these are not prefixed with NEXT_PUBLIC_ because we do not want to expose them to the browser environent.

Next we will grab the credentials for the web interface. For this go the "Project overwiew" and hit the white "Web app" button on next to the iOS and Android buttons.

Give the app an arbitrary name (e.g. "Web interface") and disable Firebase hosting. You will then be presented with a short code snippet. Here we are interested in the firebaseConfig object.

Grab these keys from the config object and paste them into the Vercel deployment console:

firebaseConfig key	Vercel environment variable
apiKey	NEXT_PUBLIC_FIREBASE_API_KEY
authDomain	NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
projectId	NEXT_PUBLIC_FIREBASE_PROJECT_ID
appId	NEXT_PUBLIC_FIREBASE_APP_ID

After that you can finish up the Vercel deployment and visit your fully set up site!

3. Add Authorized Emails

To secure your deployment you have to set up a list of email adresses that are allowed to view your data.

A UI for this is in the planning, but for now you have to go to the Firebase console and head over to the Cloud Firestore dashboard.

There you want to start a new collection that is called auth and add a document with the id authorizedUsers.

In that document add a field named emails with an array type and add any emails to this array that you want to allow.

❯ Contribute

If you think you have any ideas that could benefit the project, feel free to create a pull request!

---

_{Project by Leo Driesch, released under MIT license.}