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.
The Editor :
The 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!
Top comments (0)