Introduction
This project was a portfolio website for selling NFT dragons on OpenSea. The platform showcases the myths and stories surrounding dragons while featuring a gallery of 10,000 NFTs, complete with search and filter functionality for users to explore.
Problem Statement
The client required a website that met the following goals:
- Super-fast performance with no loading spinners.
- Global accessibility with consistent performance across regions.
- Elegant, easy-to-navigate user interface.
- Rapid delivery to meet an urgent launch deadline.
Research
The decision was made to build the site as a static application to inherently achieve performance, security, and SEO benefits.
Tech stack
- Gridsome (Vue.js framework): Selected for its simplicity and familiarity, despite being less maintained than alternatives like Nuxt.js.
- Tailwind CSS: Used to quickly translate Figma design systems into production-ready CSS.
- AWS Amplify: Chosen for deployment due to its ease of setup, scalability, and built-in CI/CD capabilities. Two environments were deployed:
- tdht.club (production site)
- dev.tdht.club (staging site)
Storage
The project had unique challenges due to the large number of NFTs:
- Assets: Website images were optimized with Gridsome’s built-in progressive image system, enabling real-time resizing and cropping.
- NFT Gallery: 10,000 images were compressed, resized, and uploaded to AWS S3.
For the search functionality without a backend or database:
- Initially, data was stored in IndexedDB using Dexie.js, but testing revealed delays—loading JSON data (~3 seconds) and inserting into IndexedDB (~10+ seconds).
- While the system cached data to speed up future searches, it introduced significant overhead.
- Due to time constraints, the solution required trade-offs, balancing performance and delivery deadlines.
Designs
The design reflected the mythical and fiery nature of dragons:
- Theme: Dark mode with blue as the primary color, complementing fire tones (red, blue, yellow).
- Typography:
- Playfair Display for headings
- Source Sans Pro for body text
Challenges & Solutions
Challenge 1: Handling 10,000 NFT Assets
- Managing a large number of images while maintaining fast load times and accessibility was a major hurdle.
- Solution: All NFT images were compressed, resized, and stored on AWS S3, ensuring optimized delivery and minimal latency.
Challenge 2: Implementing Search Without a Backend
- The client’s requirement for a static site meant no database or backend server could be used. Implementing search and filtering across 10,000 NFTs was complex.
- Solution: Initially, IndexedDB with Dexie.js was used to handle local storage of NFT metadata. However, tests showed that loading the JSON (~3 seconds) and inserting into IndexedDB (~10+ seconds) was too slow. The approach was refined by caching data changes and optimizing JSON handling to reduce load times while still supporting search and filtering.
Challenge 3: Deadline-Driven Delivery
- The project had a tight schedule with a requirement for a fully functional platform to go live quickly.
- Solution: AWS Amplify was chosen for deployment, enabling rapid setup, CI/CD integration, and scaling without added infrastructure complexity. Two parallel environments (production and staging) helped speed up testing and iteration.
Conclusion
The Dragon NFT portfolio was developed and launched within the required timeline, delivering a fast, globally accessible, and visually immersive experience aligned with the mythology of dragons. Despite technical challenges around search functionality and asset management, the solution balanced performance with delivery speed. The project was later discontinued by the client.