Sample Lore App

Making Use of Hyype APIs to build your own app with lore feeds

An minimal sample app written in plain js and HTML that demonstrates the workflow of writing, reading and hiding lore based on Hyy.pe POST APIs. It also displays a basic lore feed using one of the feed Endpoints.
Lore Demo App in action
Code Repository
​https://github.com/Hyy-pe/lore-demo-app​
Demo
Find the demo here - https://lore-demo-app.vercel.app/ (Desktop only - works best in chromium based browsers)
What API methods are used?
POST
​Request a unique Nonce based on user action of creating a lore or hiding a lore
​Posting new lore after signing a sample request using nonce
​Hiding existing lore after signing a sample request using nonce
GET
​Displaying full lore using a loreId
​Fetch Lore tags for a given NFT collection
​Fetch recent lores by wallet using wallet address
​
External dependencies used in this demo
To reduce included library code, all of them are loaded directly via CDN
​Editorjs - to create loreblocks and initialise an editor to write lore
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
​Editor JS blocktypes - all relevant blocktypes used in the code snippets Following are used
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/[email protected]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
​Jquery and Bootstrap bundle only for the UI components (buttons, modals etc for this demo. Not related to the API)
​Web3.js - Ethereum JS API
​Buffer - Nodejs buffer API for the browser
​Editorjs-html - Parser built to parse the loreBlocks back into HTML
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/edjsHTML.js"></script>
Filestack API - to build a remote image uploading experience hooked into the editor without backend implementation
<script type="text/javascript" src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
Opensea API - to fetch your tokens from the connected wallet address
​

Collection Tools - Previous

Custom Lore Tags

Next - Tutorials

Create a Discord Webhook

Last modified 1yr ago