The all-new CryptoDevHub

Table of contents

Introduction

Today I’m excited to launch the next iteration of CryptoDevHub, a community-driven effort to catalog and curate the best resources for Web3- and Blockchain developers.

What started a little over a year ago as a GitBook with a few Markdown files and an empty Discord Server evolved into a thriving community of more than 5.000 Blockchain- and Crypto Technology enthusiasts eager to share, learn and help each other throughout the Blockchain development journey.

What’s new?

Let’s take a quick look at the changes and improvements that were made to the CryptoDevHub website which acts as the community Wiki to explore, share and curate relevant content.

Migrating from GitBook to Docusaurus to Next.js

As I wrote above, the very first version of CryptoDevHub was implemented as a simple GitBook hosted via a subdomain on wiki.cryptodevhub.io. The thinking back then was to get something out of the door as quickly as possible to gauge interest and iterate with the community on the content in a collaborative manner.

GitBook is a godsend for everyone who wants to launch a documentation-based website that automatically syncs to GitHub in a matter of minutes. Given its focus on documentation, it has some limitations with regards to customization which resulted in a migration from GitBook to Docusaurus, a React-based website builder that focuses on content-heavy sites like wikis, blogs and documentation.

Docusaurus was started at Facebook and is maintained by a very welcoming and active community of Open Source contributors. Given that it’s based on React, one of the most popular frontend frameworks out there, it’s easy to update, extend and host as a static site on CDNs.

As with GitBook, Docusaurus served the needs for the CryptoDevHub website pretty well over the last couple of months but there were quite a few “what if’s?” that kept nagging in the back of one’s mind.

• “What if we could integrate a news feed?”
• “How can we curate and serve the content better?”
• “Can we create easily shareable permalinks to content?”
• “How about an interactive job board that lists companies hiring in this space?”
• “Can we integrate a Crypto Wallet somehow?”

All those questions drove us to the decision to implement CryptoDevHub from scratch using Next.js while leveraging its powerful features such as Static Site Generation, Server-Side Rendering and Incremental Static Regeneration.

It only took 1 and 1/2 months to rewrite everything from scratch in Next.js and I’m more than happy with the results and options such an overhaul unlocked.

Splitting pages into individual content items

Early on, the content on CryptoDevHub was organized in pages centered around categories such as “Courses”, “Tutorials”, “Tools”, etc.

But very fast we figured that one piece of content can actually be part of multiple pages. Think about content such “Top 10 Smart Contract Security Tips”. This piece of content could be added to the “Security”, as well as the “Tools” page. But to which page should it be added? To either one of them or to both? How do we deal with the implied maintenance burden if we add it to both?

The solution is to split the pages and their content up into individual content items. Every piece of content becomes an own Markdown file. Multiple content items make up a page. With this approach redundancy isn’t an issue anymore as there’s now a “single source of truth” for every content item.

Curated lists

Given that pages were split up into individual content items, it’s now simpler than ever to create curated lists by selecting and including only the content relevant to the topic in question.

Implementation-wise this is done based on tags. Every content item has a list of tags such as “course”, “tool”, “library”, etc.

A utility functions allows the selection of content items based on such tags. Imagine that we want to create a list with all the Ethereum Tutorials in out “database” of Markdown files. To do this, we can select all the content items that have “ethereum” and “tutorial” in its tag list. The selection can be done based on the logical operators “and” and “or”, which makes everything even more flexible.

Better search

While content curation is great for exploration and user onboarding, a powerful full-text search is a must for power-users who want to find relevant content fast.

The new CryptoDevHub Search was implemented with Lunr.js, an easy-to-integrate, yet powerful client-side full-text search library.

Building a search index with Lunr.js is dead simple. Here’s a snippet from the official documentation that shows how easy it is:

const index = lunr(function () {
  this.field("title");
  this.field("body");

  this.add({
    title: "Lorem",
    body: "Lorem Ipsum.",
    author: "John Doe",
    id: "1",
  });

  this.add({
    title: "Dolor",
    body: "Dolor Sit Amet.",
    author: "Jane Doe",
    id: "1",
  });
});

const results = idx.search("lorem");

console.log(results);

Using Lunr.js with React Hooks lets you implement powerful and feature-rich client-side fulltext-search experiences.

Faster and snappier UI

Given that the CryptoDevHub rewrite leverages all the niceties Next.js has to offer, it’s now faster to load and snappier than ever.

This change is also reflected in a dramatic improve in our web.dev scores:

Conclusion

The CryptoDevHub website rewrite in Next.js was a fun and very successful experiment. While the initial versions based on GitBook and Docusaurus served us well in the beginning, we’re now well equipped to ship new functionalities and features that will help the next wave of developers to learn Blockchain- and Web3 development and land their dream job in Crypto.

Are you curious and want to learn more? Head over to CryptoDevHub to get started with Web3 development and join the official Discord Server to meet likeminded people. It’s 100% free.

P.S. There’s also the Twitter Account you can follow to stay up-to-date with what we’re up to.