GlitchyNFT - Appwrite Hackathon

Overview of My Submission

GlitchyNFT is a creator which allowed you to create your own 'NFT' from prepared assets. Why creator for 'NFT'? We all love them (right?)!

Techstack

• Vue
• Pinia
• Typescript
• Appwrite

Assets resource

• Craftpix

Submission Category:

Web2 Wizards

Link to Code

RufusMotus / glitchynft

GlitchyNFT is a creator which allowed you to create your own 'NFT' from prepared assets.

GlitchyNFT

GlitchyNFT is a creator which allowed you to create your own 'NFT' from prepared assets. Why creator for 'NFT'? We all love them (right?)! Project was created for Appwrite Hackathon on Dev.to

Techstack

• Vue
• Pinia
• Typescript
• Appwrite

Assets resource

• Craftpix

Missing functionalities due to lack of time

• auction house functions
• liking GlitchyNFTs
• viewing GlitchyNFTs of different users

Screenshots

Setup

#1 Prerequisites:

• Appwrite is running
• Appwrite CLI is installed
• you are logged into Appwrite CLI

#2 Appwrite

Init project in the root folder

appwrite init project

when ask to override say yes, choose Create a new Appwrite project and follow the rest of the prompts

to create collections run

appwrite deploy collection

and select all of the collections

copy projectId from the appwrite.json, replace PROJECT_ID with copied projectId and run

appwrite projects createKey --projectId PROJECT_ID --name APIKey --scopes documents.write

copy secret from the promp and paste it in…

View on GitHub

Screenshots

Problems during development

• Appwrite has problem with serving SVG files (CORB error in Chrome) that's why everything is base64
• function for creating an attribute in the collection (server side) resolves before the attribute is created which isn't convenient, I would rather wait a little longer than have to check recursively if the attribute is available (which doesn't work too well)

Conclusions

I had a lot of fun participating in this hackathon! 😄 Appwrite is a really great tool that I followed for some time now but haven't had the occasion to try out till now. Also, this was my first hackathon ever and this is my first post ever on Dev.to so Hello everyone! 🥳

Comments

[Ansh Saini]

Project looks awesome.
Haha, I also faced the attribute creation issue. Had to write a recursive function as well!

[Kamil Sołtys]

Thanks!

I ditched the recursive function option and used Appwrite CLI + appwrite.json for creating collections and attributes, I didn't like that promises with recursive function looked like callback hell in my case.

[Ansh Saini]

Welp, that is so much simpler.
I completely forgot about Appwrite CLI and ended up creating a setup script which uses Appwrite SDK.
I avoided the callback hell using async await.