w5p | Devpost

w5P

Inspiration

While learning about web5 and how protocols define the schema by which two DWNs agree to communicate and share data, building and testing protocols was fun. i then thought of a way users can share their protocols to each other. Also i tried looking up other live web5 project but i noticed their protocols and schemas were not public. i wanted to learn best practices and how to better write protocols. so i built w5p as a place users can share their protocols.

If two or more applications use the same protocol, identified by the URI, users can enjoy common experiences across apps in a more interoperable way. W5P will provide a space where protocols can be explored.

What it does

Users can writes protocols to there dwn and publishes it with permissions using W5P protocols, making it publicly accessible. Other users can then browse and explore protocols .Any w5p protocols written are owned by the user. they are also pulished by the user. other users can read there protocols.

The app runs on the w5p-app repo. the w5p-backend created to help query datas on the explore tab. when a user publish a protocol, the protocol id, name and author is sent to the backend and stored in a remote dwn/did, the record is also sent to the recipient. i did this so that when a user goes to the explore tab on the app, the backend api is queried to get the list of recently published protocols. then the app can take the array of record IDs and the from did to query each one to populate the explore page.

When testing w5p make sure you run the backend first so that you can use the explore functionality.

W5P protocol URI is https://w5p.protocols/protocol. i already published it on the app, so you can explore it on W5P. you can find the protocol definition implemented in the app from the w5p-app repo at src/utils/app-protocol.ts .

How we built it

built it using the web5 api library, protocols/protocol definitions written by a user are stored on the user's dwn. and also published by the user. The app is built using nextjs and web5 api library, styled using tailwing css. the api that populates the explore tab was built with express js.

Challenges we ran into

querying large amount of data was slow. i had to find a way to reduce the number of queries to speed up the app. also in the future i think web5 should have a "limit" option in the filter, to help reduce the amount of data to query.