Developer Resource Hub

Developer Resource Hub - Overview of Chainlink DevHub interface - Highlights comprehensive resources and tools for Chainlink developers, featuring essential resources, ensuring easy access to Chainlink's learning materials.
Project overview

DevHub is an excellent starting point for both beginners and experienced developers interested in using Chainlink's decentralised oracle network. It offers a wide range of resources, including tutorials, documentation, and video guides on using Chainlink's products and integrating smart contracts.

Our goal was to transform static Figma designs into dynamic, responsive Webflow pages, leveraging advanced front-end development and custom JavaScript solutions to deliver a seamless, high-performing digital experience.

Tasks
  • Step-by-step Figma to Webflow migration
  • Architect an advanced CMS structure
  • Create a set of resource type pages such as articles, tutorials, interviews, and more
  • Develop custom JavaScript functionality to enhance user experience and engagement
  • Develop custom front-end solutions for comprehensive UI
Tools
Webflow
Webflow
Finsweet
Finsweet
Figma
Figma
Solutions
Outcome
  • Developed the initial platform from scratch, migrating Figma designs into Webflow.
  • Utilized advanced front-end development and custom JavaScript to build a scalable platform with dynamic CMS capabilities.
  • Created a set of resource pages, such as articles, tutorials, and interviews, to enhance user engagement.
  • Implemented custom animations and mobile optimization to improve the user experience and simplify navigation.
  • Successfully launched the platform, which operated efficiently for about a year.
  • After a year of strong performance, we introduced version 2.0 with new features and a refreshed design.
  • Revamped the platform with a more intuitive layout, improved navigation, and refined visual style.
  • Version 2.0 is now live, delivering an enhanced user experience and reinforcing Chainlink’s commitment to innovation.

Solutions

Version 1.0

We implemented the homepage as the central navigation point of the Developer Hub, with a clean layout that guides users to key resources like product demos, tutorials, and events.

Version 1.0

We implemented the homepage as the central navigation point of the Developer Hub, with a clean layout that guides users to key resources like product demos, tutorials, and events.

Version 1.0

We implemented the homepage as the central navigation point of the Developer Hub, with a clean layout that guides users to key resources like product demos, tutorials, and events.

Version 1.0

We implemented the homepage as the central navigation point of the Developer Hub, with a clean layout that guides users to key resources like product demos, tutorials, and events.

Chainlink developer interface UI - Overview of the UI elements from the home page

Version 1.0

We implemented the homepage as the central navigation point of the Developer Hub, with a clean layout that guides users to key resources like product demos, tutorials, and events.

Chainlink developer interface UI - Overview of the UI elements from the home page

Database Architecture

We developed database architecture, significantly enhancing our ability to efficiently manage content across the Product and Type template pages using Webflow CMS.

CMS structure diagram for Chainlink QuickStarts - Illustrates data fields and relationships between entities such as products, sub-products, chains, use cases, types, and difficulties
CMS structure diagram for Chainlink QuickStarts - Illustrates data fields and relationships between entities such as products, sub-products, chains, use cases, types, and difficulties

Database Architecture

We developed database architecture, significantly enhancing our ability to efficiently manage content across the Product and Type template pages using Webflow CMS.

Database Architecture

We developed database architecture, significantly enhancing our ability to efficiently manage content across the Product and Type template pages using Webflow CMS.

CMS structure diagram for Chainlink QuickStarts - Illustrates data fields and relationships between entities such as products, sub-products, chains, use cases, types, and difficulties
CMS Template page for QuickStarts - Highlights the logic of dynamic content, including filtering, custom attributes, and layout controls to manage resources

Database Architecture

We developed database architecture, significantly enhancing our ability to efficiently manage content across the Product and Type template pages using Webflow CMS.

CMS structure diagram for Chainlink QuickStarts - Illustrates data fields and relationships between entities such as products, sub-products, chains, use cases, types, and difficultiesCMS Template page for QuickStarts - Highlights the logic of dynamic content, including filtering, custom attributes, and layout controls to manage resources

Database Architecture

We developed database architecture, significantly enhancing our ability to efficiently manage content across the Product and Type template pages using Webflow CMS.

CMS structure diagram for Chainlink QuickStarts - Illustrates data fields and relationships between entities such as products, sub-products, chains, use cases, types, and difficultiesCMS Template page for QuickStarts - Highlights the logic of dynamic content, including filtering, custom attributes, and layout controls to manage resources

Resources Hub

Our implementation strategy balances Webflow’s design flexibility with custom development, ensuring a scalable, maintainable platform that supports easy updates for new Chainlink features and resources. Filtration is effectively managed using a combination of the Finsweet library and custom-built solutions.

