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...
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:
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.
Check Icons.md for all the supported icons.
You have 3 options to contribute to the repo, please pick your favourite from:
- GitHub UI
- Gitpod
- Local development with Docker Compose
- Local development
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
In the cloud free development environment which will have all the dependencies you need (for example MongoDB).
You can use Gitpod in the cloud
This environment is on your computer but with containers (for example MongoDB) supporting your environment.
You will need Docker and Docker Compose installed.
docker-compose up
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.
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, usenvm use v16.17.0
). If this is not installed, runnvm install v16.17.0
.
You can set this up locally with the following steps:
- copy the
.env.example
file to.env
and update any details required - mongodb is required, it is possible to use
docker-compose up
to start the mongodb service npm install
npm run dev
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...
npm run storybook
- navigate to http://localhost:6006
note: not all components have been added, this is a great way to contribute to our project
- Create a story file in
stories/components
with the same filename as the component but append.stories.js
to the filename - Import the component into the story file, see the existing example
- Set the default arguments by looking at the requirements from the component itself
- Run
npm run storybook
to see the added components and visit http://localhost:6006 to interact with them in the browser
We use Playwright for writing automated end to end (e2e) tests.
- Install Playwright dependencies
npx playwright install --with-deps
- 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
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"
}
LinkFree is licensed under the MIT License - see the LICENSE file for details.
- 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.
Don't forget to leave a star βοΈ