BioLink

A web application for creating a personalized link landing page, similar to Linktr.ee.
Supports authentication and easy customization of links and appearance.

Live Preview: https://fnyaoo.com
Editor Design Inspiration: Vercel OneLink Template

Features

• Centralized landing page for multiple links
• Authentication for managing links (/login)
• Settings page for editing links and appearance (/settings)
• Drag-and-drop reordering of links
• Image cropping and icon support

Tech Stack

• Next.js — React framework
• NextAuth.js — authentication
• Tailwind CSS — styling
• Framer Motion — animations
• DND Kit — drag-and-drop functionality
• React Color — color pickers
• React Dropzone & React Image Crop — image uploads and cropping
• Sharp — image processing

Environment Variables (.env)

NEXTAUTH_SECRET=random_string
NEXTAUTH_URL=http://localhost:3000

AUTH_USERNAME=admin
AUTH_PASSWORD=password

Run Instructions (with npm)

# 1. Install dependencies
npm install

# 2. Run the development server
npm run dev

# 3. Open in browser
http://localhost:3000

Build for Production

# Build the app
npm run build

# Start production server
npm start

Run with Docker

# Build and start container
docker compose up --build

# Stop containers
docker compose down

By default, the app will be available at:
http://localhost:3000

Pages

• Login: /login
• Settings: /settings (editor design inspired by Vercel OneLink Template)

Setting page preview