Onelink: An Experimental Link-in-Bio Tool with Data in the URL

Introduction

Onelink is an experimental link-in-bio tool where all the data lives directly within the URL. This innovative approach, built with Vue.js and leveraging Nuxt 3, allows for a serverless and highly portable personal profile page. The project encodes user data into a compact base64 string, which is then used as a query parameter in the URL.

While the URL can become quite long due to the embedded data, the project suggests using a link shortener like dub.co for convenience.

Installation

To set up Onelink locally, follow these steps:

First, install the project dependencies using your preferred package manager:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000:

npm run dev

Production

Build the application for production:

npm run build

Locally preview the production build:

npm run preview

For more information on deployment, refer to the Nuxt 3 deployment documentation.

Examples

Onelink demonstrates its functionality through a live demo where a user's profile information is embedded in the URL. The data, such as name, description, social links, and custom links, is converted into a compact base64 string. The project aims to keep the JSON keys as small as possible to minimize URL length.

Here's a demo page showcasing this concept:
Onelink Demo Page with Data

You can also explore the base demo without specific data:
Onelink Base Demo

Why Use Onelink?

Onelink offers a compelling alternative for creating link-in-bio pages, especially for developers who appreciate:

• Data Portability: Your profile data is entirely self-contained within the URL, making it highly portable and independent of any backend service.
• Serverless Simplicity: No database or server infrastructure is required, simplifying deployment and maintenance.
• Experimental Innovation: It provides a fascinating case study in how much data can be efficiently stored and retrieved directly from a URL.
• Vue.js Foundation: Built with Vue.js and Nuxt 3, it leverages modern frontend technologies for a responsive and dynamic user experience.

Links

• GitHub Repository: fayazara/onelink
• Live Demo: Onelink Base Demo