Building a Web 3 Ecosystem: Chainlink and This Dot Labs Deliver a Comprehensive Resource for Developers

Open SourceAccessibilityUI Design

Overview

As the Web 3 ecosystem grows, so does the centralized resource to connect developers to the tools, technologies, and tutorials that will help them build decentralized applications.

To meet this need, Chainlink Labs, the leading provider of blockchain oracle solutions, teamed up with This Dot Labs to develop an open-source ecosystem map that provides a comprehensive snapshot of the available video, tutorials, softwares, and trainings for developers interested in growing their Web 3 knowledge.

The goal was to create a simple and fully responsive Web application that could scale to feature a large number of resources while also providing easy navigation and accessibility.

Services Provided

In collaboration with Chainlink Labs, This Dot Labs both designed and developed the Ecosystem Map application with the goal of delivering a product that could scale to feature a large number of resources while remaining simple to navigate, fully responsive, and accessible.

The Web application is intended to provide new and experienced users of the web 3 technologies with a complete list of resources needed to successfully learn, build, deploy and secure their dApp. The project is open source and its code and structure have been developed to encourage contribution from the community.

Tech-stack

NextJS: Used to develop our React application, deliver a server-side rendered version of our application, and increase SEO visibility.
Storybook: To be able to scope and split up components development, and speed up development.
Github Actions: Automatically build, test and deploy sites with new resources.
Figma: For interactive design.
SASS: For styles in conjunction with native CSS variables.

This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.

We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.

Chainlink labs client logo

Chainlink Labs is the leading provider of secure and reliable open-source blockchain oracle solutions, enhancing smart contracts by connecting them to a wide range of off-chain data sources and computations, such as asset prices, web APIs, IoT devices, payment systems, and more. We are dedicated to the development and integration of Chainlink as the standard decentralized oracle framework used by smart contracts across any blockchain.

Project Architecture

The main focus of the application was the ease of contribution and we have architectured the application from the ground app, starting from its Data structure, to ensure just that. Before the project was started, our Architects brainstorm different project structures and develop a blueprint of an application that balanced ease of development with a simple Data structure. The full site was built on top of a set of YAML files that define the resources and information shown. Our architecture team did this to simplify third party contributions, and enable site maintainers to easily add content.

web3-ecosystem-learn

Open Source Ready

At This Dot we know that making a project Open Source does not actually mean adding an open license and a half-baked README, but building a structure and support in any part of the application. Open Source for us means:

Easy to navigate and contribute: The file structure, development methodology and comments are just a few of the actions taken to allow people to contribute

Low entry curve: The site README is very well structured and provides all the information to really help anyone getting started with the application.

Automatic test pipeline: To ensure the integrity of the application, we have implemented a CI pipeline that ensures all changes proposed as PR is aligned with the site and do not produce any unwanted behaviour. This ensures the site is always up and fully working and reduces the risk of unexpected changes getting through the repo.

GitHub issue templates: At this Dot, we know that not all contributors are ready to develop, but this should not exclude them. To cater for this we have created a set of GitHub Issue templates that help people open bug reports and resource requests with just a few clicks.

code-editor

Accessibility

The Web is full of great resources, but not all of them are accessible. This Dot in cooperation with Chainlink has decided to invest their effort in making sure the map was fully accessible to everyone.

Each individual component is fully accessible, having been developed using Google Lighthouse, the AXA plugin, and official element documentation, to make sure that all expected element features were not only functional but clean and modern.

web3-ecosystem-secure

Summary

The Ecosystem Map application developed in collaboration between This Dot Labs and Chainlink Labs is an open-source resource that provides a comprehensive list of video tutorials, software, and training resources for developers interested in growing their Web 3 knowledge.

By utilizing modern web best practices and technologies such as React, NextJS, and Sass, our team designed and developed a fully responsive and accessible web application that is easy to navigate and contribute to.

The architecture of the application was designed to balance ease of development with a simple data structure, making it possible for third-party contributions and site maintainers to easily add content.

The application is also equipped with automatic test pipelines to ensure the integrity of the codebase and a set of GitHub issue templates to enable anyone to open bug reports and resource requests with just a few clicks.

We invite you to contact us if you are interested in developing a similar application or collaborating on a project.

Let's see how This Dot can help you

Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.

Get in touch