CardStack

CardStack – a mood tracker that uses DID DataStore For Storage And Magic For Auth.

After passing a short quiz, the user can to get information about his emotional mood, compare with the results of the past days and share the result with friends!

The application was developed on Hackathon: Sovereign Data Hackathon in the nomination Build An App That Uses DID DataStore For Storage And Magic For Auth.

Features

• Authenticating in the application using Magic(Magic link/OAuth 2.0)
• After authorization in Magic, there will be an login or registration new identity via 3ID Connect
• Loading user data from IDX and fetch data on past attempts the quiz from DID DataStore
• On the settings page, users can update personal information which stored in IDX
• Saving data about attempts in the DID DataStore

Demo

View on card-stack-hackathon-zr8qz.ondigitalocean.app

Screenshots

Login page

First login with new ETH wallet

Quiz stage

End of quiz

Settings page

Technologies used

1. ReactJS
2. Magic Authentication
3. 3ID Connect
4. DID DataStore
5. IPFS
6. Github Actions
7. DigitalOcean Apps

Schemes of work

https://miro.com/app/board/o9J_lp7bUq0=/?invite_link_id=346148181420

Requirements

• NodeJS 14 or older
• Metamask

Installation

1. First you need to make sure that the version of the NodeJS is 14 or older.
2. After to download the project you should to create file .env at the root of the project with environment variables:

# Magic.link API key
REACT_APP_MAGIC_KEY=pk_live_KEY
# Ceramic API key
REACT_APP_CERAMIC_API=https://domain.com

You can to get your REACT_APP_MAGIC_KEY after registration on https://magic.link/ and created application

For value REACT_APP_CERAMIC_API you should to type one of the Ceramic node's url. For example: https://ceramic-clay.3boxlabs.com

3. Then you need to install all project dependencies: yarn

Run project

– For local development use the command yarn start.

– Use the command yarn build to build the project.