BioStack

Inspiration

As an active user of social media platforms, I noticed how influencers often struggle to manage and share all their important links, like Instagram, YouTube, Twitter, brand collaborations, personal websites, and more. Most platforms only allow a single link in bios, leading to messy workarounds. This sparked the idea for "BioStack" - a clean, customizable, and centralized tool that helps influencers stack all their links in one easy-to-share page.

What it does

BioStack is a platform designed for influencers and creators to create a personalized page that showcases all their social media profiles and important external links in one place. Users can customize their BioStack page with profile images, link titles, and themes to match their personal brand. With a single shareable URL, they can easily direct followers to all their content, while managing and updating links in real time through a user-friendly dashboard.

How we built it

We built BioStack using a modern and efficient tech stack that streamlined both development and performance. The process began with setting up a fast development environment using Vite, which also handled optimized production builds. React.js was used to build a dynamic, component-based user interface, while React Router v6 managed smooth page-to-page navigation. For styling, we implemented Tailwind CSS, which allowed rapid development of a responsive and utility-first layout. Drag-and-drop functionality was added using @dnd-kit/core, enabling users to reorder their links intuitively. To enhance the visual interface, we integrated Lucide-react for clean and customizable icons. Throughout the development, TypeScript was used to ensure type safety and maintain code quality, making the application more robust and scalable.

Challenges we ran into

We faced several challenges while developing BioStack, particularly around state management for drag-and-drop, where keeping the UI state synchronized with reordered data was complex due to React’s re-render behavior. Making the drag-and-drop interface fully responsive on mobile required additional CSS tuning and thorough interaction testing. Validating user input to ensure only proper URLs were accepted, without disrupting the user experience, also added complexity. Additionally, we had to make deliberate UX decisions to balance customization options with a minimal and intuitive interface, which involved careful consideration of user flows and interface simplicity.

Accomplishments that we're proud of

We successfully implemented a smooth drag-and-drop experience using @dnd-kit, allowing users to reorder their links effortlessly. The UI was designed to be clean and fully responsive using Tailwind CSS, all within a short development cycle. We delivered a fully functional MVP with core features specifically tailored to the needs of influencers and creators. Throughout the build, we maintained a modular, readable, and scalable code architecture to support future growth and ease of maintenance.

What we learned

Through building BioStack, we gained valuable hands-on experience with @dnd-kit, particularly in managing item reordering within React’s state-driven architecture. We also enhanced our understanding of structuring performant React projects using Vite, which improved both development speed and build optimization. Designing user-friendly workflows for link management helped us focus on intuitive UX, while working with Tailwind CSS deepened our skills in creating responsive interfaces and managing real-time UI state updates effectively.

What's next for BioStack

Looking ahead, we plan to enhance BioStack with several key features to improve functionality and user experience. User authentication will be added using JWT or services like Clerk to enable secure login and signup. For persistent data storage, we aim to integrate a cloud backend using MongoDB or Supabase. Real-time analytics will allow users to track link click statistics and gain insights into engagement. We also plan to expand customization options by enabling users to modify fonts, colors, and layouts. Public shareable URLs with custom slugs will make it easier for users to promote their BioStack pages. Additionally, we envision a premium tier offering pro features like scheduled links, advanced analytics, and branding tools for creators looking to elevate their online presence.

Built With

• dnd-kit/core
• javascript
• react
• tailwindcss
• typescript
• vercel