How to Build a Social Media Profiles Showcase Website with Next.js, Shadcn Ui and TailwindCSS

Hello Guys, My name is Md Taqui Imam, i am a Full Stack Web Developer. And don't forget to Follow me in Github for Cool projects.

So today in this Blog post, we will go over how to create a simple but effective social media profiles showcase website like ItZmyLink.com. The site allows users to create a personalized page and add all their social media links in one place for easy sharing.

We will be using the popular React framework Next.js for routing and rendering, Styled Components for CSS-in-JS styling and TailwindCSS for utility-first classes.

Editor:

Result:

Tech Stack i used :

• Nextjs

• Shadcn Ui

• Tailwindcss

• Typescript

• react-icons

• Firebase ( for user image upload)

• js-base64 (for decoding and encoding json data from url)

• dnd-kit

• Vaul

System design of App⚙

The system design if app is very simple , I take data from the user with this forms

And with useContext() hook updating the data and rendering in this mobile mockup. Like the photo editor.

And there are various Background snippets with unique and Beautifull gradients.

And there are button to publish the single-page portfolio you edited.

And a Demo button to see the Demo.

When the User enter Data the fields they are stored in this form:

interface LinkProps {
  n: string; //Name
  i: string; // image
  a: string; //About
  bg: string; //Background
  fb: string; //facebook
  ig: string; //instagram
  tg: string; //telegram
  em: string; //email
  tw: string; //twitter
  lk: string; //linkedin
  yt: string; //youtube
  gt: string; //github
  wh: string; //whatsup
  ls: AdditionalLinkProps[]; // Additional Forms
}

After getting the Data when the user Enter Publish Button i encode this object:

import { encode, decode } from 'js-base64';

export const encodeData = (obj: any): string => {
  return encode(JSON.stringify(obj));
};

export const decodeData = (base64: string): any => {
  return JSON.parse(decode(base64));
};

And pass the encoded data into the URL like this:

http://localhost:3000/1?data="Encoded Data of User"

Same process for Decoding also.

For Deployment

Deploy to Vercel for automatic routing,caching and optimization.

Conclusion

Recap how we built the site and discuss possible improvements like authentication, real data etc.

This covers the basic structure and steps to replicate itZmyLink using a modern Jamstack approach. Let me know if any part needs more explanation!

Happy Coding😊