LinkM3 ("Link Me") - Connect with Web3 builders on Web2 platforms (⚡AppWrite)

Rishabh Raizada — Thu, 12 May 2022 23:52:25 +0000

Overview of My Submission

Initial Thoughts 🤔

So, first of all, a big 💝 to the AppWrite team for introducing me to AppWrite. It is really really easy. I have used Firebase before so I had a taste of BaaS but AppWrite has abstracted a lot of complication.

I have started getting deeper into Web3 Dapps recently, in fact it has been half a year now 😆. There are definitely a lot of pros but everything comes with a cost (literally, it's called gas fees 😂). Moreover, if you want to build a decentralized application that would require a lot of transactions and storing data and cron jobs, you cannot do that in smart contracts without increasing complexity (we can do so using ChainLink, The Graph, etc but would add a lot of complications and extra cost). And after reading blogs on how you still require a backend service, I was convinced that this is the best time for me to get started with full stack Web3 Dapps which can scale without added complexity. And that would require a backend service, hence, aiming for the submission category "Web3 Wunderkinds"!.

Inspiration 😲

The inspiration came from here

In one of my college Web3 groups, I saw this conversation about a simple and trivial tool that mapped a user's .eth domain to their Twitter account. In fact, why would anyone need a tool to do so - that's what I first thought. But what if we could map a user's wallet address with his/her/their Web2 social profiles like Twitter, Instagram, Discord, Github and what not. Interestingly, there wasn't any app or tool that already did so which I knew of. A simple and somewhat peculiar ideation process I would say!😂 But nonetheless, I was ready with my idea and had also thought of some more interesting features to promote the Web3 community. The project will be called "LinkM3" - pronounced as "Link Me" with the 3 signifying Web3 (Yeah, I know I am bad at names 😔).

Introducing LinkMe (🔗M3️⃣)

Features🤩

LinkM3 (pronounced "link me") helps you connect on social Web2 profiles like Instagram, Discord, Twitter, LinkedIn, etc through your friend's wallet address/ETH domain.
Moreover, LinkM3 also helps you discover other prominent Web3 players and connect with them.
You can also bookmark & view real-time feeds of your favorite cryptos/tokens and directly open respective authentic sites of your favorite Dapps!
Creator highlight system highlights the profile of a qualified creator (chosen randomly) once a week.

Project Flow🖼️

This is the homepage of the project. Clicking on "Get Started" will redirect to the login screen.

The user can enter their e-mail and a magic login link will be sent to the user's email address. I am using AppWrite's Magic-Link Login & confirmation functionality for this and sending mails through SendInBlue SMTP. Clicking on the link in the email redirects the user to /verify route for a split second and on verification redirects them to the profile screen. To manage the auth state, I am using PrivateRoute in react.

This is the profile screen or the main screen the user sees after logging in. The Highlight of the week section changes weekly and for that I am using AppWrite's cloud functions (cron) which picks a random user once a week and highlights their profile at the top. Other users are displayed at the bottom will all the details and relevant links to their profiles.

You can search for a particular user by typing their wallet address or ETH Domain which is done through querying and indexing in AppWrite's database. Clicking on the profile icon opens up options to edit your profile, logout, view your NFTs which can be fetched through your wallet address.

Clicking on the Edit Profile button opens up a dialog box where you can enter your relevant details and make changes. I am using AppWrite's storage functionality to store the images and add their id in the document for that particular user. Connect Wallet button can be used to connect to user's wallet and get their address or they can normally enter in the textfield if it's a short and memorable domain.

Tools & Technologies⚙️

ReactJs + MaterialUI (Frontend)
Appwrite (Backend-as-a-Service)
NodeJs (Appwrite Cloud Functions)
Digital Ocean (Deploying AppWrite Server)
SendInBlue (SMTP service)

Environment Setup

Clone the repo here:
(PS: I am really sorry, if you were wishing to test it out quickly, I haven't deployed it yet. Although, I am working on it and will edit this article as soon as the site it live.)
Deploy your AppWrite Server:
I have used Digital Ocean to configure my droplet for AppWrite. You can instead use Docker as well. The installation instructions can be found here
Edit the environment variables:
cd in the location where you cloned the repo. Create project in AppWrite console and add your AppWrite credentials from the project settings page to .env.example. Rename .env.example to .env.
Set up SMTP service:
I used SendInBlue for this but any other provider can also be used. Add the SMTP credentials in appwrite/.env in droplet console.
Configure AppWrite:

a. Database Configuration:

Create users collection in database with the following details:
Create weekUser collection in database with these attributes:

b. Storage Configuration:

Add photos collection with the following settings:

c. Cloud Functions Configuration:

Add API Key as follow:
Create cloud function in AppWrite console:
Name the function as highlight, and assign role:all permission to read & leave the write permission as empty.
Update env variables in function settings:

APPWRITE_PROJECT_ID | [Your Project Id]

APPWRITE_ENDPOINT | [Your Project endpoint]

APPWRITE_API_KEY | [API Key we just created]

USERS_COLLECTION | users

WEEKUSER_COLLECTION | weekUser
Initialize & deploy function using appwrite-cli@15.0:

Run the following code line by line in your project directory and follow the prompts -

npm i -g appwrite-cli@15.0
appwrite -v
appwrite client --endpoint "http://<API endpoint>/v1"
appwrite login
appwrite init project
appwrite init function
appwrite deploy function

PS: Name the function same as the one in the AppWrite console. For help, highlight function is already present in the functions directory.

Submission Category:

Web3 Wunderkinds

Link to Code

https://github.com/Rishabh510/LinkM3

Additional Resources / Info

Challenges Faced 😤

There were very few challenges I faced this time. Honestly, AppWrite's SDKs are a breeze through along with the lucid documentation. I was easily able to figure out the errors and debugged them in respectable time. Though there are a few things I wished AppWrite's SDK had the support for. I hope to see these things getting implemented soon. To describe a few of them:

Single call to upsert: Currently requires 2 different calls.
Magic Link auto verify user: Need to send mail again to verify user whereas the same magic link could be used to do so.
Search on multiple attributes in a single index: It does show support for multiple attributes in a single index but search query doesn't seem to function in that case.
Appwrite-cli@16.0 deploy function problem: I downgraded to appwrite-cli@15.0 to deploy cloud functions which eventually solved the problem.

Future Scope 🔮

Even when I am writing this article, I am buzzing with ideas. To describe a few:

Adding data feeds and bookmark feature - favorite tokens, favorite users, favorite dapps etc.
Option of users to fund/donate them in crypto to their wallet address.
Option for users to add multiple wallets on different chains - Solana, Tezos, etc

Closing Thoughts 🙏

I am happy I discovered AppWrite and I will be probably using it more often in the future for my pet projects 😅. Again, thanks a lot to dev.to and AppWrite for this hackathon, got a good project, prototyped fast, wrote a blog and yeah I am a little tired now!

Thanks for reading!

🎤Saydle - A Wordle clone that uses your voice to play!

Rishabh Raizada — Mon, 11 Apr 2022 11:16:00 +0000

Hey everyone👋, I am new to writing blogs and this one is going to be my first one on dev.to. Thanks to Deepgram and Dev.to for motivating me to start. This project is targeted for the "Build" challenge!

Overview of My Submission

What is Saydle 🔠

I am obsessed with Wordle these days, which also is the inspiration for this project. Saydle is a fun project which I built to give a twist to normal Wordle. We normally use our keyboard to type the letters and guess the word, right? In this game, we can't type. In fact, there is no keyboard. Instead, you have to use your voice to speak the words rather than typing.

Tools and Technologies ⚙️

HTML/CSS/Javascript
Hasura (GraphQL)
Sawo (Authentication)
Heroku Postgres (Database)
Deepgram (AI speech-to-text)
Replit (deploy)

Features 🤩

No keyboard means that you can't see which characters you have already used on the on-screen keyboard. Though, you can see the grid to make out the unused letters.
Also, there is no Enter or Delete key concept in this game. That means, as soon as you speak a 5 letter word, it is automatically submitted 😈.
Moreover, how are you gonna tackle homophones (same sound but different spelling)? (Continue reading to get a hint)
It uses passwordless authentication to authenticate users and maintain a history of the number of matches played and the number of matches won against each user.

Challenges I faced 😤

I have kept the code simple and intuitive with beginner-level technologies to make it easier for anyone to understand the codebase.
This was also the first time I was working with Deepgram and thanks to the exemplar projects, I was able to integrate it in my code.
It is difficult to tackle homophones (same sound different spelling and meaning) when playing. But using Deepgram, we can say sentences where the target word is the first word in sentence. For example:
- (1) There is a house. // picks up the word THERE.
- (2) Their family. // picks up the word THEIR
Since I am new to blogging, it might not be up to the mark. Suggestions to improve & constructive criticism are welcome!

Future Scope 🔮

This is a static web project and does not ensure the security of your API keys. I would be migrating this project to ReactJs with better management of secrets.
Wordle has a very minimal UI and I wanted to retain the same. However, I would be making a better UX by adding themes, animations, transitions, etc.
Adding features like a leaderboard, difficulty level, word length, time limit etc would make it even more fun.
Just wondering what if on winning a match, your voice recording is minted as an NFT!? Would love to hear your opinions and suggestions, especially on this feature

Submission Category:

Wacky Wildcards

Link to Code on GitHub

https://github.com/Rishabh510/Saydle

Additional Resources / Info

Deployed App
Github Repo
Screenshots 🖼️

Conclusion

I got to learn a lot of new things by building this project! Would love to see your thoughts about the project Saydle!

DEV Community: Rishabh Raizada

LinkM3 ("Link Me") - Connect with Web3 builders on Web2 platforms (⚡AppWrite)

Overview of My Submission

Initial Thoughts 🤔

Inspiration 😲

Introducing LinkMe (🔗M3️⃣)

Features🤩

Project Flow🖼️

Tools & Technologies⚙️

Environment Setup

Submission Category:

Link to Code

Additional Resources / Info

Challenges Faced 😤

Future Scope 🔮

Closing Thoughts 🙏

🎤Saydle - A Wordle clone that uses your voice to play!

Overview of My Submission

What is Saydle 🔠

Tools and Technologies ⚙️

Features 🤩

Challenges I faced 😤

Future Scope 🔮

Submission Category:

Link to Code on GitHub

Additional Resources / Info

Conclusion