shrutikp70/LinkFree

The Open Source alternative to LinkTree. A hub to showcase YOUR links and content

What is LinkFree?

LinkFree is the Open Source alternative to LinkTree. A platform where people in tech can have a single hub to showcase their content in order to accelerate their career, whilst contributing to an Open Source project and being part of a community which has a say in where the project is going.

Your profile will have links to your social media and content. You can also add your timeline, testimonials and upcoming events that you are participating in.

Here is an example of a LinkFree Profile...

🙂 How to add YOUR Profile

In the data directory, create a .json file with the same name as your GitHub username. For example, if your GitHub username is eddiehub, create a file named eddiehub.json. This will ensure that your username is unique.

**Optional fields: milestones, type(personal | community), socials, testimonials and events **
Looking for inspiration? You can view the following profiles for an example:

• Eddie Jaoude
• Krupali Trivedi || Chai
• Pradumna Saraf

Your brand new file should look something similar to this one:

Note: add/remove links objects to customise your Profile, milestones are optional

{
  "name": "YOUR NAME",
  "displayStatsPublic": true,
  "type": "personal",
  "bio": "Open Source Enthusiast!",
  "avatar": "https://github.com/YOUR_GITHUB_USERNAME.png",
  "tags": ["javascript", "typescript"],
  "socials": [
    { "platform": "twitter", "url": "https://twitter.com/YOUR_TWITTER_USERNAME" },
    { "platform": "github", "url": "https://github.com/YOUR_GITHUB_USERNAME" }
  ],
  "links": [
    {
      "name": "Follow me on GitHub",
      "url": "https://github.com/YOUR_GITHUB_USERNAME",
      "icon": "github"
    },
    {
      "name": "Follow me on Twitter",
      "url": "https://twitter.com/YOUR_TWITTER_USERNAME",
      "icon": "twitter"
    }
  ],
  "milestones": [
    {
      "title": "Started Freelancing",
      "date": "December 2021",
      "icon": "dollar",
      "color": "grey",
      "description": "Started freelancing",
      "url": "https://www.eddiejaoude.io/"
    }
  ]
}

Your URL will be https://linkfree.eddiehub.io/<yourusername>

For example: https://linkfree.eddiehub.io/eddiejaoude

To include your avatar, you have to replace <yourusername> with your GitHub username in the format of https://github.com/<yourusername>.png and it will automatically be fetched from your GitHub account.

For example: http://github.com/eddiejaoude.png

Note: After your PR gets merged, the project still needs to be deployed for your Profile to be displayed.

Available Icons:

Check Icons.md for all the supported icons.

🛠️ Quickstart

You have 3 options to contribute to the repo, please pick your favourite from:

1. GitHub UI
2. Gitpod
3. Local development with Docker Compose
4. Local development

GitHub UI

This is great if you only want to add your Profile or make changes to it.

note: give extra attention to json formatting and the GitHub Action after you create the Pull Request

Gitpod

In the cloud free development environment which will have all the dependencies you need (for example MongoDB).

You can use Gitpod in the cloud

Local development with Docker Compose

This environment is on your computer but with containers (for example MongoDB) supporting your environment.

Prerequisites

You will need Docker and Docker Compose installed.

Commands

1. docker-compose up

Local development

This environment is fully on computer, and requires each dependency (for example MongoDB) to be installed and setup, but gives you the most flexiblity for customisation.

Prerequisites

Before contributing or adding a new feature, please make sure you have already installed the following tools:

• NodeJs (Works with Node LTS version v16.17.0)
• MongoDB
• Optional NVM: Switch Node version by using nvm use (on Windows, use nvm use v16.17.0). If this is not installed, run nvm install v16.17.0.

Commands

You can set this up locally with the following steps:

1. copy the .env.example file to .env and update any details required
2. mongodb is required, it is possible to use docker-compose up to start the mongodb service
3. npm install
4. npm run dev

📘 Storybook

We use Storybook to display what React components are available to use within our project. This also gives you the opportunity to play with the components' functionality and data it displays.

To see what components are available, do the following steps...

1. npm run storybook
2. navigate to http://localhost:6006

note: not all components have been added, this is a great way to contribute to our project

Updating LinkFree's Storybooks' components

1. Create a story file in stories/components with the same filename as the component but append .stories.js to the filename
2. Import the component into the story file, see the existing example
3. Set the default arguments by looking at the requirements from the component itself
4. Run npm run storybook to see the added components and visit http://localhost:6006 to interact with them in the browser

🧪 Tests

We use Playwright for writing automated end to end (e2e) tests.

1. Install Playwright dependencies npx playwright install --with-deps
2. Run tests npm run test

npm run test

> linkfree@1.0.0 test
> npx playwright test


Running 18 tests using 4 workers

  10 skipped
  8 passed (13s)

To open last HTML report run:

  npx playwright show-report

🚲 Single user mode

If you wish to self-host this app for a single user, follow the same steps as above, but then in the file config/user.json add your username.

For example

{
  "username": "eddiejaoude"
}

🛡️ License

LinkFree is licensed under the MIT License - see the LICENSE file for details.

🧰 Contributing

• Contributions make the open source community such an amazing place to learn, inspire, and create.
• Any contributions you make are truly appreciated.
• Check out our contribution guidelines for more information.

🙏 Support

Don't forget to leave a star ⭐️