Introducing Hashtree - Link tree for all hashnode users โœŒ

Create an amazing linktree with your hashnode username!

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello Devs ๐Ÿ‘‹

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Little flashback

I was introduced to hashnode API few days backs, I was so excited and felt to make an app using the amazing hashnode graphql API.

The docs were easy to understand, I was a total beginner to the world of graphql. So, it took me some time to learn the graphql and it client works. I felt it comfortable to use Appolo than fetch. And yeah, after some weeks of learning, I was able to code Hashtree


Introducing Hashtree

lap (1).gif

Hashtree is a simple app that will generate an amazing fully responsive linktree for you to share on social media sites like Instagram, Twitter, Facebook, etc. It is so easy that you just have to tupe your hashnode username and select a theme, an amazing linktree will be generated for you! ๐Ÿ™Œ

Github Repo / Live Demo

๐ŸŽ‰ Features

So far, Hashtree is rich with the following features

  • Fully responsive
  • Multiple Themes
  • Lightning Fast
  • Great animations
  • Icon support
  • Super UI
  • PWA, Installable
  • Open Source, fully free to use

๐Ÿ’ป Built with

๐ŸŽธ Planning, Building, and Deploying

scrnli_3_27_2021_1-56-07 PM.png

As I said, hashnode API is the only source for the information. I got the data from the hashnode graphql API by following the code snippet.

query($username: String!) {
    user(username: $username) {
      _id
      name
      tagline
      photo
      publicationDomain
      socialMedia {
        twitter
        github
        stackoverflow
        linkedin
        google
        website
        facebook
      } 
    }
  }

and as the query variable, lets pass the username. Like this

{ "username": "saviomartin" }

this will perfectly work in the Hashnode API playground. Its that simple. So, to get the data in our app, I used appolo. It makes everything super easy to build up.

I also created components to make stop duplication, so here goes the code I used ๐Ÿ‘‡

query.js

import { gql } from "@apollo/client";

const USER = gql`
  query($username: String!) {
    user(username: $username) {
      _id
      name
      tagline
      photo
      publicationDomain
      socialMedia {
        twitter
        github
        stackoverflow
        linkedin
        google
        website
        facebook
      }
    }
  }
`;

export default USER;

Main.js

import React from "react";
import { useQuery } from "@apollo/client";
import USER from "./query";
import { useParams } from "react-router-dom";
import Header from "./components/Header";
import Link from "./components/Links";
import Footer from "./components/Footer";

const Main = () => {
  let params = useParams();

  const username = params.username;
  const theme = params.theme;
  const { loading, error, data } = useQuery(USER, {
    variables: { username }
  });
  if (loading)
    return (
      <div className={`loader flex ${theme}`}>
        <div class="spinner"></div>
      </div>
    );
  if (error) return <p>Something went wrong</p>;
  if (data) {
    return (
      <div className={`main flex ${theme}`}>
        <Header
          name={data.user.name}
          profileImg={data.user.photo}
          tagline={data.user.tagline}
        />

        <div className="helper flex">
          {data.user.socialMedia.twitter && (
            <Link
              linkTitle="Twitter"
              linkIcon="bxl-twitter"
              link={data.user.socialMedia.twitter}
            />
          )}
          {data.user.socialMedia.github && (
            <Link
              linkTitle="Github"
              linkIcon="bxl-github"
              link={data.user.socialMedia.github}
            />
          )}
          {data.user.socialMedia.linkedin && (
            <Link
              linkTitle="Linkedin"
              linkIcon="bxl-linkedin"
              link={data.user.socialMedia.linkedin}
            />
          )}
          {data.user.socialMedia.facebook && (
            <Link
              linkTitle="facebook"
              linkIcon="bxl-facebook"
              link={data.user.socialMedia.facebook}
            />
          )}
          {data.user.socialMedia.stackoverflow && (
            <Link
              linkTitle="Stackoverflow"
              linkIcon="bxl-stackoverflow"
              link={data.user.socialMedia.stackoverflow}
            />
          )}
          {data.user.socialMedia.google && (
            <Link
              linkTitle="Google"
              linkIcon="bxl-google"
              link={data.user.socialMedia.google}
            />
          )}
          {data.user.socialMedia.website && (
            <Link
              linkTitle="Website"
              linkIcon="bx-world"
              link={data.user.socialMedia.website}
            />
          )}
          <Footer />
        </div>
      </div>
    );
  }
};

export default Main;

Yeah, thats it. We'll now get the data and return our linktree. If we try to console the data it'll we like ๐Ÿ‘‡

{
    "user": {
        "__typename": "User",
        "_id": "5f9d514cb309125fbb61a2c1",
        "name": "Savio Martin",
        "tagline": "Focused on Frontend, love backend too",
        "photo": "https://cdn.hashnode.com/res/hashnode/image/upload/v1615368428147/TMHA5E7Gq.jpeg",
        "publicationDomain": "savio.xyz",
        "socialMedia": {
            "__typename": "SocialMedia",
            "twitter": "https://twitter.com/saviomartin7",
            "github": "https://github.com/saviomartin",
            "stackoverflow": "",
            "linkedin": "https://www.linkedin.com/in/saviomartin/",
            "google": null,
            "website": "https://savio.works/",
            "facebook": ""
        }
    }
}

