🤔My Underrated Nextjs Project 🔥
Tags: nextjs, webdev, javascript, programming
Published: 2023-10-21 03:39:00

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.

{% cta https://github.com/taqui-786 %}Follow me in Github{% endcta %}

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](https://itzmylink.vercel.app/). The site allows users to **create a personalized page** and add all their social media links in one place for easy sharing.

{% cta https://itzmylink.vercel.app/ %} Live DEMO {% endcta %}

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 :

![Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv4gxulr8fjgu6q033fy.jpeg)

## The Result✨

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiyvc3qf2o4vy2wau9da.jpeg)

## 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

![forms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89nk8upw3e84k0b7fcv2.jpeg)

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

![Mobile Mockup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ecma4onxm14l3x6dush.jpeg)
And there are various Background snippets with unique and Beautifull gradients.

![Gradient Buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogxzu2sv7dn3ph6jf0p1.jpeg)
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!

{% cta https://github.com/taqui-786 %}Follow me in Github{% endcta %}

## Happy Coding😊