🎨 Bio Builder

---

✨ Overview

Bio Builder is a cutting-edge, open-source application designed to empower users to create beautiful, responsive, and highly functional "Link-in-Bio" pages. Whether you're a creator, influencer, business, or developer, Bio Builder provides the tools you need to aggregate your digital presence into one cohesive hub.

Built with performance and aesthetics in mind, it leverages the latest web technologies to ensure your bio page is not just a list of links, but a full-fledged experience.

Note: The builder now uses an MDX-first content format.
JSON clients have been removed in favor of MDX.

🚀 Key Features

🎨 Visual Drag-and-Drop Builder

Effortlessly construct your page. Drag blocks to reorder, click to edit, and see your changes instantly with our real-time preview.

🧱 Extensive Block Library

Go beyond simple links. Our rich library of content blocks includes:

• Media: 🎵 Music Players, 📹 Video Embeds, 🖼️ Image Galleries
• Social: 🐦 Social Feeds, 💬 Chat Integration, 📱 Share Buttons
• Monetization: 💰 Donations, 🏷️ Product Showcases, 💎 NFT Displays, 💳 Pricing Tables
• Utility: 🗺️ Maps, 📅 Calendly Integration, ⏱️ Countdowns, ❓ FAQs
• Dev-Friendly: 💻 Code Blocks, 🐙 GitHub Repos

💅 Advanced Customization

Make it yours. Control every pixel:

• Themes: Choose from professionally designed presets or create your own.
• Typography: Access a wide range of Google Fonts.
• Backgrounds: Solid colors, gradients, or animated patterns.

⚡ Modern Tech Stack

• Framework: React 19
• Build Tool: Vite
• Styling: Tailwind CSS v4
• State Management: Zustand
• Drag & Drop: dnd-kit
• Animations: Framer Motion

🛠️ Getting Started

Follow these steps to get a local copy up and running.

Prerequisites

• Node.js (v18 or higher)
• npm, pnpm, or yarn

Installation

1. Clone the repository

   git clone https://github.com/aminegames125/bio-builder.git
   cd bio-builder

2. Install dependencies

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Start the development server

   npm run dev

4. Open your browser
   Navigate to http://localhost:5173 to start building!

📂 Project Structure

src/
├── components/      # 🧩 Reusable UI components and Blocks
│   ├── backgrounds/ # 🎨 Background pattern components
│   ├── blocks/      # 🧱 Individual content blocks (Links, Maps, etc.)
│   └── ui/          # 💅 Core UI elements (Buttons, Inputs, Modals)
├── pages/           # 📄 Route components (Builder, Preview, ClientPage)
├── utils/           # 🛠️ Helper functions, mappers, and hooks
└── App.tsx          # 🚦 Main application entry and routing

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

---