Chainlink Resource Hub interface - Showcases a scalable platform with filters for seamless navigation through Chainlink's resources and updates, featuring both desktop and mobile interfaces
Chainlink Resource Hub interface - Showcases a scalable platform with filters for seamless navigation through Chainlink's resources and updates, featuring both desktop and mobile interfaces

Resources Hub

Our implementation strategy balances Webflow’s design flexibility with custom development, ensuring a scalable, maintainable platform that supports easy updates for new Chainlink features and resources. Filtration is effectively managed using a combination of the Finsweet library and custom-built solutions.

Resources Hub

Our implementation strategy balances Webflow’s design flexibility with custom development, ensuring a scalable, maintainable platform that supports easy updates for new Chainlink features and resources. Filtration is effectively managed using a combination of the Finsweet library and custom-built solutions.

Chainlink Resource Hub interface - Showcases a scalable platform with filters for seamless navigation through Chainlink's resources and updates, featuring both desktop and mobile interfaces

Resources Hub

Our implementation strategy balances Webflow’s design flexibility with custom development, ensuring a scalable, maintainable platform that supports easy updates for new Chainlink features and resources. Filtration is effectively managed using a combination of the Finsweet library and custom-built solutions.

Chainlink Resource Hub interface - Showcases a scalable platform with filters for seamless navigation through Chainlink's resources and updates, featuring both desktop and mobile interfaces

Resources Hub

Our implementation strategy balances Webflow’s design flexibility with custom development, ensuring a scalable, maintainable platform that supports easy updates for new Chainlink features and resources. Filtration is effectively managed using a combination of the Finsweet library and custom-built solutions.

Chainlink Resource Hub interface - Showcases a scalable platform with filters for seamless navigation through Chainlink's resources and updates, featuring both desktop and mobile interfaces

Developer Hub at SmartCon 2023

At SmartCon 2023, Chainlink unveiled the DevHub, a central resource for developers within its ecosystem. The presentation highlighted its comprehensive tools, documentation, and support, all designed to empower developers building with Chainlink technology.

Developer Hub at SmartCon 2023

At SmartCon 2023, Chainlink unveiled the DevHub, a central resource for developers within its ecosystem. The presentation highlighted its comprehensive tools, documentation, and support, all designed to empower developers building with Chainlink technology.

Developer Hub at SmartCon 2023

At SmartCon 2023, Chainlink unveiled the DevHub, a central resource for developers within its ecosystem. The presentation highlighted its comprehensive tools, documentation, and support, all designed to empower developers building with Chainlink technology.

Developer Hub at SmartCon 2023

At SmartCon 2023, Chainlink unveiled the DevHub, a central resource for developers within its ecosystem. The presentation highlighted its comprehensive tools, documentation, and support, all designed to empower developers building with Chainlink technology.

Developer Hub at SmartCon 2023

At SmartCon 2023, Chainlink unveiled the DevHub, a central resource for developers within its ecosystem. The presentation highlighted its comprehensive tools, documentation, and support, all designed to empower developers building with Chainlink technology.

Version 2.0

After a year of strong performance, the website was redesigned with new features, a more intuitive layout, improved navigation, and a refined visual style to enhance user experience.

Comparison of old and new DevHub designs - Highlights updates in layout and navigation, with an emphasis on streamlined access to resources, demos, and use cases, featuring both introductory and in-depth content for developers
Comparison of old and new DevHub designs - Highlights updates in layout and navigation, with an emphasis on streamlined access to resources, demos, and use cases, featuring both introductory and in-depth content for developers

Version 2.0

After a year of strong performance, the website was redesigned with new features, a more intuitive layout, improved navigation, and a refined visual style to enhance user experience.

Version 2.0

After a year of strong performance, the website was redesigned with new features, a more intuitive layout, improved navigation, and a refined visual style to enhance user experience.

Comparison of old and new DevHub designs - Highlights updates in layout and navigation, with an emphasis on streamlined access to resources, demos, and use cases, featuring both introductory and in-depth content for developers

Version 2.0

After a year of strong performance, the website was redesigned with new features, a more intuitive layout, improved navigation, and a refined visual style to enhance user experience.

Comparison of old and new DevHub designs - Highlights updates in layout and navigation, with an emphasis on streamlined access to resources, demos, and use cases, featuring both introductory and in-depth content for developers

Version 2.0

After a year of strong performance, the website was redesigned with new features, a more intuitive layout, improved navigation, and a refined visual style to enhance user experience.

