TDHT: The Dragons of Hidden Treasures

Gridsome NFTs Static site Vue.js
YEAR
2022
DURATION
1 month
CLIENT
Hrresh Naiidu
PLATFORM
Web Application
WEBSITE
TDHT

Introduction

A portfolio for selling NFT of dragons at OpenSea. It demonstrates all the stories and myths revolving around dragons. Also, it has a gallery section where users can view all 10,000 dragons with the option to search and filter.

Problem Statement

Client needed a website and these were his requirements.

  • Super fast website
  • No loading spinners
  • Accessible from anywhere in the world with the same performance
  • Elegant, easy-to-navigate user interface
  • Need the website to be ready ASAP

Research

The site is developed as a static site i.e no backend is involved to serve the contents. With this, the objectives of performance, security, and SEO are achieved by default.

Tech stack

  • Gridsome (Vuejs)
  • Tailwind CSS

We choose Gridsome over other frameworks, as it was the one we were most comfortable with. It’s not well maintained in comparison to other robust frameworks like Nuxt.js. But it had the simplicity others lacked.

As always, for design, we went with Tailwind. It allows rapid transformation of the Figma design system into CSS.

The site is deployed to AWS amplify. Since the client needed it asap, Amplify was easy to start and easy to scale. Also, it made the job of CI/CD easier. We deployed two versions: one at the main domain tdht.club (live site) and the other at dev.tdht.club (test site).

Storage

The site has a lot of assets that needed to be stored on the server. Images used on sites were deployed to amplify along with the site. Gridsome has a built-in component that converts normal images into optimized progressive images. It also resizes and crops in real-time when developing.

In the case of NFTs, there were 10000 of them. Also, the website has a gallery page that lists all images and allows filtering and searching based on their traits. All those images were compressed and resized then uploaded to AWS S3.

Moreover, we had to achieve search functionality without a server or database. Our first solution was to upload all those data into IndexedDB. For an easier solution, we went with Dexie.js. It made working with IndexedDB easy.

After a lot of tests, we found that this solution took about 3 seconds to load the database from S3. It was stored as a JSON file. Then loading those JSON data into IndexedDB via Dexie.js took a lot of time (more than 10 seconds). Moreover, the website was keeping track of database changes, so it won’t need to load JSON every time; making it faster to search. This was also an overhead we had to maintain. The solution wasn’t working as expected and we were running out of time.

We decided to go with an in-memory solution. Loki.js seemed like the best path to follow. But it would also mean depending on someone else’s code we don’t know well. Then we decided to settle on the simplest approach: plain array searching i.e Each time load the JSON into a Javascript array and search. Sometimes, the simplest solution is the best solution.

Designs

As the website revolved around dragons and their stories, the dark theme suited the most. We choose blue as the primary color as red, blue, and yellow are the color of fire.

Fonts used are

  • Playflair Display
  • Source sans pro