The latest articles on Forem by Kamil Sołtys (@rufusmotus). https://forem.com/rufusmotus https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F860090%2Fdccecfaf-3de9-4f07-9d31-3060bc2de863.jpeg https://forem.com/rufusmotus en Kamil Sołtys Tue, 10 May 2022 10:06:11 +0000 https://forem.com/rufusmotus/glitchynft-appwrite-hackathon-4c32 https://forem.com/rufusmotus/glitchynft-appwrite-hackathon-4c32 <h3> Overview of My Submission </h3> <p>GlitchyNFT is a creator which allowed you to create your own 'NFT' from prepared assets. Why creator for 'NFT'? We all love them (right?)!</p> <h3> Techstack </h3> <ul> <li><a href="https://github.com/vuejs/vue" rel="noopener noreferrer">Vue</a></li> <li><a href="https://github.com/vuejs/pinia" rel="noopener noreferrer">Pinia</a></li> <li><a href="https://github.com/microsoft/TypeScript/" rel="noopener noreferrer">Typescript</a></li> <li><a href="https://github.com/appwrite/appwrite" rel="noopener noreferrer">Appwrite</a></li> </ul> <h3> Assets resource </h3> <ul> <li><a href="https://craftpix.net/freebies/" rel="noopener noreferrer">Craftpix</a></li> </ul> <h3> Submission Category: </h3> <h4> Web2 Wizards </h4> <h3> Link to Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/RufusMotus" rel="noopener noreferrer"> RufusMotus </a> / <a href="https://github.com/RufusMotus/glitchynft" rel="noopener noreferrer"> glitchynft </a> </h2> <h3> GlitchyNFT is a creator which allowed you to create your own 'NFT' from prepared assets. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">GlitchyNFT</h1> </div> <p>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 <a href="https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0" rel="nofollow">Appwrite Hackathon on Dev.to</a></p> <div class="markdown-heading"> <h2 class="heading-element">Techstack</h2> </div> <ul> <li><a href="https://github.com/vuejs/vue" rel="noopener noreferrer">Vue</a></li> <li><a href="https://github.com/vuejs/pinia" rel="noopener noreferrer">Pinia</a></li> <li><a href="https://github.com/microsoft/TypeScript/" rel="noopener noreferrer">Typescript</a></li> <li><a href="https://github.com/appwrite/appwrite" rel="noopener noreferrer">Appwrite</a></li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Assets resource</h2> </div> <ul> <li><a href="https://craftpix.net/freebies/" rel="nofollow noopener noreferrer">Craftpix</a></li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Missing functionalities due to lack of time</h2> </div> <ul> <li>auction house functions</li> <li>liking GlitchyNFTs</li> <li>viewing GlitchyNFTs of different users</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Screenshots</h2> </div> <p><a rel="noopener noreferrer" href="https://github.com/RufusMotus/glitchynft/doc/explorer.png"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FRufusMotus%2Fglitchynft%2Fdoc%2Fexplorer.png" alt="Explorer view"></a> <a rel="noopener noreferrer" href="https://github.com/RufusMotus/glitchynft/doc/creator.png"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FRufusMotus%2Fglitchynft%2Fdoc%2Fcreator.png" alt="Creator view"></a></p> <div class="markdown-heading"> <h1 class="heading-element">Setup</h1> </div> <div class="markdown-heading"> <h3 class="heading-element">#1 Prerequisites:</h3> </div> <ul> <li>Appwrite is running</li> <li>Appwrite CLI is installed</li> <li>you are logged into Appwrite CLI</li> </ul> <div class="markdown-heading"> <h3 class="heading-element">#2 Appwrite</h3> </div> <p>Init project in the root folder</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>appwrite init project </code></pre></div> <p>when ask to override say <code>yes</code>, choose <code>Create a new Appwrite project</code> and follow the rest of the prompts</p> <p>to create collections run</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>appwrite deploy collection </code></pre></div> <p>and select all of the collections</p> <p>copy <code>projectId</code> from the <code>appwrite.json</code>, replace <code>PROJECT_ID</code> with copied <code>projectId</code> and run</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>appwrite projects createKey --projectId PROJECT_ID --name APIKey --scopes documents.write </code></pre></div> <p>copy <code>secret</code> from the promp and paste it in…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/RufusMotus/glitchynft" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> Screenshots </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxkn9ec9pk2b5cvxkwyhl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxkn9ec9pk2b5cvxkwyhl.png" alt="Explorer view" width="800" height="557"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwgosm5iw7p0zg3krf37z.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwgosm5iw7p0zg3krf37z.png" alt="Creator view" width="800" height="557"></a></p> <h3> Problems during development </h3> <ul> <li>Appwrite has problem with serving SVG files (CORB error in Chrome) that's why everything is base64</li> <li>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)</li> </ul> <h3> Conclusions </h3> <p>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! 🥳</p> appwritehack vue typescript webdev