Comparison of old and new DevHub designs - Highlights updates in layout and navigation, with an emphasis on streamlined access to resources, demos, and use cases, featuring both introductory and in-depth content for developers

New homepage

We delivered an engaging experience with custom animations and interactive elements. A clean layout guides users to essential resources such as product demos, tutorials, and events, ensuring easy access to Chainlink's learning materials.

Overview of New homepage design - Highlights navigation for resources, testnet deployment, and events, with content tailored for developers at various experience levels
Overview of New homepage design - Highlights navigation for resources, testnet deployment, and events, with content tailored for developers at various experience levels

New homepage

We delivered an engaging experience with custom animations and interactive elements. A clean layout guides users to essential resources such as product demos, tutorials, and events, ensuring easy access to Chainlink's learning materials.

New homepage

We delivered an engaging experience with custom animations and interactive elements. A clean layout guides users to essential resources such as product demos, tutorials, and events, ensuring easy access to Chainlink's learning materials.

Overview of New homepage design - Highlights navigation for resources, testnet deployment, and events, with content tailored for developers at various experience levels

New homepage

We delivered an engaging experience with custom animations and interactive elements. A clean layout guides users to essential resources such as product demos, tutorials, and events, ensuring easy access to Chainlink's learning materials.

Overview of New homepage design - Highlights navigation for resources, testnet deployment, and events, with content tailored for developers at various experience levels

New homepage

We delivered an engaging experience with custom animations and interactive elements. A clean layout guides users to essential resources such as product demos, tutorials, and events, ensuring easy access to Chainlink's learning materials.

Overview of New homepage design - Highlights navigation for resources, testnet deployment, and events, with content tailored for developers at various experience levels

Advanced navigation

The new mega menu provides a clear and organized overview of all resources, ensuring quick and efficient navigation. For mobile, it adapts to an accordion-style layout for streamlined browsing, which we enhanced by custom JavaScript interactions.

Advanced navigation

The new mega menu provides a clear and organized overview of all resources, ensuring quick and efficient navigation. For mobile, it adapts to an accordion-style layout for streamlined browsing, which we enhanced by custom JavaScript interactions.

Advanced navigation

The new mega menu provides a clear and organized overview of all resources, ensuring quick and efficient navigation. For mobile, it adapts to an accordion-style layout for streamlined browsing, which we enhanced by custom JavaScript interactions.

Advanced navigation

The new mega menu provides a clear and organized overview of all resources, ensuring quick and efficient navigation. For mobile, it adapts to an accordion-style layout for streamlined browsing, which we enhanced by custom JavaScript interactions.

Advanced navigation

The new mega menu provides a clear and organized overview of all resources, ensuring quick and efficient navigation. For mobile, it adapts to an accordion-style layout for streamlined browsing, which we enhanced by custom JavaScript interactions.

Demos page

The Chainlink Demos page provide developers hands-on examples of Chainlink technology in a clean, interactive layout. We structured the content using Webflow’s CMS and integrated custom JavaScript solutions, enabling users to explore real-world integrations within decentralized applications.

Demos page

The Chainlink Demos page provide developers hands-on examples of Chainlink technology in a clean, interactive layout. We structured the content using Webflow’s CMS and integrated custom JavaScript solutions, enabling users to explore real-world integrations within decentralized applications.

Demos page

The Chainlink Demos page provide developers hands-on examples of Chainlink technology in a clean, interactive layout. We structured the content using Webflow’s CMS and integrated custom JavaScript solutions, enabling users to explore real-world integrations within decentralized applications.

Chainlink Community showcase - Displays projects built by the Chainlink community

Demos page

The Chainlink Demos page provide developers hands-on examples of Chainlink technology in a clean, interactive layout. We structured the content using Webflow’s CMS and integrated custom JavaScript solutions, enabling users to explore real-world integrations within decentralized applications.

Chainlink Community showcase - Displays projects built by the Chainlink community

Demos page

The Chainlink Demos page provide developers hands-on examples of Chainlink technology in a clean, interactive layout. We structured the content using Webflow’s CMS and integrated custom JavaScript solutions, enabling users to explore real-world integrations within decentralized applications.

Chainlink Community showcase - Displays projects built by the Chainlink community

Advanced filtering

We enhanced the filtering system with custom code for both desktop and mobile layouts, ensuring smooth navigation and allowing users to easily find resources by different criteria.

Resource Hub page in Webflow designer- Highlights structure and layout with filtering options for browsing the resources
Resource Hub page in Webflow designer- Highlights structure and layout with filtering options for browsing the resources

Advanced filtering

We enhanced the filtering system with custom code for both desktop and mobile layouts, ensuring smooth navigation and allowing users to easily find resources by different criteria.

