Skip to content

LinkHub: a Next.js, Tailwind, and MongoDB-powered Linktree clone for easy, stylish link management.

Notifications You must be signed in to change notification settings

CodzHorizon/LinkHub

Repository files navigation

πŸ”— LinkHub

LinkHub is a Linktree clone built with Next.js, Tailwind CSS, and MongoDB. It lets users create personalized link pages by submitting a username and up to 8 URLs through a simple, clean interface. Users can then generate, view, and share their unique LinkHub page with customizable themes and pointer styles.


ScreenShots

image

Mobile View

image

πŸš€ Features

  • User-friendly form to input a username and up to 8 links
  • Generates a unique LinkHub page per username
  • Customizable themes and pointer styles for personalization
  • Responsive design powered by Tailwind CSS
  • Data securely stored in MongoDB
  • Deployed on Vercel for fast, reliable hosting

Tech Stack

  • Next.js β€” React framework for server-side rendering and routing
  • Tailwind CSS β€” Utility-first CSS framework for styling
  • MongoDB β€” NoSQL database for user data storage
  • Vercel β€” Hosting and deployment platform

How to Use

  1. Go to the LinkHub homepage
  2. Fill out the form with your desired username and up to 8 URLs
  3. Click Generate to create your personalized link page
  4. Share your unique LinkHub URL with others

πŸ“ Project Structure

/app
  β”œβ”€ /about/page.js           # Static About page
  β”œβ”€ /generate/
  β”‚    β”œβ”€ page.js             # Link generation form page
  β”‚    └─ generateclient.js   # Client-side form component inside generate
  β”œβ”€ /privacy/page.js         # Privacy policy page
  β”œβ”€ /[username]/page.js      # Dynamic user link page by username

/components
  β”œβ”€ Navbar.js                # Navigation bar component
  β”œβ”€ Footer.js                # Footer component
  β”œβ”€ FooterController.js      # Logic/controller for Footer
  β”œβ”€ Animation.js             # Animation components or utilities

/public
  β”œβ”€ /assets                  # Static assets like images, icons, etc.
  β”œβ”€ /other-folders           # Additional public files and folders

Getting Started (for Developers)

  1. Clone the repository

    git clone https://github.com/CodzHorizon/linkhub.git
  2. Install dependencies

    npm install
  3. Create a .env.local file and add your MongoDB connection string:

    MONGODB_URI=your_mongodb_connection_string
    NEXT_PUBLIC_HOST=http://localhost:3000
  4. Run the development server

    npm run dev

5.Open http://localhost:3000 to view the app


Author


License

This project is licensed under the MIT License. See the LICENSE file for details.


Copyright

Β© 2025 CodzHorizon. All rights reserved.

Releases

No releases published

Packages

No packages published