The Tech Stack at KodaDot
We know that making your first contribution to KodaDot can be quite an overwhelming task, especially if one isn’t already familiar with application frameworks and technologies used in the web3 ecosystem. Hence, we thought it was about time to write an introductory text on all the services we rely on to keep our platform up and running. As will not have time to cover each of the topics in detail, we at least want make sure to provide you with all of the relevant resources to delve further into the respective subject. Think of this article as sort of a high-level overview to lower the barrier of entry to developers new to the project. This following content should aid them in getting familiar with the infrastructure behind the platform and to get a grip on the jargon used throughout our communication channels.
NuxtJS
Our frontend framework of choice is called NuxtJS, which in its essence is an abstraction layer on top of VueJS, with the goal making the process of creating a web application more simple and straight-forward. In addition to the extensive API already provided by VueJS, Nuxt offers handy features such as the ability to easily setup your project as an SPA, statically generated or server-side rendered application, additional lifecycle hooks (e.g. `asyncData()`) in combination with specialised views , and a vast collection of community modules such as nuxt/i18n and nuxt/pwa.
@Component({
async asyncData({ app, $config, params }) {
const res = await app?.apolloProvider?.query({
query: queryGql,
variables: {
id: params.id
},
})
return {
data: res.data,
total: res.total,
}
}
})The framework can be beneficial for communication in larger teams, since its project and code structure is very opinionated (e.g. SFCs should be placed in its designated `/components` subfolder). This also enables new developers to quickly familiarise themselves with the codebase, as programming patterns and naming conventions tend to stay the same across different projects.
Since we only transitioned to NuxtJS very recently, there is still much work to do in terms of refactoring our code such that it utilises all the awesome features mentioned above. Don’t hesitate to help us in this regard. If you already happen to be familiar with frameworks such as AngularJS or ReactJS, then you will find your way around the codebase in no time. Make sure to check out our Style Guide before you make your first contribution!
In the upcoming months, and once a stable release has been made publicly available, we plan on moving to Nuxt 3 which will take both user and developer experience to the next level. In the meantime, we are already partially adapting our code to the upcoming architectural changes through the implementation of Nuxt Bridge. Though, introducing certain features such as Vite turns out to be harder than expected.
Indexers
In order to access indexed and queryable blockchain data, many dApps in the Polkadot ecosystem rely on services such as SubQuery. It markets itself as an open-source API that aims to simplify the operational complexity of running a web3 platform by eliminating the overhead of building a custom backend for one’s Polkadot, Substrate, and Avalanche project. Its fast indexing and sync times allows for reliably receiving and delivering up-to-date information.
At KodaDot we depend on a custom implementation of the Subquery indexer as our primary API for the RMRK implementation. When querying data from the indexer, requests are made via GraphQL. Developers should note that made to the indexing logic are made in a separate repository.
While SubQuery positions itself as a stable and convenient API for general use cases, once the need for more complex queries arises, services like SubSquid can provide higher flexibility in this regard while also permitting the use of external calls such as fetching metadata from IPFS. Furthermore, its super fast reindexing enables a much smoother developer experience. Unfortunately, as for right now, the service is still in its alpha stages and should be implemented with special care. Nonetheless we are in the midst of discussing using SubSquid as our default indexer. For more infos about how the two APIs diverge, check out this splendid slide deck.
Serverless Functions
As the projects keeps growing, it has become apparent that simple administrative tasks such as bounty payouts and handling pull requests start to demand a considerable amount of time. Furthermore, after collecting feedback in our dev calls we realised that for us to effectively scale in the long term while still remaining a highly agile community, we need to create a fair space for contributors in regards to issue assignment and coordination. For this purpose, we have spent some time experimenting with Autocode to automate some of these tasks. You can read up further about the current release of our very own KodaBot right here, which at the time of this writing is up and running in our production enviroment. While is only in its early stages of development, the tool is already able to handle issue assignment and bounty payouts. Every 10 paid PRs it creates an updated version of our Leaderboard. Additional Cloudflare Workers are used for pinning and image upload purposes.
Any additional tasks which need to be handled by a dedicated server instance are executed via serverless functions. This allows us to abstract server-side logic into isolated functions which can be accessed via API endpoints. This includes tasks such as receiving keys and pinning.
Infrastructure Providers
For hosting purposes we utilise Netlify on our test environment Cloudflare Pages in production, as both services allow us to statically host our website without the need for a complex backend architecture. During deployment, all pages are prebuilt and pushed to a global edge network through which content is delivered to users from the nearest network node. This approach of hosting optimises for page speed and keeps infrastructure costs very low. All dynamic content such as NFT data and images are then only fetched on demand through decoupled APIs and services.
Storage
In regards to data storage, KodaDot strives to rely on decentralised solutions as much as possible. Us being a platform in the NFT ecosystem, it comes without saying that we heavily rely on IPFS as the backbone for the services we aim to provide. Since we need to ensure data persistence for the NFTs minted through KodaDot, we are using Estuary as a pinning service.
While its network provides us with a solid and efficient way to persistently store and retrieve all the media and metadata related to a specific NFT, we don’t actually want to fetch the raw assets from the nodes of aforementioned network. Hence, we use one of our Workers to periodically push a copy of all newly pinned images to Cloudflare Images, from which we can then retrieve an optimised version of said image to be rendered on the client. This setup significantly reduced our bandwidth usage and further improved the average page load time for of our users.
As an alternative to IPFS, we allow users to mint their NFTs using Permafrost which uses Arweave under the hood. For a single upfront fee, the protocol allows creators to permanently store their artwork on disk space provided by other users of the network. If you want to read up further on the topic, you can check out one of our recent articles.
Packages
Given you are an active contributor to our codebase, you will have certainly come across several packages specific to the KodaDot ecosystem. Take for instance our vuex-options module, which introduces several handy vuex properties to boost developer efficiency. Frequently required options such as available languages, nodes and cryptographic modes are now exposed through this easily accessible abstraction layer. Another package called sub-api provides a singleton wrapper for the Substrate API.
Wrapping Up
We hope this introductory article could give you the insights and pointers you need to start your development journey on the KodaDot platform. If you need any additional help or just want to chat about the project, we are more than happy to welcome you into our Discord community. Don’t forget to read our contributing guidelines before you get started.
Happy coding!
We are hiring — you and your friends
As a growing team, we need to hire social capital to render our vision true. You and your friends can be part of it. Let us know if you know someone who would like to contribute to open-source web3 projects and change the world.
Open Roles
- Frontend Developers (Vue2 + Vue3)
- Rust developer (parachain Dev & Ops & ink! smart contracts)
- Technical Product Manager
- COO
- UI/UX Designer
- Creative Director
- Developer Advocate
- Technical Writer
- Growth & Ops
