README.md
y3llow.xyz
A mix between the yellow pages and buymeacoffee but decentralized & powered by Astro & Ceramic.
Astro Hackathon 2022 submission for the Best project built with SSR category.
Pre-requisites
nodeversion installed>= 15.0.1npmversion installed>= 7.20.6- Metamask browser extension installed (required to interact with the blockchain)
- Create a new Supabase project
Store the transactions in a PostgreSQL database & generate an API with Supabase
- In your Supabase project, create a table named
transactionswith the following schema :
| name | data type | format |
|---|---|---|
| id | bigint | int8 |
| created_at | timestamp with timezone | timestampz |
| from | character varying | varchar |
| to | character varying | varchar |
| hash | character varying | varchar |
| explorer_link | character varying | varchar |
| amount | character varying | varchar |
| token_name | character varying | varchar |
| message | text | text |
| name | text | text |
Environment variables
- At the root of your project, copy the content of
.env.distin a new.envfile - Add the env variables values
Get started
- Install dependencies with
npm install - Launch the project with
npm run dev
Note: it is currently not possible to build and deploy this app to production due to an issue with the
caippackage on which multiple dependencies used in this project are using, which makes it impossible forviteto build for production. See this issue and this issue.
Honourable mention: “XYZ”
Extra links
-
YouTube demo
www.youtube.com/watch?v=JMZH-838G4s&feature=youtu.be
Description
y3llow is a mix between the yellow pages (look someone up) and buymeacoffee (tip someone). The profiles are powered by Ceramic, so if you created a profile on another website that relies on Ceramic for identity, you don’t need to write your infos again 🎉 What’s used under the hood
- authentication: siwe (sign in with ethereum) standard. On every user session and network change, you need to sign a message in your wallet to continue using the app
- UI: SolidJS, ZagJS, Tailwind + cva
- State: zustand & solid-zustand
- Ethereum interactions: wagmi/core
- Identity/profile: Ceramic
- Database + API : Supabase Upcoming features that didn’t make it on time but I’d like to implement :
- More options for tipping. At the moment it’s just the native token of the chain used.
- Support more chains (had some issues to add custom chains to wagmi so I dropped it for now)
- Posts (à la buymeacoffee) (stored on Arweave)
- something with WebRTC
- gated profile (access to certain profiles restrained to people holding certains NFTs) I’m currently unable to build/deploy due to some issue with the caip package used by a bunch of dependencies (https://github.com/ceramicstudio/self.id/issues/62). I’m quite sad because I really wanted to share it around, but hopefully this issue will be solved in the future 🙂 You should be able to open it on Gitpod though (reach out to me if you’re encountering any issue). Anyway, thank you Astro team and community for the cool tech ✌️ 🚀 ✨ I hope to see more web3 stuff built with Astro in the future 😁