🤔My Underrated Nextjs Project 🔥

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.

Follow me in Github

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.

Live DEMO

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.

The Editor :

The Result✨

Tech Stack i used 🛠 :

1. Nextjs
2. Shadcn Ui
3. Tailwindcss
4. Typescript
5. react-icons
6. Firebase ( for user image upload)
7. js-base64 (for decoding and encoding json data from url)
8. dnd-kit
9. 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!

Follow me in Github

Happy Coding😊