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.
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!
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 [email protected] 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.
In this paragraph you will deploy your own instance of Quice with the Firebase console and the Vercel deploy button.
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-centralas 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!
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!
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.
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.
