https://ethglobal.com/showcase/ethermatch-wr60s
Project Description:
This project combines a nextjs front-end with a lens-protocol sdk backend. Dating apps are social networks which is why I decided to use the lens protocol. User onboarding, profile displaying, following, a lot of the things that are done on this project use the lens-protocol sdk. This project also uses lighthouse.storage and Irys for storage. Irys is used to store profile metadata before uploading to lens-protocol and lighthouse.storage is used to maintain a list of profiles that have registered to the app. Irys stores the data/files on arweave whereas lighthouse.storage stores the data on ipfs. I wanted to use both decentralized storage providers since this can potentially increase fault tolerance. This project also uses sign protocol to validate if users have met in person/online and then sets a lens profile attribute to persist this validation.
How it's Made:
I initially started off this project trying to use scaffold-eth but then quickly realized it had too many features and was a bit distracting. I experimented with the lens-docs-quickstart nextjs starter kit template and found that to be the easiest to get started with. I also found the lens-protocol react-hook sdk to be easier to use then the client sdk, which is why I decided to use it. Then I used Irys and Lighthouse.storage for uploading files. Finally, I wanted a way to verify if users met each other either online or in person so I decided to use sign protocol. I store this validation in the user's lens profile and use it to filter by those who have at least met another person. This implementation with sign protocol was very smooth and, through this validation, allows an additional layer of security for users.
This is a Next.js project bootstrapped with create-next-app.
First, run npm install
Second, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.