How to build a crowdsourced webapp
Tags: webdev, vue, javascript
Published: 2020-05-03 12:05:16

I recently launched my [crowdsourced platform for sustainable and durable products](https://www.buyforlifeproducts.com) and wanted to share some pitfalls and challenges when building a crowdsourced application.

## Collecting data with Airtable
I decided to use [Airtable](https://www.airtable.com)as a lightweight database because it's free, very user-friendly and you can easily create and share forms to collect data. You can setup your database in minutes and integrating the submission form on your website is super easy by embedding an iframe:
``` 
<iframe @load="load" class="airtable-embed" src="https://airtable.com/embed/shrpnZPkaGeToUEG3?backgroundColor=gray"
    frameborder="0" style="background: transparent;"></iframe>
```
And here is how the embedded form looks like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wpob01z687npyk2lhbfx.PNG)



## How to deal with the lacking quality of the data
One issue that comes with crowdsourced data is the lacking quality of some submissions. 

Some entries are of poor quality like missing fields or incorrect information:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hojcy8c3y5qjx1grgasd.PNG)

That's why I'm reviewing every submission manually to clean, verify, and complete the required data. After reviewing and fixing a submission, I run a `Node.js` script that retrieves the newest entries from Airtable and inserts them into my Firebase database, from where the app loads all the data:

```
admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://foobar.firebaseio.com"
});
let db = admin.firestore();

let docRef = db.collection('products')


for (let p of productList) {
    docRef.doc(p.id.toString()).set({
        "id": p.id,
        "name": p.name,
        "description": p.description,
        "link": p.link,
        "img": p.img,
        "category": p.category,
        "upvotes": 0,
        "subcategory": p.subcategory,
        "metadata": {
            "warranty": p.metadata.warranty,
            "madeIn": p.metadata.madeIn,
            "shippingTo": p.metadata.shippingTo,
            "foundingYear": p.metadata.foundingYear
        }
    });
}

```
This way, I avoid having poor data displayed on my site. It's like having a staging database before publishing it to production.

## How to incentivize users to submit data
I received over 250 submissions since the launch and I would never have been able to collect all this data manually by myself.
But how do you motivate people to "do the work for you"?
With every approved submission, users earn "stars", which is a gamification approach to incentivize user contributions. 
These stars are the best metric regular users have available to them to determine, at a glance, if someone is a valued member of the site.
If someone has lots of points that means that the user has contributed popular content to the site. Think of Reddit's karma or StackOverflow's point-system.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/24trkeztj0combi5o4ll.PNG)


Let me know what you think about my project and don't hesitate to ask questions :)