How to build a crowdsourced webapp

Adrian Krebs — Sun, 03 May 2020 12:05:16 +0000

I recently launched my crowdsourced platform for sustainable and durable products and wanted to share some pitfalls and challenges when building a crowdsourced application.

Collecting data with Airtable

I decided to use Airtableas 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:

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:

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.

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

I built Remoteclerk - a video consultation app for retailers

Adrian Krebs — Tue, 28 Apr 2020 13:48:23 +0000

Covid-19 is going to push the retail marketplace faster than it has been moving toward a more remote experience. Stores and showrooms are closed but online shops are still open. However, product categories like furniture or sports gear usually require consultation by an experienced shop-employee before the purchase.
That's why I built a video consultation software for retailers:

Benefits:
• Outside opening hours - Offer your expertise to the people at home even if your store is already closed
• Offer expertise at home - Offer additional information about the material or functionality of a product. The customer gets the same experience as he would get it in the real shop.
• Up-/Crosselling - Suggest additional, complementary or higher-end products to your customer.
• No App installation - No app installation needed - everything is web-based. Works on smartphonse, tablet and desktop.
• No Sign-Up required - The user does not need to sign-up and stays anonymous.
• Easy to integrate - Easy to integrate widget for every online-shop.
It's way easier to handle video calls with a fully integrated solution like this than it would be with Whatsapp, Zoom or other proprietary solutions.

Category Submission:

Engaging Engagements

Demo Link

https://www.theremoteclerk.com/

Link to Code

https://github.com/AdrianKrebs/remoteclerk

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I used Vue.js as a frontend framework and Node.js on the server. Going through the Twilio API docs was interesting but not always easy.

Additional Resources/Info

I'm currently reaching out to retailers who would be interested in beta-testing the app.

DEV Community: Adrian Krebs