[HIP-XXX] Revamp FE and harmonize apps

[bitbeckers]

To do

• Scoping
• User journey's
• Align on tech stack

Summary

We propose a split between hypercerts content and the web3 utility.

Abstract

After developing hypercerts minting apps, the marketplace in the hyperboards app and the evaluations MVP, the hypercerts app stack now consists of a bunch of independent applications. Because of the dependency of implementing new FE features into the current FE stack, delivery of new features, and feeling comfortable with experimentation, can be improved.

For relatively static content (e.g. blogs, announcements) the app on https://hypercerts.org should suffice. We will harmonize minting, claiming, buy/sell/offer, evaluations in a separate application on https://app.hypercerts.org. Docs will be exposed under https://docs.hypercerts.org

Additionally, because we've built a custom indexer + API to provide the data from EAS, EVMs and subgraphs in the same query, we should also formally expose this under https://api.hypercerts.org.

The updated applications will inherit the design language created by Ira and currently expressed in the hyperboards application.

Motivation and rationale

We provide a clear stack of applications for users and endpoints for builders. The current state of 3 different applications is confusing since there's not one application that provides the full lifecycle of hypercerts as the datalayer in a interconnected impact funding network.

Implementation

Frontend

https://hypercerts.org | https://staging.hypercerts.org
App: Placmic, React, TailwindCSS, ChakraUI, etc to be determined
Content: announcements, blogs, hypercerts media, papers, etc

Docs

https://docs.hypercerts.org
App: Docusaurus, Nextra? TBD
Content: API docs (automagic from releases), SDK docs (automagic from releases), Quickstart Guides, FAQs, contract docs

API

https://api.hypercerts.org | https://staging-api.hypercerts.org
Express server exposing subgraph, supabase, 3rd party evaluation data providers

App

https://app.hypercerts.org | https://testnet.hypercerts.org
Production chains are exposed via app, testnet chains via testnet

App: React, TailwindCSS, ChakraUI, etc to be determined
Content: hypercert exploration, inpect hypercerts, mint, create, manage (split, merge, burn), buy, bid, sell, evaluate.

Operation requirements and ownership

Full-stack: @bitbeckers, @kristoferlund, @Jipperism
Design: @holkeb, @eirena

Links and additional information

No response

[bitbeckers]

From open issues:

• A Hypercert Owner can browse the hypercert collections of other users
• Global leaderboard of top funders
• Support simple filtering on hypercerts properties in the opening dashboard
• Allow a user to upload or drag-n-drop an image into the create form
• SSG the top N hypercert pages
• A creator has multiple options for distributing their hypercert (allowlist form, csv upload, total units in 1 fraction) ref: creator app
• let users choose the background color of a hypercert image
• pagination for hypercerts browse and dashboard pages
• Single claim a hypercert from the view page (claim your fraction from the view page of a hypercert you're allowlisted on)
• A hypercert item should be able to display both the “created” and “claimed” tags together (if applicable to that cert)
• Only first N owners of a hypercert are displayed (but additional owners can be viewed somehow)
• User profiles in the Dapp
• A funder can discover hypercerts on hypercerts.org and buy fractions on OpenSea ref: og item
• dashboard clusters hypercerts according to the work scope ref: og item
• enable web2 users to reserve hypercerts
• Enable gasless minting (rate limited?) for web3 and web2 users
• Improve UX when detecting the user is unable to claim. Ref: user feedback
• Add a gateway link to IPFS URL ref: example
• Robust form input and validations ref: user feedback
• Add creator address/ens and transfer restrictions to hypercert view
• Add copy claimID link to FE
• Display hypercerts without being connected to a network
• Provide share URL (like currently in create form) after mint, for easily creating similar hypercerts