Skip to content

This is a full fledged full stack clone of Linktree, where anyone can create their Linkhub and share it with anyone.

License

Notifications You must be signed in to change notification settings

Subrata-Rudra/LinkHub-Fullstack-Linktree-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LinkHub - A Full Stack LinkTree Clone

This is a full stack LinkTree clone using MERN stack.

LinkHub Landing Page

Architectural Components:

  • Frontend: React JS
  • Backend: Node JS, Redis
  • Subscriber Mail Sender Service: Node JS
  • Database: mongoDB

Overview

LinkHub is a web application which provides you a webpage to share multiple links to your audiences.

LinkHub Page Sample

LinkHub Sample Page

LinkHub Dashboard Page

LinkHub Dashboard Page

LinkHub Insights Page

LinkHub Insights Page

LinkHub Account Page

LinkHub Account Page

Features

  1. Authentication:

    • Sign Up
    • Log In
    • Email Verification
  2. Dashboard:

    • LinkHub profile picture edit
    • LinkHub title edit
    • LinkHub description edit
    • New link add
    • Existing link edit
    • Existing link delete
  3. Insights:

    • See total visits count to your linkhub
    • See total subscribers count to your linkhub
  4. Account

    • See account details such as account creation date, email, username
    • Log out
    • Delete account
  5. Reset Password

    • Reset password when user forgets password
  6. Share LinkHub

    • Direct share through multiple platforms like Reddit, Facebook, Linkedin, X(formerly Twitter), Whatsapp and Email
  7. Subscribe LinkHub

    • Subscribe to anyone's linkhub so that when the owner of the linkhub adds links the subscribers get updates through email

Technologies Used

  • Frontend: React JS, Chakra UI, HTML, CSS
  • Backend: Node JS, Express JS, Redis, JWT, Nodemailer, ejs, HTML, CSS
  • Subscriber Mail Sender Service: Node JS, ejs, Nodemailer, ejs, HTML, CSS
  • Database: mongoDB

Hosting Solution

  • Frontend: Vercel.com
  • Backend: Render.com
  • Redis: Render.com
  • Subscriber Mail Sender Service: Render.com
  • Database: MongoDB Cloud

Setup Requirements

  • Node JS
  • Redis
  • MongoDB or MongoDB Cloud

Setup Guidelines

  1. Fork this repository

  2. Clone this repository

  3. Ensure that you are in the root directory of the project

  4. Go to backend directory by running ➡️

    cd '.\LinkHub Backend\'
  5. Now install dependencies by running ➡️

    npm install
  6. Now return to root directory by running ➡️

    cd ../
  7. Go to frontend directory by running ➡️

    cd '.\LinkHub Frontend\'
  8. Now install dependencies by running ➡️

    npm install
  9. Now return to root directory by running ➡️

    cd ../
  10. Go to subscriber mail sender directory by running ➡️

    cd '.\LinkHub Mail Sender\'
  11. Now install dependencies by running ➡️

    npm install
  12. Now return to root directory by running ➡️

    cd ../
  13. Now generate app password to access email sending. Take help from this Helpful Video

  14. Now create file in the root of 'LinkHub Backend' folder and name it '.env'

  15. Now open that '.env' file in code editor and then write this:

    MONGO_URI = <Your Mongodb Url>
    JWT_SECRET = <Your JWT Secret>
    EMAIL = <Your Email>
    PASSWORD = <Your Email's App Password>
    JWT_DATA_MAKER = <Your JWT Data Maker(actually any number of your choice)>
    REDIS_PORT = 6379
    SUBSCRIBER_MAIL_SERVER_URL = <Your Mail Server's Url>
  16. Now create file in the root of 'LinkHub Mail Sender' folder and name it '.env'

  17. Now open that '.env' file in code editor and then write this:

    MONGO_URI = <Your Mongodb Url>
    EMAIL = <Your Email>
    PASSWORD = <Your Email's App Password>
  18. Now start Redis server by running this command ➡️

    sudo service redis-server start
  19. Now open the 2 directories(LinkHub Backend and LinkHub Mail Sender) in 2 different terminals by using the cd commands(as instructed previously) and run this command in both the terminals ➡️

    npm run dev
  20. Now open the LinkHub Frontend directory in another terminal by using the cd commands and run this command ➡️

    npm start
  21. Now open http://localhost:3000 and you are ready to use.

LIVE Hosted Project Is Here 👇

https://linkhub-by-subrata.vercel.app/

To Watch Demonstration Video 👇Click Below

Watch the video

About

This is a full fledged full stack clone of Linktree, where anyone can create their Linkhub and share it with anyone.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published