I hope you now got an good understanding of how to use Hashnode graphql API

The data we have entered in our hashnode profile settings is the major source of information.

scrnli_3_27_2021_2-55-25 PM.png

If you want to edit your data, just go to your settings and edit it. Its so fast ๐Ÿš€

Feel free to try out: http://hashtree.vercel.app/

Star the repo โญ github.com/saviomartin/hashtree

Challenges

ChallengeSolution
Change different URLs without loadingUsed react-router-dom
Fast fetching dataused Appolo
Make the app 100/100 on PWA CheckOptimised app, solved errors
Responsiveness of the appUsed @media queries
Solving doubtsAsked in the hashnode discord server

โœจ๏ธ What's next

These are some of the features, I currently have in mind.

  • More themes
  • Set background image
  • Setting page, where you could edit your styles
  • Dark mode support

๐Ÿ›ก๏ธ Licensed under MIT


๐Ÿ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Hash tree. Feel free to use the app. Do not hesitate to share your feedback. Share on Twitter, tag me @saviomartin7

Star the repo โญ github.com/saviomartin/hashtree

๐ŸŒŽ Lets connect

๐ŸŽธ Feedback

Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews ๐Ÿ’–

๐Ÿ™Œ Support

My projects are fueled by coffees โ˜•, get one for me!

Sandeep Panda's photo

Nice write up and a great way to introduce someone to Hashnode API. Thanks for writing this! ๐Ÿ™Œ

Savio Martin's photo

Thanks a lot Sandeep Panda, Means a lot! I'm glad you loved this. Hashnode API is super amazing, lot more to learn. Thank you! ๐Ÿ’–

Rutik Wankhade's photo

This is really cool! Great job man๐Ÿ‘

Savio Martin's photo

Thanks a lot Rutik Wankhade, I'm happy you found it cool. Thanks for the amazing feedback! ๐Ÿ’–โœŒ

Marko Denic's photo

Nice. Love it. Well done, Savio.

Savio Martin's photo

Thank you Marko Denic, this is so amazing. I'm glad you loved this. Thanks for the feedback! ๐Ÿ’–

Prathima Kadari's photo

This is really amazing. Just tried them out. Thanks for sharing. Well written. Savio Martin ๐Ÿ‘

Savio Martin's photo

Thank you! Glad you loved it! ๐Ÿ’–

Benoรฎt Bourรฉ's photo

Nicely done! Didn't know Hashnode used GraphQL. I definitely will have a play with the API

Savio Martin's photo

That's so cool! I'm so glad you learned something new from my article. Can't wait to see your next project! Have a great day! ๐Ÿ’–

Kieran Roberts's photo

This is really cool! I didn't know there was a hashnode api. Nice one Savio Martin

Savio Martin's photo

Thank Kieran Roberts, I glad you found the article helpful. Thanks for your feedback! Appreciate it! ๐Ÿ‘

Code Hacker's photo

Hey awesome savio! Can you please please tell me how you make your cover images? They look so amazing! ๐Ÿš€๐Ÿš€๐Ÿ

Savio Martin's photo

Thanks, bro, I just design it in my own way! I mainly use canva or figma for this, Hope it helps!

Tapas Adhikary's photo

Savio Martin, Good one.

Savio Martin's photo

Thanks a lot Tapas Adhikary, I'm glad you loved it! Have an amazing day! ๐Ÿ’–

Mounick Raj's photo

Nice work

Savio Martin's photo

Thank you! Means a lot! ๐Ÿ™Œ

Varun Sridharan's photo

Great work my man ๐Ÿค 

Savio Martin's photo

Thanks a lot Varun Sridharan, Thank you! You're a true supporter of me, you are always supporting me from the beggining. I'm grateful to you!

Martin Thampi's photo

Great work! Enjoyed the article! ๐Ÿ‘

Savio Martin's photo

Thank you! Thanks a lot, Glad you found it helpful! ๐Ÿ’–

Anshu Meena's photo

its really amazing

Savio Martin's photo

Thank you! Means a lot, Glad you found it helpful! ๐Ÿ’–

Chris Achinga's photo

Wow this is cool, check mine out: hashtree.vercel.app/chrisdev/rocket-green

Savio Martin's photo

Wow ๐Ÿš€ Looks amazing! Glad you found it helpful!

Andrew Baisden's photo

Very interesting.

Savio Martin's photo

Thank you! Thanks a lot, Glad you found it helpful! ๐Ÿ’–

Soumik Pradhan's photo

Awesome! Thank for writing this.

Savio Martin's photo

Thank you! Thanks a lot, Glad you found it helpful! ๐Ÿ’–