Code:

https://github.com/hanief/LinkHub

Introduction

LinkHub is an open-source project designed to help users create a personalized landing page for their most important links. Whether you’re a creator, professional, or community manager, LinkHub provides a simple, elegant way to share all your key destinations—social profiles, blogs, products, and more—in one place.

What is LinkHub?

LinkHub is a “Simple links website”. Its main goal is to let users display a collection of links on a single, visually appealing page. The project is public and written primarily in TypeScript. The UI is modern, responsive, and customizable, making it perfect for sharing on social media or as a digital business card.

Example use cases:

  • Creators sharing social media, YouTube, and blog links
  • Businesses aggregating product, contact, and portfolio links
  • Communities offering quick access to resources and channels

Technologies Used

LinkHub is built using a modern web stack, including:

  • TypeScript: Used across the client, server, and shared schema files for static typing and reliability.
  • React: Powers the frontend interface and dynamic components.
  • Express.js: Serves the backend API (server/index.ts), handling requests and managing link/profile data.
  • Radix UI & Lucide React: For accessible, customizable UI primitives (dialogs, menubars, icons).
  • Vite: Development and bundling tool for fast builds and hot reloading.
  • React Icons: Provides scalable social and web icons for links.
  • Tailwind CSS (style classes): Utility-first CSS for rapid UI development.

Code Structure Overview

The repository is organized as follows:

  • client/ – Frontend code (React, UI components, pages)
  • server/ – Backend/Express API and server logic
  • shared/ – Schema definitions shared between client and server

Key Files & Components

1. Frontend

  • client/index.html: Entry HTML file, loads fonts and scripts, sets up the root React mounting point.

  • client/src/pages/home.tsx: Main landing page. Loads profile info and an array of links—each with a title, URL, icon, and priority.

  • client/src/components/ui/link-card.tsx: Renders each link as a card with icon, title, and URL. Uses React Icons for social/media branding.

    export function LinkCard({ title, url, icon, isPrimary = false }: LinkCardProps) {
  return (
    <a href={url} ...>
      <div>{getIconComponent(icon)}</div>
      <span>{title}</span>
    </a>
  );
}

  • UI Components: Includes sidebar, pagination, dialog, menubar, navigation menu, and context menu, all built with Radix UI and styled with Tailwind utility classes for a polished look.

2. Backend

  • server/index.ts: Sets up Express.js server, registers API routes, and serves static assets via Vite.

  • server/routes.ts: Defines API endpoints like /api/profile and /api/links; returns static or stored user profile and links data.

    app.get("/api/profile", (req, res) => {
  res.json(profileData)
})
app.get("/api/links", (req, res) => {
  res.json(linksData)
})

  • server/storage.ts: (In-memory) storage for user data, providing CRUD operations for users.

3. Shared Schema

  • shared/schema.ts: TypeScript definitions for profile and link data. 
    export const links = pgTable("links", { ... });
export type Link = typeof links.$inferSelect;

How Users Interact with LinkHub

  1. Landing Page: Users visit the LinkHub page and see the owner’s profile (name, avatar, bio) along with a list of clickable cards for each link.
  2. Cards: Each card is styled, features an appropriate icon, and links out to social media, products, portfolios, or other destinations.
  3. Sidebar & Navigation: Advanced UI components for navigation and additional actions, providing a seamless user experience.
  4. API: The backend APIs (/api/profile, /api/links) supply profile and link data, which the frontend fetches and displays.

To add a new link, you would update the links array in the backend or in the static data for development. Each link includes:

  • title: Display name
  • url: Destination URL
  • icon: Icon identifier (e.g., “fa-twitter”)
  • isPrimary: Marks the link as highlighted