Advanced filtering

We enhanced the filtering system with custom code for both desktop and mobile layouts, ensuring smooth navigation and allowing users to easily find resources by different criteria.

Resource Hub page in Webflow designer- Highlights structure and layout with filtering options for browsing the resources

Advanced filtering

We enhanced the filtering system with custom code for both desktop and mobile layouts, ensuring smooth navigation and allowing users to easily find resources by different criteria.

Resource Hub page in Webflow designer- Highlights structure and layout with filtering options for browsing the resources

Advanced filtering

We enhanced the filtering system with custom code for both desktop and mobile layouts, ensuring smooth navigation and allowing users to easily find resources by different criteria.

Resource Hub page in Webflow designer- Highlights structure and layout with filtering options for browsing the resources

Changelog

The Changelog page lists all updates, bug fixes, and new releases within the Chainlink ecosystem. We implemented efficient search and filtering features, making it easy for users to browse the latest changes and stay informed.

DevHub changelog page - Lists updates, minor releases, and bug fixes with options to filter, ensuring users stay informed on the latest changes and improvements
DevHub changelog page - Lists updates, minor releases, and bug fixes with options to filter, ensuring users stay informed on the latest changes and improvements

Changelog

The Changelog page lists all updates, bug fixes, and new releases within the Chainlink ecosystem. We implemented efficient search and filtering features, making it easy for users to browse the latest changes and stay informed.

Changelog

The Changelog page lists all updates, bug fixes, and new releases within the Chainlink ecosystem. We implemented efficient search and filtering features, making it easy for users to browse the latest changes and stay informed.

DevHub changelog page - Lists updates, minor releases, and bug fixes with options to filter, ensuring users stay informed on the latest changes and improvements

Changelog

The Changelog page lists all updates, bug fixes, and new releases within the Chainlink ecosystem. We implemented efficient search and filtering features, making it easy for users to browse the latest changes and stay informed.

DevHub changelog page - Lists updates, minor releases, and bug fixes with options to filter, ensuring users stay informed on the latest changes and improvements

Changelog

The Changelog page lists all updates, bug fixes, and new releases within the Chainlink ecosystem. We implemented efficient search and filtering features, making it easy for users to browse the latest changes and stay informed.

DevHub changelog page - Lists updates, minor releases, and bug fixes with options to filter, ensuring users stay informed on the latest changes and improvements

Tools

The Tools page lists the most popular and trusted tools for Chainlink development. By implementing a user-friendly layout, we ensured easy access to those tools, helping developers efficiently navigate and utilize resources within the Chainlink ecosystem.

DevHub Tools page - Lists the most popular and trusted tools for Chainlink development
DevHub Tools page - Lists the most popular and trusted tools for Chainlink development

Tools

The Tools page lists the most popular and trusted tools for Chainlink development. By implementing a user-friendly layout, we ensured easy access to those tools, helping developers efficiently navigate and utilize resources within the Chainlink ecosystem.

Tools

The Tools page lists the most popular and trusted tools for Chainlink development. By implementing a user-friendly layout, we ensured easy access to those tools, helping developers efficiently navigate and utilize resources within the Chainlink ecosystem.

DevHub Tools page - Lists the most popular and trusted tools for Chainlink development

Tools

The Tools page lists the most popular and trusted tools for Chainlink development. By implementing a user-friendly layout, we ensured easy access to those tools, helping developers efficiently navigate and utilize resources within the Chainlink ecosystem.

DevHub Tools page - Lists the most popular and trusted tools for Chainlink development

Tools

The Tools page lists the most popular and trusted tools for Chainlink development. By implementing a user-friendly layout, we ensured easy access to those tools, helping developers efficiently navigate and utilize resources within the Chainlink ecosystem.

DevHub Tools page - Lists the most popular and trusted tools for Chainlink development
No items found.

Outcome

  • Developed the initial platform from scratch, migrating Figma designs into Webflow.
  • Utilized advanced front-end development and custom JavaScript to build a scalable platform with dynamic CMS capabilities.
  • Created a set of resource pages, such as articles, tutorials, and interviews, to enhance user engagement.
  • Implemented custom animations and mobile optimization to improve the user experience and simplify navigation.
  • Successfully launched the platform, which operated efficiently for about a year.
  • After a year of strong performance, we introduced version 2.0 with new features and a refreshed design.
  • Revamped the platform with a more intuitive layout, improved navigation, and refined visual style.
  • Version 2.0 is now live, delivering an enhanced user experience and reinforcing Chainlink’s commitment to innovation.
Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline