Introducing Hashnode Card: Showcase awesome hashnode achievements

Generate awesome personalized cards which you can showcase to the community that contains all your awesome achievements on Hashnode

UpdatedSeptember 14, 2021

•2 min read•View as Markdown

Introducing Hashnode Card: Showcase awesome hashnode achievements

Ashik Chapagain

Index

Introduction
Demo
Features
Upcoming Features
FAQs
Credits

Introduction

Introducing unofficial Hashnode Card.

Live / Github

Hashnode card is a personalized card that you can showcase to the community that contains all your awesome achievements on Hashnode.

Demo

In this demo, I have created the card of the following hashnoders.

Features

Includes the data like name, blog handle, number of articles, number of impressions, number of followers, and number of followings.
Download the Card and share it with the world
Share the URL of the image

Upcoming Features

I am currently working on getting the user's badges. A few days from now all of the badges users have earned will be displayed on the card.

FAQs

Why data fetching is slow?
Hashnode API features a wealth of details, such as a multitude of impressions, followers, username, photo, and the number of individuals being followed. We also require a significant quantity of articles, which the hashnode API can not offer. I've also set up an infinite loop to grab every post the user wrote and tally up all of them. And if you have a lot of posts, it will take longer to load.
Why not Vercel?
As I utilized an endless loop to count all the postings, Vercel's restriction of 10s for the serverless request was a concern, thus I decided to host the site on Heroku.
Why isn't a custom domain displayed?
As you can see, I presented the hashnode subdomain because I am unsure whether the Hashnode API provides the custom domains of publications. As a result, I inserted the Hashnode provided subdomain.

Credits

Lalit for helping me for designing the UI of the Card and Homepage

#hashnode #community #developer #nextjs #2articles1week

675 views

Comments (13)

Join the discussion

Amit karki5y ago

Loved the concept mate!

Ashik Chapagain5y ago

Thanks

Lalit5y ago

Super cool app Ashik Chapagain. Thanks for including me in the demo 😁

Ashik Chapagain5y ago

Thanks for this comment and, for the design suggestion.

Favourite Jome5y ago

Cool project 👍

Ashik Chapagain5y ago

Thank you Favourite Jome

Shaima Haque5y ago

This is great!! 👏👏

Ashik Chapagain5y ago

Thanks

Victoria Lo5y ago

Cool one Ashik Chapagain! Thanks for featuring my blog as a card! Can't wait to use this somewhere, it's awesome!

P.S.: I can see that all the blog links are [username].hashnode.dev. But some of us like me and Tapas have custom domains so maybe looking into whether Hashnode API provide that info would be great :)

Ashik Chapagain5y ago

Thank you Victoria Lo, I looked over the Hashnode API, but it doesn't provide the custom domains.

Tapas Adhikary5y ago

Ashik Chapagain It has under the publication. I will get you that tomorrow. Now on mobile 😀

Ashik Chapagain5y ago

Tapas Adhikary I looked into the publication, the custom domain isn't there. But no worries, I have scraped the custom domain too. So, from now, the custom domain will be displayed if hashnoders has a custom domain for their publication. Tapas Adhikary Hashnode Card

Ashik Chapagain5y ago

Victoria Lo, Now, custom domains will get displayed, if the user has got a custom domain for their publication. Victoria Lo Hashnode Card

Tapas Adhikary5y ago

Ashik Chapagain, as Victoria Lo suggested... here it is,

query{
  user(username: "atapas"){
   publicationDomain
  }
}

Victoria Lo5y ago

Ashik Chapagain, cool! Thanks a lot 👏

Rutik Wankhade5y ago

This looks so good! 😍

Ashik Chapagain5y ago

Thank you.

Sahil Pabale5y ago

Great one Ashik Chapagain loved it so muchh!

Ashik Chapagain5y ago

Thanks

Shad Mirza5y ago

Wonderful ☺️

Ashik Chapagain5y ago

Thanks

Idris Olubisi5y ago

This is pretty awesome

Ashik Chapagain5y ago

Thanks

Ayodele Samuel Adebayo5y ago

Wow, this is so sweet, thanks for featuring me in the project demo 🙌🙌🙌

Well-done 🏆🏆🏆

Ashik Chapagain5y ago

Thank you and welcome

More from this blog

Using localStorage in React and Next.js

We can't directly access localStorage in React and Next.js. So, for that purpose, here is the custom react hook, that will allow you to access localStorage. import { useEffect, useState } from "react"; export function useLocalStorage<T>(key: string,...

Nov 15, 20221 min read181

Setup Remote Development Environment

Introduction If you're looking for shifting your work environment from local to remote machine, you're at the right place. In this article, I'll be sharing my experience of setting up a remote development environment. Topics We'll Cover Installing ...

Oct 23, 20226 min read64

Create your own Alternative to GitHub CodeSpaces

Setup Remote Dev Environment: Alternative to GitHub CodeSpaces

Jul 1, 20224 min read659

Create your own Alternative to GitHub CodeSpaces

React authentication using Auth0 and Hasura

In this article, we'll get to know the steps of authenticating a React application using Auth0 and Hasura, and we'll also build a Todo application using Apollo Client. Let's start by configuring Auth0. Configure Auth0 First head over to the auth0 da...

Mar 2, 20229 min read269