Most link-in-bio tools rely on centralized backends, user accounts, and persistent databases. This creates several architectural drawbacks:
- Stateful infrastructure: User data is stored server-side, requiring authentication, databases, and APIs.
- Operational overhead: Hosting, migrations, backups, and security hardening are mandatory even for simple use cases.
- Poor portability: Links are bound to a platform. Data cannot be reconstructed without the original backend.
- Cold-start latency: Server round-trips are required before meaningful UI can be rendered.
- Limited shareability: A link is only a pointer to data, not the data itself.
For a tool whose primary responsibility is to display structured links, this architecture is disproportionate.
Solution
Onelink adopts a URL-as-state architecture where the entire application state is encoded directly into the URL. The application becomes a pure client-side state interpreter, eliminating backend dependencies entirely.
High-Level Architecture
Core Principles
- Stateless Application Design
- No backend APIs
- No database
- No authentication layer
- No server-side sessions
- URL-Driven State
- Application data (links, ordering, metadata, theme) is:
- Serialized → JSON
- Encoded → Base64 (js-base64)
- Embedded → URL query/hash
- The URL becomes the single source of truth.
- Deterministic Rendering
- UI is a pure function of URL state: UI = f(URL_state)
- Reloading, sharing, or opening on another device yields the same result.
Data Flow
- User Interaction
- User adds, edits, reorders links (via vuedraggable).
- State Mutation
- State is maintained in-memory using Vue reactivity.
- Serialization
- State → JSON → Base64 string.
- URL Sync
- Encoded payload is written to the URL without reload.
- Hydration
- On page load, the app decodes the URL and reconstructs the UI.
Technical Stack Breakdown
Framework & Rendering
- Nuxt 3 (SPA + SSG)
- nuxt generate produces a fully static output.
- Zero server logic at runtime.
- Vue 3 Composition API
- Clean separation between:
- state encoding/decoding
- UI components
- interaction logic
State Encoding
- js-base64
- Compact, URL-safe encoding of structured data.
- Avoids server persistence while keeping links shareable.
UI & Interaction
- Tailwind CSS
- Utility-first styling with zero runtime overhead.
- @headlessui/vue
- Accessible, unopinionated UI primitives.
- vuedraggable
- Drag-and-drop ordering mapped directly to encoded state.
- @vueuse/core
- Reactive utilities for URL syncing, effects, and lifecycle handling.
Theming
- @nuxtjs/color-mode
- Theme preference integrated into encoded state rather than local storage.
Deployment Architecture
- Deployed as pure static assets on Vercel.
- CDN-backed, globally cached.
- No runtime compute, no cold starts, no backend failures.
Results
Architectural Outcomes
- Zero Backend Cost
- No servers, databases, or APIs to maintain.
- Infinite Scalability
- Traffic scales linearly via CDN.
- Instant Load Times
- No network dependency beyond static assets.
- Maximum Portability
- The URL is the product.
- Failure-Resilient
- No backend means no backend outages.
Trade-offs (Explicitly Accepted)
- URL length constraints impose an upper bound on state size.
- State is human-readable if decoded (privacy-by-design is not a goal).
- No multi-user or collaborative features (by architectural choice).
Architectural Summary
Onelink demonstrates a radically stateless frontend architecture, where:
- URLs act as a distributed, user-owned datastore.
- The frontend behaves as a deterministic state renderer.
- Infrastructure complexity is intentionally collapsed to zero.
This project explores how far modern frontend tooling (Nuxt + Vue + SSG) can be pushed when state, persistence, and portability are unified into a single primitive: the URL.