carlbarrdahl / ceramic-form

Exploring https://ceramic.network and https://idx.xyz

Home Page:https://ceramic-form.on.fleek.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ceramic form

A decentralized Typeform on https://cermic.network

Embed autogenerated forms based on a ceramic definition (https://developers.idx.xyz/learn/glossary/#definition).

The user will be asked to sign in with their web3 wallet and any data belonging to this definition will be fetched and prefill the form.

These forms can be linked in chats or emails or embedded using iframes. If the definition is existing as an alias you can simply that alias.

For example: https://ceramic-form.on.fleek.co?def=BasicForm

When the user saves the form, it adds or merges the data to their IDX storage where they are in control of the data.

A webhook can be specified to be called when the user successfully completes the form:

https://ceramic-form.on.fleek.co?def=BasicForm&successUrl=https://examples.com/webhook This endpoint is called as a GET request with the did and the definition ID as def.

The service can collect the user data by calling:

app.get("/webhook", async (req, res) => {
  const { def, did } = req.query;
  const data = await idx.get(def, did);
  res.send("ok");
});

How does it work?

  • Ceramic uses JSON schemas which can be rendered using something like jsonforms.

Features

  • Link to a definition on ceramic.network and render a form based on the schema
  • Embeddable in iframe
  • Stores in a user-controlled silo
  • Notify service when form is filled out

Future improvements

  • UI Scheme for better control of layouts (https://jsonforms.io)
  • Customized components instead of Material-UI
  • What other kinds of schema-based micro-apps can be built?
    • Blogs?
    • Shops?
    • ...?

About

Exploring https://ceramic.network and https://idx.xyz

https://ceramic-form.on.fleek.co


Languages

Language:JavaScript 80.8%Language:HTML 12.5%Language:CSS 6.7%