Ceramic allows users to have complete ownership over their data by providing decentralized technologies for authentication and data storage.
In this tutorial we set up an application to interact with JS HTTP Client through a public Ceramic node. In addition we create a deterministic Ceramic Tile and resolve an unstoppable domain which we store in the decentralized profile of the user.
The app is hosted on Vercel at https://ceramic-unstoppable.vercel.app/.
The GitHub repository is at https://github.com/Pfed-prog/Ceramic_Unstoppable.
Node.js v14 and npm v6
For more detailed information look at Ceramic Developers Portal
First we create an app by using React framework and cd into the directory:
Then we install the dependencies for ceramic and unstoppbale domains:
and install dependencies necessary to connect the pieces:
After the dependencies are installed we move into the
src folder via
cd src and create a new file where after a successful login we can access ceramic DID Datastore and update the data. This file we name as
DataModels.js . We also create an additional css file for
Datamodels.js that we name as
Additionally, we create
connectors.js file that we access in
App.js to connect to Ethereum Providers.
connectors.js we create three wallet connectors: useWeb3React Injected connector to Ethereum Mainnet with MetaMask, Walletconnect and UAuthConnector for Unstoppable Domains.
App.js we import following libraries, files and define a constant to initialize ceramic client:
Meanwhile the function App is where we define states, hooks and functions:
On the initial state the app display three buttons, which relate to a distinct wallet connector. Once the user pushes the button the state active becomes true, connecting to the wallet. After the wallet is connected the ceramic client initializes and connects to the decentralizes identity. Finally, following the successful ceramic client connection the user enters to the profile skills page.
DataModels.js we define the determenistic Ceramic tiles where the users edits and stores skills data.