TheLazy.Dev
Portfolio GitHub

Blog

Stop using Linktree! Build your own 😎

avneesh0612

Avneesh Agarwal

Posted on August 22, 2021

Stop using Linktree! Build your own 😎

So today we are going to create an app where you can link all your social media accounts so people can connect with you on all social media platforms.

What are we building?

https://www.loom.com/share/2535312c245247e6ab4348e9400b0009

Setting up

Creating a Next app with TailwindCSS 

npx create-next-app -e with-tailwindcss links-app
Enter fullscreen mode Exit fullscreen mode

Cleanup

Delete everything in pages/index.js after the Head till the footer it should look like this

import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Starting the app 

npm run dev # npm
yarn dev # yarn
Enter fullscreen mode Exit fullscreen mode

Creating a Links component

We will create a components folder in the root of the directory and create a file Links.js.

image.png

Creating a functional component

I will create a functional component like this in the links file.

function Links() {
    return (
        <div>

        </div>
    )
}

export default Links
Enter fullscreen mode Exit fullscreen mode

We need to add 3 props image, text and link because we are going to reuse this component instead of pasting the same code again and again.

function Links({ image, text, link }) {
Enter fullscreen mode Exit fullscreen mode

We will now use the props and render out an anchor tag with an image and text

import Image from "next/image";

function Links({ image, text, link }) {
  return (
    <a href={link}>
      <Image width={40} height={40} src={image} alt={text} />
      <h2>{text}</h2>
    </a>
  );
}

export default Links;
Enter fullscreen mode Exit fullscreen mode

Rendering the Links

Now in index.js we will add the Links component with the props below the Head

<Links image="https://cdn.hashnode.com/res/hashnode/image/upload/v1611902473383/CDyAuTy75.png?auto=compress"
        link="https://avneesh0612.hashnode.dev/"
        text="Checkout my blogs on Hashnode"
      />
Enter fullscreen mode Exit fullscreen mode

After we add this we will see an error as we are using the optimized Next image.

image.png

We need to whitelist the domain in next.config.js.

  • So create a file next.config.js in the root of the project and add the following. 
module.exports = {
  images: {
    domains: ["cdn.hashnode.com"],
    },
};
Enter fullscreen mode Exit fullscreen mode
  • Now we need to restart the server and the error is not there anymore.
  • After following the steps you will be able to see this

image.png

Adding more links

I am adding these links

<Links
          image="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
          link="https://www.instagram.com/avneesh.codes/"
          text="Follow me on Instagram"
        />
     <Links
        image="https://cdn.hashnode.com/res/hashnode/image/upload/v1611902473383/CDyAuTy75.png?auto=compress"
        link="https://avneesh0612.hashnode.dev/"
        text="Checkout my blogs on Hashnode"
      />
        <Links
          image="https://cdn.iconscout.com/icon/free/png-512/discord-2474808-2056094.png"
          link="https://discord.gg/e3sDQjSnDK"
          text="Join my Discord server"
        />
        <Links
          image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/2048px-Octicons-mark-github.svg.png"
          link="https://github.com/avneesh0612"
          text="Look at my code on Github"
        />
        <Links
          image="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png"
          link="https://twitter.com/AvneeshAgarwa12"
          text="Follow me on Twitter"
        />
        <Links
          image="https://www.edigitalagency.com.au/wp-content/uploads/Linkedin-logo-icon-png.png"
          link="https://www.linkedin.com/in/avneesh-agarwal-78312b20a/"
          text="Connect with me on LinkedIn"
        />
        <Links
          image="https://icons-for-free.com/iconfiles/png/512/suitcase+work+icon-1320165848716624003.png"
          link="https://avneeshresume.netlify.app/"
          text="Checkout my resume"
        />
Enter fullscreen mode Exit fullscreen mode

These are all the links I need, feel free to add/remove/edit these links as you need.

  • Remember to add the domains you use for images to next.config.js. Here is all the domains I used- 
module.exports = {
  images: {
    domains: [
      "cdn.hashnode.com",
      "upload.wikimedia.org",
      "cdn.iconscout.com",
      "www.freepnglogos.com",
      "www.edigitalagency.com.au",
      "icons-for-free.com",
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

After doing the steps given you will see a page similar to this
image.png

Styling

Adding a background

The current background is white and boring so I will add a background image instead. I am getting an image from Unsplash You can use something else as well.
I am choosing this image.
background.png

In the main div of index.js I am going to add this background image and a className of bg-cover.

<div
 style={{
        background:
          "url(https://images.unsplash.com/photo-1517707711963-adf9078bdf01?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80)",
      }}
  className="flex flex-col !bg-cover items-center justify-center min-h-screen py-2"
>
Enter fullscreen mode Exit fullscreen mode

Styling the links

Right now with the background we cannot see the text properly so let's add some styles to the links. I am a big fan of glassmorphic design so here is a glassmorphic link-

  <a
    className="flex items-center w-full max-w-md cursor-pointer p-3 my-3 mx-auto rounded-md ring-[1px] ring-blue-300 backdrop-filter backdrop-blur-2xl bg-white bg-opacity-25 shadow-xl"
    href={link}
  >
Enter fullscreen mode Exit fullscreen mode

Adding a hover animation

transform hover:-translate-y-1 hover:scale-110 transition duration-200 ease-in-out
Enter fullscreen mode Exit fullscreen mode

If you add these classes to the anchor tag you will get a nice scaling animation on hover.

https://www.loom.com/share/85becf4fac1345c384f36ac226cf6f7b

Finally, we will add some styles to the text

<h2 className="ml-3 text-xl font-semibold md:ml-6">{text}</h2>
Enter fullscreen mode Exit fullscreen mode

Opening the links in another tab

Currently, the link is opening in the same tab as the app. Opening the links in a new tab will be a much better experience for the user. By adding these two attributes the link will open in a new tab.

    <a
      className="flex items-center w-full max-w-md cursor-pointer transform hover:-translate-y-1 hover:scale-110 transition duration-200 ease-in-out p-3 my-3 mx-auto rounded-md ring-[1px] ring-blue-300 backdrop-filter backdrop-blur-2xl bg-white bg-opacity-25 shadow-xl"
      href={link}
      rel="noreferrer"
      target="_blank"
    >
Enter fullscreen mode Exit fullscreen mode

Adding an avatar and name above all the links

Above all the link tags I will add this div containing my image and name.

      <div className="flex flex-col items-center justify-center mt-5">
        <Image
          width={200}
          height={200}
          className="mx-auto rounded-full"
          src="https://res.cloudinary.com/dssvrf9oz/image/upload/v1625825953/Avneesh_Avatar_gukdsk.png"
          alt="Avneesh Agarwal"
        />
        <h2 className="my-3 text-3xl font-bold text-center text-indigo-900 md:text-4xl">
          Avneesh Agarwal
        </h2>
      </div>
Enter fullscreen mode Exit fullscreen mode

Congratulations! πŸ₯³πŸŽ‰ You have created your custom links app. Now you can share it with your friends, add it to your blogs, and many more.

If you managed to create your links app feel free to style it in your own way and drop the links in the comments. Here is mine.

Useful links -

GitHub repo

NextJS docs

Tailwind docs

Connect with me

πŸ’– πŸ’ͺ πŸ™… 🚩
avneesh0612
Avneesh Agarwal

Posted on August 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.
ai I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.

November 28, 2024

If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.
undefined If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.

November 28, 2024

The best way to get better at writing code is...
development The best way to get better at writing code is...

November 28, 2024

AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)
githubcopilot AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)

November 29, 2024

GIT Interview Questions & Answers
git GIT Interview Questions & Answers

November 29, 2024