🚀 LinkBoard

A modern, full-stack "link in bio" web application for creating personalized landing pages with interactive link management.

Live Demo • Features • Installation • Database • Roadmap

---

🌟 Overview

LinkBoard is a sophisticated full-stack web application that empowers users to create professional, personalized landing pages for sharing multiple links. Perfect for social media influencers, content creators, freelancers, and professionals who need a single destination for all their important links.

With an intuitive dashboard interface, users can seamlessly manage their profile, customize their appearance, and organize links—all with real-time preview capabilities and responsive design.

✨ Key Highlights

• 🔐 Secure Authentication with password hashing and JWT-based sessions
• 📱 Fully Responsive design for mobile, tablet, and desktop
• ✨ Smooth Animations powered by Framer Motion
• 🎨 Beautiful UI with Tailwind CSS 4 and modern gradient effects
• 🔗 Link Management with instant preview updates
• 👤 Custom Profiles with bio and profile images
• 🌐 SEO-Friendly public profile pages

🌐 Live Demo

• Production: Link to the deployed application

🔥 Features

🛡️ User Authentication

• Secure registration and login with NextAuth.js
• Password hashing with bcrypt (10-round salt)
• Persistent JWT-based sessions
• Protected routes for authenticated users only

📊 Dashboard Management

• Intuitive interface for managing profile and links
• Real-time form validation
• Visual feedback for user actions
• Mobile-optimized controls
• Instant save functionality

👤 Profile Customization

• Custom username (unique identifier)
• Profile picture upload support
• Bio/about section
• Personalized branding

🔗 Link Management

• Add, edit, and delete links with ease
• URL validation (HTTPS protocol required)
• Link titles for organization
• Unlimited link capacity

👁️ Real-time Preview

• Live preview modal of public profile
• WYSIWYG editing experience
• Mobile preview option
• Instant update reflection

🛠️ Technologies Used

Frontend Stack

Technology	Category	Purpose
Next.js	Framework	React framework with App Router support
React	Library	UI library for building interactive components
Tailwind CSS	Styling	Utility-first CSS framework (v4)
Framer Motion	Animation	Production-grade animation library
Lucide React	Icons	Comprehensive icon library
Axios	Networking	Promise-based HTTP client

Backend Stack

Technology	Category	Purpose
Next.js API Routes	API	Serverless backend functions
NextAuth.js	Auth	Authentication and session management
MongoDB	Database	NoSQL document database
Mongoose	ORM	MongoDB object modeling
bcrypt	Security	Password hashing and verification
jsonwebtoken	Security	JWT token generation and validation

🚀 Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/m-taqii/linkboard.git
cd linkboard

2️⃣ Install Dependencies

npm install

3️⃣ Environment Configuration

Create a .env.local file in the project root directory:

# Database Configuration
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/<database>?retryWrites=true&w=majority

# NextAuth Configuration
NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:3000

# Node Environment
NODE_ENV=development

4️⃣ Run the Application

Start the development server:

npm run dev

The application will start at http://localhost:3000

🗄️ Database Schema

User Model

The User model defines the structure for storing user account and profile information.

Field	Type	Required	Description
username	String	✓	Unique identifier for public profile URL
email	String	✓	User email (used for login)
password	String	✓	Bcrypt-hashed password
profileImage	String	✗	URL to profile picture
bio	String	✗	User biography/about section
links	Array	✗	Array of link objects (title, url)

---

Made with ❤️ by m-taqii

⬆ Back to top