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.
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
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.
- 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).
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.
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